営業時間:9時~18時【土日祝は10時~13時】

ブログ集客をするためのWordPressテーマ

ELEPHANT3正式発売開始しました!

ELEPHANT3で使えるめちゃくちゃ便利なショートコード一覧

 
この記事を書いている人 - WRITER -
ジュンイチ
ELEPHANT3作りました。
HTMLコードとかCSSとか分からない初心者さんでも、いろいろシンプルで使いやすくしました。
詳しいプロフィールはこちら

ここでは、WordPressテーマ『ELEPHANT3』で使える便利なショートコードを一覧にしました。

 

ショートコードって何?どうやって使うの?

ショートコードっていうのは、本来はHTMLやCSSで数十行にもわたるプログラミングをしないといけない事が、1行~数行の短いコードを実現できるものを言います。

例えば、以下のボタンリンク↓

これは、ショートコードを使わないと↓これくらいプログラミングが必要になります。

うっ。こんなの毎回書かないとダメなの?!ってなりますよね。

それが、ショートコードを使うと↓

この1行だけでボタンになります。

 

このように、ELEPHANT3では初心者さんでも簡単なコードを使うだけで、色んな便利な表現ができるようになっています。

ショートコードの使い方

基本的には、このページで書いてる記述方法通りに、WordPressの記事や固定ページなどに書いてもらうだけです。

以下に、ELEPHANT3のショートコード機能で実現ができる事と、その記述方法を紹介しています。

 

★NEW★ ELEPHANT3から使える新しいショートコード

画像【影付き】

左右比較してみて下さい。左が新しいショートコードを使った場合の影付き、右が普通に画像を挿入したときのものです。
左の方の画像がうっすら立体的に見えると思います。

 

ボタンの影付き/フラット切替え

通常は、ボタンは影付きですが、全体がフラットデザインの場合は周りのデザインから浮いてしまう可能性があります。
その場合は、ボタンをフラットタイプにすることができます。

 

自由色の囲い(影付き/フラット 切替え可能)

自由色の囲い。初期は立体影付き。
自由色の囲い。flat=”yes”を追記で平面的に。

 

 

 

囲いの影付き/フラット切替え

こちらもボタン同様、サイト全体のデザインに合わせて使えます。

通常の囲い。色はどんな色でもデフォルトは影がついて立体的になります。
フラットタイプの囲い。色はどんな色でもショートコード中に flat=”yes” を入れると影がつかず平面的になります。
 

 

カラム

※カラム:本文をある決まった割合の幅で縦に割る「列」の事だと思ってください。2カラム=コンテンツの幅を縦に2列に分割する。という感じです。

2カラム

 

3カラム

 

3:7の割合のカラム(スマホではカラム解除)

ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!

記述方法はこちら↓

 

 

7:3の割合のカラム(スマホではカラム解除)

ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!ここに文章を書いて、横の画像の説明したり色々できるぜ!

記述方法はこちら↓

 

スマホにもカラムが適用されるショートコード

スマホでも2カラム、PCでも2カラム

記述方法はこちら↓

 

スマホでも3カラム、PCでも3カラム

記述方法はこちら↓

 

スマホでも3:7カラム、PCでも3:7カラム

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

 

 

 

4カラム(PCでは4カラム、スマホでは2カラムが2段)





記述方法はこちら↓

 

スマホの時に文字を小さくするショートコード

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

↑PCから見ただけではあまり分からないと思いますが、スマホから見るとこの文字の大きさが半分くらいになります。
(スマホでぜひご確認下さい。他の部分と比べて文字が小さくなっていると思います。)

使いどころは限られているかもしれませんが、裏技としてお使いください。

↓記述方法はこちら

 

蛍光ペンでアンダーラインを引いたような感じにする

黄色い蛍光ペンでアンダーライン  

 

ボタンリンク

ボタンリンクを作るときは必ず文字の部分にリンクを張ってください。でないと、ボタンになりません。

 

 

 

 

 

 

NEW(ELEPHANT3からの機能)ボタンを左右に寄せるには?

ELEPHANT3では、ボタン型リンクは中央だけでなく左右に寄せることができるようになりました。

いずれのボタンリンクを使うにも、ショートコードの前半部分に「position=”left”」か「position=”right”」を入れてみてください。

例えば以下のような記述方法になります。

 

↓記述方法はこちら

 

 

↓記述方法はコチラ

横幅固定のボタン

囲い枠

