【厳選】ELEPHANT（エレファント）を使うなら最低限知っておきたいショートコード一覧

WordPressテーマのELEPHANT（エレファント）はとても多くのショートコードを使うことができます。

これは、ブログマーケッターjunichiさんが、あらゆる人が使いやすくする為に様々なショートコードを実装しました。

しかし、ショートコードの種類が多すぎる事で何を使えばいいのかわからないという悩みもでてきます。

この記事では、最低限知っておくべき今日からボレは！！が推奨するショートコードを厳選しました。

普段今日からボレは！！でよく使っているショートコードをご紹介致します。

ELEPHANT（エレファント）について詳しく知りたいなら下記記事をご覧ください。
【購入前必読レビュー】WordPressテーマELEPHANT3（エレファント3）の評価や使い心地、感想は？？

カラム

カラムのショートコードはELEPHANT2とELEPHANT SINGLEでのみ使用可能です。

また、このショートコードはSTORKやハミングバードと同じものなので、テーマを変更して場合でもそのまま使うことが可能です。

今日からボレは！！では基本的に2カラムを使用しています。

3カラムはトップページでのみ使用しています。

2カラム

また、スマホでは縦に表示され、左側が上に表示されるので、画像は左側に配置した方がスマホで読みやすくなります。[/col2] [/colwrap]

[[colwrap]
[col2]ここに画像を入れます。左側は画像がいいですね。[/col2]
[col2]例えば、このように左側に画像を配置して右側で画像の説明をする時などに使用します。

また、スマホでは縦に表示され、左側が上に表示されるので、画像は左側に配置した方がスマホで読みやすくなります。[/col2]
[/colwrap]]

3カラム

逆に、このようにサイドバーがある２カラムのコンテンツ幅だと少し小さく感じるかもしれません。[/col3] [col3]3カラムのショートコードは、サイト自体が１カラムの場合はコンテンツ幅が広くなるので綺麗に表示されますね。

逆にこのようにサイドバーがある２カラムのコンテンツ幅だと少し小さく感じるかもしれません。[/col3] [col3]3カラムのショートコードは、サイト自体が１カラムの場合はコンテンツ幅が広くなるので綺麗に表示されますね。

逆にこのようにサイドバーがある２カラムのコンテンツ幅だと少し小さく感じるかもしれません。[/col3] [/colwrap]

[[colwrap]
[col3]3カラムのショートコードは、サイト自体が１カラムの場合はコンテンツ幅が広くなるので綺麗に表示されますね。

逆にこのようにサイドバーがある２カラムのコンテンツ幅だと少し小さく感じるかもしれません。[/col3]
[col3]3カラムのショートコードは、サイト自体が１カラムの場合はコンテンツ幅が広くなるので綺麗に表示されますね。

逆にこのようにサイドバーがある２カラムのコンテンツ幅だと少し小さく感じるかもしれません。[/col3]
[col3]3カラムのショートコードは、サイト自体が１カラムの場合はコンテンツ幅が広くなるので綺麗に表示されますね。

逆にこのようにサイドバーがある２カラムのコンテンツ幅だと少し小さく感じるかもしれません。[/col3]
[/colwrap]]

2カラム（3:7）

今までに他のテーマでは実装されていなかった2カラム（3:7）でのショートコードが実装されました。

全体を3:7でカラム分けするので左側に画像、右側に説明の文章を入れるとかなり綺麗に表示させることができます。

例えばランキングのページを作る時などに便利です。

スマホの時は縦に並びます。
[/col73][/colwrap]

[[colwrap][col37]
左側には画像を入れると綺麗に表示できます。
[/col37][col73]
ここに文章が入ります。左側にバナーなどあまり強調したくないものを配置して、文章でしっかりとした説明をしたい時に有効的です。

スマホの時は縦に並びます。
[/col73][/colwrap]]

4カラム（スマホ2カラム）

画像を横に４つ並べる時に便利です。

PCではあまり縦の幅を取りたくないけど画像を４つ並べたい。2カラムが縦に２段並ぶと少しコンテンツが長くなってしまいます。

このようなものを4カラムで並べることですっきりしますし、スマホで見た時には2カラムが2段並び、とてもスマートに見せる事ができます。

[[colwrap][col4]
4カラムの場合は画像を4個並べるのが綺麗に見えてオススメです。
[/col4][col4]
4カラムの場合は画像を4個並べるのが綺麗に見えてオススメです。
[/col4][col4]
4カラムの場合は画像を4個並べるのが綺麗に見えてオススメです。
[/col4][col4]
4カラムの場合は画像を4個並べるのが綺麗に見えてオススメです。
[/col4][/colwrap]]

ボタン

ボタンはリンクを視覚的に見やすくすることができます。

しかし、リンクを全てボタンにする訳ではなく、コンテンツの中でボタンにする部分と、文章の中にテキストリンクを置くものとしっかり区別しておくことが大事です。

シンプルボタン

一般的にウェブでは塗りつぶされたボックスがボタンであると認識されています。

様々な効果がついたボタンは魅力的ではありますが、シンプルisベストです。

例えば、エレベーターに乗った時、床にボタンがついていたらどんな気持ちになりますか？

ウェブの世界では無意識のうちにボタンは塗りつぶされたボックスだと認識されています。

