Luxeritas(ルクセリタス)の検索タイトル等のサイドバーの見出しをきれいにデザインしたい！
初期設定では、デザインが非常にシンプルなデザインをしています。そこで、サイトを作っているうちにデザインをきれいに見せたい。そんな風に感じた方も多いかと思います。
そんなあなたのために、サイドバーのデザインをカスタマイズする方法をご紹介していきましょう。
目次
サイドバーの位置について
一応確認ですが、サイドバーの位置がわからない方も案外いらっしゃるので、サイドバーの位置を解説しておきましょう。
この部分が「サイドバー」になりますので、間違えないようにしておきましょう。
Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン初期設定」
Luxeritas(ルクセリタス)のサイドバーのデフォルトの見出しのデザインは、下記のような画面になっています。ご覧ください。
このように、何もインパクトがない状態でとても味気ない感じがしますよね。そこで、このサイドバーをデザインして、見やすくしてあげましょう。
実際に投稿している内容を見るとわかるのですが、文章と見出しの境目がわかりにくくなるので、なるべく見出しは大きめに表示するようにデザインする方が読み手にとっても読みやすい記事になるメリットがあります。
Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン設定の仕方」
それでは、実際にサイドバーの見出しのデザインの設定の仕方を解説していきましょう。こちらの画面をご確認下さい。
上図は、「追加CSS」に下記プログラムソースを記述した画面イメージになります。
- サイドバーの見出し左横線を付ける設定
- 下線を付ける設定
＜追加したCSS＞
#side h3, #col3 h3, #side h4, #col3 h4 {
background: #f5f5f5;
color: #333;
padding: 8px 15px 4px;
margin: 4px 0 8px;
font-weight: bold;
border-left:10px solid #358be0;
border-bottom:1px dotted #358be0;
font-size: 16px;
font-size: 1.6rem;
}特に、影響があるプログラムソースに関しては、「border- left」と「border-bottom」の2種類の部分です。ここに、サイズ設定と色の設定を加えていることで、上記のような見出しを再現しています。
但し、１点注意点としてサイドバー個別に色を付けるのは、このCSSの記述ではできません。あくまで、サイドバー見出し全てにこのカラーが適用されますので、覚えておきましょう。
正確には、CSS1行目の「#side h3, #col3 h3, #side h4, #col3 h4 」の部分によって見出しの全ても制限しています。
又「#side」という部分が、サイドバーを指しています。
まとめ
いかがでしたでしょうか？このように、サイトをカスタマイズしていると、意外とサイトをきれい表現していきたいと思うようになります。画面の設計は、人に大きな印象を与え、見やすい画面はそのサイトの滞在時間も長くする等のメリットや訪問してきてくれた人がリピーターになったりする等収益にも結びやすくなります。
最初のうちは、どのようにして設定するかよくわからないことも多いと思います。そんな時は、CSSの設定等を見よう見まねで設定して、どのような画面になるのかを把握しながら、徐々にプログラムソースを自由に扱い、カスタマイズできるようにしていきましょう。
⇒ Luxeritasでサイドバーにプロフィールとプロフィール画像を設置してみよう！
Luxeritasでサイドバーにプロフィールと画像を設置してみよう！
⇒ Luxeritasでサイドバーの枠線が表示されない原因とカスタマイズの仕方
Luxeritas(ルクセリタス)の使い方-サイドバーの枠線が表示されない！その原因とカスタマイズの仕方とは
