阿部 雅彦 (まさ) この記事を読むのに必要な時間は約 6 分です。
このブログは私が得意なことや知っていることをジャンルを気にせずに書いている雑記ブログです。
ライフログネタの他に、買ったものや読んだ本の紹介、参加したセミナーの記録など記事の種類は雑多。
そんな状態なので、以下の記事を読んだらトップページを見直したくなってしまいました。
bloglab.naenote.netこの記事の中で刺さったのは以下の記述。
特化ブログの場合はブログ名やグローバルメニューからだいたい把握できるでしょう。
しかし雑記ブログは違います。「NaeNote」と書かれても初見の人は「は？」なんです。
記事の一覧から読み解こうとしても、それら細々とした情報からブログのコンセプトを逆算できる人はほぼゼロでしょう。
ブログのトップページを作ったので、作り方から実測効果まで全部紹介 | NaeNote
作成されたトップページもよく見る記事の一覧とは違って印象的です。
手順も記事で紹介されているので、とりあえず作成し始めたら夢中になってしまい、この週末はずっとトップページを作成してました。
うちのブログは記事の内容がさらに雑多。作成にあたっては、まずカテゴリの見直しから行うことになりましたが、それなりに形にすることができました。
「Page Builder by SiteOrigin」はとても簡単だけど、細かい調整にはCSSの知識が必要
トップページの作成手順は元の記事をご覧いただくのが良いと思います。大まかなレイアウトは割とすぐにできます。
紹介されている「Page Builder by SiteOrigin」プラグインは、初めて使いましたが非常に使いやすいです。
インストールすると記事エディタに「ページビルダー」という専用のタブができるので、そこでページのレイアウトを自由に変更することができます。ウィジェットを置いていくだけなので、とても簡単です。
ただ、大まかなページ構成は良いのですが、タイトルを一般の記事とはスタイルを変えたり、行間を詰めたりといった細かい調整にはCSSの知識が必要。
使っているテーマや、やりたいことによっても異なるので元の記事でも省略されていますが、ここに非常に時間がかかりました。本格的にページの作成を行うには、ある程度CSSの知識は必要になります。
人気記事はプラグインで表示
元の記事では「人気記事10選」を横にスライドさせて、10記事をまとめて横1行に表示するカルーセル機能を利用して表示していました。
ただ、この機能だと記事は手動で差し替えなのと、iPhone7でアクセスするとうまく横にスライドさせることができなかったので、私は見送り。
その代わりに「WordPress Popular Posts」プラグインを表示して、人気記事一覧を表示することにしました。
これには以前、以下の記事で書いた際のコードを流用しました。
masalog.netウィジェットにPHPコードを貼り付けて使えるように、「PHP Code Widget」プラグインを使っています。
▲日次の人気記事を表示するようにしました。
書評記事は分類して、タグで表示することに
あとは記事のカテゴリが多すぎたので、「書評」カテゴリは廃止。
読んだ本に関する記事は、その内容によって他のカテゴリに分類しました。
書評記事には「書評」タグを付けておいたので、記事の検索メニューに「書評を探す」ボタンを付けて一覧が確認できるようにしています。リンク先は「書評」タグの一覧ページです。
▲SSL化前にバズった古い記事を掘り起こすことができるので、元記事にあった「はてブから探す」ボタンも設置しました。
デザインに見直しの余地はあるけれど
トップのバナーが代わり映えしなかったり、テーマ(カテゴリ)の説明が中途半端だったりと、まだ作り込む余地はありますが、ひとまずトップページの体裁は整えることができました。
トップページを見てくださる方は少ないと思いますが、もし見ていただけた時に興味を持った記事を見つけやすくするために今回の新しいトップページは良いんじゃないかなと思います。
デザインや構成が大幅に変わるので、作業していて楽しかったです。こういうの好きなんでしょうね。つい凝っちゃいました。
まだ元記事そのままを真似させていただいた部分もあるので、今後も継続してオリジナルなページに仕上げていこうと思います。ぜひ、たまにチェックに来てください。
トップページはこちらです。
(2017.10.10追記)
しばらく自分で利用してみて気になる点をチューンナップしました。
