みなさんこんにちは！あおな（@aonalog）です。
この記事ではブログを始めて3ヵ月の超初心者ブロガーである私でもできた、ブログのトップページを記事一覧型からサイト型にするまでを画像つきで説明していきます。
今回、トップページをサイト型に変更するにあたり、はまちゃん様（@wakuwakukeigo）の記事を参考にさせて頂きました。
参考記事はこちらから↓
この記事には、なんとCSSコピペOKのテンプレートが示されていてコピペするだけでトップページをサイト型に変更できちゃうんです！
CSSやHTMLの知識0の私でもできた方法で、ブログトップページをちょっとオシャレにカスタマイズしちゃいましょう！
トップページをサイト型にしようと思った理由
ブログを開設して3ヵ月が経ち（2019年8月15日現在）、より良い記事を書くためにいろいろな方々のブログを読むようになりました。
その中でトップページが見やすかったり目的の記事を探しやすいブログはすべて『サイト型』のブログということに遅ればせながら気づいたのです。
「自分のブログのトップページも早く変えないと！」
「でもCSSやHTMLの知識なんてないし…」
そう思ってググってみると、はまちゃん様の記事を発見！
とてもわかりやすく丁寧に説明されており、かつCSSコピペOKなテンプレート付きなため知識のない私でも簡単にトップページをサイト型にすることができました！
あおなろぐトップページのBefore⇒After
ここからは、私が当ブログのトップページを変更した過程を画像つきで紹介していきます。
あおなろぐトップページのBefore⇒途中まで
当ブログの変更前トップページ = Beforeはこんな感じでした。
うん、普通にわかりづらい。
野球特化型の雑記ブログなので、新着記事の一覧だけではどんなサイトなのかわからず他の記事を探すのも一苦労。
そこで、はまちゃん様の記事を参考にまずはCSSテンプレートをコピペ、手順通りに進めるとこんな感じになりました。
うん、なかなかいい感じ。
ですがはまちゃん様は参考記事にて、このように仰っていました。
パクるだけじゃなく、オリジナリティがあるトップページにしてくださいね。
この記事を読んだ全員が、僕と同じトップページにしたら僕のトップページの個性が死ぬしね。笑
いやいや、ほんとその通りですよね。
そこで自分なりのアレンジを加えてみることにしました。
あおなろぐトップページのアレンジ①：最新記事を上部中央に表示
まず、当サイトの全カテゴリにおける最新記事を上部中央に表示させるようにしました。
やはり新しい記事を乗せることは更新しているアピールにもつながるため大事ですよね。
やり方は簡単。見出し下にスペースを作り、そこにここまでと同じ要領で全カテゴリ中の最新記事を表示させるようにしただけです。
ただ、記事タイトルのフォントサイズが小さすぎる…。
変更方法をググってみたのですが見つけることができず。今後勉強していこうと思います。
「わかるよ！」って方いましたら是非教えてください！
あおなろぐトップページのアレンジ②：各カテゴリごとに背景色を追加
背景が真っ白だとなんとなくまとまりに欠ける気がしたので背景色をつけてみました。
これもやり方は簡単。ビジュアルモードで色を付けたい範囲を選択してスタイル→ボックス（案内）から好きな色を選ぶだけです。
あおなろぐトップページのアレンジ③：全野球記事一覧に飛ぶボタンを設置
当サイトは野球特化型の雑記ブログですので、野球関連の記事が多数あります。
トップページではその野球をさらに4つのカテゴリにわけて配置しましたので、全野球記事にも飛べるようにボタンを設置しました。
これもまたまたやり方は簡単。スタイル→ボタンから好きな色とサイズを選んで作成するだけです。
あおなろぐトップページのAfter
そんな感じで当サイトのトップページはこうなりました。
Beforeと比べるとカテゴリ別に記事が探しやすくなったかなーと思います。
ただフォントサイズや配置などまだまだ納得いかない点が多いので、今後勉強していきます！
ブログ初心者がトップページをサイト型にしてみた【Cocoon】まとめ
ここまで、超初心者ブロガーの私がトップページをサイト型に変更するまでをまとめてきました。
今回は、はまちゃん様（@wakuwakukeigo）の記事を参考にさせて頂きましたが、初心者の私でも非常にわかりやすく、簡単にトップページをサイト型に変更することができました！
はまちゃん様、ありがとうございました！
みなさんもはまちゃん様の記事を参考にトップページをサイト型にしてみてくださいね。
以上、あおなによる『ブログ初心者がトップページをサイト型にしてみた【Cocoon】』でした。最後までお読み頂きありがとうございました。
コメント