ここあです。
WordPressテーマSTORK（ストーク）には
非常に便利なショートコード機能というのが
実装されています。
例えばLINE風の吹き出しや
ちょっとした補足文など
記事に個性を出したり記事を見やすくするために欠かせない
アイテムがたくさん揃っています。
しかも、このショートコードは
ワードプレスのプラグインAddQuicktagと
とても相性がいいです。
AddQuicktagに登録さえしておけば
いつでも簡単に使うことができ
記事の装飾も非常に楽になります。
そこで今回は、
- 公式サイトで案内されているショートコード
- 私が使用しているオリジナルタグ
それぞれをご紹介したいと思います。
さらに…
この記事を読んでいるあなただけに
特別なプレゼントをご用意しました。
プレゼントに関しては記事の最後に書いてあるので
気になる方はぜひ読んでくださいね＾＾
「STORK」のショートコードを効果的に使うには？
STORKのショートコードは非常に便利ですが
毎回公式サイトへ覗きに行ったり、違うファイルから
コピーして持ってくるのはとても面倒です。
せっかく便利なショートコードがあるのに
いちいちそんなことやってられないですよね…＾＾；
なので、まずはそんな面倒な作業を
回避してくれるプラグイン
AddQuicktagを導入しましょう。
AddQuicktagを使うことで
STORKのショートコードをより便利に効果的に
使うことができるようになります。
AddQuicktagのインストール方法
それでは順番に説明していきます。
まずはインストール。
ダッシュボードメニューから
プラグイン → 新規追加をクリック。
検索画面にAddQuicktagと入力すれば
以下の画面が表示されます。
AddQuicktagのプラグインが表示されたら
今すぐインストールをクリックし
インストールが完了したら有効化をクリック。
これで準備は完了です。
AddQuicktagの追加方法
AddQuicktagをインストールしたら
設定画面を開きましょう。
ダッシュボードメニューの設定から
AddQuicktagをクリックすれば、設定画面に移動できます。
主に入力するのは以下の部分です。
- ボタン名を入力する
- 開始タグと終了タグを入力する
- 一番右にチェックを入れる
※ボタンのアイコンや英語表記は任意で入力してください。
入力が出来たら、変更を保存をクリックし
設定を保存しましょう。
入力例はこんな感じです。
- ボタン名：
【ボタン】シンプル - 開始タグ：
［btn class="simple"］ボタン名 - 終了タグ：
［/btn］
※複数登録したい場合はちょっと手間ですが…
1つ設定ができたら、保存を繰り返して登録します。
AddQuicktagの使い方
次に、AddQuicktagの使い方をご説明します。
ダッシュボードメニューから
投稿 → 新規追加で記事の作成画面を開きます。
画面上部にAddQuicktagというタグが追加されているので
その中から登録したタグを選択できます。
例えば、私はお気に入りの色を登録してあります。
AddQuicktagを使って文字色を変更する場合は…
下図のように、文字色を変更したい場所をドラッグします。
AddQuicktag →【文字色】ピンクをクリックすると
こんな感じで色が変わります。
好きなカスタムカラーをAddQuicktagに登録しておけば
いつでも簡単に文字色を変えられるので便利です。
「STORK」で使えるショートコードを全て紹介
※このショートコードはオープンケージ製のテーマでのみ利用が可能です。
さて、ショートコード一覧を全てご紹介します。
わざわざ公式サイトに行くのも面倒だし
AddQuicktagに登録しておけばいつでも使えるので便利ですよね。
記事関連リンク「リンクカード」
まずは記事関連リンクのショートコードです。
【関連記事】ラベルあり ※単一の場合
ショートコード
[kanren postid="000"]
※ラベルというのは「関連記事」と書かれた黒い部分を指しています。
【関連記事】ラベルなし ※単一の場合
ショートコード
[kanren2 postid="000"]
【関連記事】ラベルあり ※複数の場合
ショートコード
[kanren postid="000,000"]
記事IDの調べ方
リンクカードを表示させる場合は
記事関連リンクのショートコード000の部分に記事IDを入力します。
記事IDの調べ方は簡単です。
ダッシュボードメニューから投稿一覧の画面を表示させ
記事IDを調べたい記事タイトルの上にマウスを合わせます。
そうすると画面左下にURLが表示されますので
post=0000&action=editと表示されている部分の
0000の部分が記事IDになります。
上記画像の例で言うなら、記事IDは1848です。
この数字をショートコードに入力します。
カラム表示
次はカラム表示のショートコードです。
【レイアウト】2カラム（モバイル1カラム）
ややこしいHTMLやCSSの知識なしで
2カラムにできるSTORKは最高です。
HTMLコードで横に並べるのは慣れないとかなり大変です＾＾；
意外と使っていない人が多そうですが
とても便利なのでぜひ活用しましょう。
左）ここに内容を右）ここに内容を
ショートコード
［colwrap］※全角［ ］を半角［ ］に打ち変えてください。
［col2］画像を挿入
左）ここに内容を［/col2］
［col2］画像を挿入
右）ここに内容を［/col2］
［/colwrap］
上記例では、↑こんな感じにテキストの上に画像を挿入し
さらにリンクも貼ってあります。
2カラム表示は単にテキストや画像を並べるだけでなく
広告を貼ったりするなど、より効果的に使うことが出来ます。
【レイアウト】3カラム（モバイル1カラム）
こちらも便利な3カラム表示です。
左）ここに内容を中）ここに内容を右）ここに内容を
ショートコード
［colwrap］※全角［ ］を半角［ ］に打ち変えてください。
［col3］画像を挿入
左）ここに内容を［/col3］
［col3］画像を挿入
中）ここに内容を［/col3］
［col3］画像を挿入
右）ここに内容を［/col3］
［/colwrap］
上記例も2カラム同様、テキストの上に画像を挿入し
リンクを貼ってあります。
※画像をクリックすると画像の記事にジャンプします。
補足の枠表示
記事本文に補足説明を入れればさらに読者に親切ですね。
【補足】補足説明
補足説明の場合、改行はSHIFTキーを押しながら
RETURNキーをクリックして、段落改行にならないようにするのがコツです。
ショートコード
[aside type="normal"]補足説明をいれる 少し小さなフォントで少し目立つような補足説明を追加することができます。[/aside]
【補足】注意説明
注意説明の場合も改行は、SHIFTキーを押しながら
RETURNキーを押して段落改行にならないようにするのがコツです。
ショートコード
[aside type="warning"]注意説明をいれる 少し小さなフォントでかなり目立つ感じで補足説明を追加することができます。[/aside]
シンプルな枠
私がよく使うのがシンプルな枠です。
記事を分かりやすくまとめるのに重宝します。
【囲み罫】シンプル1
※この囲み罫は私のオリジナルです。公式サイトにはありません。
リスト表示の際に頻繁に使用しています。
ショートコードとして使用する場合は
以下のコード + CSSへの登録も必要です。
ショートコード
<div class="block">シンプルな枠で囲む リスト表示の際に頻繁に使用しています。</div>
以下のコードを追加CSSに記述してください。
- 追加CSSに
.block {padding: 10px 30px;background: #fff;border: 1px #ccc dashed;margin-bottom: 30px;}
【囲み罫】シンプル2
こちらが公式サイトで紹介されている
「シンプルな枠」です。非常に繊細ですね＾＾
ショートコード
[aside type="boader"]シンプルな枠で囲む 少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。[/aside]
ボタン
テキストリンクをボタン用のショートコードで囲むことで
いろいろなボタンにすることができます。
【ボタン】通常
ショートコード
［btn］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】シンプル
ショートコード
［btn class="simple"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】シンプルビッグ
ショートコード
［btn class="simple big"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】リッチイエロー
ショートコード
［btn class="rich_yellow"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】リッチピンク
ショートコード
［btn class="rich_pink"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】リッチオレンジ
ショートコード
［btn class="rich_orange"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】リッチグリーン
ショートコード
［btn class="rich_green"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】リッチブルー
ショートコード
［btn class="rich_blue"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】目立つ（赤）ボタン
ショートコード
［btn class="lightning"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】大きい目立つ（赤）ボタン
ショートコード
［btn class="big lightning"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】背景付き（グレー）ボタン
ショートコード
［btn class="bg big"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】背景付き（黄色）目立つボタン
ショートコード
［btn class="bg-yellow big lightning"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
【ボタン】背景付き（黄色）目立つ角丸ボタン
ショートコード
［btn class="lightning big bg-yellow maru"］ここにテキストを記載［/btn］
※全角［ ］を半角［ ］に打ち変えてください。
ボタンショートコードの使い方
ボタンショートコードは
ただコードを挿入しただけでは表示されません。
以下のようにテキストリンクを設定して
初めてボタンが表示されます。
リンクボタンのショートコードを使う時は
必ずテキストリンクを設定してくださいね。
吹き出し機能
続いて、吹き出し機能の一覧です。
吹き出しのアイコンとなる部分は円形になるので
配置する画像は出来るだけ正方形に近い画像を配置する方が
キレイに収まります。
【吹き出し】シンプル（左）
ショートコード
[voice icon="アイコンURL" name="名前" type="l"]シンプルな吹き出しのショートコード（左側から）です。
[/voice]
【吹き出し】シンプル（右）
ショートコード
[voice icon="アイコンURL" name="名前" type="r"]シンプルな吹き出しのショートコード（右側から）です。
[/voice]
【吹き出し】Facebook風（左）
ショートコード
[voice icon="アイコンURL" name="名前" type="l fb"]Facebook風の吹き出しにすることもできます。
[/voice]
【吹き出し】Facebook風（右）
ショートコード
[voice icon="アイコンURL" name="名前" type="r fb"]Facebook風の吹き出し（右側から）です。
[/voice]
【吹き出し】LINE風（左）
ショートコード
[voice icon="アイコンURL" name="名前" type="l line"]LINE風の吹き出しにすることもできます。
[/voice]
【吹き出し】LINE 風（右）
ショートコード
[voice icon="アイコンURL" name="名前" type="r line"]LINE風の吹き出し（右側から）です。
[/voice]
【吹き出し】シンプル（ビッグアイコン、左）
ショートコード
[voice icon="アイコンURL" name="名前" type="l big"]吹き出しのアイコンを大きくすることもできます（左側から）
[/voice]
【吹き出し】シンプル（ビッグアイコン、右）
ショートコード
[voice icon="アイコンURL" name="名前" type="r big"]もちろん、右側からも可能です。
[/voice]
【吹き出し】シンプル（左）イエローライン
ショートコード
[voice icon="アイコンURL" name="名前" type="l icon_yellow"]アイコンの周りに色を付けてアクセントに（黄色）
[/voice]
【吹き出し】シンプル（左）レッドライン
ショートコード
[voice icon="アイコンURL" name="名前" type="l icon_red"]アイコンの周りに色を付けてアクセントに（赤色）
[/voice]
【吹き出し】シンプル（左）ブルーライン
ショートコード
[voice icon="アイコンURL" name="名前" type="l icon_blue"]アイコンの周りに色を付けてアクセントに（水色）
[/voice]
【吹き出し】シンプル（左）ブラックライン
ショートコード
[voice icon="アイコンURL" name="名前" type="l icon_black"]アイコンの周りに色を付けてアクセントに（黒色）
[/voice]
オリジナルタグコード
ここからは私のオリジナルタグコードの紹介です。
AddQuicktagはタグの登録も可能です。
自分だけのお気に入りのタグを登録しておけば
さらに記事の装飾スピードがあがり
記事を仕上げる時間も短縮できます＾＾
蛍光マーカーのタグ
テキストに蛍光マーカー（黄色）をひくタグです。
登録タグ
<span class="marker1">
テキストに蛍光マーカー（黄色）をひくタグです。
</span>
CSSコードも必要です。
- クリックでCSSコードを表示
.marker1 {background: linear-gradient(transparent 30%, #ffffbc 30%);}
テキストに蛍光マーカー（ピンク色）をひくタグです。
登録タグ
<span class="marker2">
テキストに蛍光マーカー（ピンク色）をひくタグです。
</span>
CSSコードも必要です。
- クリックでCSSコードを表示
.marker2 {
background: linear-gradient(transparent 30%, #ffdfef 30%);
}
テキストに蛍光マーカー（水色）をひくタグです。
登録タグ
<span class="marker3">
テキストに蛍光マーカー（水色）をひくタグです。
</span>
CSSコードも必要です。
- クリックでCSSコードを表示
.marker3 {
background: linear-gradient(transparent 30%, #cce5ff 30%);
}
お気に入りの色を使うためのタグ
私は記事作成中に使うお気に入りのカラー2色を
AddQuicktagに登録しています。
- 1つ目は強調色で使うピンク
- 2つ目はリンク色と同じブルー
登録タグはこんな感じにしています。
ピンクの登録タグ
<span style="color: #f05689;">
このタグを使うと文字がピンクになります。
</span>
ブルーの登録タグ
<span style="color: #0a69dd;">
このタグを使うと文字がブルーになります。
</span>
カラーコードを変えるだけであなたのお気に入りの色を
すぐに表示できるようになります。
Webアイコンフォントを利用したリストのタグ
私が登録しているWebアイコンフォントを利用した
リストのタグです。しかも罫付き＾＾
↓ これです。
- リスト表示1
- リスト表示2
- リスト表示3
Font Awesomeさえ登録してあれば
AddQuicktagで一発表示できます。
後は文字を打ち変えたり、太くしたり項目を追加するだけ。
登録タグはこれだけです。
アイコン付きリストの登録タグ
<ul class="list_checkc"> <li>リスト表示1</li> <li>リスト表示2</li> <li>リスト表示3</li></ul>
ただし、これを使うにはCSSの登録が必要です。
- クリックでCSSコードを表示
.entry-content ul.list_checkc {border: solid 1px #999999;padding: 0.3em 1.8em;position: relative;}.entry-content ul.list_checkc li:before {width: 0;height: 0;font-family: fontawesome;content:"\f058";position: absolute;font-size: 1.3em;left: -0.3em;line-height:11px;color: #5ab9ff;}
※上記コードでlist_checkcの部分は好きに変えてもらってOKです。
ただし、変更する場合は全て同じものに変更してください。
番号リストに罫線を付けたタグ
私は番号リストの色をカスタマイズして
リスト使用時には罫線で囲っています。
↓ こんな感じに…
これもAddQuicktagで一発表示できます。
登録タグは…
番号付きリストの登録タグ
<ol class="list_numb2"> <li>リスト表示1</li> <li>リスト表示2</li> <li>リスト表示3</li></ol>
さらにCSSを追加します。
- クリックでCSSコードを表示
.entry-content ol.list_numb2 {border: solid 1px #999999;padding: 0.3em 1.4em;position: relative;}.entry-content ol.list_numb2 li:before{background-color: #5ab9ff;}
※上記コードでlist_numb2の部分は好きに変えてもらってOKです。
ただし、変更する場合は全て同じものに変更してください。
以上、4つが私のオリジナルタグコードです。
AddQuicktagショートコードインポートファイルプレゼント！
この記事を最後まで読んでくれたあなただけに…
今回私が紹介したショートコードが全て
AddQuicktagで簡単に使える
インポートファイルをプレゼントします。
以下、全部50項目です。
なんだかんだ言ってもAddQuicktagへの登録も面倒だし
公式サイトのダウンロードファイルも全てのコードが
入っているわけではありません。
なので、そんなあなたの手間を軽減するために
特別にご用意致しました。
コードは多いですが、不要なコードは停止すればいいので
気軽に使ってみてください。
以下、ダウンロードボタンをクリックすればと
zipファイルがダウンロードできます。
Font Awesomeの導入は必要ですが
CSSコードのコピー用ファイルも同梱しています。
気軽にAddQuicktagにインポートして使ってくださいね。
ウイルスは入っていないのでご安心を…（笑）
あらかじめご了承ください。
※ダウンロードファイルのCSSに一部不備があり、9/14ファイルを検証し更新しました。
ダウンロードいただいた方には大変ご迷惑をおかけし、申し訳ございませんでした。
AddQuicktagファイルインポート方法
ファイルをインポートする前に念のため
あなたに現在の設定ファイルを必ず
エクスポート（書き出して）してください。
ファイルの書き出しも簡単です。
AddQuicktagの設定画面一番下に
ファイルを書き出すための項目があります。
エクスポートファイルのダウンロードをクリックすれば
現在のあなたの設定ファイルが書き出せます。
任意の場所にファイルを保存してくださいね。
設定ファイルをインポート（追加）する場合は
さらに下にある
インポートの部分でインポートしたいファイルを選択し
ファイルのアップロード・インポートをクリックすれば
新たな設定ファイルが読み込まれます。
不要なショートコードを表示させない方法
最後に、不要なショートコードを
ddQuicktagに表示させない方法を説明致します。
通常、AddQuicktagが使用できる状態というのは
以下の設定画面で各ショートコードを表示させるための
チェックが入っています。
なので、不要と思われるショートコードの
チェック項目を全て外すと
AddQuicktagには表示されなくなります。
設定を消してしまうと、また使いたくなった時に
再登録するのは面倒ですが
こうしてチェックを外すだけで
不要なショートコードは表示されなくなるので
とりあえず登録だけして
使用頻度の高い項目だけにチェックを入れる方が便利です。
ショートコードを使い倒そう！
予想以上に記事が長くなり自分でもびっくりしていますが
STORKのショートコード機能を有効に使うための方法を
まとめてみました。
STORKならではのショートコードを
使いこなすのはもちろんのこと
自分だけのオリジナルをAddQuicktagに登録してしまえば
もっと簡単にさらに早く記事を書くことができるようになります。
STORKという記事を書くのに専念できる
テーマを手に入れている以上は
余計なことに時間をかけるのはもったいないですよね。
ぜひショートコードとAddQuicktagを使って
さらに記事を書くことに専念できる環境を手に入れましょう。
最後までお読みいただきありがとうございました！
