こんにちは。以前からブログマーケターJunichiさんのブログのトップページが良いなと思っていたら、バズ部さんも最近トップページにオススメ記事を配列するようになっていて、ブログトップに「新着記事一覧＋おすすめ記事まとめ」を載せるデザインというのは今後流行っていくんじゃないかなーと思ってます。
WordPressテンプレートでもそういうトップページにおすすめ記事まとめが簡単に作れるものも出てくるんじゃないですかねー。松原潤一さんもやってますし。
さて、今回はトップページを松原潤一さんのブログのようにカスタマイズする方法を、アルバトロスやハミングバードでも実現できるようにブログをカスタマイズしたのでそれをシェアしますね。
解説動画
以下も読みながら実際にやってみてくださいね。
事前に導入しておいて欲しいプラグイン
- Simple Custom CSS
- Display Widget
Simple Custom CSSはお使いのWordpressブログのテンプレートにCSSを追加するのに便利なプラグイン。僕は以前からJetpackの昨日の中にあるカスタムCSSを使ってたんですが、テンプレートを変えるとせっかく頑張って書いたCSSが全部消えちゃうので、こちらに変えました。
Display Widgetは、各ウィジェットの表示を管理するプラグイン。例えばカテゴリーのウィジェットをトップページには表示させたくないけど、ブログ記事ページには表示させるとか、そういう便利なプラグインです。普通に必須プラグインなのでぜひ導入しておいて下さい。
さて、次にやるのは以下の3つです。
- 管理画面＞カスタマイズで記事スタイルを「カード型」に
- ウィジェットで「フロント」を隠す設定にする
- 2カラムのカード型を3カラムにするためにコピペ用CSSを貼る
- 源泉記事用のショートコードをコピペする
管理画面＞カスタマイズで記事スタイルを「カード型」に
管理画面＞外観＞カスタマイズから
上図のような画面になるので「>その他オプション」を押す。
次に「カード型」にしましょう。
ウィジェットで「フロント」を隠す設定にする
上図のようにサイドバーに設置しているウィジェットを
フロントページ（トップページ）には表示しない設定にします。
2カラムのカード型を3カラムにするためにコピペ用CSSを貼る
次は以下のCSSを
SimpleCustomCSSなどでコピペして追加して下さい。
解説は省略しますがコピペするだけで
トップページにカード型の記事が3カラムで並ぶようになります。
（ならない場合は教えて下さい。）
※僕は自己流でCSSをいじって専門的に学んだことないので
その点はご了承下さい。
/*=============================================
３カラム用のCSS
===============================================*/
main#main .post-list-card .post-list {
/*カード式を2つから3カラムに*/
font-size: 13px;
width: 31%;
margin: 0 1% 2.5%;
float: left;
overflow: hidden;
height: 350px;
}
body.home main#main {
width: 100%;
}
body.home .home_widget {
width: 100%;
max-width: 100%;
}
.textwidget h2:after {
bottom: 3px;
left: 0;
}
.textwidget h2:before {
top: 3px;
left: 0;
}
.textwidget h2:before, .textwidget h2:after {
content: '';
display: block;
width: 100%;
position: absolute;
border-top: 1px dashed;
}
.textwidget 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: #16AD73;
color: #fff;
box-shadow: 0 0 45px rgba(0,0,0,0.25) inset;
}
.textwidget h3 {
border-color: #16AD73 !important;
border-left: 6px solid;
padding: .7em 0 .7em .8em;
margin-top: 1em;
font-size: 1.5em;
font-weight: 700;
}
.textwidget p {
font-size: 18px;
}
源泉記事用のショートコードをコピペする
次は以下のコードをコピペして、
ウィジェットのテキストウィジェットに貼りましょう。
<h2 style="text-align: center; margin-bottom: 0px;"><span style="font-size: 32px;">科目別おすすめ勉強法まとめ</span></h2> <p>[colwrap] [col3]</p> <h3>英語勉強法</h3> <p><img class="alignnone wp-image-7917" src="http://t-shiki.co.jp/blog/wp-content/uploads/good-idea.jpg" alt="グッドアイデア 黒板" width="226" height="160" /></p> <p>◆<a href="http://t-shiki.co.jp/blog/english-reading-studyway" target="_blank">英語長文勉強法完全版</a><br /> 英語長文を攻略する勉強法をまとめました。</p> <p>◆<a href="http://t-shiki.co.jp/blog/center-english-studyway" target="_blank">センター英語解き方まとめ</a><br /> センター英語の解法テクニックをまとめました。</p> <p>◆<a href="http://t-shiki.co.jp/blog/top-english" target="_blank">早慶英語対策法</a><br /> 早慶レベルの英語を攻略するヒントをまとめました。</p> <p>⇒<a href="http://t-shiki.co.jp/blog/category/english/english-studyway" target="_blank">英語勉強法記事一覧へ</a></p> <p>[/col3] [col3]</p> <h3>数学勉強法</h3> <p><img class="alignnone wp-image-7073" src="http://t-shiki.co.jp/blog/wp-content/uploads/mathematics-936745_1280-1024x682.jpg" alt="数字や数式" width="226" height="151" /></p> <p>◆<a href="http://t-shiki.co.jp/blog/center-math-studyway" target="_blank">センター数学勉強法完全版</a><br /> センター数学で9割得点する攻略法をまとめました。</p> <p>◆<a href="http://t-shiki.co.jp/blog/math-weak-overcome" target="_blank">数学が苦手な人の対策法</a><br /> 苦手克服法をまとめました。</p> <p>●<a href="http://t-shiki.co.jp/blog/math-fivemethod" target="_blank">伸び悩んだ時の壁突破法</a><br /> 得点が伸び悩んでいる時の解決法をまとめました。</p> <p>⇒<a href="http://t-shiki.co.jp/blog/category/math" target="_blank">数学勉強法記事一覧へ</a></p> <p>[/col3] [col3]</p> <h3>国語勉強法</h3> <p><img class="alignnone wp-image-6958" src="http://t-shiki.co.jp/blog/wp-content/uploads/pennote-1024x768.jpg" alt="ペンとノート" width="226" height="170" /></p> <p>◆<a href="http://t-shiki.co.jp/blog/kokugo-studyway" target="_blank">国語対策法まとめ</a><br /> 現代文・古文・漢文の攻略法をまとめました。</p> <p>◆<a href="http://t-shiki.co.jp/blog/center-classics-studyway" target="_blank">センター古文勉強法</a><br /> センター攻略法をまとめました。</p> <p>◆<a href="http://t-shiki.co.jp/blog/center-4method" target="_blank">センター漢文勉強法<br /> </a>センター漢文満点を取る方法をまとめました。</p> <p>⇒<a href="http://t-shiki.co.jp/blog/category/japanese" target="_blank">国語勉強法記事一覧へ</a></p> <p>[/col3] [/colwrap]</p>
上図のように「【トップページ】下部」の部分に
ウィジェットを入れましょう。
そして表示はフロントのみにします。
こうすることでトップページに
厳選記事のまとめを作成することが出来ます。
まとめ
いかがでしたか？新しいテーマ「ストーク」では
トップページを1カラムに出来るようですが、
今まで使ってきたハミングバードやアルバトロスでも
1カラムで使いたい！という声にお応えしました。
次はバズ部のようにXeoryを使ってトップページを
うまくまとめられるようになれたらいいなぁ・・・（遠い目）