simplicityとceltispackの組合せでシェアボタンの表示がおかしくなったときの対処

 

このブログとは別のブログではWordpressのテーマでsimplicityを使用しています。

しかし今回Simplicity1.xから2.x台のバージョンにアップデートした際に、シェアボタンの表示に不具合が生じてしまったのでその時に行った対処方法を紹介します。

結論から言うとceltispackというプラグインのcssとの競合でした。

Simplicity
WordPressテーマ「Simplicity」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つのレスポンシブスタイル

SEO施策済みでシンプル、Simplicityテーマの更新頻度も高いので安心して使うことが出来ます。

子テーマを用意してあってそちらでカスタマイズすれば、アップデートを行っても問題ない作りも好印象でお勧めのテーマです。

シェアボタンの表示不具合

simplicityのシェアボタンをバイラルタイプの表示にしたときに起こりました。アイコンマークが表示されず変な記号になってしまっている。

シェアボタンの不具合

本来アイコンが出るはずが、■マーク

簡単に検索してみたところ報告がなかったので恐らくテーマの問題ではないと踏んで、プラグインを無効化していったところビンゴ。

celtispackを無効化したらシェアボタンの表示が正常に戻りました。

原因

結論から言えば、celtispackのトップページに戻る関連のCSSがシェアボタンのCSSと競合していました。

シェアボタンをバイラル表示にした際のHTML出力の一部が以下。

<span class="social-icon icon-twitter"></span>

celtispackのstyle.cssのスクロールボタン関連の記述の中で問題なのがセレクタの対象に「icon-」を使って居ることで、シェアボタンのcssと競合してしまっている。

フォントファミリーが変わってしまったことで文字化けしていたようだ。

 [class^="icon-"]:before, [class*=" icon-"]:before {
 font-family: "fontello";
 font-style: normal;
 font-weight: normal;
 speak: none;
 
~省略~

 /* Uncomment for 3D effect */
 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

対処方法

celtispack導入の目的がブログカードの生成だったのでシンプルに対象のCSSの記述を削除した。

調べたところ「Scroll Page Top」を追加した際に使うCSSのようなので使う予定がない場合は削除して問題ない。

対象セレクタの「[class^=”icon-“]:before, [class*=” icon-“]:before 」部分の削除でも十分だが、255行目付近の「/* スクロールボタン 」部分を丸ごと削除した方が分かりやすいだろう。

問題

これについてはセレクタを汎用的にし過ぎましたね。「icon-*」というclassは付ける人も多いと思うのでsimplicityだけでなく他のテーマやプラグインにも影響が出る可能性があります。

注意した方がいいかもしれません。

シェアボタン治りました

ということで無事に治りました(^_^)/良かった良かった

関連記事カテゴリ・タグ

WordPress
  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。