【初心者用】Cocoonのトップページをサイト型にカスタマイズする方法

Cocoonは無料のテーマなのにサイト型にしやすいと、かなり評判がいいWordpressテーマです。

僕もその特徴に魅了されて、今でも愛用していますが、トップページをおしゃれにサイト型にしていませんでした。

ちょうどコーディングの勉強をしていたので、参考にしてみてください。

cocoonは「わいひらさん」が作った無料Wordpressテーマ。無料なのにサイト型と相性がよくて、Twitter上でもかなり評判なんですよね!

 

 

たくさんの人が使っているのを見て、使ってみたのですが、僕はまだサイト型にあまりしていませんでした。

 

ちなみに前に使っていたのは、アフィンガーという有料Wordpressテーマだったのですが、このテーマの欠点はサイト型にしにくかったんですよね…。

メガネさん
メガネさん

だからcocoonにしたんですよね!トップページもかなりサイト型にできるし、コーディングの勉強をしていたので、ちょうどいい機会だからちょっと前にサイト型にしました!

 

スポンサーリンク

初心者でもサイト型にしやすくしているcocoonは最高

無料というのにここまでcocoonの評判がいいのは、html・cssを勉強しなくても、サイト型にできてしまうからなんですよね。

 

もちろんhtml・css、さらにPHPといわれる知識があれば、サイト型にそれなりにできますが、ブログを始めたばかりの人はそんな知識あるわけがありませんよね?

 

ブロガーやアフィリエイターの中には、cocoonを愛用している人もいるくらい、初心者でなくても簡単にサイト型にできるので人気があるわけです。

メガネさん
メガネさん

cocoonがどれだけサイト型にできるのか、具体的に紹介しますね。もちろんコーディングなどの知識は必要ありません。これらの知識は細かい修正で使います。

 

サイト型にするには固定ページの設定画面へ

本来トップページは新着記事が並んでいて、「次へ」といったボタンがついているのがいるはずです。

Google神
Google神

このままでも十分に使えるが、折角サイト型にしたcocoonを使っとるんなら、おしゃれにしたいじゃろ?

 

ちなみにおしゃれなだけでなく、ブログを訪れた人のためにわかりやすいトップページに変えていると、回遊してくれてSEO的にも効果があるので変えてしまいましょう。

 

僕もこのデザインにしたら、少しだけかもしれませんが、アナリティクスに変化があったような気がしました。

 

 

ちなみにトップページをサイト型にするには、固定ページを選択して、そのページでまずサイト型に変えます。

 

  1. 右側の固定ページをクリック
  2. 新規追加をクリックして希望のイメージを入力していく
  3. Cocoonのショートタグを使えば便利

 

Cocoonには専用のショートコードといわれるものがあり、パソコン表示だと2列表示にすることも可能!さらにサイトの途中で新着記事や、人気記事を簡単に表示させられるんです。

 

 

これを使えばPHPといわれるプログラミング言語を使わなくても、サイト型のトップページが作れてしまう素晴らしいショートコード。使わない手はないしょう。

 

ここまでできたら画面右横にある設定画面を押して、先ほど設定した固定ページタイトルを選択し、ブログのトップページにしてしまいましょう。

メガネさん
メガネさん

もちろん僕もPHPは勉強していないので、このショートコードにお世話になっているんだよな!

 

cocoon設定を使ってサイト型にできる内容

固定ページは投稿ページと同じで、ヘッダーの部分など、いじれないところが多くあります。それらをサイト型にするには「cocoon設定」といわれる部分を利用しましょう

 

ここでは様々なサイト型にできるようになっており、できることは以下のようにたくさんあります。この多さを見たら、cocoonが人気の理由がなんとなくわかるでしょう。

 

  1. 文字の種類
  2. フォントサイズや色
  3. ヘッダーメニューの表示
  4. ヘッダー画像
  5. 通知欄の表示
  6. アピールエリアの設定
  7. カルーセルの設定
  8. フッターやボタンの設定
  9. カラムの幅
  10. 背景色
  11. 関連記事などのカードタイプ
  12. 目次
  13. シェアボタンの細かい設定

 

