ルクセリタス(Luxeritas )の見出しをプチカスタマイズ

2017年10月22日

プチカスタマイズ

wordpressのテーマをルクセリタスに変更して随分たちました。

今の所はテーマを変更する必要性もないのでそのままにしてますが、もともとこのブログはwordpressの運用を通じて勉強することが目的だったのを最近忘れがちであったので、見出しをプチカスタマイズを行なってみました。

以前も紹介しましたが、このルクセリタスというテーマは基本的にはWEBの知識がなくても、カスタマイズが簡単にできるというのが一つの売りだと思います。

パズルを組み合わせるように、用意されているパーツを選んで行くだけでおしゃれなものができてしまうという。

それだと私の知識が増えないのですがwww

ただ、そのパーツ自体を変えたいと思った時、そうなるとそれなりの知識が必要になってきます。

一番身近なカスタマイズポイントと言えば「見出し」だと思います。

簡単にカスタマイズしてみたので紹介します。




h2とh3をカスタマイズ

ブログもそうですが、文章作成する時に見出しでわかりやすくまとめるのが通例ですよね。

章・節・項とでもいうのでしょうか、読みやすくまとめるという形。

HTMLではマークアップの時に、各セクションごとにツリー状に構造を持つことをアウトラインとか言いますけど、それに伴って見出しもつけると思います。

・タイトル・・h1
└1章・・・h2
└─1節・・h3
└──1項・h4
└──2項・h4
└2章・・・h2

例えばこんな感じで。

ルクセリタスにはもちろん最初からh1〜見出しが設定されていますが、それを好きなように変更するにはcssに記述が必要になります。

で、cssに記述をするわけですが、ひとつだけ注意点がありますね。

wordpressのテーマをカスタマイズする時にテーマのcssとかをそのままいじってしまうと、バージョンアップ時とかにそのまま上書きされて戻ってしまう可能性あります。

なので、それを防ぐために子テーマという形でもう一つテーマがあり、そちらをカスタマイズすることで、それを防ぐという方法があります。

もちろん、ルクセリタスには親テーマの他に子テーマがちゃんと用意されているので、cssをいじるのは子テーマの方をいじるようにしましょう。親切すぎる。。。

ただ、私のはどういうわけか、、、見出しをカスタマイズした場合に親テーマの方と被ってしまう不具合がおきたので、親テーマの見出しはコメントアウトしました。。。。

インストール方法でもわるかったんだろうか。。。

あと、h1はブログ記事のタイトルのようなので、特に変更しなかったです。

私はh2とh3を変更しました。

h2

ルクセリタスの見出しはpostというクラス名になっているようなので、「.post」にしています。デザインとしては基本の基本ですね。。色々な参考書にのっていると思います。

簡単に説明すると

一応フォントサイズを指定しました。

border-styleで罫線の種類を指定

border-widthは罫線の太さの指定

border-colorは色

paddingは余白の指定。半角スペースで2つ指定すると、上下と左右を一度に指定したことになりますね。この場合上下に5px、左右に10pxの余白を指定していることになりますね。

h3

h3はチェックマークにしてみました。

ちょっと複雑ですが、こちらも見出しのコードを作成する参考サイトがかなりありますのでそちらを利用させてもらいました。

基本的な指定の記述方法はh2と同じだと思いますが、afterだのbeforeだのややこしいですね。。。

私もそうですが、初心者の方は参考サイトを探してコピペするのが一番早いですw

ただ、cssに記述する場合、クラス名を間違えると反映されないと思うので、他のサイトのコードをルクセリタスにコピペする時はクラス名のところを間違えないようにする必要があります。

色味などは自分の好きなもので指定してあげれば、自分のサイトのカラーに合わせてお洒落にできますね。

この調子でh4以降も自分の好きなように変更が可能です。

まとめ

  • ルクセリタスの見出しを変更するにはcssへの記述が必要
  • cssの記述は親テーマではなく子テーマのcssに追記する形がよい
  • ルクセリタスのh1はブログ記事のタイトルになっている
  • 参考サイトからコピペする時はクラス名を間違えると反映されない
  • なぜか親テーマの方とかぶる場合は親テーマ側の方をコメントアウトすると解消された

ちなみに私が最初に勉強した参考書