こんにちは。ブログマーケター松原潤一さんのブログはよく参考にさせてもらっているのですが、彼のブログトップページの記事まとめが非常に見やすくアクセスしやすいので、どう作っているのかなぁと前から気になっていました。
トップページにこういう記事まとめがあると初めてブログに訪れた人も何から読めばいいかわかりやすいですし、ページ回遊率も上がりそうです。
今回はこの記事まとめを自分でも作ってみたのでやり方をシェアしますね^^
テーマはalbatrossかHummingbird
まず前提ですが今回のやり方はWordPressテンプレートAlbatrossかHummingbirdであることが前提です。これらのテーマ独自のショートコードを使用して作成するからです。divタグなどを使って自分でも作ることが出来そうですが、技術的に少し難易度が高いので今回はこの方法で・・・ では早速見ていきましょう！
３カラムのショートコードを使うだけ！
「ショートコードの使い方 | OPENCAGE」にてショートコードの使い方が解説されていますが、要はテキストエディタで下記を入力すれば簡単に３カラムができちゃうってことです。
[colwrap] [col3]デスクトップの時のみ3カラムになるよ[/col3] [col3]ショートコードを使うと簡単だよ[/col3] [col3]タブレット＆スマホでは1カラムだよ[/col3] [/colwrap]
実際の表示はこんな感じ。
[colwrap] [col3]デスクトップの時のみ3カラムになるよ[/col3] [col3]ショートコードを使うと簡単だよ[/col3] [col3]タブレット＆スマホでは1カラムだよ[/col3] [/colwrap]
僕が作ったHTMLをパクっていいよ！
「最速得点ラボトップページ」こんな感じで作ってみたので参考に。HTMLは以下です。
<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>
あとはテキストや画像・リンクを差し替えちゃえば同じようなものを作ることが出来るハズです。