色選択可能！！文字を縁取りするオレティメットショートコード！
inowayです。
WordPressのショートコード使ってますか？
私はかなり使ってます。
ハッキリ言って依存状態です(笑)
それというのも全て、例の究極プラグイン
[su_ckf dare="-w1-l" sigusa="point" poi="check" midasi="オレティメットとは？"]【俺】＋【究極(アルティメット)】の略。究極プラグイン、Shortcodes Ultimate の有料拡張アドオン、Shortcodes Maker で創ったオリジナルショートコードのことよ。ちなみにinowayが勝手に作った言葉なのでGoogle検索してもこのブログしかヒットしないのは内緒だゾ。[/su_ckf]
前回のおさらい
前回はテキストにルビを打つオレティメットショートコード、【
まあ、単純なHTMLタグを使用してるシンプルなもので、２箇所に入力するだけで機能するショートコードでした。
私の第一号オレティメットショートコードでもあります。
これで挿入されたテキストはこのように表示されます。
選択肢で選ぶショートコード
はい、ショートコードメーカーでは知識とスキルがあれば Shortcodes Ultimate と同じショートコードすら創れます。
なので当然、一部を選択肢にした使い勝手のいいショートコードも創れます。
例えばコチラ。
上のアニメーションのショートコードのように一部を自由に選択出来るショートコードなら、まるで ALPHA の部品クラスのように記事に簡単に挿し込めるようになります。
と、いうわけで私もその機能を使って【選択肢で効果を選べるショートコード】を創ってみました。
オレティメットショートコード【テキストを縁取り】
このショートコードは文字の周りを縁取りしてデザイン的に少し素敵にするショートコードです。
こんな感じですね。
縁取りの仕組み
文字に縁取りをつける効果の仕組みです。
私はオレティメットショートコード化するにあたって、テキストシャドウという効果を利用しています。
最近ではテキストシャドウはスタイルシートに記載して使用するのがベターですが、私は簡易的に直接HTMLタグ内に入れ込む方法をとってます。
テキストシャドウのHTML
<span style="text-shadow: 1px 1px 1px #000000">こんにちは</span>
数字等の意味
<span style="text-shadow: 横方向の影の大きさpx 縦方向の影の大きさpx 影のぼかし具合px 影の色番号">影を付けたい文字</span>
まあ、実際は影というより影分身って感じです。
文字に文字を重ねる感じですね。
<span style="text-shadow: 2px 2px 1px #000000">こんにちは</span>
上のHTMLタグは
こんにちは というテキストの 右に２ 下に２ の方向に ボカシ具合１ の黒色の文字を重ねる命令です。
このタグをそのまま投稿のテキストエディタにコピペすると・・・
こんにちは
このように表示されるはずです。
この方法を応用してテキストの周りを縁取りっぽい色の影で覆えば仕組みとしては完成です。
そうですね・・・
私が一番シックリきたのはグルリと８方向に影を配置する方法です。
こんにちはの８方向に白色のテキストシャドウを重ねるHTMLタグ
<span style="text-shadow:1px 0px 0px #ffffff,0px 1px 0px #ffffff,-1px 0px 0px #ffffff,0px -1px 0px #ffffff,1px 1px 0px #ffffff,-1px -1px 0px #ffffff,1px -1px 0px #ffffff,-1px 1px 0px #ffffff">こんにちは </span>
実際の表示
こんにちは
とくに影の色をもっと簡単に選びたい！！
【テキストを縁取り】を使ってみる
まとめ
Shortcodes Maker では挿入時に効果を選択できるショートコードを作成出来る- 文字に影をつけれるテキストシャドウをHTMLタグ化
- テキストシャドウはテキストの影分身
- 文字のまわり８方向をテキストシャドウで囲むと文字の縁取りが出来る
- ショートコード メーカーでの色選択は実際の色を見ながら選択できる
- テキストのサイズや色はショートコード挿入後に調整出来る
- 装飾文字はインパクトがある
- インパクトはココぞという時に使おう
- 色系は美的センスが問われるので気をつけよう
- inowayのセンスは最悪
Short codes Ultimate の様々な機能と３つの拡張アドオンは公式サイトで詳しく確認出来ます。
公式サイト トップページ
Short codes Ultimateのショートコード一覧
拡張アドオン追加のスキン
拡張アドオンエクストラショートコード
拡張アドオンショートコードクリエイター
まとめてお得バンドルアドオン
リンク先はプラグイン制作元の海外のサイトになります。英語が苦手なかたは私と同じようにGoogle等の日本語翻訳機能をお使い下さい。
