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

情報をシェアしよう

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


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


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


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

スポンサーリンク

TIPプラグイン活用方式

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


見出し通り、「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」以外にも好きなものを使えばいいと思います。

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

スタイルシート(CSS)を使って文字を強調する方法にはいくつかありますが、CSS3では強調として使える装飾に「傍点」も加わりました。テキストの上に点を描くことで強調できます。傍点の色は自由に指定でき、形も丸形や三角形や読点(ゴマ)型などから選択できます。text-emphasisプロパティを使うだけの簡単な記述で点を打...

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


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


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

スポンサーリンク