自由テキスト自由テキスト自由テキスト自由テキスト自由テキスト自由テキスト自由テキスト自由テ

WordPressテーマSEALのバージョン1.5

STEP5-1.SEALで使えるショートコードを使ってみよう!

アミ
WRITER
 
この記事を書いている人 - WRITER -
アミ
デジタルマーケッターのジュンイチっていうおっさんにこき使われて、WordPressテーマ『SEAL』を作りました。 シンプルに使いやすくバージョンアップさせました。一生懸命作ったので是非気に入ったら使ってみてね。
詳しいプロフィールはこちら

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

 

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

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

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

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

/* HTML */
<div class="btn-wrap  align "><a href="#">ボタン</a></div>

/* CSS */
.btn-wrap{
text-align:center;
margin:1.5em 0 2em;
}
.btn-wrap a{
font-weight:bold;
display:inline-block;
text-decoration:none;
padding:0.8em 2.1em;
background: #3cb371;
border:2px solid #3cb371;
-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 3px;   /* Firefox用 */
color:#fff;
box-shadow: 0px 1px 5px rgba(0,0,0,.3);
}
.btn-wrap a:hover{
color:#fff;
box-shadow: 0px 8px 25px -5px rgba(0,0,0,.3);
transition: .2s ease-in-out;
    -webkit-transform: translate(0px,-1px);
    -moz-transform: translate(0px,-1px);
    -ms-transform: translate(0px,-1px);
    -o-transform: translate(0px,-1px);
    transform: translate(0px,-1px);
}

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

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

[btn]ボタン(←リンクを張る)[/btn]

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

 

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

ショートコードの使い方

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

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

 

1)画像を少し目立たせる

画像を使った解説記事を作るときに、画像部分と背景部分の差を分かりやすくするためのショートコードです。地味ですが便利なはずです。

2種類用意しました。

  1. 画像【影付き】
  2. 画像【枠付き】

1-1.画像【影付き】

1-2.画像【枠付き】

↓↓ 1-1.画像【影付き】の記述方法

[imgshadow] ココに画像を置く [/imgshadow]

↓↓ 1-2.画像【枠付き】の記述方法

[imgwaku]ココに画像を置く[/imgwaku]

 

2)ボタンリンク

ボタンリンクを作るときは必ずショートコードに挟まれた間の文字の部分にリンクを張ってください。でないと、ボタンになりません。

[btn]ボタン(シンプル)[/btn]

 

[btn class="ghost"]ボタン(ゴースト)[/btn]

 

[btn class="spe"]ボタン(SP)[/btn]

 

[btn class="ghostspe"]ボタン(ゴーストSP)[/btn]

 

[btn class="spe2"]ボタン(SP2)[/btn]

 

[btn class="zoomin"]ボタン(ズームイン)[/btn]

 

[btn class="down"]ボタン(ダウン)[/btn]

 

[btn class="shiny"]ボタン(shiny)[/btn]

 

ボタンを左右に寄せるには?

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

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

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

 

↓記述方法はこちら

[btn position="left"]左寄せのボタン[/btn]

 

↓記述方法はコチラ

[btn class="ghost" position="right"]右寄せのボタン[/btn]

 

2-1.横幅固定のボタン

[btn class="kotei1"]横幅固定のボタン1[/btn]
[btn class="kotei2"]横幅固定のボタン2[/btn]

 

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

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

[btn]影付きボタン(⇒ここにリンクを張る)[/btn]
[btn flat="yes"]フラットボタン(⇒ここにリンクを張る)[/btn]

 

3) カラム

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

2カラム

[colwrap][col2]
ここに左
[/col2][col2]
ここに右
[/col2][/colwrap]

 

3カラム

[colwrap][col3]
ここに左
[/col3][col3]
ここに中央
[/col3][col3]
ここに右
[/col3][/colwrap]

 

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

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

記述方法はこちら↓

