30 Shares

HTMLやCSSの知識がなくてもおしゃれな記事が書けるWP Canvas – Shortcodes

コード

WordPress は HTML や CSS の知識がなくても無料ブログと同じように記事が書けますし、TinyMCE Advanced というプラグインを入れることで表作成なども簡単にできます。

でも、記事内で段組みしたりアコーディオンメニューを入れたいとなると、それなりの知識が必要になってきますよね。

実はこれもプラグインを入れることで解決できます。「WP Canvas – Shortcodes」を使って、もっとおしゃれな記事を作成してみましょう!

WP Canvas – Shortcodes とは

WP Canvas – Shortcodes は、専用のショートコードを使って記事の見た目を充実させることができるプラグインです。

ショートコードは半角大かっこ [ ] で囲んで使いますが、とくにコードを覚える必要はありません。

エディタに追加されるメニューから選択するだけで OK です。

エディタに追加されたショートコードメニュー

アコーディオンメニューやタブメニュー、おしゃれなボックスや価格表などもこのボタンひとつで作れてしまいます。

プラグインを使うメリット・デメリット

HTML や CSS に詳しくなくても様々な表現ができるというメリットはあるものの、一度入れたら外すことができない、というデメリットもあります。

たとえば、以下のようにハイライトを使って一部テキストを目立たせることができますが、

ハイライト(青)

プラグインを外した状態だと、このようにショートコードがむき出しになってしまうのです。

[wc_highlight color=”blue”]ここのテキストの背景色が青になります[/wc_highlight]

どうしても外す場合は置換作業が必要なので、「一度使ったら入れっぱなし」と思っていたほうが良いかもしれません。

逆に考えると、テーマを変えてもプラグインを入れておけば見た目をある程度同じにできます。

最近ではあらかじめ豊富なショートコードが用意されているテーマも増えてきましたが、テーマを使い続けるかプラグインを使い続けるか、ですね。

プラグインのインストールと初期設定

それではさっそく使ってみましょう。

管理画面[プラグイン]-[新規追加]より、「WP Canvas – Shortcodes」を検索してインストールしてください。

WP Canvas – Shortcodes インストール

有効化後、[外観]-[Shortcodes]から設定画面に入れます。

Shortcodes

とくに設定しなくても大丈夫ですが、SNS ボタンを呼び出すときはあらかじめ各 SNS の URL を入れておきましょう。

WP Canvas Shortcodes SNS設定

WP Canvas – Shortcodes の使い方

プラグインがインストールされていると、エディタにショートコードボタンが追加されます。

WP Canvas – Shortcodes ショートコードボタン

ここから目的のものを選択すると、サンプルコードがエディタ内に埋め込まれるので、あとは必要に応じて書き変えれば OK 。

※テキストモードでは使えないので注意してください

では、使い方の一例をご紹介します。

記事内の段組み(Columns)

「Columns」は、記事内の段組みができる機能です。組み合わせは以下の 10 種類。

WP Canvas – Shortcodes カラム組み合わせ

画像と説明文を横に並べたいときなどに使えますね。

記事内段組みサンプル

商品名と商品説明・価格など、アフィリエイトにも使えそうです。

各カラム内は通常どおり HTML タグが使えますので表を入れることもできますし、他のショートコードを使うこともできます。

リンクボタン(Button)

「Elements」から「Button」を選択すると、リンクボタンが作れます。

少しわかりづらいですが、type の値によって見た目を変更できます。

リンクボタン

それぞれ以下のような値を指定できます。

type primary
secondary
inverse
success
warning
danger
info
url リンク先 URL
title リンクの title 属性
target self
blank
position float
left
center
right

価格表(Pricing table)

「Elements」から「Pricing table」を選択すると、価格表とリンクボタンを表示することができます。

サンプルコードが以下のように出力されるので、プレビューを確認しながらどこの値がどこに反映されるか確認しながら設定すれば OK です。

なお、type は「primary」「secondary」「inverse」が選択できます。

段組みと合わせて使えば、無料・ベーシック・プレミアなどのプラン比較が簡単に表現できますね。

WP Canvas – Shortcodes 価格表

満足度・進捗状況(Skillbar)

商品の満足度や作業工程の進捗状況で使えるプログレスバーは「Elements」の「Skillbar」から。

「テキスト」「パーセンテージ」「色」を変更するだけなので簡単です。

なお、簡単なアニメーション機能もついています。

WP Canvas – Shortcodes Skillbar

吹きだし(Testimonial)

「Elements」の「Testimonial」を選ぶと、簡単な吹きだしを表示できます。

サンプルコードはこちら。

吹きだし内は画像も入れられるので、「お客さまの声」などに使いやすいかもしれません。

WP Canvas – Shortcodes 吹きだし

「position」を left と right にすれば、会話っぽく見せることもできますよ。

ボックス(Boxes)

「Boxes」を使うと、以下のようにテキストをボックスで囲むことができます。

WP Canvas – Shortcodes ボックス

背景色は「Button」と同じです。

color primary
secondary
inverse
success
warning
danger
info

目立たせたいところに使ってみましょう。

強調させたい文字をカラフルにするよりは、ボックスのほうがおしゃれです。

アコーディオンメニュー(Accordion)

「jQuery」から「Accordion」を選択すると、クリックで開閉するアコーディオンメニューが作れます。

アコーディオンメニュー

重要なテキストを隠しておくのは好ましくない(検索エンジンに嫌われやすい)ので、多用するのはあまりオススメしません。

長めの CSS や HTML のサンプルコードを入れて記事をスッキリさせたり、簡単なクイズで使うと面白いかもしれませんね。

なお、collapse の値を「0」にすると一番上のメニューだけ開いた状態で表示され、「1」にすると全メニューが隠れた状態になります。

leaveopen の値が「0」のときはいずれかのメニューをクリックすると他の開いているメニューが自動的に閉じられ、「1」のときはクリックしても開いたメニューはそのままの状態となります。

上のサンプル画像は両方「1」です。

Font Awesome アイコン

ショートコードボタン横の「Font Icons」から、Font Awesome のアイコンを直接選択することができます。

コーヒーのアイコン

わざわざアイコンを探しにいかなくても良いので便利ですが、選択画面にはアイコンが表示されないのでどれがどれだかわかりづらいかも……。

アイコンを選択して、ショートコードごと色やサイズを変えればそれがアイコンにも適用されます。

コーヒーブレイク

オプションは margin のみですが、クラス名もつけられます。

まとめ

このほかにも「カウントダウンタイマー」や「タブメニュー」などいろいろ揃っているので、今までより表現の幅が広がると思います。

ショートコードの詳しい解説は 公式サイト にありますが、習うより慣れろでいろいろ試してみてください。

ショートコードのなかでショートコードを使える、だけ覚えておけばあとは直感的に操作できますよ。

それでは、また。