アルバトロス・ハミングバードでショートコードを使って記事まとめを作る方法

Hummingbird

こんにちは。ブログマーケター松原潤一さんのブログはよく参考にさせてもらっているのですが、彼のブログトップページの記事まとめが非常に見やすくアクセスしやすいので、どう作っているのかなぁと前から気になっていました。

albatross-shortcode-matome

トップページにこういう記事まとめがあると初めてブログに訪れた人も何から読めばいいかわかりやすいですし、ページ回遊率も上がりそうです。

今回はこの記事まとめを自分でも作ってみたのでやり方をシェアしますね^^

スポンサーリンク

テーマはalbatrossかHummingbird

まず前提ですが今回のやり方はWordPressテンプレートAlbatrossHummingbirdであることが前提です。これらのテーマ独自のショートコードを使用して作成するからです。divタグなどを使って自分でも作ることが出来そうですが、技術的に少し難易度が高いので今回はこの方法で・・・ では早速見ていきましょう!

3カラムのショートコードを使うだけ!

ショートコードの使い方 | OPENCAGE」にてショートコードの使い方が解説されていますが、要はテキストエディタで下記を入力すれば簡単に3カラムができちゃうってことです。

実際の表示はこんな感じ。

デスクトップの時のみ3カラムになるよ
ショートコードを使うと簡単だよ
タブレット&スマホでは1カラムだよ

僕が作ったHTMLをパクっていいよ!

最速得点ラボトップページ」こんな感じで作ってみたので参考に。HTMLは以下です。

あとはテキストや画像・リンクを差し替えちゃえば同じようなものを作ることが出来るハズです。

Hummingbird

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。