Luxeritas(ルクセリタス)の記事を投稿していると、もっと見出しをきれいにしたい。そんな風に感じられた方も多いかと思います。
そこでルクセリタの使い方で、見出しに下線や色を付けたりして、投稿の見出しデザインをカスタマイズする方法をご紹介していきましょう。
Luxeritas(ルクセリタス)見出しのデフォルト設定
まずルクセリタスの見出しのデフォルトで表示される画面についてみていきましょう。下記をご覧ください。
<デフォルトの見出し設定>
このように、左横に灰色のバーが表示されるようになっています。
ちょっと見栄えにインパクトがないですよね。そこで、もう少し明るい色を設定して、投稿文と見出し分けられるように変更していきましょう。
投稿の見出しのデザイン設定方法について
それでは、実際に投稿の見出しの下線のつけ方や色の変え方等デザイン設定のカスタマイズ方法をご紹介していこうと思います。
下記のような画面イメージを作るためには、どうしたら、よいでしょうか?
<画面イメージ>
ポイント
<投稿の見出しの設定に必要な2つのこと>
- CSSのプログラムソースの追加位置
- ソースコードを理解しよう
こうしたデザインを自分なりに変えていきたい。
そんな風に感じられている方は、プログラムソースの記入する位置だけでなく、プログラムソースの1行1行がどんな処理を記述しているのかも把握していることが、自由にデザインを生み出す方法の一つでもあります。
1.CSSにプログラムソースを追加してみましょう。
2.追加する場所は下記の画面どこでもOK
3.<CSSに追加するプログラムソース>
1 2 3 4 | .post h2 { border-left:solid 10px #20a39e; border-bottom:2px dashed #20a39e; } |
4.プログラムソースを少し理解しておきましょう
このように、最初はコピーしてみて、どんな風にデザインされるのかを把握して、イメージしておきましょう。
その次のステップでプログラムソースの1行1行がどんな動きをするのかを把握することで、もっと自分にあったデザインをカスタマイズできるようになると思いますよ。
まとめ
最初のうちは、わからないことも多いかと思いますが、Luxeritas(ルクセリタス)の見出しのデザイン設定には、「post」いうのを使って、設定をしていきます。これは、wordpressのテーマによっても異なるので、最初のうちはプログラムソースをコピーして、どんな動きをするかを把握しながら、自分の納得のいくサイトを作っていきましょう。