WordPressテーマ「STORK」のｈタグをカスタマイズ！

※当ブログはアフィリエイト広告を利用しており，記事にアフィリエイトリンクを含むことがございます

色々な方のブログを見ていると，見出しのデザインがたーくさんあることに気が付くやんね？

実は，見出しのデザインってのはカスタマイズの仕方によっていくらでもできるねん。

ただし！問題は，

• どのファイルの
• どの部分に

コードを書き込むか？これがわからんくない？

今回は僕が使っているWordPressテーマ「ストーク」の見出しのカスタマイズについて書くわ☆

結構使っている人が多いこのテーマやけど，以外にもカスタマイズ方法が書かれているブログが少ない。

なのでちょっと僕の経緯と共にカスタマイズの手順とコードを記入していくで♬

WordPressテーマ「ストーク」のデフォルト装飾はH2とH3タグに限られる

まずこれが不満やった。

前に使っていたのは無料テーマXeoryExtension

僕が以前使っていたテーマはバズ部の無料テーマXeoryExtension。

この時の見出しタグ（ｈタグ）はｈ１～ｈ６まで装飾を指定してん。

Xeory使いの方のためにコードを載せます。

XeoryExtensionで使っていたｈタグのCSS

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
font-weight: bold;
}

.post-content h1 {
margin: 32px 0;
font-size: 36px;
clear: both;
font-weight: normal;
}

.post-content h2 {
margin: 80px 0 32px -74px;
padding: 16px 16px 16px 56px;
font-size: 28px;
clear: both;
font-weight: normal;
border-left: 10px solid #131D2A;
background: #3b62bf !important;
color: #fff;
}

.post-content h3 {
font-size: 24px;
margin: 48px 0 24px;
padding: 20px 0;
clear: both;
font-weight: normal;
border-bottom: 2px solid #3b62bf !important;
line-height: 1;
}

.post-content h4 {
font-size: 20px;
margin: 30px 0 16px;
padding: 0 0 0 8px;
border-left: 5px solid #3b62bf !important;
clear: both;
}

.post-content h5 {
font-size: 16px;
margin: 30px 0 16px;
clear: both;
}

.post-content h6 {
font-size: 16px;
margin: 30px 0 16px;
clear: both;
}

[/box]

このコードを，XeoryExtensionの子テーマのスタイルシート（style.css）を開いたページの

この記述の下に貼りつければOK！

/*
カスタム CSS 機能へようこそ。

使い方についてはこちらをご覧ください
(英語ドキュメンテーション)。http://wp.me/PEmnE-Bt
*/

[/box]

こうすることで

• H2タグは左に黒いライン，綺麗な青色バックに白抜きの文字
• H3タグは下線に青ラインが引かれるデザイン
• H4タグは左に青のラインが引かれるデザイン

としてそれぞれ指定できてた。

 

WordPressテーマ「ストーク」でのH2～H4タグのカスタマイズがわからへん！

テーマをSTORKに変えた後，僕がぶち当たった壁がコレやった。

ぶっちゃけ，XeoryExtensionでstyle.cssをいじっていたので，そのまま反映させればOKや！

と思っててんね。

・・・反映しない。

WordPressテーマ「ストーク」ではもともと子テーマが用意されてるねんけど，

テーマ編集画面を見ると，

1. テーマのための関数 (functions.php)
2. スタイルシート (style.css)
3. yarpp-template-relative.php

この３つだけになってるんよね。

もちろん，ｈタグのカスタマイズやからスタイルシート（style.css）をいじりますわな。

開くとこうなってる。

STORKのstyle.cssを開くと書かれているのはこんなコード

@charset “utf-8”;
/*
Template: jstork
Theme Name: stork_custom
Theme URI:http://open-cage.com/stork/
*/

[/box]

なので，この　*/　から改行して，Xeoryで使っていたコードを入れればええやん！

そう思って実行。

・・・反映しない。

わからん。下手したら画面真っ白になるかもしれへんし怖い！アカン・・・あきらめるしかないのか？

最終的にはエックスサーバーのバックアップ機能を頼りにガンガン行こうぜ！と攻めるか！？

いや，しかし！真っ白になってからの回復の苦労は半端ない！怖い。

ってか，記事が書けなくなるストレスを避けたい！

悔しいが諦めようかと思っていた。

そこで現れたのが狐火兎さんという恩人やってん！！！

 

救世主現る！それはコビトブログさん！！

実はツイッターで知っていた狐火兎（コビト）さん。

ワラをも掴む思いで，

Xeoryのコードを伝え，どうしたらWordPressテーマ「ストーク」に反映させることができるんですか先生！？とばかりに質問をすると・・・

超・ネ申対応💛👈ヲタク風に書いてみた。てへ☆

ネ申対応の返事はコレや！

わざわざコードを送って下さり，ありがとうございますね(*’▽’)

「.post-content」をすべて「.article」に変えてみてください。
それでおそらく，大丈夫です。

[/box]こちらこそ，返信遅くなりました！

とのこと。

早速いじってみる。

でけた！！

(＾◇＾)ｷｬｰ☆ｳﾚﾋﾟｰ

コードは現在このようになっておます🎵

現在のｈタグのｃｓｓの記述

子テーマのスタイルシート（style.css）に記述します！

青色マーカーで色付けしているところが記述を足したところやで。

@charset “utf-8”;
/*
Template: jstork
Theme Name: stork_custom
Theme URI:http://open-cage.com/stork/
*/
/* hタグのカスタマイズ */
.article h3, .article h4, {
font-weight: bold;
}

.article h3 {
margin: 48px 0 24px;
padding: 16px 16px 16px 16px;
clear: both;
}

.article h4 {
font-size: 18px;
margin: 30px 0 16px;
padding: 0 0 0 8px;
border-bottom: 2px solid #1bb4d3 !important;
clear: both;
}

[/box]

正直言って，満足のいくカスタマイズではないんやけど，

カスタマイズ方法がわかった

これが収穫として大きいよね。

あとは，

• 賢威カスタマイズ研究所
•  ＮｘＷｏｒｌｄ
• ショップハンター
• Ｋｉｎｏｍｅｍｏ

このあたりのサイトがＨタグのデザインＣＳＳカスタマイズコードを公開してくれているので，

使うとエエと思てるねん♪

 

まとめ

今回はWordPressテーマ「ストーク」のｈタグカスタマイズ方法を書いてみました。

XeoryExtensionを使っている方にも間接的に参考になったかもしれませんね。

それにしても今回のカスタマイズの成功は狐火兎さんのお陰であることは言うまでもありません。

ありがとうございます，狐火兎さん！

[voice icon=”https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/01/tako2.jpg” name=”けいしゅけ” type=”l line big icon_red”] 今回の記事はいかがでいたか？
アナタのお役に立てていれば幸いです！
もし良ければコメント欄から記事を読んだ感想や，ご意見，ご質問など寄せて下さい☆待ってます！！

[/ふきだし]