【Cocoon】ブログ歴15年のLeoによる「上級カスタマイズ」16項目を紹介!!【コピペ可】

最強無料テーマの「Cocoon」を導入して1ヶ月。

Cocoonが備えるカスタマイズ設定についてはすでに紹介していますが、今回はスタイルシートに記述を加える「上級カスタマイズ」について紹介します。

ブログ歴15年、Wordpress歴8年のLeoが現在のCocoonにするためにやった全てのカスタマイズを参考にして見て下さい!

1. ナビゲーションメニュー

トップにおいているナビゲーションメニューにアイコン入れました。

アイコンにはFont Awesomeを使用しています。

↑こんな感じで一旦落ち着いていましたが、のちに「おすすめカード」をやめました。

この囲っている部分がアイコンですが、これを挿入するだけでメニューの印象が結構変わると個人的には思っています。

こちらが最新版。

ナビメニュー下に何もなくなったのでメニューにメリハリをつけるべく背景を黒くしました。

やり方

サイドバーの「外観」→「メニュー」からメニュー設定のページを開きます()。「メニュー項目を追加」から「カスタムリンク」(か、カテゴリーでもいいです)を開いて、メニューに入れたいリンク()とリンクの文字列()をぶち込みます。

に入れる文字列が重要です。

ここに、Font Awesomeから引っ張ってくる<i class=”fas fa-igloo”></i>みたいなやつをコピペで入れます。

Font Awesomeを知らない人はググってくれ
Font Awesome
検索
サンプル

例えばこのアイコンを使いたい場合、赤い四角で囲っている場所をクリックして(自動でコピーされます)コードを引っ張ります。

アイコンと文字を組み合わせる場合は以上のように、コードの後ろに文字列を並べるだけです。

さらにアイコンの色を変えたいという場合など、さらにカスタマイズ可能ですが、LEOLOGではここまで。このカスタマイズ段階ではCSSの記述は不要です。

2. 投稿ベージ、タイトル下のSNSアイコン表示

この赤く囲った部分です。

↑これがデフォルトのSNSボタンデザイン。

「Cocoon設定」から白抜き、黒塗りなど3種類のデザインで変更できます。

が、ボクはこちらの記事を参考にカスタマイズしました。

ボタンの存在感を減らし、全体のデザインとの調和を目指しました。

SNSアイコンはつけたいけど、大きすぎるのは嫌だなという方などにおすすめのカスタマイズです。

さらにデザイン変更しました

最新版では、横のバーを消して、投稿日・更新日の表示場所を上に移動しました。

3. アイキャッチ画像を横幅いっぱいに

こちらの記事で細かく書きましたが、投稿記事のトップに表示されるアイキャッチ画像を横幅いっぱいにして見ました。

上記の感じで少し印象が変わります。

わいひらさんも意図があってデザインされているのだと思いますが、ボクはこの変更で記事の印象が大きく変わったなと思っていて、アイキャッチはやっぱりアイキャッチ、記事の印象を決める重要な存在と感じました。

4. 一覧ページでのアイキャッチも整理

本文のアイキャッチサイズをいじったので、全体イメージを整えました。

トップページ(ホーム)は今こんな感じです。

Cocoonではいくつかの一覧構成が選べますが、大きいサムネイルのやつを元にアイキャッチが左右いっぱいに広がる様にしたのと、タイトルと日付をサムネイルの上に来る様にしました。(デフォルトでは下にきます)

残念ながらめっちゃ突貫でやったのでやり方とかを上手にシェアできませんが、ひたすらCSSをいじって、トライ&エラーを繰り返しました。

…ので、なんかぐちゃぐちゃやと思います(笑)

でも見た目はめっちゃ気に入っています!

5. Hタグのデザイン変更

本文内のカスタマイズに戻ります。

CSSをいじりでは鉄板となる「見出し」です。

このブログでは以下の様なデザインに仕上げています。

H1タグのサンプル

