見出し画像

Wordpress（cocoon）で行間の一部だけを変更したい！

ななかまど

ワードプレスでブログを書いていて、行間の一部分だけを変更したい！と思ったことはありませんか？

このnoteでは、プログラミングの知識ゼロのただの主婦が、ブログを書いていて困ったことを試行錯誤した記録を残します。

同じように悩むブログ初心者さんのお役に立てたら幸いです。

※テーマはcocoonを使っています。

【悩み】ワードプレスで行間の一部だけを変更したい

下の画像ように広告の上に一言添えたいのに、離れてしまう…という問題。

スクリーンショット (35)

解決後は下の画像のようになります。

スクリーンショット (37)

ピッタリとくっつきました。

この記事では、CSSで変更する方法を記載しますが、

cocoonの場合、CSSを使わなくても広告上下にキャッチコピーを入れられる方法が実装されていました！「マイクロテキスト」を使うと簡単です！

１，記事内のカスタムCSSにコードを入力

記事の一番下にスクロールしていくと、カスタムCSSを書き込むところがあります。

カスタムCSS

この部分に以下のコードを記述します。

.message {
   color: #f00;
	margin-bottom :-25px;
   text-align:center;
	font-weight:bold;
}

簡単に解説すると、上から

colorで色を赤に！

margin-bottomで行間をなくし広告にピッタリくっつけます。

text-alignで文字を中央に配置。

font-weightで文字を太くしています。

※必要ない部分は省いてOK！

２，本文のカスタムHTMLにコードを入力

次に、実際に行間を変えたい部分にカスタムHTMLを開き以下のコードを入力します。

カスタムHTML

<div class="message">
＼Amazonで試し読み可能／
</div>

※本文の内容は変えてください。

カスタムCSSで設定した内容をここに反映させるという指示です。

これで更新すればOKです！

CSSが反映されなかった場合

イライラ

しかし…！！

私はこれではCSSが反映されませんでした…。

後日見つけた記事がCocoonの追加CSSがリアルタイムで反映されない原因はCSS縮小化です。

やることはひとつだけ！

cocoon設定→高速化→CSS縮小化のチェックを外す！

高速化

やってみたら見事反映されました！

複数の記事にCSSを反映させたい場合

ただ、あとで気が付いたのですが、

広告は複数のページにあり、一つ一つにCSSを書いていくよりも

①スタイルシートにCSSを記述。

.message {
   color: #f00;
	margin-bottom :-25px;
   text-align:center;
	font-weight:bold;
}

②使いたい時にカスタムHTMLを使って反映

<div class="message">
＼Amazonで試し読み可能／
</div>

の方が楽でした！

用途に合わせて使い分けてみてください♪

今回コードの書き方・解決方法について教えてくれたブログ＆Twitter仲間のはむちゃん（@hamu_rikei）に感謝します！ありがとう！



この記事が気に入ったらサポートをしてみませんか？