Luxeritas(ルクセリタス)の使い方-サイドバーの見出しをきれいに！(検索タイトル等)デザインをカスタマイズしよう

2019年9月4日

Luxeritas(ルクセリタス)の検索タイトル等のサイドバーの見出しをきれいにデザインしたい！

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

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

 

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

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

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

 

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

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

 

このように、何もインパクトがない状態でとても味気ない感じがしますよね。そこで、このサイドバーをデザインして、見やすくしてあげましょう。

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

 

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

それでは、実際にサイドバーの見出しのデザインの設定の仕方を解説していきましょう。こちらの画面をご確認下さい。

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

  • サイドバーの見出し左横線を付ける設定
  • 下線を付ける設定

＜追加したCSS＞

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

但し、１点注意点としてサイドバー個別に色を付けるのは、このCSSの記述ではできません。あくまで、サイドバー見出し全てにこのカラーが適用されますので、覚えておきましょう。

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

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

 

まとめ

いかがでしたでしょうか？このように、サイトをカスタマイズしていると、意外とサイトをきれい表現していきたいと思うようになります。画面の設計は、人に大きな印象を与え、見やすい画面はそのサイトの滞在時間も長くする等のメリットや訪問してきてくれた人がリピーターになったりする等収益にも結びやすくなります。

最初のうちは、どのようにして設定するかよくわからないことも多いと思います。そんな時は、CSSの設定等を見よう見まねで設定して、どのような画面になるのかを把握しながら、徐々にプログラムソースを自由に扱い、カスタマイズできるようにしていきましょう。

⇒ Luxeritasでサイドバーにプロフィールとプロフィール画像を設置してみよう！

 

⇒ Luxeritasでサイドバーの枠線が表示されない原因とカスタマイズの仕方

 

 

 

 

【おすすめ：WordPressテーマ 「WING（AFFINGER5）」について】
　　　　　※ブログを始めるなら絶対おすすめ【特典あり】


私も新たなサイト【育チルnet】」にて、検索エンジンの上位の多くを占めると言われるSEO対策に強いWordpressテーマを導入してみました。

実際に利用した所感は、デザイン性能がかなり整っていますし、表示速度もやっぱりかなり速いです。人気なWordpressテーマなだけはあると感じました。

無料のテーマでも私は悪いとは思っていませんが、やはり検索エンジンからの評価はだいぶ違いました。

初めて数ヶ月ですが、もうすでに検索エンジンから大きく表示されるようになっています。

どうせやるなら、しっかりgoogle社からの評価を受けられる整えられた環境でブログ運営する方が絶対にいいと感じたため、当サイトをご覧下さった皆様にもお伝えさせて頂きました！

Wordpressテーマを新たにご検討方は、今しかない期間限定の特典も付いていますので、お早めにご確認下さい。

公式サイト



 ←ためになったら押してね＾＾

Luxeritasの使い方ウィジェット, デザイン, 検索タイトル

Posted by tarmiyan2