H1は記事のタイトル部分のやつですが、このブログでは真ん中寄席にデザインしました。

H2タグのサンプル

一番大きな見出しですね。

H3タグのサンプル

中見出し的なやつ

H4タグのサンプル

本文の中では一番小さな見出し

H5タグのサンプル

この辺は通常の文章内で使うイメージではないです。

H6タグのサンプル

こちらも同じく

見出しタグのカスタマイズについてはたくさんの良情報がネット上にありますので、そちらから気にいるデザインを見つけて、コピペで使われるといいと思います。

ボクの見つけたおすすめのサイトをまとめておきます。

他にもググればわんさか出てきますよ!

6. 記事内でハイライト的に使う装飾パーツ

記事をより見やすく、読みやすくするためのパーツとして、Hタグを流用し作って見ました。

詳しくは別記事にまとめていますが、

例えば注意事項を書くときに、

この点は注意が必要です!!

的な感じで記事の中に使ったり、

こういうアイデアがあります

とか、

今これが人気なんだって!!

みたいな感じで使います。

もちろんフォントサイズを変えたり、ボールド(Strong)でも表現できることですが、長くブログを書いていると同じ様な表現をしたくなることが重なってくるので、自分がよく使う装飾をタグ化すると記事執筆効率と、ブログ全体バランスが整います。

7. タブ付きボックスのリデザイン

Cocoonは実にたくさんのボックスが実装されています。

有料テーマ並みに親切でもう素晴らしいばかりですが、ボクは少しデザインをいじったものがあります。

このボックスです

「ピックアップ」や「ポイント」、「ティップス」などなど、

記事を読みやすくするためのボックスがたくさん揃っていて、Simplicityを使っていた時求めていたことが解決されているます。

が、デフォルトデザインじゃちょっとつまんないな、って思ってしまって。。。CSSをブチ込んで改造してしまいました(笑)

Cocoonのデフォルトではこういう風に表示されます。

他のテーマでも見かけるスタイルで、全然悪くないんですよ?十分!

ただ、ボクは全体のデザイン性とかもあって、タブの位置をずらして、ボックスの輪郭を1pxにしました。

.blank-box {
border: 1px solid #949495;
padding: 1.3em 1em;
margin: 1em 5%;
border-radius: 5px;
border-top-left-radius: 5px!important;
}

.blank-box.bb-tab .bb-label {
background-color: #949494;
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
font-size:14px;
top: -1.8em;
line-height: 1.8;
color: #fff;
left: 14px;
top: -15px;border: solid 2px #fff;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-bottom-right-radius:12px;
border-bottom-left-radius: 12px;
padding: 0px 1em 0px .8em;
}

↑ボクがstyle.cssにぶち込んだCSSです。これで元のデザインからどの色でもどの見出しでもデザインが変わるはずです。

ヒントボックスでも
グッドボックスでも

どれでも!

8. Cocoonにないボックスを設計

Cocoonにもたくさんボックスはあるんですが、やっぱり有料テーマにはかなわない…

AFFINGERとかSANGOみたいな有料テーマで使える様なボックスが欲しくて、とりあえず自分がよく欲しくなるボックスをデザインしてstyle.cssにブチこんで使える様にしました。

作った箱いろいろ

  • こういうボックスとか
  • 結構便利ですよね

↑記事の冒頭に書くことで訪問者に親切になるこれ、

  • こっちはターゲットを明確にする箱
  • 長い記事だとこういうのを用意することで
  • 離脱率とかクロールとか改善できそうだなって

↑派生バージョン。どっちを使うかは記事の種類、方向性、ターゲットで記事ごとに使い分けています。

  • レビュー記事が多いブログなので
  • こういうボックスも必要かなと
  • 思って用意しました

↑こちらはレビュー記事に使えるボックスです。結構利便性いいですよ!

内外の関連リンクを挿入するやつ

