Cocoonで囲みブログカードラベルを変更する方法

ドクダミ淑子さんのブログで、気になったテーマなどを読んでいるんですが、面白いものがありました。

自ブログ記事の紹介で、ブログカードとして使う「あわせて読みたい」というラベルについて。

「あわせて読みたい」という表記は、確かに読ませたい表記だなっていうのは、薄々感じてはいたものの適切な表現がないので、ブログカード的に使っていました。

ですが、ドクダミ淑子さんがブログ内で他の自ブログ記事を紹介するときに使っているのが「こちらもどうぞ」という表現。

これがわりと他の方にも好評なうえに、私もついつい気になって読みに行ってしまいます。

この自ブログのリンクですが、内部リンクになるのと関連記事を読んでもらうことでブログ内の回遊率を上げ、滞在時間を延ばすのでとても効果があるのですが、結局読まれないことには効果はありません。

そこでせっかくなので、同じく「こちらもどうぞ」を使おうとしてブログで試しているのですが、毎回手入力になります。

本来なら

こういったブログカードにラベル付きでやりたいのですが、このブログで使用しているテーマ（Cocoon）には、「あわせて読みたい」はあるのですが、「こちらもどうぞ」はありません。

毎回手入力で、「こちらもどうぞ」をラベルなしのブログカードの前に

こちらもどうぞ。

みたいにやると、wordpressはちょっとカッコ悪い。

そこで、ブログカードのラベルを変更したらいいということに気づいたので、カスタマイズしました。

Cocoonでブログカードのラベルをカスタマイズする方法

Cocoonのビジュアルエディタでスタイルをクリックすると一覧が出てきます。

囲みブログカードラベルというのが、ブログのアドレスを枠で囲みビジュアル的に見せてくれるというものです。

関連記事とか詳細はこちらとかありますが、真ん中に「あわせて読みたい」があります。

この「あわせて読みたい」を「こちらもどうぞ」に変更します。

ここからはcss編集です。

テーマ編集を選んでスタイルシート編集画面にします。

css編集を行うテーマは必ず子テーマを使用してください。

Cocoonの場合はCocoon childになります。

このcss編集画面で以下のコードを記述します。

.bct-together .blogcard::before {
content: " こちらもどうぞ";
}

cssの.bct-together以降については、親テーマから検索してください。

子テーマのcssに記述することで、ブログにこのスタイルが反映されます。

親テーマに記述されているのは、「あわせて読みたい」なので、それを子テーマで「こちらもどうぞ」に書き換えます。

ただし、CSSを編集してもビジュアルエディタ上での変化はありませんので注意してください。

CSS編集後も、画面上は「あわせて読みたい」のままです。

が、実際にこのあわせて読みたいを選択して、ブログカードを作ってみます。

一応、ビジュアルエディタ上でも、あわせて読みたいが出てしまっているのですが、画面で確認すると、きちんと「こちらもどうぞ」になっているのが確認できますよね。

というわけで、クリック一つでこちらもどうぞを実現できました。