【Cocoon】固定ページを使ってトップページを作る!【コピペOK】

Cocoon

どうも。ままん(@maman_selfish)です。

相変わらずカスタマイズ沼の中にいます。笑

Cocoonはそのままでも十分活用できますが、わたしのようにデザインが決まってないとヤル気でないぜ!!という方も、カスタマイズについての記事がすでにたくさんあるので、個性を出しつつおしゃれなブログを作れるのが素敵なポイントだと思います。

今回は、わたしのように雑記ブログを運営している方には特におすすめのカスタマイズを紹介します。

Cocoonデフォルトのトップページは最新記事がダーッと並んでいますよね。

デフォルトの設定でも運用にあたっては何の問題もありませんが、なんとなく何を書いているブログなのかわかりにくいなぁと感じていました。

そんなときに、わたしがやりたかったことをまとめて網羅してくれてるカスタマイズを紹介している方を発見して、速攻で準備に取り掛かったんですよね。

ブログの顔であるトップページですから

やっぱおしゃれにしたくない!?
回遊率とか上がったりしたら最高じゃない!?

ってことで、Cocoonの固定ページを使ってトップページを作る魔改造開始です!!

基盤のコピペは置いてありますが、自分でする作業も当然あります。
できれば後述する参考ページを何度か読んでいただいて、面倒な部分もあることを把握した上で作業に入ることをおすすめします。
できる限り手間なくできるように修正した上でHTMLコードを貼ってますが、貼ったら終わりというわけにはいかないのでご了承ください。
スポンサーリンク

まずはSpecialThanks!はまちゃん氏ありがとう!

早速魔改造に進みたいところですが、これだけは最初に言わせてくれないか・・・

ワイ、ほぼコピペしただけやねーーーんっ!!!!!

偶然見つけた、はまちゃん氏(@wakuwakukeigo)のブログ【婿養子の島根移住ブログ】にあったHTMLコードをコピペしてちょっと改造しただけなんですよ。

・・・改造っつっても通常のボタンを囲みボタンにしたりしただけや・・・

このカスタマイズで素晴らしいと思ったところは、なんと言ってもカテゴリ別の新着記事をきれいに並べてくれているところなんですよね。

このカスタマイズなら、どんなカテゴリでどんな記事を書いているブログかがとてもわかりやすく、そしてなによりすっきりキレイにシュッとして見えます。

すっごい印象が変わるのでこのカスタマイズは超おすすめなんですが、基盤を作ってくださったのはあくまでもはまちゃん氏(@wakuwakukeigo)ということで勝手にSpecialThanksです。笑

この記事の公開についても、快くOKしてくださってありがとうございました^^

参考 【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込
スポンサーリンク

固定ページをトップページ化するために必要な手順

細かい手順については、【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法より親切に説明できる自信がないので丸投げしたいところですが、最低限必要な情報はこちらでも書いておきます。

トップページカスタマイズの大まかな手順

かなりざっくりとですが、カスタマイズの手順をまとめてみました。

  1. 固定ページを新規作成
  2. 後述するHTMLコードをまるっとコピペする
  3. 必要であれば画像を準備し、必要箇所を修正する
  4. 公開前に50回くらいプレビューして細部まで確認する
  5. 固定ページを公開後WordPressの設定でトップページ化する

相当ざっくりですが、これだけです。

後述するHTMLコードでは、はまちゃん氏(@wakuwakukeigo)が記事を書いた後に更新されたっぽい機能を活用したHTMLコードに変更してあります。

何度でも言うけど通常のボタンを囲みボタンにしたりしただけやな。

ですので、後述するHTMLコードをまるっとコピペして、必要であれば画像を挿入し、適切な文章やURLに修正していただければ、とりあえずスッキリ見やすくシュッとしたトップページにはなりますよ。

ちなみに、わたしが実際に使っている固定ページに書いたHTMLコードを後述しています。

まるっとコピペして使うのもOKですが、ご自分の好みやブログの内容に応じて更なるカスタマイズを加えていただければ、もっと素敵だと思います。

そう言っとかないとワシの個性も死ぬしな。(真顔)

次にHTMLコードを記載しますので、新規作成した固定ページのテキストエディタに貼り付けて作業を進めるようにしてくださいね。

スポンサーリンク

いざ魔改造!固定ページに貼るHTMLコードを持って行くがいい!

はい!じゃあHTMLコード貼りまーす!コピペしてくださーい!

はい!これをコピペしたら、下記の方法で正しく貼れているか確認してください。

  1. 固定ページのテキストエディタにコピーを貼る
  2. なにもいじらず下書きに保存
  3. プレビューする

と、こんな感じになるはずです。

  1. この画像では【カテゴリ4】までしか表示がありませんが、本当はもう一段あって【カテゴリ6】までのコードになっています。
  2. これはこえだめでの表示ですので、タグ装飾はご自分の設定しているh2・h3タグの装飾になります。
  3. 画像ではこえだめの最新記事が出ていますが、ご自身のブログの最新記事が出ます。

また、わたしはボタンの色をgreenにしていますが、ブログの雰囲気に合わせて変更するといいですね。

