このブログのテーマを無料テーマ最強の「Cocoon」にアップデートして2週間が経ちました。
基本的には前身の「Simplicity」から引き継ぐ要素が多いのでHタグなどはコピペして継承しましたが、色々いじる中でやっぱりこれが無料ってすごいなって思ったので、自分のための健忘録的意味も含めて、
「初心者におすすすめしたい理由」
と
「最初のカスタマイズ」
について紹介しようと思います。
- ブログを始めるにあたり無料Wordpressテーマを探している人
- Cocoon最強と聞いて口コミを探している人
- Cocoonの噂を聞いてインストールしたけどカスタマイズで悩んでいる人
- すでにブログをバシバシやってる人
- Cocoon以外のテーマで満足している人
- Cocoonを使っているが知識豊富でカスタマイズも余裕でできている人
WordPressってインストールだけじゃダメなのか
有料のテーマだと結構買ったまま使えることも多いし、
無料テーマでもデザインにこだわりがなければそのまま使えるよ
じゃあこだわりがあるってことか
そりゃあそれなりにねっ
Cocoonが最強おすすめテーマと思う理由
ブログをやる時、Wordpressでやるのがおすすめな理由は割愛しますが、Wordpressでやることを決めたら次に選ぶべきはテーマです。
選ぶ際に大事なのは、
「何のためにブログをやっているか？」
です。
強い想いがあって何かを発信したい！とか、ビジネス的な意図で作るとか、明確なものがあれば楽です。
そんな中でも、”自分らしさ”とか”セルフブランディング”なんてことが頭にある方だったらデザインとか、見た目の印象を気にするのが自然ですね。
一方、なんとなく始めるとか、流行ってるから、とかそんなふわっとした理由の場合はWordpressではなくはてブロとかで始める方がいいかも知れません。
ボクの場合はセルフブランディングもあるし、ブログ名の通り自分の”記録”（＝LOG）をつけたくてやっているので、自分らしさを表現する考えがあります。
後は機能面です。
例えばアフィリエイト用なら商品紹介のしやすさが大事だし、写真ブログなら写真の見栄えとか、見やすさが大事です。自分の載せたいことをより高水準で載せられる様にできるテーマを探し、導入することになります。
それらの視点でテーマを見たとき、Cocoonはやっぱり最強です。ボクは比較検討の意味で有料テーマもいくつか使ってみたことがありますが、結果的にCocoonを選びました。
ボクがすごいと思う点
- Cocoon設定という項目内だけでほとんど全部設定できる
- 豊富なボックス、ショートコードによる美しい記事執筆のための機能
- 無料なのにフォーラムで即レスもらえる
- SEOや高速化が組み込まれている
本当に細かく上げていくとこれが無料でという意味ですごい点がもっとあると思いますが、ボク的にはこの4点が特にお伝えしたい点です。
確かに無料テーマの多くはカスタマイズ前提なところがあり、また、Wordpressやcssなどの知識ゼロだときつい部分がありますが、一方で、これだけ色々な機能が無料で実装されているテーマだと、とりあえずブログを開設したいという人には親切すぎます。
入れただけで無数のカスタマイズが用意されていて、タブごとにポチポチやっていけばほぼほぼ出来上がるのでcss知識はゼロでも出来上がります。
中でもボックスはかつてはCSSで作っていたのでそれが不要となったのはありがたいです。
例えば、
↑、「ポイント」についてハイライトしたいときのボックスですが、
わいにはよくわからんけど、
とりあえず初心者でも安心なテーマなのね
選んで間違いなしだと思うよ
じゃあちゃんと聞く
よろしい、じゃあ今日はまず基本機能の
ボクが施した全カスタマイズ紹介！（基本機能編）
では、そんな最強無料テーマを、cssなどの書き換え／書き加えではない、基本機能の部分からいじったカスタマイズを紹介します。
（CSSや他にいじった部分は別記事で後日紹介します！）
豊富なカスタマイズ要素
Cocoonにはこの様に多数のタブで分けられた豊富なカスタマイズ要素があります。本当に全く知識がないなら「スキン」タブの中から気に入ったデザインを選ぶだけで割とそれらしいデザインが完成します。
自分流にカスタマイズする場合は、[Child]スキンテンプレートを選んでそこからいじっていきます。
全体項目
全体項目では、フォントや本文の文字サイズ、色、太さなどを選びます。ここで大事なのた、「キーカラー」。サイトのテーマ色なのでじっくり選びたいところですが、好きな色がある人は普通にそれでいいと思います。
ボクはこの通り、#e81c4fという赤っぽい色を指定しています。
色に悩んだ人は、こちらの記事を参考にされるといいかも知れません。色には心理的な作用もあるし、サイトに来た人に与える印象が変わる要素なのでブログに書く内容と沿う色、狙いの心理的効果通りの色を設定するといいかも。ボクはめちゃ勉強になりました。
【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」
ヘッダー
ここは時間をかけて考えたい人もいるかも？
ブログの一番上、つまり来訪者が最初に目にする部分です。お店で言えば入り口のイメージです。まあでも、ボクも色々変えて、変えて、変えて、一番しっくりくるところを探し続けましたし、何より、一番上のナビゲーション（メニューバー）を最適なものにするのにFontawesomeアイコンを導入するなどしたので（後述）このタブの中以外の要素もいじっています。
↑今日時点のうちのヘッダー部分です。サイトロゴの上にディスクリプションが来る「センターロゴ（スリムメニュー）」を選んでいます。
広告
こちらは収益化を求める段階の要素なので飛ばします。
タイトル
ここもSEO的に大事な部分でもありますが、初心者の方はデフォルトでいいと思うのでスキップ。
SEO
こちらも知識のない方はデフォルトでOK。
OGP
同じく。
アクセス解析・認証
こちらは、アクセスを調べてサイト運営に役立てたい方は必要な要素を登録しましょう。ボクはGoogle AnalyticsとGoogle Search Consoleを設定しています。
カラム
これは、メインエリアの横幅とか、サイドバーを左右どっちに置くかなどを設定するタブ。
ボクは、メイン800px（デフォルト）など基本的にはデフォルトで、ボーダー色だけ#ccccccで設定しています。
インデックス
「フロントページタイプ（β版）」について、これはまだβ版ということも含めてそのまま。
「カードタイプ」は大きなカード（先頭のみ）にしています。
カードの枠線は表示せず、抜粋文字数は120文字。だいたいデフォルトのままです。
投稿
この項目で気にするべきは「関連記事」の見出し。
ボクは「こんな記事も読まれています」にしていますが、本当は「関連記事」なので読んでいる記事と関係する記事というだけです。でも、「あなたにオススメの記事」と書く人もいますし、要するにブログの中でウロウロしてもらうためにいい感じの文言を書くということです。
ボクの場合Google AdSenseの関連コンテンツユニットを導入していますが、そうじゃない人は「縦型カード4列」が個人的にオススメです。
「ページ送りナビ」は、記事の下に、次の記事、前の記事、の表示をするかですが、ボクはする方がいいと思います。これも周回してもらうためですが、見栄えは好みで。
ボクはサムネイル正方形にしていますが、題名が長い人はデフォルトの方がいいのかも知れません。完全に好みの問題！
「パンくずリスト設定」ですが、これは絶対設定しましょう。Google先生対策で！
ほんまに設定項目多いなぁ、
なんかここまで見てるだけで気が遠くなってきたんだが？
WordPressに慣れがない人ならそうかも…
もっと簡単がいいなあ
だったら最初のスキン設定で好きなテーマを選ぶしかないかも
少しでも自分流を目指す人は、これらの設定って本当はうじゃうじゃコードを書いて、cssで調整してって作業があるということを想像してみて下さい。
タブを順番にいじるだけで完成することがどれだけ楽か！！
ってことで続き行きます。
本文
こちらは本文の余白とか行間の高さを設定するところですが、ボクはCSSでいじってしまったので割愛します。
内部／外部リンク横のアイコンは非表示にしています。
目次
目次については表示しましょう。ただし、「Table of Contents Plus」というプラグインを導入することをオススメします。
古い記事ですが、このブログに導入したときのことを記事にしていますのでよかったらそちらも読んでみて下さい。（他の方の記事の方がオススメですが、、）
SNSシェア／SNSフォロー
ここは、本当に好みが分かれるポイントだと思います。
ブログを不特定多数の人に見てもらいたいタイプの人なら、SNSを駆使するべきですので時間をかけて設定するべきですし、特定の人だけのためのブログなら何も表示しない方がシンプルだし、見た目がスッキリします。
ボクはここはこだわりがあったのでCSSも使ってカスタマイズしています。
Twitter, Facebook, はてな, LINE, LikedIn, タイトルとURLをコピー、の6つを設定しています。最近落ち目なGoogle+がなくなっているのがさすがです。
フォローを促す方のボタンは一方、非表示にしています。
これは、「VA Social Buzz」というプラグインを導入しているからです。こちらも前に紹介しているのでよかったら読んでみて下さい。
このプラグインっぽくできる機能はCocoonにも備わっているのですが、ボクはデザイン的にプラグインを使い続けました。
画像
これは初心者には難しい話になるかも知れませんが、サイトのアイキャッチ画像をどうするかです。
アイキャッチとは、一覧などで出てくるメイン画像です。
↑ここに出てる画像は全部アイキャッチ。
これを、記事の一番上に表示させるかどうかの問題です。
ボクはOFFにしています。理由は、記事によっては一番上に出したい写真と一覧で出したい画像が違う時があることと、記事内に埋め込むやり方の方が好きだっていう理由です。今からブログを始める方はONにしてやる方が簡単かも知れません。
「ブログカード」「コード」「コメント」「通知」
これらは全てデフォルトのままです。
アピールエリア
これは、ちょっと高度な設定ですが、ブログの一番上に何か宣伝を載せたい人は使いましょう。ボクはこのブログではやっていませんが、別のブログでCocoonを導入したところでは使っています。（後日紹介します）
が、このブログでは表示しない。です。
おすすめカード
こちらは一方、設定しています。
トップページに写真が4枚並んでいるのがおすすめカードです。基本的にはカテゴリーごとに自分の中で特に読んでもらいたいやつを並べられる設定です。
記事がまだない段階では設定するのも微妙ですが、ボリュームが増えてきて、より優先的にアピールしたいカテゴリーを載せられます。
ここに画像を表示させるためにはカテゴリー一覧から画像設定するなどちょっとだけめんどくさいので解説ページをご参照下さい。
カルーセル
これは、「こういうの欲しかった」という人も少なくない気がしますが、一方で、表示読み込みが遅くなるし、アニメーションがうるさいのでボクはオススメしません。もちろん自分も使っていません。
フッター
これは一番下の、Copyright〜みたいな表記のところ。好きな見た目を適当に選んで大丈夫です！
ボタン
これは何のボタンかというと、トップへ戻るボタンのことです。
ボクは、オレサマライオンにしています。
サイトの右下に出てくる押せばサイトトップにビィーヨーンって戻るあのボタンです。
画像を設定するのはめんどくさいので選択肢から選んだらいいと思います。
モバイル
こちらはモバイルからアクセスしたときのメニューをどんな感じにするかですね。
ボクは「フッターモバイルボタン」を選んでいます。また、サイトロゴは表示させています。
404ページ
https://blog.leomiyanaga.com/404.html
ボクは↑の様に設定済みですが、こちらもカスタマイズ記事を書いているので↓よかったらどうぞ。
「AMP」「PWA」「管理者画面」「ウィジット」「ウィジットエリア」
この5つもボクはデフォルトのまま触っていません。
エディター
エディターも基本いじりませんが、
新しいブロックエディタが苦手な部分があるので、Gutenbergをオフにすることがたまにあります。
API
これも収益化している人向けですが、ボクはAmazonだけ設定しています（Rinkerというプラグインを使っているので関係ないと思われますが）。
その他
こちらは、日本語スラッグの項目だけ、スラッグは英語がいいと思うのでOFFにしています。まあどっちにしても毎回slug作っているので関係ないっちゃ関係ないのですが、英語が苦手な人とかは題名がそのままスラッグになるので楽と感じるかも？
長かった…
あはは、でも、これをやるだけで自分らしいブログページができるんだからすごいことだよ
総括／まとめ
さて、確かに項目の多さから、長い記事になりましたが、今から導入を迷っている人にとっても、とりあえず入れてみた人にとっても様子がわかる記事になったのではないか？と思います。いかがでしょう？
ブログって、記事の数がイコールで財産です。
ボクも波がありますがこのブログで300くらいの記事があって、5年弱運営しているので年間60記事ペース、つまり月々5本平均で書いてきたことになります。
本気でアフィリエイトブログをやる方はまず「50本目指せ」、とか、「100本からが勝負」など色々言われていますが、ボクのブログは自分自身のLOG付け的意味の方が強いのでゆるーくやってきました。
今からブログを始めたい人や、ブログで稼ぎたい人が必ず通る初心者の時期。
多くのHow to記事が溢れていると思いますが、ボクもWordpressデビューした2012年くらいから割と長く付き合ってきているのでこういう記事もたまに書こうかと思って書いてみました！
次回は、
CSSやウィジットなどCocoon設定以外の部分で何をいじったかについて紹介してみようと思います！
自分らしく生きるため、ブログって結構いい「表現の場」になると思うので是非たくさんの人にデビューしてもらえたらと思います！
