Cocoonブログのトップページをカスタマイズ!苦労や失敗したポイントがこれだ!

ブログのトップページカスタマイズで苦労した話ブログ運営

こんにちは。しるべ(@robotra_blog)です。

当ブログ「ロボトレ」はこの記事で42記事目になります。

そこでテーマはブログトップページのカスタマイズについて書いていこうと思います。

ブログの記事数が結構増えてきたけどトップページが新着記事ばかりだとどういうブログなのかがわかりにくいからアクセスしてくれた読者のかたが離脱しやすいんじゃ?過去に書いた記事も埋もれてしまうのはもったいないなぁ・・・

記事数が増えてくるとこんな悩みが出てきませんか?

解決する方法はブログのトップページをブログ型→サイト型へ変えることです。

その具体的な方法について詳しく解説している素晴らしい記事がありますので実際にカスタマイズをする際はこちらをぜひチェックしてみてください。

はまちゃん(@wakuwakukeigo )さん
【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法という素晴らしすぎる神記事を書いてくれています。
しかもブログ初心者にとって嬉しいCSSのソースまで公開。
コピペでそのまま使えるのでカスタマイズがサクサク進みます。

僕は実際に上記の記事を参考にしてトップページをカスタマイズしました。

しるべ
しるべ

画像つきでとてもわかりやすかったです。プログラミングとか詳しいことがわからない人でもソースをコピペできるから大丈夫だと思います

実際にトップページをカスタマイズしていく上で気づいたことやコツがあったのでこの記事ではそのあたりを中心に書いていこうと思います。

当ブログのテンプレートは無料の「Cocoon」を使っています。
はまちゃんさんが紹介しているカスタマイズは固定ページにHTMLで表示させる方法なのでテンプレートが違ってもできます。
※表示について検証したわけではないのでご了承ください

トップページがどう変わるのか?

ロボトレトップページ

縮小表示したので見づらいかも・・・。

これは当ブログ「ロボトレ」や上記で紹介している「婿養子の島根移住ブログ」のトップページを見てください。(リンククリックで各ブログのトップページが開きます)

通常だとブログのトップページは新しい記事がずらっと表示されます。

この状態をカテゴリごとに新着記事が表示されるように変更したのがカスタマイズの内容です。

その際のメリットは以下の通り。

サイト型トップページのメリット
  • ブログがどういうカテゴリによって構成されているかがパッと見でわかるため読者が迷わなくなる
  • カテゴリで細分化することによって新着記事の表示期間が通常よりも長く記事が埋もれにくくなる

初めて立ち寄った本屋をイメージするとわかりやすいかも。

入口から自分が探している本のカテゴリ(ジャンル)コーナーを探しませんか?

ビジネスとか小説とかコミックスとか。

しるべ
しるべ

本屋に限らずお店ってお客さんが探しやすいように高い位置にジャンルの看板ぶら下げたりしてますよね。あんな感じ

カスタマイズすることによってサイトに看板が設置され、読者が読みたい記事に辿りつきやすくなります。

あとは見た目がカッコいいです。笑←自己満

カスタマイズでつまづいたポイントを解説

ここからは僕がカスタマイズした際につまづいたポイントを解説します。

しるべ
しるべ

はまちゃんさんの記事に書かれていない部分ですので参考になると思います

つまづいた箇所がいくつかあるので同じ過ちをしないでくださいね。笑

各カテゴリ画像は背景色なしがおすすめ

ロボトレトップページ画像のアップ

 

ここで使っているNEWやロボットの画像です。

背景色ありとなしを試したところ、なしの方が統一感がありました。

しるべ
しるべ

ブログの背景色を設定しているかたが多いと思います。それと合う色で目に優しい色だったらありでも大丈夫なはず!

僕がトップページで使ってる画像はすべて背景色なしのPNG形式です。

全部同じ色ならまだしも3色くらい違う色になると見てられないレベルになります。

読んでくれる読者が疲れない配色を心がけましょう。

各カテゴリ画像は同じ大きさがおすすめ

ロボトレトップページ記事一覧ボタン

各カテゴリ一覧を表示させるボタン、左右で同じ位置(高さ)に揃ってますよね?

しるべ
しるべ

う~ん、我ながら統一感があって素敵だww

