Cocoonをかわいくカスタマイズしたい!初心者のわたしでもできたゆるかわCocoonカスタマイズ。

日記

貯金の話が目当ての人には、ちょっと関係ない話なんだけど……

このブログは、わいひらさんが作成してくれたCocoonというワードプレスのテーマで作成しています。

無料でとっても使いやすいテーマを作成してくれて本当にありがとうございます。

そこで、今回、Cocoonをかわいくしたい!と思っている方向けに、わたしがやってる「かわいくなれる」カスタマイズを紹介します。

項目によっては他の人のブログを紹介しているだけだけど、どれも詳しく書いてあるブログばかりなので、すっごく参考になりますよ♪

さくら
ほとんどまるまるコピペしているものは、著作権も気になるのでリンク紹介にしてます。
スポンサーリンク

カスタマイズを利用するときの注意点

※phpファイルもcssファイルもカスタマイズするときは子テーマに追記しましょう。

※phpファイルを編集するときは必ずバックアップを取っておきましょう。

Cocoonをかわいくするカスタマイズ

インデックスページのタイトル前にfont awesomeのアイコンをつける

かわいらしくしたいな~と思って、インデックスページでは、タイトルの前にハート(font awesomeのアイコン)をつけています。

わたしは、下のコードを子テーマのstyle.cssに追記しています。スペースや大きさ、色、アイコンは適宜調節してみてください。

さくら
注:わたしは縦型二列のエントリーカードなので、その場合の設定です。

注:Cocoonのfont awesomeは4.7対応なので、アイコンは4.7から選びましょう。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

iconのコードは、上のリンク先で気になるアイコンをクリックしたときに出てくるUnicode(ピンクで囲った部分)です。

コードを見つけたら、¥f004のように前に¥コードをつけてください。

目次のカスタマイズ

目次のカスタマイズは下の二つのサイトを参考にしたのですが、Cocoon用にするのは結構苦戦したので、不具合があったらすみません。

わたしのブログできちんと表示されているなら大丈夫だと思うのですが……。

なお、見出し3までの対応です(見出し4以降は見出し3と同じように表示されます)。

WordPressで綺麗な目次を作りたい!【Table of Contents Plus】をカスタマイズしてみた|CrossPiece
さて、今回はWordPressのコンテンツサイトでよく見かける「目次」をシンプル・綺麗に実装したいと思います。 WordPressには便利な目次プラグイン「Table of Contents Plus」があるので、そちら
【Cocoon】目次タイトルにFontAwesomeアイコンをつけるカスタマイズ
Cocoonユーザーのみなさん、こんにちは。今回はコメントで問い合わせのあった、目次タイトルにFontAwesomeアイコンをつけるカスタマイズを紹介します。目次タイトルにFontAwesomeアイコンをつけるCocoonカスタマイズ下記C

見出しのカスタマイズ

見出し系のカスタマイズは紹介している人も多いので、カンタンに。

まるまる同じではないけれど、見出し系はサルワカさんのサイトをベースにカスタマイズしています。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

サルワカさんのブログでは見出しがたくさん紹介されていていいんだけれど、そのままコピペでは使えないのが難点。

というのも、Cocoonのテーマのもともとの見出しの設定を上書きしながら新しい設定を書く必要があるからです。

おそらく、Cocoon見出しカスタマイズするときの初心者の一番の悩みは

B子さん
変な線が出てくる~!!

こんな風に悩む人は、一度「border:none;」で全部設定を消した後、新しく定義しなおせば、自分の欲しい線だけつけることができます。

参考までにわたしのh2、h3見出しのcssはこんな感じです(色やコードはお好きなのを指定してください)。

h3の見出しがちょうどborder:none;で全部消したあと、指定したいborderだけ入力している例になってます。

参考:Cocoonの見出しのカスタマイズについて詳しく書いてあるブログ

コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。
Cocoon見出しのカスタマイズ:hタグ装飾が反映しないとき試す(セレクタ)指定方法
WordPressテーマCocoonを使い参考にしたページの通り見出しの変更をしたけど、うまく反映しないのはなぜ??と装飾し始めた頃は思うかもしれません。大半の原因は以下の通り。 hタグの指定(場所)方法が間違っている 優先順位が(親テ

サイドバーのSNS フォローボタンのカスタマイズ

サイドバーのSNSフォローボタンはかわいくしたくて悩んだ結果、

サイドバーウィジェットに「SNSフォローボタン」をいれて、「SNSフォローボタン」をカスタマイズしています。

※なので、プロフィールウィジェットは利用していません。

cssは下の通りです。

ただこれもかなり苦労した分、あんまり自信はないのが正直なところ。

(わたしのブログを見て表示が崩れてなかったら大丈夫だと思っているんだけど。)

そうだ、あとウィジェットタイトルのところに\follow me/と入れているのですが、半角だと逆スラッシュが¥マークになります。

「スラッシュ」と日本語で打ち込んで変換すると全角の\/出てくるのでそれを使ってください。

ちなみに、色はかわいくするために淡い色を自分で設定したけれど、ブログ本文の方にフォローボタンをつけてる人はそっちも影響すると思うのでご了承ください。

ブログカードのカスタマイズ

これはリスブロの斉藤さんの記事を参考にしました(色以外はコピペです。)

【Cocoon】シンプルでクールな「ハミングバード風」ブログカードを実装してみよう!
WordPressテーマCocoonむけ、オシャレなブログカードカスタマイズ方法を公開中です。

唯一違うと言ったら、function.phpのカスタマイズはできる限りしたくないわたし。

なので、日付は非表示にしちゃいました。

わたしの真似をする場合は、上のサイトで紹介されているcssに

.blogcard-date{display:none;}

を追記してください。

その他のカスタマイズ

実はリスブロの斉藤さんにはこっそり&たくさんお世話になっていて、下の三つもちょっと色は変えたりしてるけど、ほぼまるまるコピペでカスタマイズしてます。

本当にありがとうございます。

さくら
みなさんも一度行ってみるといいですよ~。有料テーマに負けないブログができます。
【Cocoon】ページネーション(ページ送り)をおしゃれにするCSSカスタマイズ
Cocoonのページネーション(ページ送り)って、こんなデザインなんですよね。いささか地味ですね。今回はこのCocoonのページネーションをデザインしていきます。ページネーションのCSSカスタマイズ例というわけで、こんなかんじにしてみました
【Cocoon】検索窓をオシャレにカスタマイズ!
このサイトのように角の丸い検索バーを実装するCSSカスタマイズを紹介します。下記CSSをコピペしてください。追加方法・適用されない場合は下記記事を参照してください。.search-box{ margin: 1em;}.search-edit
ブログにおしゃれな水平線<hr>を入れるCSSデザインカスタマイズ
このサイトでは水平線のデザインをこんな感じにしています。↑いいでしょう?笑じつはこの水平線、CSSで一瞬で実装できるんです。アイキャッチ画像ではCocoonとしていますが、他のWordPressテーマでも使用できるはずです。ブログにおしゃれ

かわいいを作る最後のポイントは「色」

実は難しいcssがわからなくても「かわいい」って色だけでもかなり作りこめます。

逆にいうと、かわいいデザインでも「色」がかわいくないと可愛さ半減になるんです。

とはいっても、なかなか自分にぴったりな「かわいい配色」って分からないですよね。

例えば、パステル調で甘い感じのかわいいの場合は、お菓子の配色を参考にするとわかりやすいです。

いちごチョコ、ミントチョコ、マカロンetc……

それとは違って、ゴシックロリータ風のかわいいの場合は「ANNA SUI」とかが参考になります。

もうちょっといろいろ種類が知りたいとか、具体例がもっと欲しいっていう方は下の本がわかりやすくておすすめです。

どんな本か中身がちょこっと分かるようになっているので、気になる方は見てみるといいかも。

かわいいとは関係ないけど、せっかくなので大型のカスタマイズ

会話の吹き出しのカスタマイズ

わたしの場合、使いたいアイコンが小さくてCocoonの吹き出し機能がつかえません。

同じような人はこっちの方法をどうぞ。

実際のやり方は下のサイトさんに詳しく書いてあって、わたしはそのまま利用してます。

(子テーマのfunction.phpとcssファイルをいじるので、phpファイルはバックアップを取っておきましょう。)

https://real07.com/wordpress-simplicity2-fukidashi/

固定ページのカテゴリーごとの記事表示(サムネイル+記事タイトル)

ちょきん*スタイルのページでは、List category postっていうプラグインを使って、各カテゴリーごとの記事タイトルとサムネイルを表示しています。

カスタマイズ方法は下のサイトに書いてあります。

(ちなみに、コメント欄のさくらはわたしです(笑))

List category postsのサムネイル画像の表示位置を変更するカスタマイズ
ショートコードでカテゴリーやタグの記事一覧を表示することのできるプラグイン「List category posts」。 様々なコードが用意されていて、サムネイルや日付を表示させてり柔軟なカスタマイズができる使い勝手のいい …

ただ、このプラグインは独自のコードを吐き出すので、AMP化するとエラーが出ると思います。

(以前やったらエラーが出て、原因がこのプラグインの独自コードでした。)

そのためAMP化しない方向けな気がしますが、その後バージョンアップを何回もしているので今は改善されているかもしれません。

さくら
わたしのブログはAMP化しなくてもそこそこ表示が早く、AMP化してないので今の状況はよくわからなくてすみません。

タブレットでも2カラム表示

Cocoonではタブレットの場合1カラム表示になりますが、このブログは2カラム表示にしています。

Cocoonの2・3カラムをタブレット幅(481~768px)では1カラムにはしないカスタマイズ方法
タブレット端末では1カラム化しない2カラム、3カラムレイアウトのCSS指定方法です。

まとめ

以上が、わたしがやってるかわいくなれるカスタマイズ+補足です。

実は、カスタマイズによっては完成までに数時間どころかもっとかかってるモノがあります(苦笑。初心者なので)。

そもそも、カスタマイズ記事を見つけるだけでもすごく時間がかかったり。

さくら
きっと初心者の方なら、分かってくれるはず……!!(笑)

なので、もしお役に立ったらtwitterとかで紹介してくれるとうれしいです。

ではでは、Cocoonをかわいくカスタマイズしたい!という方のお役に立ったら幸いです。

スポンサーリンク
日記
わたし*スタイル