ボタンの色を変更するには、まず【btn-wrap-green】という部分を探していただいて、色(green)の部分だけを修正したらOKです。

標準のボタンについては、Cocoonの取説に記事がありますので、どんな色があるのか探してみてくださいね。

こちらの記事は普通のボタンについての記事なので、厳密に言うとこのコードで使っている囲みボタンとは違います。
まるっとコピーするとうまくいかないと思うので、色(greenなど)の部分だけ変更するようにしてください。
ただ、使用している色のコードについては同じみたいなので、ボタンの色を変えたい方に向けて色やコードの参考になればという意味でリンクを貼らせていただいています。
記事作成に使える拡張スタイル。ボタン編。
スタイル拡張ボタンの使い方。サンプルコードと表示例です。
スポンサーリンク

追記や修正が必要な箇所の解説

ここについてははまちゃん氏の記事と同じ内容になる箇所が多いのでどんどん省きます!

プレビューしてみて気になる日本語はおおよそ変えてもらってOKなところですので、はまちゃん氏の記事を見ながら進めていただいたらいいと思います。

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込
カテゴリ新着記事の設定方法やサイドバーのカスタマイズまで網羅されているので、追記や修正についてはわたしが言うことは特にありません。
はまちゃん氏の言うことを聞いてください。笑
もしわからないところがあったら、ままんのTwitterにDMくれたら可能な限りお答えしますよ♪
スポンサーリンク

トップページ内でのみCSSを変更する

ここまでくると大体の形はできてきますが、よーく見ると

これトップページにはいらなくなーい?!

って部分があります。

  • 固定ページのタイトル
  • シェアボタン
  • フォローボタン
  • 投稿日
  • 更新日
  • 投稿者名
  • モバイルグローバルメニュー

これらを一掃するHTMLコードも後述しますので、気になる方はコピペして持っていってくださいね。

はまちゃん氏の記事にも同じようなHTMLコードがありますが、追記する場所とHTMLコードの内容を少し変更しています。どちらの方法でもうまくいきますので、お好きな方を選んでいただければいいと思いますよ。

まずはコピーしたコードを貼る場所から解説!

Cocoonの機能として、記事単体でCSSカスタマイズができるようになっています。

この機能を使えば、トップページの雰囲気に合わせたトップページ限定のカスタマイズを組むことも可能なんですよ。

記事投稿画面の下の方にカスタムCSSという部分がありますので、ここにHTMLコードを書いたらOKです。

スマホでの画面ですが、ここの部分に書き込んでいきましょう。

カスタムCSSのコードを貼るよ!もって行くがいい!

はーい!先程のいらない部分を一掃するCSSコードを置いておきまーす!
コピペして固定ページのカスタムCSSに貼ってくださーい!

ひとつずつ消すCSSコード全部いっぺんに消すCSSコードと両方ありますので、好みで持って行ってくださいね。

これは追記も修正も不要なので、必要な部分をペペッとコピーしてパパッとカスタムCSSに貼ったらおしまいです。

より素敵なボタン色に変更したいときのCSSコードも置いておくよ!

はーい!コード貼りまーす!
標準のボタンの色よりもっと個性出して生きたい方だけ持っていってくださいどうぞーっ!!

ここでgreen!green!て言ってるところは、実際に選んだボタンの色のコードに修正してお使いください。

また、#●●●●のところは色見本などからいい感じの色のコードを引っ張ってきていただけたらOKです。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

というか!これに関しては自作だから自信ないのよね!!

わたしのページでは機能してるから大丈夫だと思っているけれども!!!笑

不具合があったら光の速さで修正or削除するので教えてください!!!

スポンサーリンク

まとめ

内容が重複するとアレかな・・・と思って詳細の解説ははまちゃん氏に丸投げしました。

ホントすいません。笑

このトップページについては見やすさが半端ないですし、記事からトップページに来てくれた方にも親切な設計になっていると思います。

実はわたしも、つい先日トップページ化させたばかりなんですよね。

だから、回遊率の変化はまだわかりません。

でも、ここに置いたHTMLコードなどを参考にカスタマイズの沼にお越しいただければうれしいなと思います^^

コメント

  1. けろら~ より:

    ままんさん、はじめまして。

    こちらの記事を参考に、ブログトップページをカスタマイズさせていただきました。

    カスタマイズを始めるとあまりにも没頭しすぎる性分のため、最近は、配布スキンを利用し、抑えていたのですが…

    こちらの記事を読ませていただいてるうちに、カスタマイズ熱が久しぶりに上がってしまいました。(笑)

    おかげさまで、トップページの仕上がりに大満足です。
    簡単にトップページをカスタマイズできる記事を書いて下さって、本当にありがとうございます♪

    • ままん より:

      けろら~様
      はじめまして!コメントありがとうございます(●︎´▽︎`●︎)

      あら!カスタマイズの沼に導いてしまったようですね・・・笑

      まだまだ至らない点もあったのでは・・・と少し心配ですが、うまくいったようでよかったです!!

      カスタマイズ楽しいですもんね!←

      これからも少しでも楽にカスタマイズが楽しめるような記事を書いていけるように頑張ります!(*´꒳` *)