ハイサイ！今日からゴールデンウィークということでブログに精を出そうと思っているヒトリジョーシスの暗黒卿ことダニエルナカムラ (@sys_nakamura) です。今回の記事は「家系ラーメンエバンジェリスト」としてではなく「ひとり情シス」としてはてなブログのカスタマイズに関する情報を書きたいと思います。伯方の塩は国産ではない！

 

今回紹介するのは現在このブログでも適用している PC ビューで見た時に「トップページを記事一覧にする」そして「記事一覧およびサイドバーに表示されるアイキャッチを角丸にする」手順です。スマホでご覧になっている方にこのブログを PC で見た時のスクリーンショットを貼っておきます。

 

上記画像のようにトップページを開くと記事のアイキャッチと抜粋文が一覧で表示されるようになっています。はてなブログでは URL のあとに「archive」をつけると記事一覧ページが表示されるようになっています。

 

このブログの場合

http://www.nakamu.info/archive

 

現在このブログではトップページを開くと上記の記事一覧へ自動でリダイレクトをして記事のアイキャッチと抜粋文の一覧をスッキリ表示させるようにしています。今回はそうするための手順・参考になる情報の紹介とアイキャッチを角丸にする手順の紹介です。

 

 

トップページを記事一覧にして表示する

記事一覧として表示するための手順は以下のサイトさんの記事が参考になります。

 

細かい解説や手順は上記の記事も参考にしていただくとして、ザックリと必要なコードや貼る位置を記載します。

 

「headに要素を追加」に以下のコードを記述する

以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。コード内の「自身のサイトのURL」や「自身のサイトのタイトル」については実際にご自身の URL　やタイトルに書き換えて貼り付けます。

 

上記のコードを記述して設定を反映させればトップページが記事一覧として表示されるようになります。私個人としてはこのレイアウトでデフォルト表示されるほうが WordPress の STINGER みたいにスッキリしていて気に入っています。

 

しかし、ご紹介させていただいた記事にも書いてありますがデメリットとしては Google からの評価が下がる可能性があるので、設定する際には何を取るか何を捨てるかをよく考えてから実行にうつすことをオススメしたいです。ちなみに私はさほど気にしていません。

 

 

アイキャッチ画像を角丸にする

はてなブログをスマホビューで見た時のアイキャッチ画像はこんな感じで少し角丸になっていて柔らかい感じがするかと思います。

 

PC ビューで閲覧する際にはスマホビューのようにアイキャッチが元から角丸になっているわけではないので CSS で記事一覧のアイキャッチ画像、そして私はサイドバーにも新着記事や注目記事を表示させているのでサイドバーに表示されるアイキャッチ画像も含めて角丸で表示されるように設定をしました。

 

以下のコードをデザインCSS に記述する

はてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に以下のコードを貼り付けます。

 

以上で作業完了です。これでトップページが記事一覧で表示されるようになり、記事一覧に表示されているアイキャッチ画像は角丸で表示されるようになります。

 

 

まとめ

個人の好みによるとは思いますが、私の場合は角丸でアイキャッチが表示されるほうが何となく柔らかさがでていいなと思いましたし、トップページも必要な情報だけをキュッと表示させてスッキリさせたかったので上記 2 つの設定は気に入っています。よかったら記事をご覧になった方も試してみてくださいね♪

 

ゆたっしくうにげーさびら！

 

 

こんな記事も書いています