色選択可能!!文字を縁取りするオレティメットショートコード!

2017年7月18日楽しみながら継続するための簡単カスタマイズWordPress,オレティメット,カスタマイズ,プラグイン,究極プラグイン


inowayです。

 

WordPressのショートコード使ってますか?

 

私はかなり使ってます。

 

ハッキリ言って依存状態です(笑)

 

それというのも全て、例の究極プラグイン Shortcodes Ultimateショートコード アルティメット のせいなのですが。

Shortcodes Ultimate は悪くありません
 
 
 で、今回も Shortcodes Ultimate の有料アドオン、ショートコードを作成、改造出来る【Shortcodes Makerショートコード メーカー】の紹介です。
 
 
関連記事
Shortcodes Ultimate でオレティメットショートコードを創る!

 

 

[su_ckf dare="-w1-l" sigusa="point" poi="check" midasi="オレティメットとは?"]【俺】+【究極(アルティメット)】の略。究極プラグイン、Shortcodes Ultimate の有料拡張アドオン、Shortcodes Maker で創ったオリジナルショートコードのことよ。ちなみにinowayが勝手に作った言葉なのでGoogle検索してもこのブログしかヒットしないのは内緒だゾ。[/su_ckf]

 

 

 前回のおさらい


前回はテキストにルビを打つオレティメットショートコード、【振り仮名ふりがな】を紹介しました。

 

まあ、単純なHTMLタグを使用してるシンプルなもので、2箇所に入力するだけで機能するショートコードでした。

 

私の第一号オレティメットショートコードでもあります。

 

 

これで挿入されたテキストはこのように表示されます。

 

振り仮名ふりがな

お使いのネット環境等によってはうまく表示されないかもしれません。
 
このように【Shortcodes Makerショートコード メーカー】では自由にテキストの入力欄を設ける事が出来ます。
 
ですが、
 
当然ソレだけではございません。
 
究極プラグイン、Shortcodes Ultimateショートコード アルティメット  に最初から実装されてるような選択式のショートコードももちろん創れます!
 
 

 選択肢で選ぶショートコード



はい、ショートコードメーカーでは知識とスキルがあれば Shortcodes Ultimate と同じショートコードすら創れます。

 

なので当然、一部を選択肢にした使い勝手のいいショートコードも創れます。

 

例えばコチラ。

 

ショートコード【アニメーション】

膨大な量からアニメーション効果を選べますね。
inoway
inoway
関連記事

簡単に画像をアニメーション出来るWordPress究極プラグイン

 

上のアニメーションのショートコードのように一部を自由に選択出来るショートコードなら、まるで ALPHA の部品クラスのように記事に簡単に挿し込めるようになります。

 

と、いうわけで私もその機能を使って【選択肢で効果を選べるショートコード】を創ってみました。

 

 

オレティメットショートコード【テキストを縁取り

 

このショートコードは文字の周りを縁取りしてデザイン的に少し素敵にするショートコードです。

 

こんな感じですね。
お使いの環境によってはうまく表示されない可能性もあります。
 
ついでにちょっとだけ影をつけて3D風の演出も醸し出しています。
 
赤い部分が影です。
 
仕組みは単純で、テキストシャドウというテキストに影をつける効果を利用しています。
 

 

縁取りの仕組み


文字に縁取りをつける効果の仕組みです。

 

私はオレティメットショートコード化するにあたって、テキストシャドウという効果を利用しています。

 

最近ではテキストシャドウはスタイルシートに記載して使用するのがベターですが、私は簡易的に直接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タグは

こんにちは というテキストの 右に2 下に2 の方向に ボカシ具合1 の黒色の文字を重ねる命令です。

このタグをそのまま投稿のテキストエディタにコピペすると・・・

 

こんにちは 

このように表示されるはずです。

お使いの環境によってはうまく表示されない可能性もあります。

 

この方法を応用してテキストの周りを縁取りっぽい色の影で覆えば仕組みとしては完成です。

 

