サイトデザイン

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

当ブログはワードプレスで運用しており、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

 

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

 

著者プロフィール

keishi
1988年生まれ/早稲田大学社会科学部卒

好き:無印良品、mac、ラッコ、シンプルで上質なモノ。

嫌い:目覚まし時計、しいたけ、体育会系ノリ。

『就職したくない。。。ってか、朝早く起きれない。』

そんな思いで、就活で挫折していた、2013年の5月(25歳のとき)に0からPC1台、ネットビジネスを始めたのがきっかけ。

現在はビジネスコミュニティの運営、Webマーケティング、アフィリエイト、コンサル、などの活動が中心。

【実績】
2013/5 :ネットビジネス開始
2014/7 :月収100万円達成(プロモーション)
2015/2 :月収200万円達成(プロモーション)
2015/9 :月収1600万円達成(プロモーション)
2016/1 :月収200万円達成(自動化)
2016/9 :月収3000万円達成(プロモーション)
2017/2 :月収400万円達成(自動化)
2017/10:月収4900万円達成(プロモーション)

“1台のPC以外、持たない小さな起業という働き方を通して、心地のよいくらしを創る”ことを発信しています。

1台のPC以外、持たない小さな起業という働き方を0から実現するための教科書&メルマガの購読者は1万人を突破。

1台のPC以外持たずに、自由に働く月収100万円プレイヤーを多数輩出している、keishiが制作した小さな起業実践のための初心者向けの教科書『Net business navigation』が期間限定で無料で全てダウンロードできます。詳しくはこちら↓

期間限定ですので、興味があればこちらから今すぐご登録頂くことをおすすめします。