もちろん細かい設定は以下で紹介するようにhtmlやcssの知識が必要になりますが、ここまで大まかな設定ができてしまえば、残りの部分でもかなり簡単に調整ができます。

メガネさん
メガネさん

ちなみに僕はこんな感じでの設定をしています。ヘッダー画像やメニューの色などは、このメニューでほとんど変えられるので、イジってどうなるか試してみるだけでも楽しいですよ。

 

細かくサイト型にするにはhtmlやcssの知識が必要だけど簡単

cocoonはこのメニューだけで、かなりトップページをサイト型にできてしまいます。それでもさすがに、自分の好みにサイト型にするには、html・cssを使って、コードをいじる必要があるんです。

 

少し抵抗があるかもしれませんが、慣れてしまえば簡単ですよ。しかもcocoonで大まかなデザインが完成しているので、コードをイジるのは少しだけ。失敗しにくいので頑張ってみましょう。

メガネさん
メガネさん

トップページをサイト型にするのは、基本的にcssだけ!言ってしまえば失敗したとしても、すぐに元に戻せます。僕が使ったコードをコピペしてマネてみるのもいいですよ。

 

Google chromeの検証機能でクラス名をコピペ

cssのコードを入力してサイト型にするには、ある程度コードの種類を覚えておく必要はあります。だから無理なんだよ…なんて思っている初心者の方は安心してください!

メガネさん
メガネさん

その場合はGoogle chromeというブラウザを使えば、誰でも簡単にサイト型にできますよ。

 

このブラウザには検証機能といわれるものがあり、サイトのhtmlとcssのコードがすべて記載してくれているんです。

 

自分のブログを開いて、右クリックしてみると、1番下に検証という部分をクリックしてみてください。そしたら以下のような画面が出てきます。

 

じつはコードを見るだけでなく、コードをいじれてしまい、そのコードのとおりにサイトが変えられるようにできているんです!

メガネさん
メガネさん

ちなみに右側がcssのコード。こっちをいじれば、デザインが変えられますよ。

 

またcssのコードはGoogleで検索すれば、ほとんどの場合解決するでしょう。「ヘッダー ロゴ 左寄せ」といった具合に検索すると、cssのコードを掲載した記事が出てきてくれますよ。

 

ちなみに僕のブログのコードは、以下でコピペできるようにしておくので、参考にしてみてください。

 

できないことはプラグインをうまく活用すれば知識不要

htmlとcss新たに作りだして、それをトップページで活用してもいいのですが、それだと時間がかかってしまいます。そこで僕は以下のプラグインを使って、かなり時短をしました。

 

 

WordPressには機能を増やすための、「プラグイン」というものがあります。その中にショートコードを入力すれば、その機能が簡単に使えてしまうShortcodes Ultimateを使いましょう。

 

かなり前からあるプラグインみたいで、使い方についてはGoogleで検索すれば、たくさん出てくると思います。

 

僕はこの機能の中のボタンというものを使いました。ちなみに使ったのは以下のショートコードです。

 

[su_button url="https://megane3-zakki.info/category/job" target="blank" style="flat" background="#1E73BF" color="#ffffff" size="10" wide="yes" center="yes" radius="0" icon="icon: window-restore"]記事一覧へ[/su_button]

 

これがショートコードなのですが、以下のように画面に合わせて選択するだけなので、初心者でも簡単にボタンを制作できるでしょう。

 

Cocoonの機能と組み合わせて使えば、かなり簡単にトップページがサイト型にできるのがわかりましたか?プラグインを使えばデザインがきれいにできますよ。

 

cocoonのトップページをcssを使ってサイト型にした方法を紹介

上記では大まかなトップページのサイト型にする方法を紹介しましたが、現在のこのブログのcssのソースコードを紹介しておきます。

 

