賢威8のショートコード一覧

賢威8は独自の装飾ボックスやボタンなどがあって、使いこなせば見た目の良いサイトを作ることができます。
使い方も簡単で、スタイル一覧ページからHTMLをコピペすればOKです。

と思っていたら、実はショートコードが用意されていることが判明しました。
HTMLをコピペするより簡単でした。

もっと早く知りたかった、という気持ちを込めて、賢威8のショートコードを紹介します。

文字色の変更

ショートコード:
[text color=]テキスト[/text]

文字色を変更するショートコードです。
色には変更したい色の文字を指定します。
次の文字を指定できます。

指定する文字 表示される色
aqua 水色
navy 紺色
red 赤色
pink ピンク
purple 紫色
orange オレンジ色
green 緑色
yellow 黄色
olive オリーブ色
lime ライム色
black 黒色
gray 灰色
white 白色
brown 茶色
blue 青色

[text color=red]赤色[/text]と[text color=blue]青色[/text]で表示します
赤色青色で表示します

マーカーを使用する

ショートコード:
[text type=marker color=]テキスト[/text]

文字にマーカーを引くショートコードです。
色には変更したいマーカーの色を指定します。
次の色を指定できます

指定する文字 マーカーの色
orange オレンジ色
pink ピンク
blue 青色
lime ライム色
gray 灰色
yellow 黄色

[text type=marker color=yellow]黄色[/text]と[text type=marker color=blue]青色[/text]で表示します
黄色青色で表示します

制限

WordPressの使用上、同じ名前のショートコードを入れ子にできません。
そのため、色の変更とマーカーを同時に指定できません

例:
[text type=marker color=yellow][text color=red]赤色(黄色マーカー)[/text][/text]
↓ (うまく表示されていないはずです)
[text color=red]赤色(黄色マーカー)[/text]

この場合、片方をhtmlで指定します。
[text type=marker color=red]<span class="red">赤色</span>[/text]

赤色

注記

ショートコード:
[note]テキスト[/note]

2行目以降をインデント(字下げ)します。

[note]※折り返しがインデントされます。
改行しました。[/note]

※折り返しがインデントされます。
改行しました。

マルチカラム 隙間あり

ショートコード:
[col 分割数][col_inner]テキスト1[/col_inner][col_inner]テキスト2[/col_inner]…(分割数回繰り返し)[/col]

横方向を分割数で指定した個数のブロックに分割します。
※分割数は1から6の範囲で指定
ブロック間に隙間ができます。

各ブロックは、[col_inner]テキスト[/col_inner]で囲み、分割した個数分記述します。

[col 2][col_inner]テキスト1[/col_inner][col_inner]テキスト2[/col_inner][/col]

テキスト1
テキスト2

[col 6][col_inner]テキスト1[/col_inner][col_inner]テキスト2[/col_inner][col_inner]テキスト3[/col_inner][col_inner]テキスト4[/col_inner][col_inner]テキスト5[/col_inner][col_inner]テキスト6[/col_inner][/col]

テキスト1
テキスト2
テキスト3
テキスト4
テキスト5
テキスト6

備考

例はわかりやすように、各ブロック毎に枠線を描画しています。
通常、枠線はありません。

[col 3][col_inner]テキスト1[/col_inner][col_inner]テキスト2[/col_inner][col_inner]テキスト3[/col_inner][/col]

テキスト1
テキスト2
テキスト3

例では、次のスタイルをセットすることで、枠線を描画しています。

<style>
.col2-wrap .col{border:1px solid #000;}
.col6-wrap .col{border:1px solid #000;}
</style>

マルチカラム 隙間なし

ショートコード:
[col 分割数][col_ns]テキスト1[/col_ns][col_ns]テキスト2[/col_ns]…(分割数繰り返し)[/col]

横方向を分割数で指定した個数のブロックに分割します。
※分割数は1から6の範囲で指定
このショートコードは、ブロック間に隙間ができません。

各ブロックは、[col_ns]テキスト[/col_ns]で囲み、分割した個数分記述します。

[col 2][col_ns]テキスト1[/col_ns][col_ns]テキスト2[/col_ns][/col]

テキスト1
テキスト2

[col 6][col_ns]テキスト1[/col_ns][col_ns]テキスト2[/col_ns][col_ns]テキスト3[/col_ns][col_ns]テキスト4[/col_ns][col_ns]テキスト5[/col_ns][col_ns]テキスト6[/col_ns][/col]

テキスト1
テキスト2
テキスト3
テキスト4
テキスト5
テキスト6

備考

隙間ありバージョンと同様に、通常、枠線はありません。

例では、次のスタイルをセットすることで、枠線を描画しています。

<style>
.col2-wrap .col_ns{border:1px solid #000;}
.col6-wrap .col_ns{border:1px solid #000;}
</style>
※隙間ありバージョンのスタイルとは異なります

カラーボックス

ショートコード:
[box class="ボックススタイル" title="タイトル"]コンテンツ[/box]

タイトル付きのカラーボックスを作成するショートコードです。

ボックススタイルにはカラーボックスのタイプ(色)を指定します。
次の値を指定できます

指定する文字 作成されるカラーボックス
box_style_blue
青色

コンテンツ

box_style_green
緑色

コンテンツ

box_style_orange
オレンジ色

コンテンツ

box_style_red
赤色

コンテンツ

box_style_pink
ピンク色

コンテンツ

box_style_yellow
灰色

コンテンツ

[box class="box_style_blue" title="青色"]コンテンツ[/box]

青色

コンテンツ

備考①

classには、カラーボックスのタイプの他に中央寄せなどのスタイルを追加することができます。

[box class="box_style_blue al-c" title="青色"]コンテンツ[/box]

青色

コンテンツ

備考②

WordPressの仕様上、ショートコードを使用してカラーボックスを入れ子にすることができません。
入れ子にする場合は、次のようにhtmlとショートコードを組み合わせください。

<div class="box_style box_style_gray">
<div class="box_inner">
<div class="box_style_title"><span>例</span></div>
[box class="box_style_blue" title="青色"]コンテンツ[/box]
</div>
</div>

制限

カラーボックスを入れ子にした場合、次のようにタイトルの色が外側のボックスの影響を受けることがあります。

外側
内側

コンテンツ

※賢威8のアップデートにより、上の例が正常に表示されている可能性があります。

タイトルの色が正常に表示されない場合、次のスタイルを適用してみてください。

<style>
.box_style_blue > .box_inner > .box_style_title span {background-color: #0baedd;}
.box_style_green > .box_inner > .box_inner{ background-color: #f9fff3; }
.box_style_orange > .box_inner > .box_inner{ background-color: #fdf9f1; }
.box_style_red > .box_inner > .box_inner{ background-color: #fff8f9; }
.box_style_pink > .box_inner > .box_inner{ background-color: #fffafd; }
.box_style_yellow > .box_inner > .box_inner{ background-color: #fffdf3; }
.box_style_gray > .box_inner > .box_inner{ background-color: #fafafa; }
</style>

リンクカード①情報を取得して表示

ショートコード:
[keni-linkcard url="URL"]

URLで指定したサイトからサムネイル・抜粋を取得し、リンクカードを作成します。
相手側サイトで情報が取得できるように設定されている必要があります。
※WordPressサイトは、意図的に制限していなければ、取得することができます。

自サイトの情報を表示することもできます。

[keni-linkcard url="https://affi-sapo.com/1100/"]

リンクカード②情報を自分で指定

ショートコード:
[keni-linkcard url="URL" src="画像URL" title="タイトル" description="抜粋"]

タイトルや抜粋・URL・画像URLを指定して、リンクカードを作成します。
相手先から情報を取得できない場合や、表示内容を変えたいときに使用してください。

[keni-linkcard url="https://affi-sapo.com/874/" title="レンタルサーバーの独自ドメインの取得方法と費用についての注意点" description="ドメイン取得先によってSEOで有利とか不利とかありません。"]

改行

ショートコード:
[br num=改行数]

WordPressは自動整形機能により、連続した改行を一つにまとめてしまいます。
意図的に改行を繰り返したいときは、このショートコードを使用してください。

改行はじめ[br num=4]改行終わり

改行はじめ



改行終わり