※ 元は「Cocoon設定」の記事。2025年、テーマ全般について記事追加
WordPressをインストールして、使い方が分かってきたら、ブログのデザインを変えてみたくなるかもしれない。
そんな時にテーマ Themeの利用。
ブログのテンプレート(雛型)選び。
テーマによってブログ全体のデザインが変わってくる。
途中で別のテーマに変更することもできるので、
あまり難しく考えず、何か1つ選んでインストールしてみると良いと思う。
外観 - テーマ
からインストール。
あらかじめWordPress公式のデフォルトテーマが用意されている。毎年1つ作られていて、2025年は「Twenty Twenty-Five」。
当ブログもまだブログ形式でなかった頃、デフォルトテーマをインストールしていた。
外観 - テーマの編集(今はテーマファイルエディター)からスタイルシート style.cssやPHPファイルをいじってカスタマイズしていたが……。
ブログ形式に変えて、Googleアドセンスを利用する段階になって、Cocoon(コクーン)という無料テーマを使ってみることにした。
広く紹介されていたので。
WordPressのテーマ
使っている人が多いテーマは、インターネット上の情報も多いので、助かる。ブログ初心者向け。
無料テーマ
- WordPress公式デフォルトテーマ
Twenty Twenty-Five、Twenty Twenty-Four、…… - Cocoon(コクーン) ・・・ 下記
以前Simplicity - Lightning(ライトニング)(lightning-vektor-inc.co.jp/)
有料テーマ
- AFFINGER(アフィンガー)(wp-fun.com/)
以前STINGER - SWELL(スウェル)(swell-theme.com/)
- XWRITE(エックスライト)(xwrite.jp/)
by XServer + Cocoon
他にもいろいろある。
有料テーマは、
デザインの自由度が高く高機能、
SEO(いわゆるブログへの集客)にも強い、
など。
Cocoonのインストール
当ブログで利用しているテーマはCocoon(wp-cocoon.com/)。
HP(ホームページ)から親テーマ、子テーマをダウンロード。
外観 - テーマ
のテーマを追加 - テーマのアップロード
にてダウンロードした親テーマをアップロード。
繰り返し、テーマを追加 - テーマのアップロード
にてダウンロードした子テーマをアップロード。
親テーマ・子テーマに分かれていないテーマもあるが、
Cocoonは分かれている。
親テーマではなく子テーマ(Cocoon Child)のほうを有効化する。
テーマの編集は子テーマのほうでstyle.cssやfunctions.phpなどをいじる。
バージョン更新しても消えずに保持される。
機能豊富なテーマであれば、テーマファイルエディターを使うことも少なくなる。
Cocoonは無料テーマだが、機能豊富。
Cocoon設定 - Cocoon設定からカスタマイズできる。
Cocoon設定 - Cocoon設定

設定の項目は30以上ある。

ひとまずスキンからスキン[テンプレート]設定。
全体、ヘッダー、画像をいじれば、
“大雑把な”デザインが決まってくる。
タイトル、目次、SNSシェア、SNSフォローも少しいじって……
“細かな”デザインは投稿しながら少しずつ仕上げていく。
全体
サイトキーカラー
ここで選んだ色がヘッダーメニュー、フッター、投稿記事の見出しなどの色になる。
サイトフォント
とりあえずメイリオ。
さわらび明朝が良さそうだが、Webフォント。
Webフォントは、読み込み速度など確かめてから。
+)2つめのブログ ecoで、さわらび明朝利用。
文字の太さ font-weight
サイトアイコンフォント
Font Awesomeを使用
サイト背景色
サイドバーの位置
デフォルトは右だが、左に変えられる。
など
Cocoonインストール後、Cocoonのファビコン(=サイトアイコン)が表示される場合、
外観 - カスタマイズ - サイト基本情報
にてサイトアイコンの設定をチェック。
ヘッダー
ヘッダーレイアウト
センターロゴのまま。
キャッチフレーズの配置
本ブログのキャッチフレーズは『とわ』。
でも「表示しない」に変更。
ヘッダーロゴ
下の画像(透過png)をアップロード。

ヘッダー背景画像
下の画像をアップロード。

画像
アイキャッチ(サムネイル)画像のない投稿は、デフォルトのままだと
NO IMAGE
と表示されるだけなので、とりあえず
NO IMAGE設定 - NO IMAGE画像
に適当な画像をアップロード。ヘッダー背景画像を転用した。