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

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

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

STEP2:記事の中に,絵文字アイコンのコードをコピペ

これで準備ができましたので,次は実際に投稿記事に絵文字を入れてみましょう。記事を新規作成したら,Font Awesomeのこのページに行ってください。

このページ

このページ

ズラッと並んでいるアイコンの中から,使いたいものをクリック。

たとえば,笑顔の絵文字

たとえば,笑顔の絵文字

何やらサンプルっぽい絵文字と,いくつかのコードが書いてありますね。その中から,このコードをコピーします。

このコード

このコード

コピーしたコードを,投稿記事に貼り付け。

貼り付け,

貼り付け,と

記事を「公開」します。

STEP3:完成

おつかれさまでした。では,実際の記事で見てみましょう。

絵文字が入ってる~

絵文字が入ってる~

この絵文字,サイズを変えたり,回転させたり(?⁠⁠,ちょっと応用することで色も変えたり。結構様々なカスタマイズが可能になっています。

このページを参考に

このページを参考に

こんな風にパラメーターを追加すると……

こんな風にパラメーターを追加すると……

こうなる!(くるくる回っています)

こうなる!(くるくる回っています)

文章の飾りとして使うだけではなく,大きくすることで「見出し用のアイコン」としても使うことができますので,カスタマイズの方法を覚えて,上手に活用してみてくださいね!

まとめ

いかがでしたか?

前回の「ショートコード」「Visual Composer」の役割分担に続いて,ショートコード(エレメント)の使い方のイメージが,だいぶ具体的に見えてきたと思います。

ここまできたら,後は使いながら慣れていけばOKです。

さて。

  • イマドキのテーマを導入して
  • イマドキのスライダーを設置して
  • イマドキの表を設置して
  • イマドキのエディタでショートコードを使う

イマドキのサイト作りも随分進んできましたね~。ここまでくれば,もう,ちょっとした制作会社顔負けのWebサイトだって作れるようになっています。

「えっ!?雑談とオヤジギャクを延々聞かされているだけだと思ったのに?オラにそんな力がっ!?」

……自分で言っていて何故だか悲しくなりますが,そうなのです!しっかり読んでくれた人には,本人も気付いていない力がしっかり付いているのです!

……たぶん。

ではでは!ホントかウソか,次回からウミネココーポレーション仮設広報部の面々と一緒に,おさらい&総まとめをしていきましょう!

……おっと。

と,いうところで終了の時間です。

ではでは,今回はここまで!

次回をお楽しみに~。

画像

著者プロフィール

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

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

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

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

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


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