初心者の私にもできた！！STINGER5のh2見出しをカスタマイズする簡単な方法
2015/12/29
超初心者の私がカスタマイズした方法を教えます。
STINGER5での作業ですので、以前のバージョンの方は多少異なる可能性がありますので、ご注意ください。
カスタマイズの際は自己責任でお願いいたします、必ずバックアップは取っておきましょう。
■ 初心者にとってサイトをカスタマイズする障害は？
■ ちょっと人と違った見出しを作ってみたい
■ Font-Awesomeから希望のiconフォントを探そう
■ ワードプレスのに移り設定していきます
■ 初心者にとってサイトをカスタマイズする障害は？
私は、ネット上の情報をもとにいろいろカスタマイズしておりますが、サイトオーナーさんが優秀なのか？
私のような初心者には所詮カスタマイズは困難なのか？と考えることが多々ありました。
いろんなサイトを訪れて、カスタマイズをしてみたが、同じようにやってみたにもかかわらずカスタマイズができなかったということを数多く経験しました。
では自分でやってみたらどうだろうと、試行錯誤しながらやってみた健忘禄を伝えていきますのでよろしくお願いいたします。
私のカスタマイズは、PC初心者でもできるやさしい解説ですので、気を楽にして臨んでください。
■ ちょっと人と違ったh2見出しを作ってみたい
そんな悩みを解決する方法を伝授します。
h2見出しはプロ並みの装飾をしている方々が多く見受けられます。
私もこんな風に装飾できないだろうか？
と考えてはいましたが、難しいと思いなかなか手が出せませんでした。
ひょっとしたことでやってみる機会ができたのでやってみると、なんだこんなに簡単にできるんだってことに気づきました。
みなさんも是非やってみてくださ。
■ Font-Awesomeから希望のiconフォントを探そう
でお好きなiconを探しましょう。
下にスクロールすると数多くのiconがあります、今回私はfa-planeを選んでみました。
緑色に変わるのでクリック
青と赤の枠で囲まれたUnicode: f072のうち英語で始まる4ケタの記号f072をコピーします。
これでiconフォントを手に入れることができました。
メモ帳などに張り付けておくか、ワードプレスの編集中にコピーできるようにこのページを残しておいてください。
■ ワードプレスのに移り設定していきます
ダッシュボードから「外観」1→「テーマの編集」2→「style.css」3と進みstyle.cssを表示させてください。
4/5ほどスクロールすると各フォント設定という画像の赤枠のところがあります。
さらにスクロールして、下画像のh2：after｛の最後の部分にある赤枠の場所に
font-family:”FontAwesome”;
content:”\f072″;
font-size:25px;
上記3行を貼り付けてください。
ファイルを更新して、あなたのブログを確認してください。
以上のように表示されたと思います。
では、このiconの位置を変更していきます。
上記画像のようにpadding-bottom: -10px;を10px;に変更（これはiconの上下の位置を変更しています）
padding-left: 20px;を100px;に変更（これは見出し文が始まる位置をずらしています）
できましたらファイルを更新してください。
上画像のようにきれいに収まりました。
位置変更は数字を変えれば好きなだけずらすことができますので、微調整をしてみてください。
お疲れさまでした。
少しずつではありますがカスタマイズをしていく際には健忘禄として記載していきますので、よろしくお願いいたします。
■ STINGER5以外
PS.STINGER5以外ではheader内にCSSを追加する必要があるテーマもあるようですのでお気を付けください。
一応わかる範囲で記載させていただきますが、他のテーマでの運営は行っていませんので、確認ができません。
自己責任でよろしくお願いいたします。
まず下記コードをheader.phpへのhead内へ追加します。
STINGER5の場合はすでにデフォルトで入っているのでこの作業はスルーしてOKです。