最近、長男がブログを始めました。私の方がブログは早く始めたのでいろいろ聞いてきます。
見出しの装飾の仕方について聞かれました。
ところが、私は、見出しを装飾することに関心がなかったので、仕方が分かりません。
ネットで検索してその方法を知ることができました。
方法はいろいろあるようですが、私が使ってみた方法を紹介します。
「テーマエディター」を使って見出しの装飾をする
「テーマエディター」はワードプレスのダッシュボードで「外観」をポインタで指し示すと一番下に「テーマエディター」という項目があるのでこれをクリックします。
私が使っているCocoon Child ではここで、スタイルシートが出てきます。
そのシートに、他のサイトで紹介している見出しから自分が気に入った装飾のコードをコピーして貼り付けると、見出しの装飾ができます。
見出しの種類は６種類あります。見出し１から見出し６までというわけです。
それらの見出しをどのような装飾にするかをこのスタイルシートで決められます。
例えば、見出し１のコードの例として次のようになります。
h1 {
/*線の種類（実線） 太さ 色*/
border-bottom: solid 3px black;
}
見出し２の例として、
.entry-content
h2 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
}
というように設定します。
ｈ１は見出し１の設定で、ｈ２は見出し２の設定なので、ｈ３、ｈ４、ｈ５、ｈ６として、順次設定すれば、見出し６まで設定できます。
サイトによって、「.entry-content」を、ｈ１やｈ２の前につけることを紹介したり、していなかったりします。長男が設定したときに、うまくいかず、他のサイトでは「.entry-content」を入れていたのを見つけ、これを入れたらうまくできたと言っていました。
実際は、テーマによって違いがあるかもしれません。
なくても、指定したコードがうまくサイトに反映されるならなくても良いと思います。
カスタマイズの追加ＣＳＳから設定する方法
ダッシュボードで「外観」をポインタで指し示すと、「カスタマイズ」というところがあります。これをクリックすると、一番下に「追加ＣＳＳ」という項目があります。さらにクリックすると、追加ＣＳＳの画面が出てきます。一番したに先ほどのｈ１から続くコードを入力する場所があります。カスタマイズ中追加ＣＳＳと表示されているところの右端に？記号が出ていて、これをクリックしてもコードを入力する場所が現れます。他のサイトで紹介しているいろいろな飾りのコードをコピーしてはりつければ、完成です。方法は「テーマエディター」の場合と同じです。
今回の見出し２の設定ではこのようになります
h2 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
}
上のコードを先ほどのテーマエディターで設定したら、うえのような表示になりました。
見出し３はこのようになります。
自分で好みの装飾を選び、上記のようなコードをコピーして貼り付ければできます。
コードを紹介しているサイトはいろいろあります。検索文字は、例えば、「ワードプレス 見出しの装飾」などと入力して検索してみてください。プラグインを使って装飾する方法を紹介しているサイトもありますが、そこまでしなくても上の方法だけでできます。
この記事を書いた時には、上のようなコードを入力していますが、後日、違うコードに入れ替えることもあるかもしれません。その場合は、例で紹介したコードと実際の表示が違う場合があるので、ご了承ください。
コメント