[colwrap][col37]
こちらに左側のコンテンツ(画像などがおすすめ)
[/col37][col73]
こちらに右側のコンテンツ(文章などがおすすめ)
[/col73][/colwrap]

 

 

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

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

記述方法はこちら↓

[colwrap][col73]
こちらに左側のコンテンツ(文章などがおすすめ)
[/col73][col37]
こちらに右側のコンテンツ(画像などがおすすめ)
[/col37][/colwrap]

 

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

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

記述方法はこちら↓

[spcolwrap][spcol2]
ここに左側コンテンツ
[/spcol2][spcol2]
ここに右側コンテンツ
[/spcol2][/spcolwrap]

 

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

記述方法はこちら↓

[spcolwrap][spcol3]
ここに左側コンテンツ
[/spcol3][spcol3]
ここに中央コンテンツ
[/spcol3][spcol3]
ここに右側コンテンツ
[/spcol3][/spcolwrap]

 

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

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

 

[spcolwrap][spcol37]
ここに左側
[/spcol37][spcol73]
ここに右側
[/spcol73][/spcolwrap]

 

 

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





記述方法はこちら↓

[colwrap][col4]
ここにコンテンツ
[/col4][col4]
ここにコンテンツ
[/col4][col4]
ここにコンテンツ
[/col4][col4]
ここにコンテンツ
[/col4][/colwrap]

 

 

4) 囲い枠

 

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

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

 

[enclose color="#4169e1"]自由色の囲い。初期は立体影付き。[/enclose]
[enclose color="#4169e1" flat="yes"]自由色の囲い。flat="yes"を追記で平面的に。[/enclose]

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

 

 

4-2.色固定の囲い枠

シンプルな枠線です。
[aside type="boader"]
シンプルな枠線です。
[/aside]

 

黄色の囲いです。
[aside type="yellow"]
黄色の囲いです。
[/aside]

 

ピンク色の囲いです。
[aside type="pink"]
ピンク色の囲いです。
[/aside]

 

水色の囲いです。
[aside type="sky"]
水色の囲いです。
[/aside]

 

オレンジ色の囲いです。
[aside type="orange"]
オレンジ色の囲いです。
[/aside]

 

緑色の囲いです。
[aside type="lime"]
緑色の囲いです。
[/aside]

 

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

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

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

5) トピックボックス

 

black (黒)

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

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

