サイトデザイン

ワードプレスで見出しの装飾をカスタマイズする方法

当ブログはワードプレスで運用しており、refineというテンプレートを使用しております。
使いやすいので僕のコンサル生にもrefine snowを無償配布していてるんですが見出しの装飾が気に食わない…というわけで今回僕も行った見出しをカスタマイズする方法を紹介します。

 

プラグイン

 

以前使っていたh3見出しの装飾

1

現在のh3見出しの装飾

1

 

好みは人それぞれですが、ワードプレスでは
このように簡単に見出しのデザインを変更することができます。

 

ワードプレスで見出しの装飾をカスタマイズする方法 動画

 

動画内で僕が貼り付けた見出し装飾コードはこちらです。
貼り付けてお使いください。

border-left:7px solid #ccc; 
border-bottom:1px dashed #ccc;  
padding:.6em .8em

カスタマイズする際に使える見出し装飾素材

以下のサイトから見出しの装飾コードを取得できます。
特に見出しデザイン.comは豊富なデザインがありますので
僕もよく使っています。

見出し.com
http://midashi-design.com/

 

テンプレートキング
http://www.templateking.jp/sozai/title/

 

ブブンデザイン
http://bubundesignarchive.jp/mid/

 

ワードプレスで見出しの装飾をカスタマイズする方法 文章

動画だと見れない人や読みながらゆっくりやりたい人
向けに一応文章でやり方を載せておきます。

 

1.先ほど紹介した見出し素材サイトからお好みの
デザイン,装飾のコードを取得してください。

 

2.ワードプレス管理画面左サイドメニュー「外観>テーマ編集」を
クリックします。

1

 

3.右メニューのしたの方にある「スタイルシート」にチェックが
入っていることを確認する。

1

 

4.h2みだしの装飾を変えたいならh2見出しについて書かれている場所、
h3見出しの装飾を変えたいならh3みだしについて書かれている場所を
探す。

初心者の方はブラウザの検索機能を使い、「h2」や「h3」と検索すれば
一発で検索可能です。

 

5.{ }でくくられている記述を全部削除して代わりに
見出し装飾のコードをコピペします。

1

 

6.ファイルを更新をクリックして終了です。

1

 

意外と簡単に見出しのデザインは変更できます。
皆さんも「テンプレートはいいのに見出しのデザインがな…」
とお悩みならば今回の方法で変更してみるといいでしょう。

 

Top