速報・最新ネタ

ニュースネットでお小遣い稼ぎ

初心者の私にもできた!!STINGER5のh2見出しをカスタマイズする簡単な方法

      2015/12/29

Sponscred Links

超初心者の私がカスタマイズした方法を教えます。

STINGER5での作業ですので、以前のバージョンの方は多少異なる可能性がありますので、ご注意ください。

カスタマイズの際は自己責任でお願いいたします、必ずバックアップは取っておきましょう。

目次
■ 初心者にとってサイトをカスタマイズする障害は?
■ ちょっと人と違った見出しを作ってみたい
■ Font-Awesomeから希望のiconフォントを探そう
■ ワードプレスのに移り設定していきます

■ 初心者にとってサイトをカスタマイズする障害は?

私は、ネット上の情報をもとにいろいろカスタマイズしておりますが、サイトオーナーさんが優秀なのか?

私のような初心者には所詮カスタマイズは困難なのか?と考えることが多々ありました。

いろんなサイトを訪れて、カスタマイズをしてみたが、同じようにやってみたにもかかわらずカスタマイズができなかったということを数多く経験しました。

では自分でやってみたらどうだろうと、試行錯誤しながらやってみた健忘禄を伝えていきますのでよろしくお願いいたします。

私のカスタマイズは、PC初心者でもできるやさしい解説ですので、気を楽にして臨んでください。

■ ちょっと人と違ったh2見出しを作ってみたい

そんな悩みを解決する方法を伝授します。

h2見出しはプロ並みの装飾をしている方々が多く見受けられます。

私もこんな風に装飾できないだろうか?

と考えてはいましたが、難しいと思いなかなか手が出せませんでした。

ひょっとしたことでやってみる機会ができたのでやってみると、なんだこんなに簡単にできるんだってことに気づきました。

みなさんも是非やってみてくださ。

■ Font-Awesomeから希望のiconフォントを探そう

まずFont-Awesomeはこちら

でお好きなiconを探しましょう。
Font Awesomeのホームページ

下にスクロールすると数多くのiconがあります、今回私はfa-planeを選んでみました。

Font Awesomeのアイコンは無数にある

緑色に変わるのでクリック

Font Awesomeのアイコンの記号をコピー

青と赤の枠で囲まれたUnicode: f072のうち英語で始まる4ケタの記号f072をコピーします。

これでiconフォントを手に入れることができました。

メモ帳などに張り付けておくか、ワードプレスの編集中にコピーできるようにこのページを残しておいてください。

Sponscred Links

■ ワードプレスのに移り設定していきます

ダッシュボードから「外観」1→「テーマの編集」2→「style.css」3と進みstyle.cssを表示させてください。

style.css

4/5ほどスクロールすると各フォント設定という画像の赤枠のところがあります。

Webアイコンフォント「Font Awesomeをstyle.cssへ書き込む方法1

さらにスクロールして、下画像のh2:after{の最後の部分にある赤枠の場所に

Webアイコンフォント「Font Awesomeをstyle.cssへ書き込む方法1

font-family:”FontAwesome”;
content:”\f072″;
font-size:25px;

上記3行を貼り付けてください。

ファイルを更新して、あなたのブログを確認してください。

Webアイコンフォント「Font Awesome表示されました

以上のように表示されたと思います。

では、このiconの位置を変更していきます。
Webアイコンフォント「Font Awesomeをstyle.css位置合わせ

上記画像のようにpadding-bottom: -10px;を10px;に変更(これはiconの上下の位置を変更しています)

padding-left: 20px;を100px;に変更(これは見出し文が始まる位置をずらしています)

できましたらファイルを更新してください。

Webアイコンフォント「Font Awesome位置セット完了

上画像のようにきれいに収まりました。

位置変更は数字を変えれば好きなだけずらすことができますので、微調整をしてみてください。

お疲れさまでした。

少しずつではありますがカスタマイズをしていく際には健忘禄として記載していきますので、よろしくお願いいたします。

■ STINGER5以外

PS.STINGER5以外ではheader内にCSSを追加する必要があるテーマもあるようですのでお気を付けください。

一応わかる範囲で記載させていただきますが、他のテーマでの運営は行っていませんので、確認ができません。

自己責任でよろしくお願いいたします。

まず下記コードをheader.phpへのhead内へ追加します。

 

STINGER5の場合はすでにデフォルトで入っているのでこの作業はスルーしてOKです。

 - STINGER5 , , , ,