サルでき流 WordPressではじめる企業サイトの作り方

第47回 Webサイトが劇的にカッコよくなる!「ショートコード」を使いこなせ!(実践編)

この記事を読むのに必要な時間:およそ 5 分

⑧Posts Slider

【代表的なパラメーター】スライダータイプ,表示する記事の選択,自動で表示を切り替える秒数,サムネイル画像のサイズ

画像

投稿記事や固定ページを,「スライダー形式」で表示するショートコードです。前ページのカルーセルと似たような機能ですが,表示形式が少々違います。

一言で言えば「スライダーのほうがさらに派手⁠⁠,そんな感じです。ええ,⁠さらに」です。

記事一覧,記事カルーセル,記事スライダー,この辺りの機能が充実している理由は,やっぱり「多くの記事を上手に見せたい」というリクエストが多いからなんでしょうね。

Webサイトにたくさんの記事を書いていくと,現状よりももっと良い見せ方がしたくなるということなんですよ。

とりあえずワタシたちも,良い記事を山ほど書いて,この機能達のありがたみを感じられるよう頑張ることにしましょう。

⑨Call to Action Button

【代表的なパラメーター】ヘッドラインテキスト,スタイル,ボタンテキスト,ボタンスタイル,リンク先URL

画像

コールトゥーアクションボタン,つまり誘導用のボタンを作るショートコードです。

ボタンはボタンなのですが,コイツは少々趣が異なりまして。

ただのボタンをポンとひとつ置くのではなく,⁠呼び掛け文をセットで配置することによって,より多くの人がボタンを押すようにする⁠⁠,そんなことを目的として作られた「ボタン+αのセット」です。

投稿記事や固定ページの途中に,

「今出てきた◯◯が気になった人は,すぐこちらからお問い合わせしてください!そう!今でしょっ!」

みたいなコールトゥーアクションボタンを作ることで,それを見たユーザーさんが思わずクリック。うひょひょひょひょ~!一網打尽でガッポガッポや!ボタン押下の雨あられや!お問い合わせのナイアガラフォールやー!

……コホン。そんな風に使います。

効果は未知数ですので,あらかじめご了承ください。

⑩Progress Bar

【代表的なパラメーター】グラフの項目,数値,単位,グラフの色,ストライプの有無,アニメーションの有無

画像

これはなかなか面白い機能ですよ。なんと棒グラフを作ることができるショートコードです。

Excelのグラフのような,複雑な設定はできませんが,それでもなかなかの見た目で表示されます。文字だけよりもわかりやすさ倍増ですね。

とりあえず一度設置してみてください。小学校以来小馬鹿にし続けてきた棒グラフのスゴさを実感できると思います。

「意味もなく 使ってみたいな 棒グラフ」

いや,そんなテンションになりますって,ホントに。

⑪Pie Chart

【代表的なパラメーター】グラフの項目,数値,単位,グラフの色,表示形式(円グラフ,カウンター)

画像

こちらも棒グラフと同じく期待の戦力,円グラフを作ることができるショートコードです。

上の画像では,見た目の都合上3個設置しました。基本形はひとつのショートコードで,ひとつの円グラフです。

「これぞショートコード」という感じの機能ですね。Webサイト上に「動く円グラフ」なんて作ろうと思ったら,どれだけの知識と技術が必要で,どれだけ長いコードを書かなければならないのかと考えると,少々気が遠くなります。

それが,複数回のクリックと,数値の書き直しをチョチョっとやるだけでできちゃう。

「円グラフ ついつい数値を 盛ってみる」

いえ,これは単にワタシの欲望が漏れているだけです。

⑫Fancy Quote

【代表的なパラメーター】テキスト,フォントサイズ,背景色の有無,アニメーション

画像

ここからは,テーマである「The7」のショートコードです。

まずは,引用欄を作るショートコードです。Wikiから持ってきた用語を書いたりする(引用する)ときに使う欄ですね。

こちらは一見するとメッセージボックスにも見えるような外見ですが,引用欄として設定されています。

ちなみに,⁠The7」のショートコードは,その多くに「アニメーション」のパラメーターが用意されていて,表示するときに動きを付けることができるようになっています。

スクロールしていって,必要な場面になった時に,そっと表示される引用欄。奥ゆかしさがなんだか侘び寂びですなあ。

え?侘び寂びが何たるかですか?そんなことをワタシに聞きますか?この連載のどこかに一欠片でも侘び寂びの風情があるt(以下略)

⑬Fancy List

【代表的なパラメーター】リストスタイル,区切り線の有無

画像

最後は,リストを作るショートコードです。

  • 別に,リストくらいなら
  • 中点打って,文字を書けば
  • それっぽく見えるから,不要じゃないかしら?

いえいえ,せっかくステキなリストをカンタンに作れる機能ですので,ちょっとでも使って,見た目を良くしていきましょうよ。

意外とこういう単純そうなパーツが,HTMLで作ってみると大変だったりするんですよね。ですので,あると何気に便利なショートコードなのです。

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。