Cocoonは無料のテーマなのにサイト型にしやすいと、かなり評判がいいWordpressテーマです。
僕もその特徴に魅了されて、今でも愛用していますが、トップページをおしゃれにサイト型にしていませんでした。
ちょうどコーディングの勉強をしていたので、参考にしてみてください。
cocoonは「わいひらさん」が作った無料Wordpressテーマ。
無料なのにサイト型と相性がよくて、Twitter上でもかなり評判なんですよね！
今更ながらCocoon入れてみたら最高過ぎた😆Simplicityも使いまくってたけど最高のテーマだね♪
— イタチ@自由に生きたい◢ ◤ (@itachi5511) April 23, 2019
たくさんの人が使っているのを見て、使ってみたのですが、僕はまだサイト型にあまりしていませんでした。
ちなみに前に使っていたのは、アフィンガーという有料Wordpressテーマだったのですが、このテーマの欠点はサイト型にしにくかったんですよね…。
だからcocoonにしたんですよね！
トップページもかなりサイト型にできるし、コーディングの勉強をしていたので、ちょうどいい機会だからちょっと前にサイト型にしました！
初心者でもサイト型にしやすくしているcocoonは最高
無料というのにここまでcocoonの評判がいいのは、html・cssを勉強しなくても、サイト型にできてしまうからなんですよね。
もちろんhtml・css、さらにPHPといわれる知識があれば、サイト型にそれなりにできますが、ブログを始めたばかりの人はそんな知識あるわけがありませんよね？
ブロガーやアフィリエイターの中には、cocoonを愛用している人もいるくらい、初心者でなくても簡単にサイト型にできるので人気があるわけです。
cocoonがどれだけサイト型にできるのか、具体的に紹介しますね。
もちろんコーディングなどの知識は必要ありません。
これらの知識は細かい修正で使います。
サイト型にするには固定ページの設定画面へ
本来トップページは新着記事が並んでいて、「次へ」といったボタンがついているのがいるはずです。
このままでも十分に使えるが、折角サイト型にしたcocoonを使っとるんなら、おしゃれにしたいじゃろ？
ちなみにおしゃれなだけでなく、ブログを訪れた人のためにわかりやすいトップページに変えていると、回遊してくれてSEO的にも効果があるので変えてしまいましょう。
僕もこのデザインにしたら、少しだけかもしれませんが、アナリティクスに変化があったような気がしました。
昨日の夜にブログをシンプルにし直したんだけど、今日の朝の段階で直帰率が下がった気がする✨
左が今日で右が1週間前👀Twitterで報告する前に、検索から来た人が回ってくれてて、70%まで落ちてた⤴️
見やすいデザインにするのは大事みたいだよ‼️おはよっす🤚 pic.twitter.com/7XGIio68NJ
— メガネ🤥const＝ネットビジネス挑戦フリーランス (@sekibiyou1984) April 28, 2019
ちなみにトップページをサイト型にするには、固定ページを選択して、そのページでまずサイト型に変えます。
- 右側の固定ページをクリック
- 新規追加をクリックして希望のイメージを入力していく
- Cocoonのショートタグを使えば便利
Cocoonには専用のショートコードといわれるものがあり、パソコン表示だと2列表示にすることも可能！
さらにサイトの途中で新着記事や、人気記事を簡単に表示させられるんです。
これを使えばPHPといわれるプログラミング言語を使わなくても、サイト型のトップページが作れてしまう素晴らしいショートコード。
使わない手はないしょう。
ここまでできたら画面右横にある設定画面を押して、先ほど設定した固定ページタイトルを選択し、ブログのトップページにしてしまいましょう。
もちろん僕もPHPは勉強していないので、このショートコードにお世話になっているんだよな！
cocoon設定を使ってサイト型にできる内容
固定ページは投稿ページと同じで、ヘッダーの部分など、いじれないところが多くあります。
それらをサイト型にするには「cocoon設定」といわれる部分を利用しましょう。
ここでは様々なサイト型にできるようになっており、できることは以下のようにたくさんあります。
この多さを見たら、cocoonが人気の理由がなんとなくわかるでしょう。
- 文字の種類
- フォントサイズや色
- ヘッダーメニューの表示
- ヘッダー画像
- 通知欄の表示
- アピールエリアの設定
- カルーセルの設定
- フッターやボタンの設定
- カラムの幅
- 背景色
- 関連記事などのカードタイプ
- 目次
- シェアボタンの細かい設定
もちろん細かい設定は以下で紹介するように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はちょっとだけイジッたら、素敵なサイト型トップページができましたよ。
初めての自作ホームページ何とか完成しました✨
僕が所属させてもらってる【サロン未満】というオンラインサロンのホームページを、お願いして作らさせてもらった⤴️
まだまだスキル足りないってことが、わかっただけでも儲けものだ👊もっとサイト作っていくぞ😍https://t.co/6KX7nXKgjG
— メガネ🤥const＝ネットビジネス挑戦フリーランス (@sekibiyou1984) March 15, 2019
ちなみにこれから紹介するコードの中には、スマホ表示のものも出てくるので、以下のコードの中にコードをコピペする必要があります。
/*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といわれるアニメーションができるコードがたくさん入ったプラグインを使い、もっとトップページをおしゃれにしようと思っていました。
でもそれじゃとcocoonを使うメリットの高速表示ができなくなるんじゃ…。
今回のアップデートでGoogleの意図が分からなくなりましたが、前回の時には表示スピードも重視すると言っていました。
そういう理由もあってcocoonに乗り換えたので、今回は使っていません。
もともとcocoonが自由度が高いWordpressテーマというのもあり、カスタマイズの沼にハマらないようにしてくださいね。
サイト型にするのは楽しいけど、そのせいでGoogleに検索順位を落とされたら意味がないですもんね。
