2019.08.15みなさんこんにちは!あおな(@aonalog)です。この記事ではブログを始めて3ヵ月の超初心者ブロガーである私でもできた、ブログのトップページを記事一覧型からサイト型にするまでを画像つきで説明していきます。今回、トップページをサイト型に変更するにあたり、はまちゃん様(@wakuwakukeigo)の記事を参考にさせて頂きました。『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。僕も機能とデザインに惚れ込wakuwaku-keigo.comこの記事には、なんとCSSコピペOKのテンプレートが示されていてコピペするだけでトップページをサイト型に変更できちゃうんです!CSSやHTMLの知識0の私でもできた方法で、ブログトップページをちょっとオシャレにカスタマイズしちゃいましょう!スポンサーリンク目次トップページをサイト型にしようと思った理由あおなろぐトップページのBefore⇒AfterあおなろぐトップページのBefore⇒途中まであおなろぐトップページのアレンジ1:最新記事を上部中央に表示あおなろぐトップページのアレンジ2:各カテゴリごとに背景色を追加あおなろぐトップページのアレンジ3:全野球記事一覧に飛ぶボタンを設置あおなろぐトップページのAfterブログ初心者がトップページをサイト型にしてみた【Cocoon】まとめトップページをサイト型にしようと思った理由ブログを開設して3ヵ月が経ち(2019年8月15日現在)、より良い記事を書くためにいろいろな方々のブログを読むようになりました。その中でトップページが見やすかったり目的の記事を探しやすいブログはすべて『サイト型』のブログということに遅ればせながら気づいたのです。「でもCSSやHTMLの知識なんてないし...」そう思ってググってみると、はまちゃん様の記事を発見!とてもわかりやすく丁寧に説明されており、かつCSSコピペOKなテンプレート付きなため知識のない私でも簡単にトップページをサイト型にすることができました!あおなろぐトップページのBefore⇒Afterここからは、私が当ブログのトップページを変更した過程を画像つきで紹介していきます。Beforeはこんな感じでした。うん、普通にわかりづらい。野球特化型の雑記ブログなので、新着記事の一覧だけではどんなサイトなのかわからず他の記事を探すのも一苦労。そこで、はまちゃん様の記事を参考にまずはCSSテンプレートをコピペ、手順通りに進めるとこんな感じになりました。うん、なかなかいい感じ。はまちゃん様は参考記事にて、このように仰っていました。パクるだけじゃなく、オリジナリティがあるトップページにしてくださいね。この記事を読んだ全員が、僕と同じトップページにしたら僕のトップページの個性が死ぬしね。引用:【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法いやいや、ほんとその通りですよね。そこで自分なりのアレンジを加えてみることにしました。あおなろぐトップページのアレンジ1:最新記事を上部中央に表示まず、当サイトの全カテゴリにおける最新記事を上部中央に表示させるようにしました。新しい記事を乗せることは更新しているアピールにもつながるため大事ですよね。見出し下にスペースを作り、そこにここまでと同じ要領で全カテゴリ中の最新記事を表示させるようにしただけです。記事タイトルのフォントサイズが小さすぎる...。変更方法をググってみたのですが見つけることができず。今後勉強していこうと思います。背景が真っ白だとなんとなくまとまりに欠ける気がしたので背景色をつけてみました。ビジュアルモードで色を付けたい範囲を選択してスタイル→ボックス(案内)から好きな色を選ぶだけです。当サイトは野球特化型の雑記ブログですので、野球関連の記事が多数あります。トップページではその野球をさらに4つのカテゴリにわけて配置しましたので、全野球記事にも飛べるようにボタンを設置しました。これもまたまたやり方は簡単。スタイル→ボタンから好きな色とサイズを選んで作成するだけです。あおなろぐトップページのAfterそんな感じで当サイトのトップページはこうなりました。Beforeと比べるとカテゴリ別に記事が探しやすくなったかなーと思います。フォントサイズや配置などまだまだ納得いかない点が多いので、今後勉強していきます!ブログ初心者がトップページをサイト型にしてみた【Cocoon】まとめここまで、超初心者ブロガーの私がトップページをサイト型に変更するまでをまとめてきました。今回は、はまちゃん様(@wakuwakukeigo)の記事を参考にさせて頂きましたが、初心者の私でも非常にわかりやすく、簡単にトップページをサイト型に変更することができました!はまちゃん様、ありがとうございました!みなさんもはまちゃん様の記事を参考にトップページをサイト型にしてみてくださいね。『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。僕も機能とデザインに惚れ込wakuwaku-keigo.comスポンサーリンク以上、あおなによる『ブログ初心者がトップページをサイト型にしてみた【Cocoon】』でした。最後までお読み頂きありがとうございました。ブログ毎日更新を2ヵ月継続した結果【毎日更新は正義】この記事では、ブログ毎日更新を2か月間継続した結果を報告します。結論から言うと、2ヵ月連続でブログを毎日更新した結果、先月と比較してPVは3倍、アドセンスによる収益は8.4倍となりました。ブログ毎日更新は初心者には正義と言えます。2019.11.04雑記ビール券をリサイクルショップに買い取ってもらった【実際いくら?】この記事では、北海道札幌市でビール券をリサイクルショップに実際に買い取ってもらった体験談を交えながら、ビール券の買取について紹介しています。2019.08.16雑記BackWPUpで自動バックアップ【WordPress初心者】この記事ではWordPress初心者でも簡単にできる、プラグイン『BackWPUp』を使った自動バックアップの方法をご紹介しています。先日、ネットサーフィンをしていると『2019年間ビジターアンケート』という意図しないページに飛んでしまい調べてみたところ、個人情報を得るための詐欺ページでした!どんなページなのか解説していきます。2020.03.15雑記3分で特定ページのみSNSボタンを消す方法【Cocoon】この記事ではプログラミング未経験者の私でもできた、『コピペで簡単にできるCocoonで特定のページのみSNSボタンを消す方法』をご紹介します。この記事の方法に沿って作業すれば、3分で特定ページのみSNSボタンを消すことができます。2019.09.25雑記ブログ初心者が1ヵ月毎日更新をしてみた結果【運営報告】この記事では、ブログ初心者が1ヵ月毎日記事を更新してみた結果をご報告します。結論から言うと、初心者は絶対に毎日更新したほうが良いです!私は9月に毎日更新を実践してみて、月間PV数が8月286PVから9月1224PVまで増えました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールこのページを管理している人あおな9歳で野球を始めて以来、その魅力に取りつかれている27歳、男です。野球をプレーするのはもちろん、見るのも大好きで、プロ野球や高校野球を中心にTVや現地にて観戦したりしてます。観戦するだけでなく、プロ野球のデータを収集、解析するのが趣味です。ご指摘ありがとうございます。修正させて頂きました。あおなろぐ.タイトルとURLをコピーしました。