↑このデザインは我ながら好きです(笑)。記事にニュルッと入ってきている雰囲気という。ボックスを超越した感じで!

シンプルに関連記事、として書く場合はこれです

実は双方、Cocoonにもともと実装されているのですが、

Cocoonのだとこんな感じでカード化されてしまうんですよね。

ビジュアル的に嫌いとかじゃないんですが、上下に幅ができるので場所とって仕方ないっていう。

ボクは関連記事の重要性、伝えたいレベルに合わせてさっきのやつとさらに、

 え、あの大手企業も??シアトルに本社がある有名企業、意外に感じるあの企業も!

  • 記事の最後にこういうのを入れると
  • まとまりがいいんじゃないかと思って
  • このボックスも作りました

↑記事で最後に、「まとめ」って項目を作ることがほとんどですが、そこで使う想定のやつです。

 

Cocoonには「合わせて読みたい」的なリンク用のボックスは装備されていますが、この辺は装備されていないので自分の好みのボックスを作って、「AddQuicktag」プラグインですぐに使える様にして記事を書いています。

ボクはデザインにあたり以下のページを参考にさせていただきました。

いやはや、どんな情報でもネット上にあるので便利です(笑)。

9. このブログを書いてる人ボックス

記事の下に出せる「このブログを書いてる人」のボックスデザイン。

SimplicityからCocoonにしてよかった点の一つに、デフォルトでこの機能が実装されていることがあります。

以前はSimple Author Boxというプラグインを使わなければならなかったからです。

Cocoonではデフォルトで、

↑こんな感じの著者ボックスが出せます(公式ページのわいひらさん)

これが気に食わんわけじゃないんですが!

↑こんな感じにリデザインしました。

↑さらにこんな感じにデザイン更新しました(2020年7月)。

記事幅いっぱいまで広げるデザインに変え、背景をダークなものにしました。

デフォルトでもじゅうぶんなものでもあるのでお好みのデザインに整えていただければと思いますが、カスタマイズ時に参考にしたページは下に紹介しておきますネ。

著者ボックスの設置法

設置は簡単、ウィジットでサクッとできます。

「[C] プロフィール」というウィジットをボックスを表示させたいところに入れるだけ。

わいひらさんは設定されていませんが、「この記事を書いた人」などの文言を入れたり、アイコンを丸くするなどのカスタムはCocoonの基本機能内でできることです。

ボクは特に、ボックスの見出しいじりに精を出しました。

参考にしたページ

10. ページネーション

一覧ページの最下部に表示されるこういうやつ↓

こちらの記事を参考に、「次のページ」というおっきいボタンを消して、色をいじって、数字フォントをいじり、今の状態に変えています。

ちょっとしたことですが、ページ全体のイメージを整えるのは大事なこと。

全体のデザイン的に丸にする人も多いみたいです。

参考にしたページ

11. サイドバーの見出し

ここからはサイドバー関連。

サイドバーの見出しはデフォルトではH3タグになりますが、それだと見た目的にちょっと違うなーって思ったので、専用のCSSを書いてカスタマイズしました。

そんなに大きく変わっていませんが、下線を消して、文字サイズを大きくしました。全体的に線を減らしてフラットなデザインを目指しているのでこういう感じに行き着きました。

12. サイドバー用プロフィールウィジット

先ほど紹介した「この記事を書いた人」とは別にサイドバーに表示させるプロフィール欄を作りました。

一旦こんな感じで落ち着きましたが、

こんな感じに更新しました。11で書いた通り、フラット方向で調整した結果ですね。

HTML

