【作業効率UP】STORK(ストーク)のショートコードを効果的に使う方法!

ここあです。

 

WordPressテーマSTORK(ストーク)には

非常に便利なショートコード機能というのが

実装されています。

 

例えばLINE風の吹き出しや

吹き出し

 

ちょっとした補足文など

補足文

 

記事に個性を出したり記事を見やすくするために欠かせない

アイテムがたくさん揃っています。

 

しかも、このショートコードは

ワードプレスのプラグインAddQuicktagと

とても相性がいいです。

 

AddQuicktagに登録さえしておけば

いつでも簡単に使うことができ

記事の装飾も非常に楽になります。

 

そこで今回は、

  • 公式サイトで案内されているショートコード
  • 私が使用しているオリジナルタグ

それぞれをご紹介したいと思います。

 

さらに…

この記事を読んでいるあなただけに

特別なプレゼントをご用意しました。

 

プレゼントに関しては記事の最後に書いてあるので

気になる方はぜひ読んでくださいね^^

 

目次

「STORK」のショートコードを効果的に使うには?

STORKのショートコードは非常に便利ですが

毎回公式サイトへ覗きに行ったり、違うファイルから

コピーして持ってくるのはとても面倒です。

 

せっかく便利なショートコードがあるのに

いちいちそんなことやってられないですよね…^^;

 

なので、まずはそんな面倒な作業を

回避してくれるプラグイン

AddQuicktagを導入しましょう。

 

AddQuicktagを使うことで

STORKのショートコードをより便利に効果的に

使うことができるようになります。

 

AddQuicktagのインストール方法

それでは順番に説明していきます。

まずはインストール。

 

ダッシュボードメニューから

プラグイン → 新規追加をクリック。

ダッシュボードメニュー

 

検索画面にAddQuicktagと入力すれば

以下の画面が表示されます。

プラグイン追加画面

 

AddQuicktagのプラグインが表示されたら

今すぐインストールをクリックし

インストールが完了したら有効化をクリック。

 

これで準備は完了です。

 

AddQuicktagの追加方法

AddQuicktagをインストールしたら

設定画面を開きましょう。

 

ダッシュボードメニューの設定から

AddQuicktagをクリックすれば、設定画面に移動できます。

AddQuicstag設定画面

 

主に入力するのは以下の部分です。

  1. ボタン名を入力する
  2. 開始タグと終了タグを入力する
  3. 一番右にチェックを入れる

※ボタンのアイコンや英語表記は任意で入力してください。

 

入力が出来たら、変更を保存をクリックし

設定を保存しましょう。

 

入力例はこんな感じです。

  • ボタン名:【ボタン】シンプル
  • 開始タグ:[btn class="simple"]ボタン名
  • 終了タグ:[/btn]

※複数登録したい場合はちょっと手間ですが…

1つ設定ができたら、保存を繰り返して登録します。

 

AddQuicktagの使い方

次に、AddQuicktagの使い方をご説明します。

 

ダッシュボードメニューから

投稿 → 新規追加で記事の作成画面を開きます。

 

画面上部にAddQuicktagというタグが追加されているので

その中から登録したタグを選択できます。

AddQuicstag使い方

 

例えば、私はお気に入りの色を登録してあります。

AddQuicktagを使って文字色を変更する場合は…

 

下図のように、文字色を変更したい場所をドラッグします。

AddQuicktag →【文字色】ピンクをクリックすると

AddQuicstag使い方

 

こんな感じで色が変わります。

AddQuicstag使い方

 

好きなカスタムカラーをAddQuicktagに登録しておけば

いつでも簡単に文字色を変えられるので便利です。

 

「STORK」で使えるショートコードを全て紹介

※このショートコードはオープンケージ製のテーマでのみ利用が可能です。

 

さて、ショートコード一覧を全てご紹介します。

わざわざ公式サイトに行くのも面倒だし

AddQuicktagに登録しておけばいつでも使えるので便利ですよね。

 

記事関連リンク「リンクカード」

まずは記事関連リンクのショートコードです。

 

【関連記事】ラベルあり ※単一の場合

リンクカードラベルあり

ショートコード

[kanren postid="000"]

※ラベルというのは「関連記事」と書かれた黒い部分を指しています。

 

【関連記事】ラベルなし ※単一の場合

リンクカードラベルなし

ショートコード

[kanren2 postid="000"]

 

【関連記事】ラベルあり ※複数の場合

リンクカード複数

ショートコード

[kanren postid="000,000"]

 

記事IDの調べ方

リンクカードを表示させる場合は

記事関連リンクのショートコード000の部分に記事IDを入力します。

記事IDの調べ方は簡単です。

 

ダッシュボードメニューから投稿一覧の画面を表示させ

記事IDを調べたい記事タイトルの上にマウスを合わせます。

記事IDの調べ方

 

そうすると画面左下にURLが表示されますので

post=0000&action=editと表示されている部分の

0000の部分が記事IDになります。

 

上記画像の例で言うなら、記事IDは1848です。

この数字をショートコードに入力します。

 

カラム表示

次はカラム表示のショートコードです。

 

【レイアウト】2カラム(モバイル1カラム)

ややこしいHTMLやCSSの知識なしで

2カラムにできるSTORKは最高です。

HTMLコードで横に並べるのは慣れないとかなり大変です^^;

 

意外と使っていない人が多そうですが

とても便利なのでぜひ活用しましょう。

