【STORK(ストーク)】見出しのカスタマイズをしよう!シンプルなデザイン3選と設定方法

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」をお使いの方向けに見出しのカスタマイズを説明していこうと思います。以前の記事でちょっと変わり種の見出しカスタマイズを説明したんですけど、

【STORK(ストーク)】周りと差をつけろ!見出しをグラデーションにするカスタマイズ

今回はもうちょっとシンプルと言うか、使い勝手の良い見出しデザインとその設定方法を紹介していきます。

 

おさらい|見出しについて

念のため確認しておきますが、先ほどからお話している「見出し」とはこれ↓のことです。

標準だとこのシンプルなデザインですよね。色を変えるだけならテーマのカスタマイズ画面から簡単にできますけど、デザインを変えるとなるとそうはいきません。あ、でもそんなに難しいことするわけじゃないのでご安心を。

 

デザインの変更は追加CSSで行います

見出しのデザインを変更するにはそれに対応したCSSを追加する必要があります。今回は貼り付けるだけでデザインを変更できるようにCSSを表示しておきますのでコピペするだけで簡単に変更できますよ!

ちなみに貼り付けるところはダッシュボード画面左の「外観」→「カスタマイズ」→「追加CSS」で表示されます。ここね↓

それでは早速見出しデザインを見ていきましょー!

 

見出しデザイン&CSS

その1.シンプルなアンダーライン

/* 見出しアンダーライン */
.entry-content h2 {
border-bottom: 3px solid 好みのカラーコード !important;
padding: 12px 0px 12px 5px ;
margin: 30px 0px 20px;
}

その2.上下にライン

/* 見出し上下ライン */
.entry-content h2 {
border-top: 2px solid 好みのカラーコード上 !important;
border-bottom: 2px solid 好みのカラーコード下!important;
padding: 12px 0px 12px 5px ;
margin: 30px 0px 20px;
}

その3.吹き出し風

/* 見出し吹き出し風 */
.entry-content h2 {
position: relative;
background: 好みのカラーコード !important;
padding: 8px 0px 8px 20px;
margin: 40px 0px 20px 0px;
}
.entry-content h2:after{
content: ‘ ‘;
width:0;
height: 0;
position:absolute;
border:10px solid transparent;
border-top-color:上と同じカラーコード !important;
top:100%;
left:5%;
}

ちなみにCSSの最後の部分である「left:5%」の数字を変えることで吹き出しのとんがっている部分の位置を変えることが出来ます。

注意事項

それぞれのCSSの冒頭に「.entry-content h2」と書かれた部分がありますが、この「h2」の部分が見出しの種類を指定しています。おそらく記事の見出しにはh2見出しを使われている方が多いと思うのでh2と記載していますがここを変更することで他の見出しにも対応させることが出来ます。

ただし、記事の見出しにh1見出しを使っている場合、h1見出しに対してこの記事で説明したカスタマイズを行うと(.entry-content h1とすると)記事一覧ページのタイトル部分にも適用されてしまうので注意が必要です。こんな感じ↓

また、上記のCSSの中で「好みのカラーコード」もしくは「上と同じカラーコード」と書かれたところには好みの色に対応したカラーコード(#から始まる6桁の英数字)を入力してくださいね。

今回は比較的シンプルな見出しデザインを3つ紹介しました。ちなみにもっと凝ったデザインにしようと思ったらやり方はたくさんあります。それこそ以前に説明したみたいなグラデーション見出しなんかも出来るんですよ。

ただ、今は時代的にも「シンプルであること」って大切だと思っています。凝ったカスタマイズはいくらでも出来るけど、そうではなくて余計なものはそぎ落としていく。そんなシンプルで見やすいデザインが今は受け入れられやすいんじゃないかな~と思います。まぁ参考までに。

それでは説明は以上です。お疲れさまでした!

 

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!