何度か記事にしていますが、html・cssを勉強して自作サイトを作った経験があるので、Wordpressでも通用するかと思ってトップページをイジってみました。

メガネさん
メガネさん

そしたらcocoonの機能がよすぎて、cssはちょっとだけイジッたら、素敵なサイト型トップページができましたよ。

 

ちなみにこれから紹介するコードの中には、スマホ表示のものも出てくるので、以下のコードの中にコードをコピペする必要があります

/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/

}

 

これはタブレットのサイズとなりますが、それより小さい部分は適用されます。もちろんスマホだけ微調整したい場合は、その下にある以下のコードにコピペするだけで大丈夫です!

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

}

 

ヘッダーロゴの位置はposition:absoluteで解決

cocoonはレスポンシブに対応していますが、スマホのページがあまり気に行っていませんでした。

 

それはトップページのロゴが中央揃えになっており、アコーディオンメニューも少し変えたかったんですよね…。

ヘッダーロゴの位置が微妙すぎた

 

 

そこでcssを使ってこれを少し変えてみました。ヘッダーの位置をpositionという位置を変更するコードを利用し、左寄りにさせます。

#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
background-color: #fff;
position: absolute;
top: 5px;
left: 10px;
}

 

そしてメニューのボタンに一緒についている「MENU」という文字を消すために、以下のコードを追記しました。

 

ついでにメニューボタンの大きさを変更!これでヘッダー部分のカスタマイズにはほぼ完成です。

.slicknav_menu .slicknav_menutxt {
display: none;
}
.slicknav_menu .slicknav_icon {
margin: 0;
font-size: 32px;
}

 

ヘッダーメニューをマウスオンしたらアニメーション

次はパソコンのナビゲーションメニューに、少し動きを出すためのcssコードになります。

 

じつはデフォルトでもアニメーションがついており、フワッと少し色が出るようになっているんですよね。これだけでは寂しいので、フワッと下線を表示させるようにしました

#navi .navi-in a:hover{
border-bottom: 2px solid #000;
transition: .3s;
opacity: 1;
}

 

アピールエリアの画像幅を変更

これは僕だけでのバグなのかもしれませんが、アピールエリアに画像を設定しても、うまく表示されませんでした。

 

何が原因かchromeの検証機能を見ていると、どうやら画像の高さがゼロになっており、設定すると表示されました。

 

ついでに全体のバランスをとるために、それなりの高さに設定!画像も適切な高さにしています

.appeal .appeal-in {
min-height: 400px;
}

 

そしてcocoonのアピールエリアでは、リンク付きのボタンも追加できるので、上記で紹介したcocoon設定でボタン内のテキストを入力しましょう。

 

このままだと表示が崩れてしまうので、cssで表示位置などを微調整してください。

.appeal-content .appeal-button {
background-color: #317fc4;;
padding: 10px 2em;
position: relative;
bottom: -80%;
}

 

ちなみにbottomで上下の位置を変更できますが、レスポンシブだと少しずれてしまうので、chromeの検証機能を使って確認しながら微調整してください。

 

cocoonなら高速化が可能!デザインのやり過ぎは良さがなくなる

本当はjqueryといわれるアニメーションができるコードがたくさん入ったプラグインを使い、もっとトップページをおしゃれにしようと思っていました。

Google神
Google神

でもそれじゃとcocoonを使うメリットの高速表示ができなくなるんじゃ…。

 

今回のアップデートでGoogleの意図が分からなくなりましたが、前回の時には表示スピードも重視すると言っていました。そういう理由もあってcocoonに乗り換えたので、今回は使っていません。

 

もともとcocoonが自由度が高いWordpressテーマというのもあり、カスタマイズの沼にハマらないようにしてくださいね。

メガネさん
メガネさん

サイト型にするのは楽しいけど、そのせいでGoogleに検索順位を落とされたら意味がないですもんね。

この記事を書いたのは…

メガネさん

元美容師webライター

元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。

コーディング
スポンサーリンク
メガネ通信