<div class="sideprof">
<img src="画像のURL.jpg" alt="" / class="imgp">ここにプロフィールを書きます。<br>詳しいプロフィールは<a href="プロフィールページのURL">こちら</a>
<br>
</div>
<ul class="profbox">
<li><a href="ツイッターURL"><span style="font-size:16pt;color:#00acee;"><i class="fab fa-twitter"></i></span></a></li>
<li><a href="フェイスブックURL"><span style="font-size:16pt;color:#3b5998;"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="インスタURL"><span style="font-size:16pt;color:#CF2E92;"><i class="fab fa-instagram"></i></i></a></li>
<li><a href="リンクドインURL"><span style="font-size:15pt;color:#0e76a8;"><i class="fab fa-linkedin"></i></a></li>
<li><a href="ユーチューブチャンネルURL"><span style="font-size:15pt;color:#DA1725;"><i class="fab fa-youtube"></i></a></li>
<li><a href="お問い合わせページURL"><span style="font-size:15pt;color:#fdcb6e;"><i class="fas fa-paper-plane"></i></span></a></li>
<li><a href="プロフィールページURL"><span style="font-size:15pt;color:#444;"><i class="fas fa-id-badge"></i></a></li>
</ul>

以上を「[C]テキスト(PC用)」ウィジットに書いて、設置したい場所に入れるだけです。ボクはサイドバーの一番上に入れています。

ご覧の通り、3つのスタイル指定(class)があります。それらは下記の通り定義しています。

CSS

.sideprof {
  font-size: 13px;
  color: #444;
  line-height: 1.6em;
}
.imgp {
  width: 90px;
  float: right;
  padding: 1px;
  margin-top:-56px;
  margin-left:6px;
  margin-right:0px;
  margin-bottom:4px;
  background: #444;
  border-radius: 50%;
}
.profbox {
  margin-left:-44px;
  list-style: none;
  overflow: hidden;
  background:#fff;
}
.profbox li {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: none;
  border:0px solid #ddd;
  border-radius:50%;
  float: left;
  margin-right: 4px;
  padding: 1px;
}
.profbox li a {
  text-decoration: none;
  background-color: #ddd;
  font-weight: normal;
}
.profbox li a:hover {
  text-decoration: none;
  font-weight: normal;
}

style.cssに貼り付けたらそのまま同じデザインにはなりますが、正直、あまり良いデザインではないとし記述も汚いので他の方の情報を求められる方がいいと思います(笑)。

13. サイドバーのカテゴリ一覧

こんな感じで表示されますが、少しカスタマイズしています。

主にこちらのページを参考にしいじりました。

14. サイドバーのコメント一覧

サイドバーに表示させる「最新のコメント」欄も少し整えています。

このカスタマイズは、こちらのページにお世話になりました。

アバターが表示されることと、コメント内容を一部表示させることなどがカスタマイズのポイントです。

コメントくださった方がアバターを設定していなければこんな感じになっちゃうのでアバターの必要性は微妙なんですけどね(笑)。

15. 一覧ページのタブをリデザイン

Cocoon標準機能のカスタムです。

こんな感じで一覧ページトップに表示されるタブをリデザインしました。

コンセプトはフラットとシンプル。

↑これがCocoonデフォルトの場合です。

ボクの場合ナビメニューにカテゴリーを入れているのでかぶるんですけど、特に読んでもらいたいカテゴリーをここに入れることでクロール向上を目指しています。

16. Rinkerプラグインのデザイン調整

アフィリエイトの商品リンクを貼るプラグイン、「Rinker」はとっても便利ですが、デフォルトのデザインを他のボックスなどと揃えています。

Rinkerは有名プラグインなのでカスタマイズ情報は山ほど出て来ます。

ちなみに上のスクショは、上がRinkerで、下がCocoonデフォルトのリンク表示です。

プラグインを減らしたい人はCocoonデフォルトでもいいんじゃないかな?と思うくらい近しい見た目ですが、ボクはRinkerの価格まで表記させられる点が気に入っているのでRinkerを使っています。

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG
Subscribe
更新通知を受け取る »
guest
メールでの返事希望な場合必須
評価
この記事の評価
0 Comments
Inline Feedbacks
View all comments
トップへ戻る
0
Would love your thoughts, please comment.x
()
x
タイトルとURLをコピーしました