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

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


inowayです。

 

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

 

私はかなり使ってます。

 

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

 

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

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

 

 

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

 

 

 前回のおさらい


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

 

まあ、単純な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を使用して、たいていのブログやサイトで表現出来ます。
 
 
この文字装飾、効果的に使えばプロっぽいイメージを読者に与えること間違いなしです。
 
 
まあ、それでなくても簡単に文字装飾が出来れば、いつもの記事が華やかになり、更新のモチベーションも上がります。
 
 
どうせやるなら楽しい情報発信がいいですよね♪
 
 
それでは今回はこのへんで。
 
 
次回もお楽しみに!
 
 

ランキング参加中です☆

あなたの応援が励みになりまくってます♪

この記事が少しでも為になった、面白かった、と思ったらクリックお願いします。

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

  1. こんにちは、トシカズです。
    文字の装飾、見た目の印象などはとても大事ですね!
    応援していきますね。

    • トシカズさん、
      こんにちわ。

      文字装飾、バカに出来ませんよね。

      文字が主体の情報発信ではインパクトと緩急をテキストで表現できるのは大きいです。
      私はちょっとやり過ぎかも知れませんが(笑)

      応援、ありがとうございました〜

  2. こんにちは
    文字に影があると
    しかも色がついてると
    目がちかちかする色もありますが笑
    インパクトはありますね

    • きょろさん、

      やっぱりインパクトは大きいですよね。
      まあ、フォントサイズも大きくして派手な色つけて縁取りまですりゃ当たり前ですが。

      目、チカチカしました?
      すいません、ねらいどうりです(笑)

      そういえば、違うブログでご年配のかたに
      「赤や青の文字はチカチカして読めません」
      ってコメントきたことありました。

      気をつけないといけませんね・・・

  3. またランキングから来ました
    これに関しては使ったことがないので助かりました
    いろいろあるんですね
    毎回読んでて勉強になります
    ありがとうございます!!
    ポチッしました!

    • ハルさん、ようこそ♪

      そうなんですよ〜
      テキストシャドウってけっこう凄いです。

      画像と違って文字なので使いやすいし見栄えもいいしで気に入ってます。
      (多用しすぎ注意ですが・・・)

      ポチ、ありがとうございました〜

コメントを残す