そうですね・・・

 

私が一番シックリきたのはグルリと8方向に影を配置する方法です。

 

こんにちはの8方向に白色のテキストシャドウを重ねる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>

 

実際の表示

こんにちは

わかりやすいよう、背景色と文字サイズ等は変更しています。
 
 
うまく白色の縁取りが表示出来たでしょうか?
 
 
縁取り文字って普通のテキストに比べてけっこうインパクトありますよね。
 
 
ただ、まあ、このHTMLタグを毎回用意するのもメンドクサイものです。
 
 

とくに影の色をもっと簡単に選びたい!!

 
 
 
と、思って創ったのが
 
 
オレティメットショートコード【テキストを縁取り】なのです。
 
 

【テキストを縁取り】を使ってみる

 
 では私が Shortcodes Ultimateショートコード アルティメット の拡張アドオン、Shortcodes Makerショートコード メーカー で創ったオレティメットショートコード【テキストを縁取り】を使用してみます。
 
 
使い方はとっても簡単。
 
 
まずは普通に Shortcodes Ultimate で【テキストを縁取り】を選びます。
 
 
そして3Dっぽい影の色と縁取りの縁の色を選び、縁取りしたいテキストを入力してショートコードを挿入をクリックすればOKです。
 
 
 
※色の選択は実際の色から選べます。
 
 
 
で、上のショートコードで表示されるのがコチラです。
 
 
テキスト入力欄
 
 
ですが、これだと見づらいのでビジュアルエディタでサイズ等を調整します。
 
 
 テキスト入力欄
 
 
こんな感じです。
 
 
うん、ずいぶん見やすいですね!
 
 
ただインパクトは凄いですが、多用乱用はさけ、ココぞという時に使ったほうが効果的だと思います。
 
色の組み合わせにもセンスが問われそうですし(笑)
 
 

まとめ

 
それでは今回の記事のまとめです。
 
  • Shortcodes Makerショートコード メーカー では挿入時に効果を選択できるショートコードを作成出来る
  • 文字に影をつけれるテキストシャドウをHTMLタグ化
  • テキストシャドウはテキストの影分身
  • 文字のまわり8方向をテキストシャドウで囲むと文字の縁取りが出来る
  • ショートコード メーカーでの色選択は実際の色を見ながら選択できる
  • テキストのサイズや色はショートコード挿入後に調整出来る
  • 装飾文字はインパクトがある
  • インパクトはココぞという時に使おう
  • 色系は美的センスが問われるので気をつけよう
  • inowayのセンスは最悪
 
はい、若干じゃっかん水増し感は否めませんがたくさん学べましたね。
 
 
今回ご紹介した
テキストシャドウによる文字の縁取り
 
 
たとえShortcodes Ultimateショートコード アルティメット や Shortcodes Makerショートコード メーカー を持ってなくても途中で説明したHTMLを使用して、たいていのブログやサイトで表現出来ます。
 
 
この文字装飾、効果的に使えばプロっぽいイメージを読者に与えること間違いなしです。
 
 
まあ、それでなくても簡単に文字装飾が出来れば、いつもの記事が華やかになり、更新のモチベーションも上がります。
 
 
どうせやるなら楽しい情報発信がいいですよね♪
 
 
それでは今回はこのへんで。
 
 
次回もお楽しみに!
 

Short codes Ultimate の様々な機能と3つの拡張アドオンは公式サイトで詳しく確認出来ます。

公式サイト トップページ
Short codes Ultimateショートコード一覧
拡張アドオン追加のスキン
拡張アドオンエクストラショートコード
拡張アドオンショートコードクリエイター
まとめてお得バンドルアドオン

リンク先はプラグイン制作元の海外のサイトになります。英語が苦手なかたは私と同じようにGoogle等の日本語翻訳機能をお使い下さい。


関連記事
Shortcodes Ultimate の拡張オプションを手に入れる方法

見てみる