[無料WordPressテーマ] STINGER PLUS2 PRO版限定ウィジェットの背景色を変更する
STINGER PLUS2のウィジェット画面でPROとマークのついたウィジェットってありますよね。見ればわかるようにPRO版限定の機能を表しているわけですが、これってPCの環境によってはちょっとわかりにくい場合もあるんじゃないでしょうか、という事で小ネタ的なカスタマイズになります。
ディスプレイによってはPROマークが見えない
私のPCと言うかディスプレイの解像度は既に廃れつつある感じの1280pxなので、見出しの長いウィジェットだとのマークが見えない場合があるんですよ…これが。
そろそろ高解像度のディスプレイに変更したいとは常々思ってますが、仮にマークが見えていたとしても、ウィジェットをドラッグ＆ドロップする時に想定外の場所に放り込んじゃって「おかしいな…表示されないんですけど？」とかいう事もあるんじゃないかと思うんですよね。
私とか。
おまえかい！というツッコミは置いといて、百聞は一見にしかず…実際にどんな感じなのか画面を見ていただく事にしましょう。
グレーっぽい囲み的な部分が少しでも見えていればたぶんそれだろうなーってのは何となくわかりますが、問題は赤枠で囲んだ部分オリジナルのショートコード作成ウィジェットがこの状態ではPRO版限定機能だとわからなくなっちゃってます。
私はここで引っかかったわけですが、Micata2では無料版で使えた機能だけにまさかSTINGER PLUS2でPRO版限定機能になるとは思ってもみなかったので余計気が付きませんでした。
まぁブラウザをカカっとズームアウトしてやると全て表示されるんですけどね？でもこれだったらいっそ色分けしてくれた方がわかりやすいのに…と思いませんか？私は思います。
管理画面のCSSを編集する
このウィジェット画面に関するスタイルはadmin.cssを編集します。STINGER PLUS2はもう滅多な事では更新されませんし、管理画面以外に影響は無いという事で親テーマを直接編集しちゃいます。さすがに直接イジるのに抵抗のある人は親テーマからコピってきて下さい。
このマークにはpro-onlyというクラスがついてまして、この子要素を持つ親要素に対する指定が出来ればいいんですが、残念ながらCSS3ではそれは出来ないようです。と言うか、CSS4ってずっと名前だけは聞いてる気がするんですが一体いつ使えるようになるんですかと…
なので、原始的な方法ですが一つづつクラスセレクタを調べました。このくらいの数ならそれほど手間でも無いですし仕方が無いでしょう。admin.cssの最後に以下のコードをコピペするだけでOKです。あ、背景色の部分は自分で好きな色を設定して下さいね？
/* PRO版限定機能の背景色を変更 */
#widget-6_form2_widget-__i__ .widget-top,
#widget-8_catbox_widget-__i__ .widget-top,
#widget-9_custompostentry_widget-__i__ .widget-top,
#widget-10_singlebox_widget-__i__ .widget-top,
#sidebar-9,
#sidebar-15,
#sidebar-19,
#sidebar-20,
#sidebar-21,
#sidebar-22,
#sidebar-25 {
background: ここは好きな色にどうぞ;
}
あらいい感じ！（自画自賛）
ウィジェットがやたら多いテーマの場合、ヘッダー・サイドバー・フッターなどの括りで色分けしたりすると見易くなっていいかもしれませんね？
テーマが更新されてもたぶん大丈夫
今後STINGER PLUS2が更新されてウィジェットが追加されたとしても、既存ウィジェットのIDやクラスセレクタを振り直すとは思えないので、新規ウィジェット用のCSSを必要に応じて追加する事で簡単に対応は出来るはずです。
まぁ消えたら消えたで困るような修正でも無いですし、その時はどんまいという事でひとつ。