STINGER8の正常に機能していないクイックタグを使えるように修正してみた

STINGER8 ロゴ

ここのところ副サイトのリューアルに向けたテーマ選びの為、候補のテーマを片っ端からイジり倒しているところです。それゆえに肝心のリニューアル作業は全く進んでないという典型的なダメダメ王道パターンを絶賛爆進中…でもそんな自分がちょっぴり好きな今日この頃だったりします。

スポンサーリンク

STINGER8のあやしいクイックタグ

話題にされる事はほとんど無いように思いますが、STINGER8のクイックタグにはそのままでは機能しないものがいくつか存在します。そこで今回のエントリーではそれをいかにも当サイトらしい適当な方法で何とかしてみたという内容になります。

フリーボックス

タグは普通に挿入されますが実はスタイルの方が定義されていません。それさえあればちゃんと表示される形にはなっているので、STINGER PLUS+から該当する部分をコピってきて利用する事にしました。

以下のCSSを次のファイルの何れかにコピペします。

  • 子テーマの style.css
  • 親テーマの style.css
  • カスタマイザーの 追加CSS
/*--------------------------------
フリーのウィジェットボックス
---------------------------------*/
.freebox {
	border-top: solid 1px #ccc;
	padding: 0;
	background: #f3f3f3;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 25px;
	margin-bottom: 20px;
	position: relative;
}

#side .freebox {
	margin-bottom: 0;
}

.p-free {
	padding: 0;
}
.p-free:after {
	content: "";	
	display: block;
	margin-bottom: 30px;
}

.p-entry-f {
	padding: 3px 20px;
	margin: 0;
	font-size: 15px;
	font-weight: bold;
	background: #999;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}

.free-inbox {
	padding: 10px 15px 10px;
	text-align: left;
}

見出しの色や背景色はSTINGER8に合わせて適当につけてみましたが、色に関する部分(黄色いマーカーで示してあります)は好きなように変更していただければと思います。

.freebox で上のボーダーと背景色

border-top: solid 1px #ccc;
background: #f3f3f3;

.p-entry-f で見出し部分の背景色と文字色を変更出来ます。

background: #999;
color: #fff;

CSSを適用するとこんな感じ。これを見るとやっぱSTINGERだなという感じがしますね。

STINGER8 フリーボックス

目次(TOC+)

このショートコードはSTINGER8の機能ではなくプラグインの Table of Contents Plus(以降TOC+と略) の機能なので、TOC+をインストールしないと効果がありません。STINGER8ではそのショートコードをクイックタグで挿入出来るというだけです。

本来ならTOC+の目次は基本設定で指定した位置に表示されますが

TOC+ 基本設定 目次の表示位置

ショートコードをエントリーの中で使用すると、任意の位置にTOC+の目次を表示させる事が出来ます。あくまでもショートコードを挿入した位置に移動するだけで、追加されるわけでは無いのでその点は注意して下さい。

TOC+ ショートコードで目次の表示位置を設定

もちろん他のテーマでも [toc] と自分でショートコードを記述すれば同じように出来ます。また、それとは逆に [no_toc] と記述する事でその投稿では目次を非表示にする事も可能なので覚えておくと良いでしょう。

とか言って実は私もついさっき知ったばかりなんですけどね?

尚、表示条件を満たしていない(見出しの数が設定数より少ない)場合でも目次を表示させる事が可能か試してみましたが、残念ながらそれは出来ませんでした。

スマホ/PCに表示しないボックス

スマホに表示しないボックス と PCに表示しないボックス はショートコードで括られますが、そのショートコード自体が未実装なので全く機能しません、と言うかそのまんま表示されます…何だかSTINGER8って色々調べてるとそういうのなにげに多い気が。

STINGER PLUS+ではどうやってたんだろ?と思ったら、あちらではショートコードを使わずに直接タグを挿入していたので同じ方法でやる事にしました。

面倒なので親テーマの functions.php を直接修正する事にします。STINGER8はもう半年近く更新もありませんし、AFFINGERや最近リリースされたSTINGER PROの事を考えると、恐らく今後も更新の見込みは無いでしょうから問題は無いと思います…たぶん。

お約束ですが、functions.php は失敗すると WordPress が開けなくなる可能性のある危険極まりないファイルなので慎重にお願いしますよ?

まずは親テーマの functions.php を開いて、下の方にあるこの部分を探します。

QTags.addButton('ed_smanone', 'スマホに表示しないボックス', '[pc]', '[/pc]');
QTags.addButton('ed_pcnone', 'PCに表示しないボックス', '[nopc]', '[/nopc]');

見つかったら以下のコードをコピペで上書きします。

QTags.addButton('ed_smanone', 'スマホに表示しないボックス', '<div class="smanone">', '</div>');
QTags.addButton('ed_pcnone', 'PCに表示しないボックス', '<div class="pcnone">', '</div>');

厳密に言うとメディアクエリーで 960px 以上をPCとしているだけなので、ユーザーエージェントで判別したい場合(wp_is_mobile()とかで)は面倒でもショートコードを作成する事になるかと思いますが、とりあえず今はこれで良い事にしましょう。

PCのみ左右%ボックス

これは特に不具合とかそういった話ではありませんが、単に私がデフォルトでの使い方しか知らなかったのでついでに書いてみたいと思います。

CSSを見ていたらクイックタグで貼り付けた後にクラスセレクタをちょいとイジる事で、左右のボックスの比率を何パターンか変えられそうな感じがしたんですよね。

と思ったら公式に書いてあるじゃないすか!やだー!

重箱の隅をつつくようですが responbox(デフォルト)の場合、右側は60%ですね?

公式の説明のように左右のボックス間にマージンが空いていない事とパディングが部分的にしか設定されていないので、使い方によってはCSSのカスタマイズが必要です。

PC表示

STINGER8 レスポンシブボックス PC表示

タブレット表示

STINGER8 レスポンシブボックス タブレット表示

スマホ表示

STINGER8 レスポンシブボックス スマホ表示
使い方は、まずクイックタグを挿入するとこうなります。

<div class="clearfix responbox"><div class="lbox"><p>左側のコンテンツ40%</p></div><div class="rbox"><p>右側のコンテンツ60%</p></div></div>

次にクラスセレクタのこの部分を

<div class="clearfix responbox30">

こんな感じで左側のボックスの%の数値にしてやりましょう。この数値は 30 ~ 70 の範囲で10刻みに指定が可能です。

タグを挿入した直後の状態だとボックスの内容が編集しにくいので、ビジュアルエディタに切り替えて編集するか、切り替えた後でまたテキストエディタに戻すと以下のような状態になるので、ワンクッション必要ですがそれから編集すると良いでしょう。

<div class="clearfix responbox">
<div class="lbox">

左側のコンテンツ40%

</div>
<div class="rbox">

右側のコンテンツ60%

</div>
</div>
TinyMCEの自動整形を無効化しているとならない場合があります。

細かい事ばかり言うのもちょっとアレですが、この .responbox のCSSの書き方はもうちょっとまとめたい気がしなくも無いような…

クイックタグを有効活用しましょう

今回のエントリーではSTINGER8の正常に機能していなかったクイックタグの修正方法と、今まで気付いていなかったタグの使い方を紹介してみましたが、なんだかんだでSTINGER8にもこういった便利機能がちゃんと揃っていた事をあらためて認識した次第です。

とりあえず自分が必要なカスタマイズさえ出来れば元々のスペックは高いテーマですので、今後も引き続きSTINGER8のカスタマイズを紹介していけたらと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る