WordPressテンプレートをmanablog風にカスタマイズする方法【ストークで解説 】

SEO

 

ども、シマです。

僕のブログの文体やデザインは、有名ブロガーのマナブさん(@manabubannai)を参考にしています。

マナブさん自身はテンプレートを販売していますが、買いなおすも面倒なので、今使っているテーマ(ストーク)をmanablog風にカスタマイズできないか?と試行錯誤を繰り返し、manablog風ストークを完成させました。

今日は、Opencageから販売されているワードプレステーマの「ストーク」を使って、manablog風にカスタマイズする方法を解説します。

非常にシンプルなデザインで、サイト内の回遊率やマネタイズ導線作りなど非の打ちどころがない構成になっているので、ぜひ試してください。

ストークを使っているブロガーさんは多いと思うので、参考になると思います。

manablogでよく使われるデザイン

manablogはミニマリストを突き詰めたデザインになっており、ムダがありません。

 

ンプレデザインはこちら

 

 

  • ①青い点線の枠
  • ②薄い灰色の枠
  • ③青いチェックマーク
  • ④H3見出しは青い線
  • ⑤人気記事リンク

深堀りしつつ、HTMLタグとCSSコードを紹介していきます。

 

ちなみに、これから紹介するタグを毎回手打ちしてると時間が足りなすぎるので、Add Quick Tagをまだ使っていない人がいればこちらをどうぞ

 

 

①青い灰色枠線

まず、箇条書きで頻繁に使用されている青いケージ↓

HTML・・・<div class=”box6″></div>

CSS ・・・.box6 p {margin: 0; padding: 0;}

htmlタグはAdd Quick Tagに追加し、cssはダッシュボードの外観→カスタマイズ→追加cssのところにコピペでOK

この後も、同じような要領で作業してもらえば、だいじょうぶです。

manablogはもう少し濃い青ですが、カラーは好きに変更してください。

②薄い灰色の枠

次、薄い灰色の枠

これですね

意見を強調する時などに使われています。

</>HTMLとCSS

HTML・・・<div class=”box3″><p></p></div>

CSS ・・・

.box3 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #f8f8f8 ;/*背景色*/
}
.box3 p {
margin: 0;
padding: 0;
}

③青いチェックマーク

 

次、青いチェックマークも頻出です。

 

これは簡単。僕はパソコンで、「チェックマーク」と打ち込んで✔︎に変換した後に、青色に塗っています。主に、重要ポイントで使われていることが多いです。

④H3見出しは青い線

実は、僕のH3タグも左に線一つのマナブさんと同じデザインなのですが、黒色に変更してます。

manablogの場合はH2タグは後ろに薄す線があり、H3タグは青い線です。

こちらはcssコードを追加css欄にコピペで終了です。

H3青色線h {

padding: 0.25em 0.5em;/*上下 左右の余白*/

color: #494949;/*文字色*/

background: transparent;/*背景透明に*/

border-left: solid 5px #7db4e6;/*左線*/

}

⑤人気記事リンク

最後に、manabulogの記事の最後に毎回出てくる【人気記事】のリンクデザイン

これです↓

 

下記のコード

人気記事リンクのコード<p style=”margin-bottom: 5px;”><span style=”font-size: 12px; color: #fff; margin-right: 10px; background-color: #ee7917; border-radius: 1px; padding: 4px 4px 5px;”>人気記事</span>
<a href=”記事のURL”>記事のタイトル</a></p>

を、外観→テーマエディタ(テーマの編集)→親テーマ編集に変更→個別投稿(single.php)に貼り付けます。

貼り付ける場所ですが、ストークの場合、

 

外観→テーマエディタ(テーマの編集)→親テーマ編集に変更→個別投稿(single.php)の92行目の<?php endif; ?>の下くらいに貼り付けると、ちょうど記事の最後とFacebookリンクの間くらいに、人気記事リンクが出現します。

一番売り込みたい記事を持ってきましょう。manablogのように2記事にするには、同じコードを2回貼り付ければOK

基本はシンプルなmanabalog

以上となります。

ベーシックは、白・黒・青で、リンク記事だけオレンジという超シンプルデザイン。僕もブログを始めた頃は、色使いがごっちゃごちゃでしたが、今はmanablogに習ってデザインを統一しています。

自分が好きなようにカスタムするのではなくて、読者が読みやすくなる環境を作ってあげる。これが上手くいくブログ作りに必要な考えです

僕が使用しているテーマのストークを使ってみたい人はこちらからどうぞ
レスポンシブ対応していて使いやすいです。(2020年にマナブログコピーに乗り換えました)

んじゃ、また。