【WordPress】 テーマの利用~Cocoonのインストール、設定

SITE/BLOG

 ※ 元は「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画像
に適当な画像をアップロード。ヘッダー背景画像を転用した。

スポンサーリンク