Luxeritas(ルクセリタス)のサイドバーの見出しをきれいに表示しよう！

悩む女性１

Luxeritas(ルクセリタス)の検索タイトル等のサイドバーの見出しをきれいにデザインしたい！でも、どうやるんだろう？

初期設定では、デザインが非常にシンプルなデザイン設定になっているので、サイトを作っているうちに、「デザインをきれいに見せたい。」そんな風に感じた方も多いかと思います。

管理者

そこで、そんなあなたのために、検索タイトルなどのサイドバーのデザインをカスタマイズする方法をご紹介していきましょう。

サイドバーの位置について

一応確認ですが、サイドバーの位置がわからない方も案外いらっしゃるので、サイドバーの位置を解説しておきましょう。

このように、赤枠の部分が「サイドバー」になりますので、間違えないようにしておきましょう。

Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン初期設定」

Luxeritas(ルクセリタス)のサイドバーのデフォルトの見出しのデザインは、下記のような画面になっています。ご覧ください。

このように、何もインパクトがない状態でとても味気ない感じがしますよね。

管理者

そこで、このサイドバーをデザインして、見やすくしてあげましょう。

実際に投稿している内容を見るとわかるのですが、文章と見出しの境目がわかりにくくなるので、なるべく見出しは大きめに表示するようにデザインする方が読み手にとっても読みやすい記事になるメリットがあります。

Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン設定の仕方」

それでは、実際にサイドバーの見出しのデザインの設定の仕方を解説していきましょう。

こちらの画面をご確認下さい。

サイドバー見出しの画面イメージ

上図は、「追加CSS」に下記プログラムソースを記述した画面イメージになります。

＜追加したCSS＞

特に、影響があるプログラムソースに関しては、「border- left」と「border-bottom」の2種類の部分です。ここに、サイズ設定と色の設定を加えていることで、上記のような見出しを再現しています。

正確には、CSS1行目の「#side h3, #col3 h3, #side h4, #col3 h4 」の部分によって見出しの全ても制限しています。

又「#side」という部分が、サイドバーを指しています。

まとめ

このように、サイトをカスタマイズしていると、意外とサイトをきれい表現していきたいと思うようになります。

画面の設計は、人に大きな印象を与え、見やすい画面はそのサイトの滞在時間も長くする等のメリットや訪問してきてくれた人がリピーターになったりする等収益にも結びやすくなります。

最初のうちは、どのようにして設定するかよくわからないことも多いと思います。

そんな時は、CSSの設定等を見よう見まねで設定して、どのような画面になるのかを確認しながら、徐々にプログラムソースを自由に扱い、カスタマイズできるようにしていきましょう。