【CSS】ティラノビルダーで傍点(圏点・脇点)を使うやり方メモ

 

傍点(ぼうてん)、圏点(けんてん)、脇点(わきてん)。


よく小説とかで使われている「文章強調」の技法ですね。記事のサムネのとおり、強調したいテキストの頭とか脇に「点」を加えると。


これティラノビルダーでもできねーかなーっておもって、すこし考えてみました。以下、メモがてらやり方を書いておきます。


なお、おそらくバッドノウハウです。

 

スポンサーリンク

TIPプラグイン活用方式

 

このやり方おもいついたとき、自分でも笑っちゃったんですけどね()


見出し通り、「TIPプラグイン」を使わせていただきます。

 

TIPプラグイン詳細はこちらで

ティラノビルダーで「TIPプラグイン」を導入してみましたメモ

 

厳密には、TIPプラグインの「CSS要素」を使わせていただきます

 

 

TIPプラグインで好きな要素名を追加できる

 

ティラノビルダー、デフォルトだと「好きなテキストに好きなCSS要素を追加する」みたいなこと、お手軽にはできないと思うんですよね。たぶんJavaScriptの知識が必要になる。


自分はまだJavaScript勉強中でよくわかんないんで()、「それっぽいことできるプラグイン何かないかなー……」って探してて辿り着いたのが、TIPプラグインでした。

 

 

[tip key="bouten"]強調したいテキスト[endtip]

 

↑で、こうする。


こうするとどうなるかって、「強調したいテキスト」部分に、「span.tip.bouten」って特有のCSS要素を追加できるんですよ。


あとはもう、こっちのもんですわ(´-`)

 

 

作ったCSS要素に傍点を設定する

 

/*傍点用(TIPプラグイン使って)*/
span.tip.bouten{
-webkit-text-emphasis: filled dot;
text-emphasis: filled dot;
}

 

↑このようにすることで、「span.tip.bouten」部分に、傍点を追加できます。

 

 

 

↑こんな感じになります。


なお、CSS傍点にはいろんな種類があるんで、「dot」以外にも好きなものを使えばいいと思います。

 

参考にさせていただいた記事

CSS3なら傍点(圏点)で文字を強調できる - スタイルシートTipsふぁくとりー

 

 

TIPのごまかし

 

あくまでTIPプラグインを使ったものなので、クリックすればふつうにTIPが表示されます


ただ上記の例のように、傍点部分のカラーをそのままにして、TIPマークも非表示にすれば、読む側はまったく気にならないと思います。

 

 

 

↑万が一クリックされた時のために、一応TIPテキストはそれっぽくしておきました。

 

 

【追記】傍点をクリックできないようにする

 

z-index:999 !important;

 

↑tyrano.cssの該当要素のなかにこのように追記すれば、傍点部分をクリックできないようにできます。


つまり、

 

/*傍点用(TIPプラグイン使って)*/
span.tip.bouten{
-webkit-text-emphasis: filled dot;
text-emphasis: filled dot;
z-index:999 !important;
}

 

↑こうすればOKと。

 

 

HTMLタグ方式(表示に難アリ)

 

ティラノスクリプトにHTMLタグを直打ちして反映されたのは、どうやら自分が入れているプラグイン特有の現象だったようです。なので削除。

 

TIPプラグイン活用方式よりお手軽ですが、やや難もあります。

 

tyrano.cssに要素追加

 

/*傍点用*/
.bouten{
-webkit-text-emphasis: filled dot;
text-emphasis: filled dot;
}

 

↑「bouten」という要素を新たに作ります。

 

ティラノスクリプト内でHTMLタグを使う

 

<span class="bouten">強調したいテキスト</span>

 

↑このようにすることで、カンタンに傍点を追加できます。

 

ただし、表示に難があります


</span>の部分の「残像」が一瞬表示されちゃうんですよね。環境にもよるかもしれませんが。

 

ルビ方式(鬼メンドウ)

 

[ruby text=・]強[ruby text=・]調[ruby text=・]し[ruby text=・]た[ruby text=・]い[ruby text=・]テ[ruby text=・]キ[ruby text=・]ス[ruby text=・]ト

 

↑こうすりゃルビ機能でも傍点を再現できますが…………地獄ですよね。


仮にこれが正攻法だとしても、実用的ではない。

 

 

まとめ

 


いくらなんでもムリヤリすぎでしょ……


カタチになりゃいいんだよカタチになりゃ! 少なくともルビ方式よりはマシだろ!

 

まぁ……バッドノウハウだとは思います。


指定テキストにCSS要素を追加できるプラグインを、自分で用意できるならそっちのほうがいいんだと思います。自分はそういう技術がないんで、既存のものを使わせていただきました。


ただ、TIPプラグインのこのテキストに要素を追加できる副次機能、汎用性がめちゃくちゃ高い気がしますね……。いろんな文字装飾に応用できそう。(推奨されるテクニックではないかもしれませんが、今のところは代替手段として使わせて頂こうかなと)


何はともあれ、制作者の方に感謝です。


今回は以上です。良きノベルゲライフを────ではまたφ(・ω・ )

 

スポンサーリンク
タイトルとURLをコピーしました