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

2018年12月7日

2021年3月9日

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-1.画像【影付き】

1-2.画像【枠付き】

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

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

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

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

2)ボタンリンク

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

ボタン（シンプル）

[btn]ボタン（シンプル）[/btn]

ボタン（ゴースト）

[btn class="ghost"]ボタン（ゴースト）[/btn]

ボタン（SP）

[btn class="spe"]ボタン（SP）[/btn]

ボタン（ゴーストSP）

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

ボタン（SP2）

[btn class="spe2"]ボタン（SP2）[/btn]

ボタン（ズームイン）

[btn class="zoomin"]ボタン（ズームイン）[/btn]

ボタン（ダウン）

[btn class="down"]ボタン（ダウン）[/btn]

ボタン（Shiny）

[btn class="shiny"]ボタン（shiny）[/btn]

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

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

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

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

左寄せのボタン

↓記述方法はこちら

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

右寄せのボタン

↓記述方法はコチラ

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

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

横幅固定のボタン１

横幅固定のボタン２

[btn class="kotei1"]横幅固定のボタン１[/btn]
[btn class="kotei2"]横幅固定のボタン２[/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]