シンプルな枠線です。

 

黄色の囲いです。
 

ピンク色の囲いです。
 

水色の囲いです。
 

オレンジ色の囲いです。
 

緑色の囲いです。
 

トピックボックス

 

black (黒)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

gray(グレー)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

red(赤)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

 

blue(青)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

green(緑)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

pink(ピンク)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

orange(オレンジ)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

yellow(黄)

ここにトピックのタイトル

ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。

 

 

吹き出し

吹き出し(シンプル)

吹き出しショートコードが追加されたよ。

JUNICHI

おおおお!それは嬉しいゾゥ。

ゾウさん

 

吹き出し(Facebook風)

吹き出しショートコードが追加されたよ。

JUNICHI

おおおお!それは嬉しいゾゥ。

ゾウさん

 

吹き出し(LINE風)

吹き出しショートコードが追加されたよ。

JUNICHI

おおおお!それは嬉しいゾゥ。

ゾウさん

 

 

LPフルワイドブロック

画面横一杯のフルワイドのブロックを作れるショートコードです。LP以外にも、シングルカラムの下部のウィジェットでも使えます。

 

NEW:好きな色のLPフルワイドブロック

カラーコードは以下のサイトなどを参考に選んでください。
https://www.colordic.org/

 

白色のブロック

 

ピンク色のブロック

 

クリムゾン色のブロック

 

オレンジ色のブロック

 

スチールブルーのブロック

 

ミッドナイト色のブロック

 

落ち着いた緑色のブロック

 

深緑色のブロック

 

薄いグレーのブロック

 

水色のブロック

 

黄緑色のブロック

 

ダーク色のブロック

 

青色のブロック

 

他にもこんな色が欲しい!というものがあれば、追加予定です。

 

 

フルワイド画像コンテンツ

たとえば、今風の画面いっぱいに広がるランディングページで画像の上に文字やボタン、画像なんかも設置ができます。

まずはデモページをご覧ください。↓

1.画像が動かないパターン

 

2.NEW(ELEPHANT3の機能)画像が動くパターン

これは背景の画像が動くパターンです。

 

 

記事幅内での画像の上にコンテンツを載せる

ニモォォォォ!!

どこだぁあああぁあぁぁ!!

 

関連記事

 

フローチャート

〇フロー1

ここにフローを書くここにフローを書くここにフローを書くここにフローを書くここにフローを書くここにフローを書く

〇フロー1

ここにフローを書くここにフローを書くここにフローを書くここにフローを書くここにフローを書くここにフローを書く

 

漢字のフリガナ、傍点

こんな風に難しい漢字かんじにフリガナが振れます。

 

強調したいときは、こんな風に傍点が振れると目立ちますね!

 

 

 

年齢自動計算

あまり使いどころは多くない、あなたの年齢を自動で計算して表示させてくれるショートコード。

1983年12月20日生まれの僕の今日の今現在の年齢は 35歳です。

↓以下のコードを書くと年齢の数字の部分だけ出ます。プロフィールとかに使ってね。

 

NEW(ELEPHANT3で使える機能)PCのみ表示・モバイルのみ表示

ELEPHANT3では

  • PCのみに表示したい部分
  • スマホ・タブレットのみで表示したい部分

を以下のショートコードを使えば分けることができます。

パソコンから見た時しか見れないよ
スマホ・タブレットから見た時しか見れないよ
 

 

今のところELEPHANT3で使えるショートコードは以上です!

 

 

ELEPHANT3で使えるショートコードをプラグインAddQuicktagに一気に取り込む方法は以下のページを参考にしてください。

 

『ブログ集客』で絶対結果を出したいあなたのための
WordPressテーマ

ELEPHANT3

WordPressでブログを使って集客をしたいけれど、WordPressの扱いが難しい…。
簡単に使えるWordPressテーマがあればなぁ…。

抜群に使いやすく、ブログ集客に集中できるWordPressテーマです。

この記事を書いている人 - WRITER -
ジュンイチ
ELEPHANT3作りました。
HTMLコードとかCSSとか分からない初心者さんでも、いろいろシンプルで使いやすくしました。
詳しいプロフィールはこちら

Comment

  1. […] あと、ショートコード がかなりたくさん完備されているので、カスタマイズや記事の装飾にあまり手間暇をかけたくないという人には向いています。 […]

- Comments -

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

Copyright© ELEPHANT3 , 2017 All Rights Reserved.