【Shortcodes by Angie Makesの使い方】簡単に様々な装飾ができるプラグイン

シェアする

shortcodes by angie makes 使い方

リンクボタンを設置したい。画像を横並びにして表示したい……。

Shortcodes by Angie MakesはHTMLやCSSの知識がなくても、ショートコードで簡単に記事に装飾を加えることができるプラグインです。

とは言っても、このプラグイン、優れものなだけに、何をどうしたら、何ができるのか、使い方についてよくわからなかったりします。

今回は、Shortcodes by Angie Makesの使い方のなかでも、便利でニーズが高いと思われる、以下の機能を紹介していきたいと思います。

・画像を横並びにする方法

・リンクボタンの設置⇒色はもちろん、同じタブか新規タブか、No Followにするかどうかまで選べるので便利

・トグルタグ⇒項目をクリックすると、詳細な文章が展開されて出てくる

スポンサーリンク

■Shortcodes by Angie Makesはインストール&有効化するだけでO.K.

shortcodes by angie makes 使い方

プラグインには有効化してから設定が必要なものもありますが(All in One SEO PackやGoogle XML Sitemapなんかがそうですね)、Shortcodes by Angie Makesについては、インストール&有効化するだけでO.K.です。

Shortcodes by Angie Makesを有効化すると、記事の投稿画面のビジュアルエディタを見ると、図のような[]というアイコンが追加されているのがわかると思います。

これで、HTMLやCSSの知識がなくとも、これから紹介するように、思いのまま記事を装飾することができます。

■WordPressで画像を横並びにする方法

Shortcodes by Angie Makesの使い方の代表的なものの1つが、WordPressで画像を横並びする方法です。

WordPressで画像が横並びになっている記事とか、結構見ますよね。例えばビフォーアフターな画像を掲載するのであれば、かなり便利ではないかと思います。

shortcodes by angie makes 使い方写真のように、「Column」を選択し、例えば同じ大きさで2つ並べる場合は「1/2+1/2」を選択します。

(なお、同じ大きさで3分割の場合は「1/3+1/3+1/3」、4分割の場合は「1/4+1/4+1/4+1/4」になります)

「1/2+1/2」を選択すると、記事の投稿欄に、以下のショートコードが記載されます。

[wc_row]

wc_column size=one-half position=first

Sample Content

[/wc_column]

wc_column size=one-half position=last

Sample Content

[/wc_column]

[/wc_row]

「Sample Content」のところにカーソルを合わせて画像を挿入すると……。

※ショートコードは反映させないように細工しているので、コピペしないでください。

shortcodes by angie makes 使い方

このように2つの画像が横並びに表示されるわけです。これは便利です。

shortcodes by angie makes 使い方画像の下に、何か説明を一言載せたい場合は、画像の下、つまり[/wc_column]の前に一言添えればO.K.です。(もちろん画面中央選択とか、フォントの大きさを変えたりとか、そういうことはしてくださいね)

他の分割についても、同様な方法でできるので、詳細な手順は割愛します。

多くの人は、「1/2+1/2」、「1/3+1/3+1/3」、「1/4+1/4+1/4+1/4」と同じ大きさで横並びすることが多いのかなと思います。

違う大きさで分割させたい場合は、他を選んでください。例えば「1/4+1/2+1/4」であれば、真ん中の画像が両隣の画像の2倍の大きさで表示されます。

これだけでも、Shortcodes by Angie Makesは便利なプラグインということがわかったと思いますが、まだ機能はこれだけではありません。

■WordPressでリンクボタンを設置する

もう1つShortcodes by Angie Makesの使い方でニーズとして高そうなのが、リンクボタン。「お申込みはこちら」という、あのボタンです。

アフィリエイターは必須と言える機能ではないかと思いますが、このリンクボタンも、Shortcodes by Angie Makesで簡単に設置できます。

shortcodes by angie makes 使い方「Elements」⇒「Button」を選択します。

shortcodes by angie makes 使い方

写真のように、好きなように設定していきましょう。

shortcodes by angie makes 使い方

Button Type:ボタンのタイプを選びます。PrimaryとかDangerとかWarningとか、いろいろ書いてありますが、上の写真のように色の種類を差します。

URL:飛び先のURLを入力します。

タイトル:ややこしいですが、ここは何も入力しなくて大丈夫です。

URL Target:同じタブで開くか、新規タブで開くかを選びます。個人的には、内部リンクは同じタブ、外部リンクは新規タブで開くことを勧めます。

⇒「同じタブで開くか、新規タブで開くか」に関する記事

URl Ref:No Followかどうかを選びます。アフィリリンクであればNo Follow推奨です。

Position:画面の左端、中央、右端、どこに設置するかを選びます。まあ、だいたいは中央だと思います。

※他は入力の必要はありません。

そうすると、以下のようなショートコードが記事投稿欄に設置されます。

[[wc_button type=”primary” url=”飛び先のURL” title=”Visit Site” target=”” url_rel=”” icon_left=”” icon_right=”” position=”center” class=””]Sample Content[/wc_button]]

この「Sample Content」のところに、リンクボタンの名称を入れます。

※ショートコードは反映させないように細工しているので、コピペしないでください。

shortcodes by angie makes 使い方

例えば、「お申込みはこちら」と入れれば、写真のようなボタンが設置されます。

■WordPressでトグルタグを設置したい

shortcodes by angie makes 使い方

個人的にShortcodes by Angie Makesで便利だと思うのが、トグルタグの設置です。

トグルタグとは、写真のように、項目をクリックすると展開するコンテンツを表示できるものです。写真を見ればイメージが湧くと思います。

Webサイトでよく見かけますよね。興味のある人だけ読んでもらえれば良い場合なんかは、トグルタグを使うと便利だったりします。

※トグルで文章を隠すことで、SEO上不利になることはありません。トグルタグの用途については、別記事で解説してみたいと思います。当然、なんでもかんでも使えば良いわけではないので……。キラーページのように文章の長い記事には有効かと思います。

トグルタグの作り方についての手順です。

(1)文章を隠す場所をカーソルで選択します。

shortcodes by angie makes 使い方

(2)「Actions」⇒「Toggle」を選択します。

shortcodes by angie makes 使い方

(3)タイトルに、項目に記載する言葉を入れます。Layoutは、展開するコンテンツ(隠す文章)を枠で囲むかどうかを選ぶことができます。

これでトグルタグが完成します。これもかなり簡単です。

■Shortcodes by Angie Makesのその他の機能

Shortcodes by Angie Makesの使い方の代表例としては、今のところ上記で書いたとおりですが、他にも、様々な機能がありますので、いろいろ試してみて下さい。

上記のように、実際やってみたら、強く勧める機能という印象はなかったので、詳細な説明は割愛しておきます。例えば……

・価格表:「Content」⇒「Principle Table」

・お客様の声:「Elements」⇒「Testimonial」

・テキストをボックスで囲む:「Content」⇒「Box」

・満足度・進捗状況:「Elements」⇒「Skillbar」

装飾関係は、Shortcodes by Angie Makesで解決できることがかなり多いです。入れておいて損はないプラグインです。

スポンサーリンク

シェアする

フォローする

関連コンテンツユニット
スポンサーリンク
この記事をお届けした
解放デビューの最新ニュース情報を、
いいねしてチェックしよう!