【コピペだけ!】STORK(ストーク)のフォントを変更する方法!左)ここに内容を
【コピペだけ!】STORK(ストーク)のページネーションをカスタマイズ右)ここに内容を

 

ショートコード

[colwrap]
[col2]画像を挿入
左)ここに内容を[/col2]
[col2]画像を挿入
右)ここに内容を[/col2]
[/colwrap]
※全角[ ]を半角[ ]に打ち変えてください。

上記例では、↑こんな感じにテキストの上に画像を挿入し

さらにリンクも貼ってあります。

 

2カラム表示は単にテキストや画像を並べるだけでなく

広告を貼ったりするなど、より効果的に使うことが出来ます。

 

【レイアウト】3カラム(モバイル1カラム)

こちらも便利な3カラム表示です。

 

【コピペだけ!】STORK(ストーク)のSNSボタンをカスタマイズ!左)ここに内容を
WPテーマ「STORK」カスタマイズ!LINE風プロフィールの作り方!中)ここに内容を
WPテーマ「STORK」カスタマイズ!カテゴリー一覧をボタン風に!右)ここに内容を

 

ショートコード

[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風(左)

【吹き出し】Facebook風(左)

ショートコード

[voice icon="アイコンURL" name="名前" type="l fb"]Facebook風の吹き出しにすることもできます。
[/voice]

 

【吹き出し】Facebook風(右)

【吹き出し】Facebook風(右)

ショートコード

[voice icon="アイコンURL" name="名前" type="r fb"]Facebook風の吹き出し(右側から)です。
[/voice]

 

【吹き出し】LINE風(左)

【吹き出し】LINE風(左)

ショートコード

[voice icon="アイコンURL" name="名前" type="l line"]LINE風の吹き出しにすることもできます。
[/voice]

 

【吹き出し】LINE 風(右)

【吹き出し】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です。
 ただし、変更する場合は全て同じものに変更してください。

〈使用条件〉このコードを使用するには、Font Awesomeの実装が必須です。導入の仕方はこちらをご覧ください。

 

番号リストに罫線を付けたタグ

私は番号リストの色をカスタマイズして

リスト使用時には罫線で囲っています。

 

↓ こんな感じに…

これも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リスト
AddQuicktagリスト

 

なんだかんだ言ってもAddQuicktagへの登録も面倒だし

公式サイトのダウンロードファイルも全てのコードが

入っているわけではありません。

 

なので、そんなあなたの手間を軽減するために

特別にご用意致しました。

 

コードは多いですが、不要なコードは停止すればいいので

気軽に使ってみてください。

 

以下、ダウンロードボタンをクリックすればと

zipファイルがダウンロードできます。

 

Font Awesomeの導入は必要ですが

CSSコードのコピー用ファイルも同梱しています。

気軽にAddQuicktagにインポートして使ってくださいね。

 

ウイルスは入っていないのでご安心を…(笑)

※オリジナルタグはFont Awesomeを導入していないと表示されないものも含まれています。
あらかじめご了承ください。
※ダウンロードファイルのCSSに一部不備があり、9/14ファイルを検証し更新しました。
ダウンロードいただいた方には大変ご迷惑をおかけし、申し訳ございませんでした。

 

AddQuicktagファイルインポート方法

ファイルをインポートする前に念のため

あなたに現在の設定ファイルを必ず

エクスポート(書き出して)してください。

 

ファイルの書き出しも簡単です。

AddQuicktagの設定画面一番下に

ファイルを書き出すための項目があります。

AddQuicktag設定画面

 

エクスポートファイルのダウンロードをクリックすれば

現在のあなたの設定ファイルが書き出せます。

任意の場所にファイルを保存してくださいね。

 

設定ファイルをインポート(追加)する場合は

さらに下にある

AddQuicktag設定画面

 

インポートの部分でインポートしたいファイルを選択し

ファイルのアップロード・インポートをクリックすれば

新たな設定ファイルが読み込まれます。

 

不要なショートコードを表示させない方法

最後に、不要なショートコードを

ddQuicktagに表示させない方法を説明致します。

 

通常、AddQuicktagが使用できる状態というのは

以下の設定画面で各ショートコードを表示させるための

チェックが入っています。

AddQuicktag設定画面

 

なので、不要と思われるショートコードの

チェック項目を全て外すと

AddQuicktagには表示されなくなります。

AddQuicktag設定画面

 

設定を消してしまうと、また使いたくなった時に

再登録するのは面倒ですが

 

こうしてチェックを外すだけで

不要なショートコードは表示されなくなるので

 

とりあえず登録だけして

使用頻度の高い項目だけにチェックを入れる方が便利です。

 

ショートコードを使い倒そう!

AddQuicktagでショートコードを使いこなそう!

 

予想以上に記事が長くなり自分でもびっくりしていますが

STORKのショートコード機能を有効に使うための方法を

まとめてみました。

 

STORKならではのショートコードを

使いこなすのはもちろんのこと

 

自分だけのオリジナルをAddQuicktagに登録してしまえば

もっと簡単にさらに早く記事を書くことができるようになります。

 

STORKという記事を書くのに専念できる

テーマを手に入れている以上は

余計なことに時間をかけるのはもったいないですよね。

 

ぜひショートコードとAddQuicktagを使って

さらに記事を書くことに専念できる環境を手に入れましょう。

 

最後までお読みいただきありがとうございました!

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG