WordPressにStinger8を導入してから、前回はフォントサイズの変更をしてみました。
あまりにシンプルで、知識のない私には少し難しいのかも・・なんて思いながらも、はじめたからにはやるっきゃない！と、今度は見出しのhタグの装飾の変更をしてみました。
スポンサーリンク
h2・h3・h4など見出しタグは基本かなりシンプルなものです。
h2タグはこのままでいいかなと思ったのですが、h3とh4は変更したいと思いやってみました。
hタグの変更のしかたと、タグにアイコンをいれる方法です。
元々のhタグは図のようなものでした。
h3タグの変更
波空
h3のシンプルな下線だけのものにアイコンを追加してみました。
アイコンフォントは『Font Awesome』を使用しました
アイコンフォントは『Font Awesome』を使用しました
Font Awesomeとは？
波空
ウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスなんです。
猫にゃん
Webアイコンフォントってなに？
波空
ウェブページ上で文字と同じように表示できるアイコンのことだよ(^^)
猫にゃん
ふむ。webで使える絵文字ということかにゃ
波空
画像でアイコンを貼るのと違って、拡大してもぼやけないし、色もサイズも簡単に変えることができるのね。
猫にゃん
ほぉ、それは便利だにゃ
FontAwesomeを使う準備
波空
FontAwesomeを使うために少しだけ準備がいります。
猫にゃん
なんか面倒だにゃん
波空
そんなでもないよ。ちょっとStinger8のテーマに追加するだけ。
猫にゃん
またまた、CSSとかいじるんだﾖﾈ･･･大丈夫かにゃ。
波空
1行加えるだけだから、大丈夫(^^;
やり方は次の通りね
やり方は次の通りね
●CDNという「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みを使います。
つまりアイコンをダウンロードして自分のサーバーにアップロードしなくても使うことができるんですね。
WordPressのダッシュボードで
「外観」⇒「テーマの編集」へいきます。
右上の編集するテーマを選択：がStinger8 child になっていると思いますので、
▼をクリックして「Stinger8」（親テーマ）にします。
「選択」をクリックすると右側にテーマファイルの一覧が表示されます。
テーマファイルの「テーマヘッダー（header.php）」をクリックします。
次のコードを<head>〜</head>の中に貼り付けます。
<link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”>
よく分からなければ</head>の直前に貼ればOKです。
「ファイルを更新」をクリックします。
これでアイコンフォントの使用準備は完了です。
アイコンフォントを探す
波空
準備ができたら、まず『Font Awesome』のサイトにいきます。
波空
FontAwesome5とは、2017年末にリリースされたFontAwesomeの最新バージョンですね。
FontAwesome5には、無料プランと、有料のPROプランがあります。
ちなみに、旧バージョンのFontAwesomeはこれまで通り使い続けることができます。
画面上の「アイコン」をクリック、使いたいアイコンを探します。
FontAwesome5には、無料プランと、有料のPROプランがあります。
ちなみに、旧バージョンのFontAwesomeはこれまで通り使い続けることができます。
画面上の「アイコン」をクリック、使いたいアイコンを探します。
猫にゃん
いっぱいあるにゃ。薄くなってるのはなんで？
波空
薄いのはproプランの物で有料なのね
猫にゃん
それでクリックできなくなっているのか・・
波空
探したアイコンをクリックすると詳細ページが開きますよ。 アイコンの上にコードが表示されています。
アイコンのコードをCSSへ記述してカスタマイズします。
アイコンのコードをCSSへ記述してカスタマイズします。
猫にゃん
この四角で囲んだのがコードだにゃ。
波空
実際にh3タグを装飾してみます
猫にゃん
ここでダッシュボードの「外観」⇒「テーマの編集」にいって記述するわけだにゃ。
波空
そうそう（＾＾）
右上の編集するテーマを選択：がStinger8 child になっていることを確認してから、スタイルシートの最後にh3タグの装飾を追加します。
右上の編集するテーマを選択：がStinger8 child になっていることを確認してから、スタイルシートの最後にh3タグの装飾を追加します。
猫にゃん
ふむ。波空、間違えないように慎重ににゃ。
.post h3:before {
font-size: 22px;
line-height: 27px;
margin: 20px 0;
padding: 10px 15px;
color: #c91a57; /* 色 */
margin-right: 10px;
font-family:”Font Awesome 5 Free”;
content:”\f0c6″; /* アイコン */
font-size:25px;
}
font-size: 22px;
line-height: 27px;
margin: 20px 0;
padding: 10px 15px;
color: #c91a57; /* 色 */
margin-right: 10px;
font-family:”Font Awesome 5 Free”;
content:”\f0c6″; /* アイコン */
font-size:25px;
}
波空
「ファイルを更新」をクリックします。するとh3がこうなります(^^)。
猫にゃん
おぉ頭にアイコンがついたにゃ
波空
f0c6この部分がアイコンの種類。
ここを変更するだけでアイコンを変更出来ます。
また、色の変更は「color: #c91a57; /* 色 */」の部分を変えると好みの色にできます。
ここを変更するだけでアイコンを変更出来ます。
また、色の変更は「color: #c91a57; /* 色 */」の部分を変えると好みの色にできます。
色を探すにはいろんなサイトがありますが、参考までにこちらで。
スポンサーリンク
h4タグの変更
h4タグはタイトルの左にボーダーを追加してみました。
.post h4 {
padding: 10px 15px;
margin: 20px 0;
background-color: #f3f3f3;
font-size: 20px;
border-left: 6px solid #ccc;}
/*amazonプラグインのh4は除外*/
.post .amazonjs_info h4{
background-color:transparent!important;
}
padding: 10px 15px;
margin: 20px 0;
background-color: #f3f3f3;
font-size: 20px;
border-left: 6px solid #ccc;}
/*amazonプラグインのh4は除外*/
.post .amazonjs_info h4{
background-color:transparent!important;
}
h3タグと同様に子テーマのスタイルシートに追加で記述すればOKです。
Stinger8のカスタマイズ 見出しタグ さいごに
波空
少し変えただけだけど、やり方がわかったらこれからいろいろできるから。今回はここまで（＾＾）
猫にゃん
変更がちゃんと反映されないこともあるにゃ。
波空
変更が反映されていないようならブラウザをリロードすると反映されます。
それぞれのブラウザによってやり方が違うので次のページでやり方を確認して試してみてください。
それぞれのブラウザによってやり方が違うので次のページでやり方を確認して試してみてください。
