現在、カスタマイズ中のため表示が乱れることがあります。

【祝】Cocoon正式リリース!わたしがやってるCocoonのカスタマイズを紹介します。

日記

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

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

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

そこで、今回、わたしがやっている大きめのカスタマイズの方法を公開します。

さくら
前のブログでも一番質問が多かったのは、実はブログカスタマイズだったので……

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

※phpファイルを編集するときは、バックアップを取っておくのを忘れないようにしてくださいね。

スポンサーリンク

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

かわいらしくしたいな~と思って、インデックスページ(ブログトップページやカテゴリーページの記事一覧)では、タイトルの前にハート(font awesomeのアイコン)をつけています。

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

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

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

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

目次のカスタマイズ

目次は、Cocoonについている目次機能ではなくてTable of contents+というプラグインで表示しています。

理由はページごとに目次の表示・非表示を細かく設定できるからです。

詳しいやり方などは下のサイトに載っているので参考にしてみてください。

WordPressで綺麗な目次を作りたい!【Table of Contents Plus】をカスタマイズしてみた|CrossPiece
さて、今回はWordPressのコンテンツサイトでよく見かける「目次」をシンプル・綺麗に実装したいと思います。 WordPressには便利な目次プラグイン「Table of Contents Plus」があるので、そちら

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

会話の吹き出しは、Cocoonのモノではなくて自分でphpとcssをカスタマイズしています。

というのも、使いたいアイコンが小さくてCocoonでは使えない大きさだからです。

さくら
なので、使いたいアイコンが小さい方にはこっちの方法がいいと思います。

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

子テーマのfunction.phpと子テーマのstyle.cssに追記してください。

【WPカスタマイズ/simplicity2】プラグインなしで吹き出しをつくろう | リアルレコリズム
Simplicity2にはLINE型の会話は実装されています。そうこういうやつねけどアイコン画像つけたいじゃんということで、Simplicity2を使ってて吹き出しを導入したいそこのあなた。今すぐ使っちゃいましょう。コピペで楽々!S

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

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

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

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

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

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

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

そのためAMP化しない方向けです。

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

Cocoonではタブレットの場合1カラム表示になりますが、このブログは2カラム表示(サイドバーも含めて出る)にしています。

この設定にしたい方は、子テーマのstyle.cssに追記してください。

ただし、cssを見てもわかるようにこの設定だと481~767pxは2カラムになります。

481~767pxの機種はほとんどないようですが、もしマネするときはその点だけ了承してください。

(わたしはほとんどないと思って気にしないことにしています。)

【追記】わいひらさんのブログでも同じテクニックが紹介されたので、安心してコピペしてください♪

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

以上の5つがわたしがやってる大きめのカスタマイズです。

おまけ:見出しのカスタマイズの参考ブログ

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

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

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

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

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

じゃないと、変なところに線が出てきたりします。

参考までにわたしのh2見出しのcssはこんな感じです(色は自由に指定してください)。

カスタマイズするときは子テーマのstyle.cssに追記ます。

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

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

最後に:参考になるブログも紹介

Cocoonは正式リリースしたばかりとは言えベータ版のユーザーさんも多く、検索すると下のブログのような素敵なカスタマイズを紹介しているブログもヒットしてきます。

【5ステップ】「Cocoon」まるごとカスタマイズ講座【コピペ可】
無料WordPressテーマ「Cocoon」の便利なカスタマイズ方法をまとめたページです。ユニークなカスタマイズで他のCocoonブログに差をつけよう。

自分で調べてカスタマイズすると、ちょっと大変かもしれないけれどさらに愛着もわくのでぜひトライしてみてくださいね。

そうそう、もう一つ、わたしはリストもカスタマイズしてるんですが、これもサルワカさんのサイトを参考にしています。

さくら
リストはサルワカさんのサイトをそのままコピペしても結構いい線まで行けると思います。Cocoonのデフォルトがシンプルなので。
コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

以上、ざっくりとした紹介だけれど、参考になったらうれしいです。

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