賢威8は独自の装飾ボックスやボタンなどがあって、使いこなせば見た目の良いサイトを作ることができます。
使い方も簡単で、スタイル一覧ページからHTMLをコピペすればOKです。
と思っていたら、実はショートコードが用意されていることが判明しました。
HTMLをコピペするより簡単でした。
もっと早く知りたかった、という気持ちを込めて、賢威8のショートコードを紹介します。
文字色の変更
文字色を変更するショートコードです。
色には変更したい色の文字を指定します。
次の文字を指定できます。
指定する文字 | 表示される色 |
---|---|
aqua | 水色 |
navy | |
red | 赤色 |
pink | ピンク |
purple | 紫色 |
orange | オレンジ色 |
green | 緑色 |
yellow | 黄色 |
olive | オリーブ色 |
lime | ライム色 |
black | 黒色 |
gray | 灰色 |
white | 白色 |
brown | 茶色 |
blue | 青色 |
[text color=red]赤色[/text]と[text color=blue]青色[/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]
↓
赤色
注記
2行目以降をインデント(字下げ)します。
[note]※折り返しがインデントされます。
改行しました。[/note]
↓
※折り返しがインデントされます。
改行しました。
マルチカラム 隙間あり
横方向を分割数で指定した個数のブロックに分割します。
※分割数は1から6の範囲で指定
ブロック間に隙間ができます。
各ブロックは、[col_inner]テキスト[/col_inner]で囲み、分割した個数分記述します。
[col 2][col_inner]テキスト1[/col_inner][col_inner]テキスト2[/col_inner][/col]
↓
[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]
↓
例はわかりやすように、各ブロック毎に枠線を描画しています。
通常、枠線はありません。
[col 3][col_inner]テキスト1[/col_inner][col_inner]テキスト2[/col_inner][col_inner]テキスト3[/col_inner][/col]
↓
例では、次のスタイルをセットすることで、枠線を描画しています。
<style>
.col2-wrap .col{border:1px solid #000;}
.col6-wrap .col{border:1px solid #000;}
</style>
マルチカラム 隙間なし
横方向を分割数で指定した個数のブロックに分割します。
※分割数は1から6の範囲で指定
このショートコードは、ブロック間に隙間ができません。
各ブロックは、[col_ns]テキスト[/col_ns]で囲み、分割した個数分記述します。
[col 2][col_ns]テキスト1[/col_ns][col_ns]テキスト2[/col_ns][/col]
↓
[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]
↓
隙間ありバージョンと同様に、通常、枠線はありません。
例では、次のスタイルをセットすることで、枠線を描画しています。
<style>
.col2-wrap .col_ns{border:1px solid #000;}
.col6-wrap .col_ns{border:1px solid #000;}
</style>
※隙間ありバージョンのスタイルとは異なります
カラーボックス
タイトル付きのカラーボックスを作成するショートコードです。
ボックススタイルにはカラーボックスのタイプ(色)を指定します。
次の値を指定できます
指定する文字 | 作成されるカラーボックス |
---|---|
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>
リンクカード①情報を取得して表示
URLで指定したサイトからサムネイル・抜粋を取得し、リンクカードを作成します。
相手側サイトで情報が取得できるように設定されている必要があります。
※WordPressサイトは、意図的に制限していなければ、取得することができます。
自サイトの情報を表示することもできます。
[keni-linkcard url="https://affi-sapo.com/1100/"]
↓
先日レンタルサーバーを、エックスサーバーとConoHa VPSからmixhostに移行しました。 今回は、その …
リンクカード②情報を自分で指定
タイトルや抜粋・URL・画像URLを指定して、リンクカードを作成します。
相手先から情報を取得できない場合や、表示内容を変えたいときに使用してください。
[keni-linkcard url="https://affi-sapo.com/874/" title="レンタルサーバーの独自ドメインの取得方法と費用についての注意点" description="ドメイン取得先によってSEOで有利とか不利とかありません。"]
↓
ドメイン取得先によってSEOで有利とか不利とかありません。
改行
WordPressは自動整形機能により、連続した改行を一つにまとめてしまいます。
意図的に改行を繰り返したいときは、このショートコードを使用してください。
改行はじめ[br num=4]改行終わり
↓
改行はじめ
改行終わり
■Googleで他サイト検索
■僕がおススメするアフィリエイト教材
■マーケティング施策ツール