Simplicityのh4をカスタマイズするときはプラグインの競合に注意して!

先日「のぶ的まとめ」のカスタマイズ記事でh4タグのCSSを調整するカスタマイズを提案させていただいのですが大変な欠陥が見つかりましたのでお詫びと改善策のご案内です。

参考記事↓

[b]ブログの見出しにアイコン画像を表示する方法【Simplicityカスタマイズ】
この間、シゲさん(@piece_hairworks)にぼくのブログの見出しについて褒めてもらいました!暑いから体に気をつけてくださー...
スポンサーリンク

問題点はプラグインとの競合

盲点だったのですがプラグインAmazonJSをご利用の方はh4タグのカスタマイズには注意が必要です。

上記の参考記事でh4をカスタマイズするとAmazonJSで作ったリンクがこうなります…
Notes customize01
お分かりでしょうか?ぼくのアイコンがこんにちはしてますねw

原因はAmazonJSで作成されたリンクのタイトルにh4タグが使われているからです。

h4カスタマイズの修正と改善

h4のCSSを調整するとAmazonJSにも反映されてしまいますのでclass属性を持たせてカスタマイズします。

まずはstyle.cssにまとめclassを作りましょう。以下をコピペで大丈夫です。画像データは準備しておいてくださいね〜

.matome{
  background-image: url("images/画像データ");
  background-repeat: no-repeat;
  background-position: left bottom;
}

前回のカスタマイズ記事でh4のcssに記述した方は、background〜の3行を消しましょう!
Notes customize02
これで前回のカスタマイズの修正と改善の準備ができました。

肝心のclassの使い方ですがとってもカンタンです!

<h4 class="matome">のぶ的まとめ</h4>

h4の開始タグに「半角スペース」と「class=”matome”」を追加するだけ!カンタンでしょー?

ぼくはこの方法でh4タグにアイコン画像を表示させています。
(chromeユーザーは「のぶ的まとめ」を右クリックして要素の検証をすると確認できます)

のぶ的まとめ

この度はぼくのカスタマイズ記事がご迷惑をおかけしました。

他にも何かお気づきの方は教えて頂けると嬉しいのでブログでもtwitterにでも連絡ください。

開始タグ
<h4 class="matome">
終了タグ
</h4>

プラグインAddQuicktagをご利用の方は上記のように登録しておくととても楽に使えます。

ご参考までにどうぞ。以上のぶでした〜

スポンサーリンク
Simplicityのh4をカスタマイズするときはプラグインの競合に注意して!
この記事をお届けした
のぶログらいくすの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

フォローはこちらから↓