トップページをリニューアルしました

ランチで食べた美味しいものの紹介からWordpress、iPadアプリの話題など、特定のテーマを決めていないこのブログ。最新記事を時系列に並べている以前のトップページでは、訪れてくれた人がどんなテーマについて書かれているブログなのか、すぐには分かりませんでした。

テーマを決めて書くといいのかもしれませんが、このブログは思いつくままに自分の興味のあることを書き綴るのがコンセプト。そこで、トップページにテーマごとの入り口を設けることにしました。

参考にさせていただいたのが、MasaLogというブログのこちらのエントリ。

このスクショのとおり綺麗にテーマの入り口を作成されています。

上のトップページは、私が過去に人気記事一覧を作成するときに使ったプラグインのPage Builder by SiteOriginをベースに作成しているようです。

MasaLogさんはcssでデザインを調整されているようですが、そこまでスキルのない私はプラグインを使って、なんとか形にしてみました。

トップページとテーマ別ページ作成のために使ったプラグイン

使用したプラグインはPage Builder by SiteOriginのほかに以下の2つ。

どちらも投稿や固定ページを、グリッドで一覧表示してくれるプラグインです。デザインはPostGridが好みなのですが、PostGridは特定の固定ページだけを指定して表示させることができないようなので、特定の固定ページを表示させるためだけにContent Viewsを使いました。

テーマ別ページの作成

テーマ別ページは今までもあったのですが、記事の一覧がリスト表示になっていてデザインがイマイチだったのでリニューアルしました。

まずは、PostGridで表示させたい投稿のカテゴリ、表示する要素(タイトル、アイキャッチ)、表示デザインを作成します。

Post Grid→New Post GridでPostを新たに作成。「Query Post」タブで表示させたいPostの種類に“投稿”を選択するとカテゴリが選択できりるようになります。カテゴリは複数選択可能です。

「Layout」タブで表示する要素、デザインを調整します。あらかじめ、アイキャッチ、タイトル、抜粋などがセットになった「Content」が数種類、用意されています。今回は、デフォルトの”flat”を選択しました。でもこのままでは、タイトルに記事のリンクが張られていなかったので、「Edit」でタイトルリンクを表示するよう調整しました。

画面の上に並んでいるのが、グリッド内に表示できる要素。デフォルトでは“Title”になっていたので、“Title”を削除して、“Title with Link”を挿入しました。

cssボックスで簡単にデザインを調整できます。私はタイトル文字を大きくしてみました。

あとはこれを公開して「Shortcodes」タブのショートコードを、表示させたページに貼り付ければOK。

固定ページは、Page Builder by SiteOriginでカスタムHTMLウィジットを挿入して、Post Gridのショートコードを貼り付けました。

指定したカテゴリの投稿がグリッド表示されました。

トップページの作成

作成したテーマ別の固定ページをグリッド表示するトップページを作成します。

Content Views→新規追加で新たにViewを作成。「Filter Settings」タブで「Conten type」で“固定ページ”を選択。このままだと固定ページが全て表示されるので「include only」に表示させたい固定ページのIDを入力します。

「Display Settings」タブでレイアウトや列数を指定。あとはこれを保存します。

Content Views→All Viewsで作成したViewの一覧が表示され、ここからショートコードをコピーして、表示させたい固定ページに貼り付けます。

まだまだデザインは荒削りですが、なんとか形になりました。

テーマをStingerからPoseidonに変更しました

テーマを以前から気になっていたPoseidonというテーマに変更しました。グリッド表示によくマッチしているテーマだと思います。

今回導入した2つのプラグインであるPost GridとContent Views、そしてテーマのPoseidonは有料版があります。デザインなどを詰めていく中で有料版に欲しい機能があれば、有料版に移行するかもしれません。ブログデザインの細かい調整にあまり時間を割かないように、コンテンツ(記事)の作成と両立していければと思っています。


Also published on Medium.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です