これを同じ位置にするには上記で説明している各カテゴリ画像を同じサイズにする必要があります。

縦横の比率が1:1ならOK。つまり正方形。

PCでの表示も考えると最低でも500px×500pxくらい。

(このあたりは画像を入れた後でプレビューなどでご確認ください)

はまちゃんさんのカスタマイズ記事の中でも紹介されていますが、僕がカテゴリの画像やアイキャッチ画像に仕様しているのがこのサイト。
「FLAT ICON DESIGN」
JPG、PNGはもちろん背景色の透過も選べる神素材サイトです。

このボタンの位置が左右でズレてるととにかくカッコ悪い!

そしてめちゃくちゃ気になる!!(あくまでも僕個人の感想です・・・汗)

スマホの場合は縦に表示されるので気にならない人はそのままでも全然OKだったりします。

カテゴリの数を増やす時はHTMLをコピペ

これは単純に僕のHTMLの知識が低すぎることが原因です。

コピペする範囲がわからずカテゴリを2つ増やすのに苦労しました・・・。

しるべ
しるべ

そもそもカテゴリが8つって多くね?という声があるかもしれませんが・・・そんなの知りません。笑

はまちゃんさんが公開してくれているHTMLのコードはカテゴリ6つまでのため、それで対応できるならサラっとできちゃいます。

僕はコピペ→プレビュー確認を数回繰り返してやっと上手くいきました。

表示したいカテゴリが6つ以上の場合は画像やテキストを入れる前にHTMLコードをコピペしておくといいです。
(僕は画像やテキストを入れた後にやったので余計に苦労しました)
先に外側(デザイン)をしっかり設置して決められた場所に画像やテキストを埋め込んでいくイメージでOK。

こういう作業をやりながらHTMLやCSSのことを少しずつ勉強していくといいと思います。

本業でも役に立つため最近勉強中です。

簡単なプログラミングも実践形式で学べるブログって最高ですよね。

ブログのカテゴリとパーマリンクの設定

ワードプレス管理画面

これも僕のズボラさが原因の話なんですけど・・・。

このカスタマイズをしている時点ではいくつかのカテゴリでパーマリンクを設定していませんでした。

カテゴリ名の日本語がそのままスラッグに入っている状態。

しるべ
しるべ

その場合どうなるかというと・・・

各カテゴリの一覧ページを表示した時のURLがとんでもないことに。

URLがこんな感じになります。
例:https://ブログのドメイン/2%ebb2%Fec2%Ens2%ccc2%erb・・・

これはあくまでも表示上の問題でGoogleの検索順位などには影響しないと言われてます。

しるべ
しるべ

結構前だったと思いますがGoogleが影響はしないと回答していたはず

僕はどうしてもリンクを貼った時に見た目がスパムっぽくなってしまうのがイヤでこの時に使ってるカテゴリすべて半角英語に変えました。

このカスタマイズをするとカテゴリ一覧への導線が今までよりもハッキリするためスパムっぽい表示が気になるかたは先にカテゴリのパーマリンクを設定することをおすすめします。

ブログのトップページをカスタマイズしてみて

数か所つまづいたわけですが無事にトップページをサイト型へ変更することができました。

はまちゃん(@wakuwakukeigo )さんの記事のおかげです。

しるべ
しるべ

自分1人であんなHTMLコードとか書けませんし・・・。コピペ万歳

ブログ初期の頃、デザインにこだわったことでブログへの愛着がさらに強まった話を以前記事にまとめました。

【18記事のブログ初心者だからこそ言える】ブログで最初にこだわって良いこと
ブログを始めようとして情報収集をされるかたは多いと思います。もちろん僕もたくさん情報収集しました。ただ、情報の量が多すぎたり凄いブロガーさんが何人もいたりして、いったいどれが正解なのと迷うことってありませんか?本質さえ意識できれば迷う必要なんてないんです。

記事でもお伝えしていますが僕はブログ初期にデザインに力を入れるのってありだと思います。

理由は

愛着がわく → 継続するモチベーションになる

からです。

ブログは継続することが一番難しいと言われてます。

自分が継続したくなるような環境を作るって考えたらカスタマイズ作業も楽しくなりますよ。

さあ、この記事を読んだあなたも今日からさっそくトップページのカスタマイズを始めてみよう。笑

コメント