常識を覆したいという気持ちはわかりますが、最低限のルールは守らなければ逆効果になりますよ。

ボタン

[<a href="ここにURL">ボタン</a>]

今日からボレは！！がシンプルなボタンを推奨する最大の理由

ELEPHANT（エレファント）にはショートコードを利用することで様々なボタンが使えますが、今日からボレは！！がシンプルなボタンを推奨するのには理由があります。

それは、スマホでボタンをタップした時の挙動です。

シンプルなボタンに関しては１回のタップでリンク先へ移動するのに対して、変わった動きをするボタンは2回タップをしなければリンク先へ移動しません。

また、ボタン自体はPCでマウスを乗せた時のアニメーションとなっている為、どんなアニメーションにしてもスマホユーザーは気付きにくいです。

気付きにくいどころか、ボタンを２度タップしなければいけないので手間が増えてしまうというデメリットが発生します。

重要な場面で２回タップしないといけないのは離脱率が上がるというリスクが増えますので致命的です。

ボタンはシンプルなボタンを使用するようにしましょう。

囲い枠（ボックスデザイン）

記事の中でも特に読んでもらいたい部分をわかりやすく強調できるのが囲い枠です。

ユーザーは流し読みする事が多いので、背景色をつけて読ませるということは意識的にするべきです。

黄色背景

このように背景色がつく事で流し読みしていてもユーザーは止めて少し読み込みます。

これを効果的に使うといいでしょう。

[[aside type="yellow"]このように背景色がつく事で流し読みしていてもユーザーは止めて少し読み込みます。

これを効果的に使うといいでしょう。]

ピンク背景

黄色よりも目立つのがピンクです。

しかし、色を使いすぎてしまうと逆に読みにくくなってしまう場合がありますので注意が必要です。

ELEPHANT（エレファント）ではたくさんの色が用意されていますが、使う色は多くても２色までにしておきましょう。

今日からボレは！！では黄色のみしか使っていません。

[[aside type="pink"]
黄色よりも目立つのがピンクです。

しかし、色を使いすぎてしまうと逆に読みにくくなってしまう場合があります。

ELEPHANT（エレファント）ではたくさんの色が用意されていますが、使う色は多くても２色までにしておきましょう。

今日からボレは！！では黄色のみしか使っていません。]

会話用吹き出し

記事内で使う会話はうまく使うことで読者を引き込むことができます。

しかし、会話を使いすぎると逆に読みにくくなってしまいます。

長くても3つの文章程度で抑えておくようにしましょう。

左側の吹き出し（シンプル）

顔写真が入ることによって文章の横幅が減るから長文だと読みにくいよ。[/voicel]

[[voicel icon="ここにアイコン画像URL" name="ここに名前"]こうやって吹き出しを入れるんですよ。

顔写真が入ることによって文章の横幅が減るから、スマホの場合は長文だと読みにくいよ。[/voicel]]

右側の吹き出し（シンプル）

[[voicer icon="https://www.mb-honki.jp/wp-content/uploads/2017/06/matsuko.jpg" name="ワイ"]こうやって掛け合いをしたら引き込まれやすいよ。[/voicer]]

関連記事呼び出し

内部リンクは最近のSEO対策でとても重要と言われています。

ショートコードで内部リンクを設置しておくことで、リンク先のタイトルを変えても自動でショートコードが新しいタイトルを表示してくれます。

googleのクローラーはリンクのテキストを読んでリンク先の内容を理解しようとするので、自動でタイトル名を取得してくれることはとてもいいことです。

【厳選】ELEPHANT（エレファント）を使うなら最低限知っておきたいショートコード一覧

[kanren url="ここにリンク先のURLを入れます"]

1カラムページ用フルワイドレイアウト

今日からボレは！！のトップページで使用しているのが1カラムページ用のフルワイドショートコードです。

一般的にランディングページと呼ばれているようなページです。

このショートコードを使いこなすポイントとしては2色を交互に使い、派手すぎないように見やすくセクションを分けていくという方法です。

例えば、今日からボレは！！のトップページでは白とグレーを交互に使っています。

他にもピンク、クリムゾン、オレンジ、スチールブルー、ミッドナイト、落ち着いた緑、深緑、水色、黄緑、ダーク、青などが実装されているので、ボレのサイトと合った色を２色選びましょう。

背景が白のフルワイドレイアウト

[[lpwide color="white"]
[/lpwide]]

背景がグレーのフルワイドレイアウト

[[lpwide color="gray"]
[/lpwide]]

まとめ

WordPressテーマELEPHANT（エレファント）で使えるショートコードの中から厳選したものを紹介しました。

機能が多すぎる事で少し混乱してしまいますが、全部使う必要はありません。

ボレが必要と思うものだけを厳選して、効果的に使っていきましょう。

ELEPHANT（エレファント）のカスタマイズについて

今日からボレは！！ではELEPHANT（エレファント）のカスタマイズについて特集しています。

カスタマイズする事でサイト自体の見栄えもよくなりますし、ユーザーにいい印象を与えることができます。

しっかりと使いこなせるようになっておきましょう。

【徹底解説】ELEPHANTカスタマイズ全網羅

ELEPHANTのPC用ヘッダーメニューの設定方法

ELEPHANTでスマホメニューを配置する方法

wordpressテーマELEPHANT（エレファント）の見出しデザインを変更する方法