おすすめ新刊著書の紹介ーブログアフィリエイトやWEBライティングに関するハウツー本
ブログ初心者におすすめなレンタルサーバー比較

私が実際に使てみた複数のレンタルサーバーの中で、
ワードプレスブログ初心者に使いやすいサーバーをピックアップして比較しています。

≫詳しく読んでみる

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

cocoon WordPress

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

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

スポンサーリンク

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

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

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

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

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

WP無料テーマ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設定からできない英語変換の覚書でした。今後も何かあったら追記していきます。

スポンサーリンク
「知識ゼロ未経験ライターからブログ運営を経て不労所得を作るまでの道のり」メルマガ無料登録

・知識ゼロ、未経験からウェブライターになる方法
・ライティング技術を活かして自分でブログ運営する方法
・コンテンツ販売などによる不労所得を作る方法

など、ブログや他サイトでは公開しにくいノウハウを紹介しています。

登録者全員に、

SEOライティングや文章力を200%高めるブラッシュアップ法を盛り込んだ、
PDFファイル(14000文字強)を特典として無料プレゼントしています。

登録は無料、解除もいつでも可能です。

迷惑フォルダに入ることが多いので、メルマガが届かない場合は、迷惑フォルダをチェックしてみてください。

WordPress
スポンサーリンク
知識ゼロから始める主婦アフィリエイト日記

コメント

トップへ戻る