こんにちは、さくらです。
突然ですが、あなたは「Cocoon設定」を使いこなせていますか？
オシャレなブログを見て「有料テーマを買わないといけないんだ」「高度なカスタマイズの知識が必要なんだ」と諦めていませんか？
実際はCocoon設定でクリックをしていくだけで出来ることが沢山あるのに、それに気づかずに諦めてしまうのはとてももったいないです。
本日はCocoon設定で一気にオシャレなブログにしていく方法をご紹介していきます。
サイトフォントの設定
「Cocoon設定」→「全体」で下の方にスクロールしていくと「サイトフォント」を設定できるところがあります。
その上のサイトキーカラーなどは設定していてもサイトフォントはデフォルトのままという方は多いのではないでしょうか。
文字フォント
これを変更するだけでサイト全体の空気がガラッと変わります。
フォントには大きく分けて「システムフォント」と「Webフォント」があります。
- システムフォント
- コンピューターのOSに最初からインストールされているフォントのこと
- Webフォント
- Webサーバーやクラウドサーバー等に置かれたフォントサーバーからフォントを読み込み、サイトの文字を表示する仕組みのこと
それぞれのメリットとデメリットは下記の通りです。
当サイトではWebフォントの中でも定番の「Noto Sans JP」を利用しています。
これにしたことにより特別表示速度が遅くなったという印象もありませんでした。
それぞれの違いをより詳しく知りたい方はこちらをご参照ください。
文字サイズ
Cocoonのデフォルトの文字サイズは18pxですが、Googleが推奨している文字サイズは16pxです。
当サイトも16pxにしています。
実際には自分のサイトのユーザー層により最適なサイズは変わってきますので、当サイトと比べてもっと大きい方が良いか小さい方が良いか決めて頂ければと思います。
モバイルとパソコンでフォントサイズを変更することも可能です。
文字色
完全な黒だと少し目にきつい印象がありましたので、当サイトでは少しグレーがかった色にしています。
全体的に柔らかい雰囲気にしたいのであれば文字の色を調整してみるのも良いかもしれません。
Twitterでシェアした時のブログ画像の設定
Twitterでご自身のブログをシェアした時にCocoonのデフォルトの画像になっている方をよくお見掛けします。
それを下記のように自分で設定した画像を表示させる方法をご説明します。（ちなみに私もこのツイートをした当初はCocoonのデフォルト画像になっていました・・・）
まずは「Cocoon設定」→「OGP」→「OGPタグの挿入」にチェックを入れてください。
これが出来ていないとSNSでシェアされた際にアイキャッチ画像などが表示されません。
Twitterカードの有効化にチェックしてください。
Twitterカードタイプはツイートをした際に下記のどちらを表示するかを選んでください。
最後に「ホームイメージ」を登録します。
これが記事ではなく、トップページなどをシェアした時にSNSで表示されるアイコンになります。
ここが入っていないとCocoonのデフォルトの画像になってしまいます。
全て設定をしたら、「変更をまとめて保存」を忘れずに押してください。
トップページの記事一覧の表示変更
トップページは一番見られるところなので、ここがオシャレだと全体がオシャレに見えてきます。
Cocoonのデフォルトの記事一覧は新着順に上から並んでいるだけですが、クリックするだけでカテゴリごとに表示することが可能です。
「Cocoon設定」→「インデックス」を開きます。
まずは「フロントページタイプ」で表示形式を選んでください。
左のオレンジの印をつけているところにカーソルを合わせるとプレビュー画面が見られます。
次に、下にスクロールをして、「カードタイプ」を選択してください。
こちらも左側の写真マークにカーソルを合わせるとプレビューが見られます。
さらに下にスクロールをすると、記事一覧の下の本文抜粋の設定ができます。
「自動生成抜粋文字数」というのは本文の冒頭から自動で抜粋される文章の文字数を決められるもので、デフォルトでは「120字」になっています。
その下の「省略文字列」は自動抜粋文の後の省略を表す文字です。
デフォルトは「…」になっていますが下記のように「Read more…」など好きな文字にすることも可能です。
トップページをすっきりさせたい場合はこの抜粋文を表示されないようにすることも可能です。
この「スニペット（抜粋）の表示」のチェックを外すとアイキャッチとタイトルだけの表示になります。
ここまで設定したら一番下まで行って「変更をまとめて保存」をするとトップページの見た目がガラッと変わっているかと思います。
Cocoon設定だけでここまでのカスタマイズをすることは可能ですが、追加でコードを使ったカスタマイズもご紹介します。
タブの色を変更する方法
上記の画像のように「タブ一覧」の表示にした場合、デフォルトでは白黒になってしまいます。
自身のブログのテーマカラーに合わせたい場合はこちらのカスタマイズが必要になります。
こちらではアイコンを入れる方法を解説していますが、私は色の変更だけ行いました。
アイキャッチからカテゴリーラベルを削除する方法
カテゴリーのラベルがアイキャッチに被ることで一部見えなくなってしまったので、ラベルを非表示にしました。
カテゴリー別にそもそも表示しているので、個々にカテゴリーが書いてある必要はないかなと(^^)/
コードを使ったカスタマイズの仕方
上記の二つはCocoon設定ではなくコードを使ったカスタマイズですが、コピペするだけなので簡単にできます。
コードのコピペのやり方は下記の記事で解説しています。
カルーセルの設定
カルーセルというのは、トップページで人気記事がスクロール表示される機能です。
これがあるとちょっと「有料テーマ感」ありませんか？！
カルーセルを実際に使うかどうかは好みの問題ですが、これもCocoon設定で作成することができるということを知っておいて損はありません。
しかもこの設定はとても簡単です。
「Cocoon設定」→「カルーセル」を選択します。
あとは「カルーセルの表示」を「表示しない」から好きなところに表示できるように変更するだけです。
アイキャッチの下のタイトルを非表示にしたい場合
ただ、これだけでは一つ上の画像のプレビュー画面のようにアイキャッチの下にタイトルが入っている状態です。
アイキャッチに既にタイトルを入れているから下のタイトルは削除したい！という場合は、下記のカスタマイズをお試しください。
これもコードを使ったカスタマイズなので、コードのコピペの仕方を知りたい方はこちらの記事をご参照ください。
SNSのボタンのデザイン変更
デフォルトで記事の一番上と下に設置されているSNSシェアボタンはこちら↓
ブログ全体のデザインにもよると思いますが、少し存在感が強すぎる印象です。
これを下記のように白抜きの落ち着いたデザインにする方法をご説明します。
「SNSシェア」と「SNSフォロー」はそれぞれ別で設定します。
どちらも下の方にスクロールしていくと「ボタンカラー」という項目があります。
ここで「ブランドカラー（白抜き）」を選ぶだけです。（モノクロもあります）
他にもここで「記事の最初にはSNSボタンを置かない」ということや「SNSの種類の選択」なども可能です。
記事を最後まで読んでからSNSでシェアするか決めるものだと思うので、記事の最初にはボタンはいらないんじゃないかなぁ…と私は思います！
まとめ：【Cocoon設定】初心者が見落としがちな絶対設定するべき項目５選
如何でしたでしょうか。
「カスタマイズ＝難しいもの」と身構えてしまう初心者の方は多いですが、Cocoonではこんなに色々なことをクリックしていくだけで設定が可能です。
この他にも簡単にできるCocoonカスタマイズ方法を下記の記事で解説しています。
何か分からないところがあれば遠慮なくコメントを頂ければと思います。
一緒にオシャレなブログを作っていきましょう(*^-^*)
最後まで読んで頂き、ありがとうございました。
コメント