Luxeritas(ルクセリタス)の見出しを変更してみた
Luxeritas(ルクセリタス)の見出しを変更してみた
90以上ぐらい記事を投稿していて、思っていたんですが投稿ページが殺風景だったので、そろそろ変化がほしくて見出しのデザインを変えてみました！
以前まではこんな感じがこれになりました。
今回は見出し<h2>だけの変更です。※記事作成時
目下見出しについては勉強中につき今回は<h2>だけです。これだけかい！と突っ込まれそうですがご容赦ください。
最近特にアクセスが多いので随意優先してがんばって更新したいと思ってます。
【Luxeritas(ルクセリタス)】の見出しの縦棒を削除・消してみた
【Luxeritas】の開発者はデザインファイルも配布しているので見出しも並行してこちらも検討してもいいかもしれません。
前置き
今までも見出しは変えていたんです。個別に記事毎にHTML表記で調べてテキストの方から記載していました。
全体的に設定すると見出しを呼び出すだけでこんなにも簡単に表示されることに驚きました。
特別な見出しにしたい場合などは、個別にしてもいいんですが、ある程度見出しを統一したい時などは、いちいち記事毎にテキスト部分にHTMLを入れるのはかなり面倒なことだと後になって気づいたしだいです。
ひよこさん
今までも何回かプログラムのコードを違う設定とかで入れてはいたんですが、なるべく避けていました。
やはり、いざコードを挿入するときは毎回緊張するものですね。
過去に何度かコードをミスッていれたばっかりにサイトが全く表示しない状態(真っ白)になり若干トラウマがあります。
きつねさん
今回はCSSに記入なのでfunctionよりはミスったときのリスクは低いですが、コードを追加するときは前のコードをどこかに保存しておくと安心します。
プログラムのコードを入れてみる
【Luxeritas】をテーマデザインとして使っています。
wordpressのダッシュボードから
【Luxeritas】-【子テーマの編集】をクリック
【スタイルシート : style.css】の部分の一番下(私の場合)に追加としてコードを入れて保存をポチっと押します！
一番下に追加じゃなくてもいいです。
コードの貼り付けも焦らない！コピペはCtrl+CとCtrl+V
【Luxeritas 見出し】で検索して調べてみるとわかるんですが、やはり個々それぞれのコードの記載がクセがあるとゆうか
わからない行のコードとかあってちょっと大変でした。
全ての色や種類を書くとなるときりがありませんので、
ほんの一例として私が設定したコードを記載しておきますので参考にしてください。
ひよこさん
私の見出し2のプログラムコードはこのようになっています！
|
1 2 3 4 5 6 7 |
.post h2{ color: #ffffff; background-color: #2E2EFE; border-left: transparent; border-radius: 10px; font-weight:bold; } |
| HTML | 意味 |
| .post h2 | 見出し2を変更 (見出し3ならh3 見出し4ならh4 と記述) |
| color | 文字の色 |
| background-color | 背景の色 |
| border-left | 左ボーダーのスタイル・太さ・色を指定 |
| transparent | 透明 |
| border-radius | ボックスの４つのコーナーの角丸をまとめて指定 |
| bold | 太字 |
|
1 2 3 4 5 6 |
.post h2{ color: カラーコード（文字色）; background-color: カラーコード（背景色）; border-left: transparent; font-weight:bold; } |
1度指定すると、簡単に表示できるので非常に便利です。
ちなみに違う設定に編集すると一気に変わります。
どの色を使いたいか迷った場合 参考にどうぞこちらが非常に選びやすいです。
多くのサイトでは特定の色しか紹介していないところが多かったので。
特定ページだけ見出しを変えたい場合
個別で指定して記事のテキスト部分に記述したHTMLの見出しは、どうやら強制的に変わっていませんでした。
(量が多いので、すべては確認していないが多数の個別で記述したものは変化なし)
どうやら個別の記事のテキストHTML表記の方が【Luxeritas の 子テーマの編集】よりも優先されたみたいです。
参考記事