「STORK(ストーク)」の気になるところをカスタマイズ!


WordPressのテーマストークは基本的に、カスタマイザーで簡単に自分好みのブログにできる優れもの。それでも気になる細かい所をいくつか独自にカスタマイズしましたのでご紹介します。

ストークがどのようなテーマなのかは以下の記事で紹介をしています。

WordPressのテーマを「ストーク」に変えたら世界が変わった

2017.05.28

見出し(h2)の余白を調整

少し見出し上部の余白が少なく詰まった印象だったため、上部の余白を広くしました。

普段改行で余白を広くしている方は、この方法で逆に狭くすることもできます。

方法は簡単。「テーマの編集」から、子テーマの「style.css」に以下を追記します。そして赤字部分の数字を変更するだけ。デフォルトは2.1emですが私は3.0emにしています。その他文字サイズなどもそれぞれ該当の数字をいじれば変更できますね。

/*h2*/
.entry-content h2{position: relative;border: none;font-size:1.25em;padding: 1em 1.1em;margin-top: 2.1em;margin-bottom: 1em;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background: #13acca;color: #ffffff;box-shadow: 0 1px 5px rgba(0, 0, 0, .03);}

h3に関しても同じ方法で変更が可能ですよ。

/* h3 */

.entry-content h3{border-left:4px solid; padding: .7em 0 .7em .8em; margin-top: 1.8em;}

文字サイズを変更

全体的に文字が小さい印象でしたので、少し文字サイズを大きくしました。

こちらも子テーマの「style.css」に以下を追記し、赤字部分を変更すればOK。私は108%にしています。

/* 文字サイズ変更 */

body {font-family: “Lato”, “ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, ‘メイリオ’ , Meiryo , Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;font-family: Arial,Helvetica,”游ゴシック”,YuGothic,”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;font-size: 103%;line-height: 1.5;color: #545B63;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;word-wrap: break-word;background: #f7f7f7;}

行間と段落の間隔を変更

文字が小さいのに加え、行間が詰まり段落は広がった印象だったためこちらも変更。だいぶ見やすくなると思いますよ。

こちらも子テーマの「style.css」に以下を追記します。赤字部分を変更すれば段落の間隔が、青字部分をすれば行間が変わります。私はそれぞれ段落を1em、行間を2.1に変更しています。

/* 行間と段落を調整 */
.entry-content p {margin: 0 0 1.6em; line-height: 1.75;}

外部リンクアイコンを消す

ストークの外部リンク

こういうやつですね。便利なんですが、リンクが多くなるとちょっと邪魔に感じます。

こちらも子テーマの「style.css」に以下を追記すればOK。

/* 外部リンクアイコンを消す */
.entry-content a[target=”_blank”]:after {content:none;}

「このライターの最新記事」を削除

このブログに書いているのは私一人しかいないため削除しました。特にスマホで閲覧した時にすっきりさせることができます。

この項目はFTPの使用やphpの書き換えを伴います。

まず親テーマのparts_singlefoot.phpを、FTPを使用するなどして子テーマにコピーします。

コピーができたら子テーマのperts_singlefoot.phpから、以下の該当部分を削除します。削除する場所を間違えるとサイドバーなどが消えてしまう可能性があるため注意。

必ず子テーマを編集するようにしてください。

変更が反映されない場合は?

コードが間違っていないか今一度ご確認ください。

それでも反映されない場合、ブラウザのキャッシュを削除するか普段とは別のブラウザで確認してみてください。

それでも駄目な場合、WordPressにキャッシュ系のプラグインを入れていないかを確認してください。キャッシュ系のプラグインがあるとCSSの変更が反映されない場合があるようです。

そこまでしても反映されない場合は濱田(@hamada_blog)までご連絡ください。出来る限りのことはしてみます。

まとめ

以上細かいカスタマイズをご紹介しました。

こうした細かい修正でブログの視認性が高まりますので、慣れてきたら色々と挑戦してみるとよいでしょう。

👇最新情報👇
最新情報は随時Twitterで更新中!@hamada_blog


お役に立てたらシェアしてください!