ウェブで食うぜ!やり遂げる!

このサイトで使っているテンプレートについて知りたいならコチラ

【厳選】STORK(ストーク)でアフィリエイターやブロガーが使うべきショートコードまとめ

 
ボレ
WRITER
 
ストークのショートコードを厳選
この記事を書いている人 - WRITER -
ボレ

これまで色んなネットでの副業に取り組んだけど、ボレは最終的に専業アフィリエイターになったぜ!!これまでの経験とか現状とか、色々好き勝手書いてるぜ!!

詳しいプロフィールはこちら

オシャレで使いやすいとブロガーやアフィリエイターから人気のWordPressテーマSTORK(ストーク)には便利なショートコードがたくさん実装されています。

その中でも普段使うであろうショートコードを厳選しました。

内部リンク用関連記事

このショートコードは内部リンクをショートコードで設置できます。

タイトルや日付を自動で取得してくれるので記事タイトルを変更した際も自動で内部リンクのタイトルが変更されます。

これは内部SEOを重視している人にとってはとても嬉しい機能です。

関連記事のサンプル画像

[kanren postid="ここに記事ID"]

カラム分け

カラム分けをすることで、よりリッチな表現をする事ができます。

本来カラム分けをするならCSSを書いて、htmlも複雑になりますが、このコード一発でカラム分けできるのは重宝します。

工夫次第で様々な表現ができるので色々と考えてみましょう。

2カラム

2カラムのサンプル画像

[colwrap]
 [col2]この部分はPCだと左側に表示されて、スマホだと縦に並び上にきます。[/col2]
 [col2]この部分はPCだと右側に表示されて、スマホだと下にきます。[/col2]
[/colwrap]

3カラム

3カラムのサンプル画像

[colwrap]
 [col3]この部分はPCだと3分割の一番左側にきて、スマホだと縦に並び最上部にきます。[/col3]
 [col3]この部分はPCだと3分割の真ん中にきて、スマホだと縦に並び真ん中にきます。[/col3]
 [col3]この部分はPCだと3分割の一番右側にきて、スマホだと縦に並び最下部にきます。[/col3]
[/colwrap]

囲い枠(ボックスデザイン)

文章の中で特に強調した表現をしたい場合や、補足で説明を加えたい時に囲い枠で表現することでユーザーは読みやすくなります。

流し読みする事が多いウェブの世界では、色を使って読ませたい部分を強調する事はとても重要です。

黄色背景のボックス

黄色背景ボックスのサンプル画像

[aside type="normal"]黄色い背景で注釈を入力することができます。[/aside]

赤色背景のボックス

赤色背景ボックスのサンプル画像

[aside type="warning"]赤い背景で黄色い注釈よりも目立った注釈を入力することができます。[/aside]

黒い枠のボックス

黒い枠のボックスのサンプル画像

[aside type="boader"]薄い黒の枠線で囲い、区切りを作る事ができます。[/aside]

ボタン

ボタンは2色を使い分ける事で効果的にリンクを踏ませる事ができます。

先ほどのカラムを応用して2カラムに分け、2色のボタンを並べる事でデザイン的にも優れた表現をする事が可能です。

例えば、片方には口コミのページへのボタン、もう片方には公式ページへのボタン。などのように使い分ける事が効果的です。
ボタン応用のサンプル

シンプルなボタン(塗りつぶし)

シンプルなボタンのサンプル

[btn]<a href="リンク先URL">ボタンテキスト</a>[/btn]

目立つボタン(塗りつぶし)

目立つボタンのサンプル

[btn class="lightning"]<a href="リンク先URL">ボタンテキスト</a>[/btn]

立体的なボタン(黄色)

立体的な黄色ボタンのサンプル

[btn class="rich_yellow"]<a href="リンク先URL">ボタンテキスト</a>[/btn]

立体的なボタン(ピンク)

立体的なピンクボタンのサンプル

[btn class="rich_pink"]<a href="リンク先URL">ボタンテキスト</a>[/btn]

会話風吹き出し

会話風吹き出しは最近のWordPressテーマだと大抵は実装されていますね。

吹き出しをうまく使う事で読んでいるユーザーが記事に対して親近感を持ったり引き込まれたりします。

また、難しい内容の説明をする時は会話調で噛み砕いて表現することもおすすめです。

左側アイコンの吹き出し

左側吹き出しアイコンのサンプル

[voice icon="画像URL" name="名前" type="l"]ここに会話の内容を入力します。

オススメの長さは2行程度です。[/voice]

右側アイコンの吹き出し

右側吹き出しアイコンのサンプル

[voice icon="画像URL" name="名前" type="r"]会話にすると親近感が湧くし、難しい内容でも簡単に感じます。[/voice]

まとめ

STORK(ストーク)はアフィリエイターやブロガーにとって十分な機能を備えてテーマです。

ショートコードを使う事で簡単にリッチな表現をする事ができますので、CSSやhtmlの知識がない場合でも安心して使用する事ができます。

この記事では、STORK(ストーク)でよく使うショートコードを厳選して紹介致しましたが、他にもショートコードを見たい場合は公式サイトのショートコードの使い方をご覧ください。

STORK(ストーク)が気になる人に知っておいて欲しいWordPressテーマ

STORK(ストーク)は矢野ヨシキさんとブログマーケッターjunichiさんが共同で開発したWordPressテーマですが、ブログマーケッターjunichiさんが単独で開発したELEPHANT(エレファント)というWordPressテーマが話題になっています。

ELEPHANT(エレファント)は一度購入すると複数サイトに使い回す事が可能です。

さらに、購入するとjunichiさんが運営するブログマーケティングスクールに6ヶ月間無料で在籍する事ができます。

ELEPHANT(エレファント)は今日からボレは!!が使用しているWordPressテーマです。

気になる方は是非ELEPHANT(エレファント)に関する記事もご覧ください。

この記事を書いている人 - WRITER -
ボレ

これまで色んなネットでの副業に取り組んだけど、ボレは最終的に専業アフィリエイターになったぜ!!これまでの経験とか現状とか、色々好き勝手書いてるぜ!!

詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© 今日からボレは!! , 2017 All Rights Reserved.