WordPressに一部記事をお引越しするために、現在新しいサイトを構築中です。
今回見出しを調整しようと思って、h2をカスタマイズすることにしました。
- WordPress SWELLの見出しをカスタマイズする
- 他のコンテンツタイトルが崩れた
- .post_content を使ってみる
- サブコンテンツのタイトルデザインを設定する
- まだ他にもサイドバーのタイトルが変
- 最後に
WordPress SWELLの見出しをカスタマイズする
使いたいデザインを探して、WordPressの追加CSSに追記。
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！ | JAJAAAN
SWELLの見出し２のデザイン設定は「装飾なし」にする。
できました！！
目立つね！！いいかんじ°˖✧
他のコンテンツタイトルが崩れた
…がしかし、同じサイト内のコンテンツを見ていると…
えっ…なんか変になってる。なにこれ ( ;∀;)
関連記事とかがどうなっているかというと、
h2タグが使ってありました。
だから崩れたのか…。背景の色とか、枠組みは、追加CSSに記載した内容が反映されてて崩れてしまったものだと思われます。classの内容を書き換えたらいいのかもしれないけれど、やり方がよく分からない…。
.post_content を使ってみる
まず、はじめにお断りしておきますと…私これが何なのかよくわかっていません。
ではなぜこれを使おうとしているのか。
全く記憶がないのですが、もう一個別のWordPressのサイトを作っていて、なぜかこれを利用してうまくいっていたから。
たまたま参考にしたどなたかの見出しがこれだったのでしょうかね…？
何も覚えてないし、なぜそれを使うことにしたのか、どこにもメモしてない…( ;∀;)
まあ、とりあえず、何をしたかというと…
とりあえず見出しのデザイン設定は、装飾なしのまま。
追加CSSは、h2ではなく、「.post_content h2 {...」「.post_content h2: before {...」に変更します。
一応見出しの部分は大丈夫そう。
サブコンテンツのタイトルデザインを設定する
先ほどは崩れてしまっていた、関連記事とかの他のタイトルがどうなっているかというと…
h2の設定を装飾なしにしていたので、こちらのコンテンツの装飾がない状態になっていました。
なので、「サブコンテンツのタイトルデザイン」でデザインを設定します。
無事きれいになりました。
まだ他にもサイドバーのタイトルが変
一応目立つところは修正できたのですが、サイドバーの最近の投稿というタイトルの装飾が消えてしまっていました。検証画面で見てみると、これもh2タグが使われています。どうすれば…。
サイドバーに表示するものの設定は、「ウィジェット」から行うのですが、ここを見てみると、デフォルトでこんな感じで入っていました。
ここにh2って書いてあるから、装飾がうまくいかなくなってしまっていると予想。
これについては、デフォルトで入っていたブロックは削除し、ウィジェットから選択しなおしてみました。今回は検索ボタンと最近のコメント欄を設定。
見出しみたいなのがつきましたね。（これはh2とは関係ないようです）
無事見た目が整いました。
最後に
今回私は中途半端な知識でこの設定を行っています。
.post_content がどのような影響を与えるかが調べきれませんでした。
SEOとかあまり気にしていないサイトなので、見た目優先で今回の対応を行っていますので、その点ご了承いただけますと幸いです。。
他にも方法がないわけではなさそうなので、このやり方が心配な場合は、他の方法を探して頂くほうがよいかもしれません。
それでは今回はこのへんで。(*'▽')/