[topic color="black" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

gray(グレー)

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

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

[topic color="gray" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

red(赤)

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

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

[topic color="red" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

blue(青)

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

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

[topic color="blue" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

green(緑)

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

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

[topic color="green" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

pink(ピンク)

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

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

[topic color="pink" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

orange(オレンジ)

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

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

[topic color="orange" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

yellow(黄)

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

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

[topic color="yellow" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

 

 

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

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

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

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

↓記述方法はこちら

[spfont]
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
[/spfont]

 

 

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

黄色い蛍光ペンでアンダーライン
[keikou]黄色い蛍光ペンでアンダーライン[/keikou]

 

 

8) 吹き出し

吹き出し(シンプル)

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

JUNICHI

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

ゾウさん

[voicel icon="https://junichi-manga.com/wp-content/uploads/2016/08/JUNICHI6-1.jpg" name="JUNICHI"]吹き出しショートコードが追加されたよ。[/voicel]

[voicer icon="https://blog-marketing-school.com/elephant/wp-content/uploads/2016/12/cropped-logo-1.png" name="ゾウさん"]おおおお!それは嬉しいゾゥ。[/voicer]

 

吹き出し(Facebook風)

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

JUNICHI

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

ゾウさん

[fbvoicel icon="https://junichi-manga.com/wp-content/uploads/2016/08/JUNICHI6-1.jpg" name="JUNICHI"]吹き出しショートコードが追加されたよ。[/fbvoicel]

[fbvoicer icon="https://blog-marketing-school.com/elephant/wp-content/uploads/2016/12/cropped-logo-1.png" name="ゾウさん"]おおおお!それは嬉しいゾゥ。[/fbvoicer]

 

吹き出し(LINE風)

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

JUNICHI

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

ゾウさん

[lnvoicel icon="https://junichi-manga.com/wp-content/uploads/2016/08/JUNICHI6-1.jpg" name="JUNICHI"]吹き出しショートコードが追加されたよ。[/lnvoicel]

[lnvoicer icon="https://blog-marketing-school.com/elephant/wp-content/uploads/2016/12/cropped-logo-1.png" name="ゾウさん"]おおおお!それは嬉しいゾゥ。[/lnvoicer]

 

 

9) LPフルワイドブロック

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

LPフルワイドブロック

[lpwide2 color="#ffffff"]
カラーコードの部分は好きなコードを入れることができます。
[/lpwide2]

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

 

 

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

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

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

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

[tob backimg="ここに画像のURLを入力" height="数字"]
ここに画像の上にのせたい文字やボタンなどを。
[/tob]

 

2.画像が動くパターン

[tob2 backimg="ここに画像のURLを入力" height="数字"]
ここに画像の上にのせたい文字やボタンなどを。
[/tob2]

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

 

 

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

ニモォォォォ!!

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

[toi backimg="ここに画像のURLを入力"]
画像に載せたい文字や画像などをここに。
[/toi]

 

12) 関連記事

[kanren url="ここに記事のURL"]

 

13) フローチャート

〇フロー1

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

〇フロー1

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

[flow]
フローの内容を書く書く書く書く
[/flow]
[sankaku][/sankaku]
[flow]
フローの内容を書く書く書く書く
[/flow]

 

14) 漢字のフリガナ、傍点

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

[ruby]漢字[rt]かんじ[/rt][/ruby]

 

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

[emphasis]傍点[/emphasis]

 

 

15)年齢自動計算

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

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

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

[birth day="19831220"]

 

16) PCのみ表示・モバイルのみ表示

SEAL ver.1.5では

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

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

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

[mobile]スマホ・タブレットから見た時しか見れないよ[/mobile]

 

17) ポートフォリオ作成用

このショートコードは基本的に「固定ページ」の「ポートフォリオ」というテンプレートで使うことを前提にしています。

このショートコードを使うと、以下のページのような作品集のようなページができます。
ポートフォリオページのサンプルを見る

17-1)フラットタイプ(平面的)

[pfwrap]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
1枚目の画像を挿入(←必ずリンクは切る)
[/pf4]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
2枚目の画像を挿入(←必ずリンクは切る)
[/pf4]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
3枚目の画像を挿入(←必ずリンクは切る)
[/pf4]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
4枚目の画像を挿入(←必ずリンクは切る)
[/pf4]
[/pfwrap]

 

17-2)影付き(ちょっと立体的)

[pfwrap]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
1枚目の画像を挿入(←必ずリンクは切る)
[/pf4b]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
2枚目の画像を挿入(←必ずリンクは切る)
[/pf4b]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
3枚目の画像を挿入(←必ずリンクは切る)
[/pf4b]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL(画像ファイルのURLなど)"]
4枚目の画像を挿入(←必ずリンクは切る)
[/pf4b]
[/pfwrap]

 

 

ショートコードを便利に使うには一括で取り込もう

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

 

個人ブランディングのためのWordPressテーマ
SEAL ver.1.5

個人の影響力・発信力が高まれば仕事に繋がります。

個人として仕事を獲得し収益化を達成し、

あなたの人生をより楽しく豊かにして欲しいと願い作りました。

この記事を書いている人 - WRITER -
アミ
デジタルマーケッターのジュンイチっていうおっさんにこき使われて、WordPressテーマ『SEAL』を作りました。 シンプルに使いやすくバージョンアップさせました。一生懸命作ったので是非気に入ったら使ってみてね。
詳しいプロフィールはこちら

- Comments -

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

Copyright© SEAL ver.1.5 , 2018 All Rights Reserved.