WP無料テーマCocoonを英語サイトとして使う際のカスタマイズ覚書

WP無料テーマはここのところ、Cocoonをお気に入りとして使っています。Cocoonは英語版にも対応してくれているので、英語サイトとしてもほぼストレスなく使うことができてます。作成者のわいひらさんに感謝ですね！

ただ、たくさんの機能が搭載されているだけに、英語化が追い付かない部分もあるようです。更新も頻繁に行われているため、徐々に英語化が進むのだろうと思います。更新を待たなくてもちょっと子テーマのCSSを書き加えるだけで対応できる部分もあるため、そのへんのカスタマイズ方法を覚書として残しておきます。

WP無料テーマCocoonを英語サイトとして使う方法
囲みブログカードレベルを英語に書き換える
1. Cocoonブログカードラベルの文字色を変えるCSS
2. Cocoonブログカードラベルの背景色を変えるCSS
また何かあれば追加します

WP無料テーマCocoonを英語サイトとして使う方法

Cocoonは本来日本語サイトやブログにぴったりのワードプレステーマですが、徐々に英語にも対応してくれているようです。

Cocoonを英語サイト（ブログ）として使うには、ワードプレスの設定で使用言語を英語に変えてからテーマをインストールすればいいみたいですね。私の場合、テーマをインストールしてから使用言語を日本語から英語に変換しても、問題なく使えたんじゃないかと思います。複数の英語ブログをCocoonで作成しているので、この辺はあまりよく覚えていません。

「関連記事」や「コメント」などの日本語表示は、Cocoon設定から直接編集すれば自分の好きな英語表現に書き換えることが可能です。

囲みブログカードレベルを英語に書き換える

WP無料テーマCocoonカスタマイズ：囲みブログカードレベル

設定から簡単に変更できなかったのが、囲みブログカードのレベルです。囲みブログカードというのは以下みたいなもの。

このカードの右肩や左肩に表示されている「関連記事」とか「あわせて読みたい」というレベルです。ここが、英語になっていないので、これを書き換えます。

以下のコードを子テーマのスタイルシート(style.cssファイル)に書き加えます。書き加える場所は、以下の記述がある下がよいでしょう。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

この下に、以下のようになるように文字列を書き加え、保存してください。くれぐれも「子テーマ」に書き込んでくださいね。あと、バックアップ等はご自身でお願いします＾＾

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.bct-related .blogcard-label .fa::before {
  content: "";
}

.bct-related .blogcard-label::after {
  content: "Related Story";
}

.bct-reference .blogcard-label .fa::before {
  content: "";
}

.bct-reference .blogcard-label::after {
  content: "Reference";
}

.bct-reference-link .blogcard-label .fa::before {
  content: "";
}

.bct-reference-link .blogcard-label::after {
  content: "Reference Link";
}

.bct-popular .blogcard-label .fa::before {
  content: "";
}

.bct-popular .blogcard-label::after {
  content: "Popular!";
}

.bct-pickup .blogcard-label .fa::before {
  content: "";
}

.bct-pickup .blogcard-label::after {
  content: "Pick Up!";
}

.bct-check .blogcard-label .fa::before {
  content: "";
}

.bct-check .blogcard-label::after {
  content: "Check!";
}

.bct-together .blogcard-label .fa::before {
  content: "";
}

.bct-together .blogcard-label::after {
  content: "You may also like";
}

.bct-detail .blogcard-label .fa::before {
  content: "";
}

.bct-detail .blogcard-label::after {
  content: "More Details";
}

.bct-official .blogcard-label .fa::before {
  content: "";
}

.bct-official .blogcard-label::after {
  content: "Official Site";
}

.bct-dl .blogcard-label .fa::before {
  content: "";
}

.bct-dl .blogcard-label::after {
  content: "To Download";
}

「content: “ XXXXX”;」の「XXXXX」の部分が英語ラベルとして表示されます。上の記述は私が適当につけた英語訳なので、みなさんはご自身の好きな表現に変更してください。それぞれ以下のように対応しています。

.bct-related 関連記事
.bct-reference 参考記事
.bct-reference-link 参考リンク
.bct-popular 人気記事
.bct-pickup ピックアップ
.bct-check チェック
.bct-together あわせて読みたい
.bct-detail 詳細はこちら
.bct-official 公式サイト
.bct-dl ダウンロード

Cocoonブログカードラベルの文字色を変えるCSS

2019年11月15日　Cocoonのアップデートにより更新しました。文字色を変更する必要が出て来たので、追加でメモっておきます。

.blogcard-label {
  color: #e24526;
}

Cocoonブログカードラベルの背景色を変えるCSS

2020年3月3日追記：ブログカードのラベル背景色を変えるCSSです。

.blogcard-label {
	background-color:#9b7f87;
}

#の後は好きなカラーコードで応用してください。

また何かあれば追加します

とりあえず、Cocoon設定からできない英語変換の覚書でした。今後も何かあったら追記していきます。