タブで魅せる!Shortcodes Ultimateの便利機能


    inowayです。

     

    はい、お察しのとーり、今回も

     

     

    の機能紹介です。

     

     

     

    なんて声も聞こえてきそうですが(笑)

     

     

    でもしかし、しかしだが!!

     

    そこまでしてでも紹介したいほどの機能が、まだまだいっぱいあるんですよね。

     

    なんせ、この Shortcodes Ultimate さん。

     

    アルティメット(究極)って名前が付くだけあって、本当にたくさんの便利な機能を隠し持っているんです。

    隠されてはないです。

     

    もはや、このブログで合言葉にすらなっている

    で、記事にさまざまなエフェクトを与えてくれたり、信じられないような表現や機能を実装してくれるプラグインなんです。

     

    たとえば、この記事でも多用してるアニメーション。

     

    また、最初に紹介したスライダーなんかも難しいWEB知識やプログラミングのスキル不要で見事に設置出来ましたよね。

     

    これらは確かに超凄いし、とても役にたつ便利機能です。

     

    正直、これだけでもインストールする価値があるのですが、今回は他にもサイトやブログで使用すれば 

    効果的なショートコードをご紹介します。

     

    さあ、究極プラグインの力であなたのメディアを一撃でプロっぽく見せちゃいましょう(笑)

     

     

    選んで魅せる タブ機能!


    私は我が子が寝ている時に耳たぶを甘噛みする変態親父です。

     

    タブ機能って何かわかりますか?

     

    ちなみに耳たぶではありません。

     

    タブってにはノートでいう付箋(ふせん)、まあ、本でいうところの栞(しおり)みたいなものです。

    Windowsでのウィンドウ(窓)のほうが近いかも知れません。

     

    上は私のパソコン(Chrome book)での画面です。

     

    chromeブラウザはタブでの管理に特化してるので、chromeユーザーには馴染みが深いかもしれませんね。

     

    要はクリックしたら、そのタブに対応したコンテンツが表示される機能です。

     

    ちょっと、よくわからないかも知れませんね(説明が下手でスイマセン)

     

    こんな時は実際に見てみるのが最善です(笑)

    表示能力の関係でスマートフォンのかたは全てタブが縦になります。

    ※PC等で表示される本来のタブはこのような構成になっています。

     

    横タブで魅せる

     

    クリックしてね①クリックしてね②クリックしてね③
    お願いします
    ありがとう♪
    グラッチェ!
    触って確かめてください

     

    こーゆーことですね。

    わかりやすい(笑)

     

    このタブ機能、使い方しだいでかなりユーザーにとって便利な表現になります。

     

    例えば製品の紹介に・・・

     

    Cyfons 新世界スクールシステム
    イメージ内容オススメ度関連記事

    Cyfons

    新世界スクールシステム

    詳しい商品ページはコチラ

    これひとつで会員サイト作成からステップメール発行まで出来ちゃうスグレモノ。何気に短縮URL機能にクリック計測まで可能な万能ツール。自分への誕生日プレゼントにどうぞ(笑)
    (星5つ)
    買い切りサーバー設置型なので費用対効果が優れすぎ。私、inowayにとってもなくてはならない存在です。

     

     

    お遊びのクイズなんかも単純で面白いかもしれません。

     

    パンはパンでも食べられないパンはフライパン?
    フライパンルパンルパ〜ン♪最後の審判
    97%
    奴は大変なものを以下略
    スケールデカすぎ!

     

    どうですか?

     

    下のクイズもどきは論外ですが、その前の製品紹介タブはアイデア次第でお役立ちコンテンツになりそうですよね?

     

    ユーザーに便利で興味深いものは実装すれば読者のサイト滞在時間が伸び、検索エンジンからの評価も上がります。

     

    いわゆるSEO的に有利になるんですよね。

     

    SEOについてはコチラ

    SEOってるものがちがいます

     

    それに、読者が自らアクションするコンテンツはサイトへの親近感、好感度のアップにもつながります。

     

    このタブ機能自体は単純ですが、【ある】と【なし】では場合によっては天と地ほどの差も出るかもしれないので使える機会があったら使っていきましょう♪

     

     

    縦タブで魅せる

     

    ちなみに、タブは縦にも並べられます。

     

    タブッちタブろうタブ美
    長男(38)
    次男(32)
    愛人(19)

     

    ん〜、横とはまた違ったテイストでいいですね。

     

    なんでしょう?

     

    選ぶってゆーよりか、片っ端から全部ひらいてみたくなりますよね(笑)

     

    でわ、例によって(?)製品紹介に使ってみましょう♪

     

    Twitter Brain ツイッターブレイン
    イメージ内容オススメ度関連記事
    Twitter集客の強い味方。自動つぶやき、複数アカウント管理はもちろん、なんと反応の高いツイートを自動で収集してつぶやく画期的な機能まで備えたスグレモノ。
    (星4つ)
    サーバー設置型なので、あなたが寝てる間も働き続ける半自動営業マン。ただし、設置の難度が高いため星は4つで(笑)

     

    こちらもキレイに表示されますが、横タブのほうが商品紹介にはシックリ来てました。

     

    縦タブはもっと違う用途での使い方がいいかもしれませんね。

     

    たとえばそう、質問式のリンクコンテンツとか・・・

     

    どのアフィリエイトに興味がありますか?
    どんなのがあるの?自己アフィリエイト物販アフィリエイトトレンドアフィリエイト特化型ブログアフィリエイト情報商材アフィリエイト

    どうでしょう?

     

    なかなか面白いコンテンツになったのではないでしょうか?

     

    ただ関連記事やオススメ投稿を普通に表示するよりは読者の興味関心を引けるはずです。

     

    このように、タブは使い方しだいで見た目以上の効果を発揮します。

     

    この記事を書いていて本気で私がそう思ったので間違いはありません(笑)

     

    タブの挿入方法


    とても簡単です。

     

    インストールして有効化したWordPress究極プラグイン、

     

    Shortcodes Ultimate (ショートコードアルティメット)

     

    を使うだけです。

     

    実際にやってみましょう♪

     

    ショートコードを挿入をクリック

    まずは投稿画面で【ショートコードを挿入】をクリックします。

    タブを選ぶ

    すると、使用出来るショートコードの種類一覧がフザケた量で表示(笑)されるので使いたい機能、今回でいうところの【タブ】を選びます。

    左側の赤い指のところです。右側のタブではありませんので間違えないように。

    各項目に入力する

    いろいろ項目があって難しそうに感じるが、実際に挿入する時に入力する必要があるのは大体②と③だけ。

    いや、②もほとんどの場合は1でいいので③の【縦タブ】か【横タブ】かだけでかまわない。

    ちなみにタブで説明するとこんな感じ(笑)
    ①スタイル②有効なタブ③垂直④クラス⑤コンテンツ⑥プレヴュー⑦プリセット
    タブのデザイン等の変更項目。有料の拡張アドオンを購入するまではデフォルトしか選べません。なので最初は変更すら出来ませんのでこのままで。
    表示されたタブで最初に開かれてるとこを選べます。1ならひとつめ、2ならふたつめ、ですね。
    【はい】なら垂直に縦に並んだ縦タブに。【いいえ】なら横に並んだ横タブになります。ココだけはちゃんと選びましょう♪
    CSSやらなんやらの小難しいプログラミング的な入力欄。もっとカスタマイズしたい人向け。
    ここに表示されてる文字が実際に挿入されるタブのショートコードになります。正直、挿入後に変更するほうが楽(笑)
    ココをクリックすると、記事に表示される時の状態で確認出来る。
    イロイロ変更した状態を名前を付けて保存したり呼び出したり出来る。よく使うタブなら保存しておくと次からの入力が簡単にすむ。

    ショートコードを挿入する

    全て入力が終わったら、一番下の【ショートコードを挿入】をクリックして記事内にショートコードを挿入します。

    横タブのショートコード
    Title 1Title 2Title 3
    コンテンツ 1
    コンテンツ 2
    コンテンツ 3

    実際の記事ではこうなります。

    縦タブだとこうです。
    Title 1Title 2Title 3
    コンテンツ 1
    コンテンツ 2
    コンテンツ 3

    実際の記事ではこうですね。

    タブの名前を変える

    ここまでで作成したデフォルト状態のタブを自分なりのタブ、そう【俺タブ】に変えて行きましょう♪

    まずはタブの名前を変更します。

     

    【Title1】とか【Title2】の部分ですね。

    このタイトルを自由に変えましょう。

     

     

    この記事ではわかりやすく【タブ①②③】としておきます。

     

    表示コンテンツをいれる

    あとはもう、タブごとにクリックされた時に表示されるコンテンツを差し込んでいくだけです。

     

     

    【コンテンツ】の部分ですね。

    タブとコンテンツ、それぞれの数字が対応してますので名前にあったコンテンツを入れていきましょう。

     

     

    どんなコンテンツを入れるのも自由です。

    文章以外にも画像やリンク、他のショートコードなんかも楽々対応してくれます。

     

    完成!!

    タブ①タブ②タブ③
    画像
    リンク
    レビュー

     

    今の工程で出来たのがコチラです。

    ご苦労様でした。

    ショートコードのドコに何が対応してて、どういじればドコが変わるのか丸わかりですね(笑)

    あとは、この応用で好きなだけ好きなようにオリジナルタブをあなたのサイトやブログに実装して下さい。

     

    まとめ


    いかがだったでしょうか?

     

    この記事を最後まで読んだなら、きっとあなたもタブの魅力にメロメロになったと思います(笑)

     

    こんな楽しくて便利な機能を簡単に実装してくれる究極プラグイン。

     

     

    無料でインストール出来るのに難しい知識やスキルがなくても本格的な機能を使いこなせるようになる、まさに究極のプラグイン。

     

    必要なのは想像力だけ。

     

    inoway超オススメなので是非とも導入してみて下さい。

     

     

     

     

      ランキング参加中です☆

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

      2 Responses to “タブで魅せる!Shortcodes Ultimateの便利機能”

      1. masa より:

        こんにちは、masaです。
        ランキングから訪問しました。
        タブにもいろんな種類や使い方があるんですね。
        あまり気にしていなかったのですが参考に
        なりました。
        また訪問させて下さい。

        • masaさん、
          ご訪問ありがとうございました♪

          ハジメマシテinowayです。

          tabには無限の可能性がある!!

          とは申しませんが、アイデアしだいで面白い魅せ方のコンテンツにはなりそうですよね。

          ソレを簡単に実装出来るようになる究極プラグインはやっぱ凄いということで(笑)

          この記事がmasaさんにとって少しでも参考になったようで嬉しいです。
          コレがタブの力なのかな?(笑)

          次回以降で究極プラグインの有料アドオンの内容に触れるのでさらなるタブの高みを見せられると思います♪

          また来てくれることを期待して待ってますね〜。

      コメントを残す