>>世界一簡単なWordPressブログの作り方<<

吹き出しの作り方|WordPressテーマ『STORK19(ストーク19)』

 

こんにちは!KEN(@KEN_kenblog)です!

 

これを書いている僕は、旧STORK(ストーク)から使い続けているSTORKユーザー。

使用歴は1年4か月。(2020年6月21日現在)

STORK19にバージョンアップしましたが、使い勝手は相変わらず良好です(。-`ω-)

 

では本題に入ります。

本記事ではSTORK19の吹き出しの作り方を解説します。

KEN
こんな感じの吹き出しが作れちゃいますよ。

ぜひご活用下さい(^^♪

 

本記事の内容

本記事の内容↓

・画像の準備【アップロードしておこう】

・吹き出しのショートコードの準備

・吹き出しの作り方

吹き出しの作り方|WordPressテーマ『STORK19』

吹き出しの作り方|WordPressテーマ『STORK19』

『STORK19』で吹き出しを使うためには、ソースコードを利用します。

ソースコードとか言うと難しく感じますが、簡単なので心配無用です。

本記事の手順通りに進めて下さい。

手順は以下のとおり。

①プラグイン『Add Quicktag』をインストールする

②画像を用意する

③『Add Quicktag』に吹き出し用ショートコードを登録する

④実際に記事に貼ってみる

①プラグイン『Add Quicktag』をインストールする

先ずWordPressのプラグイン『Add Quicktag』をインストールします。

『Add Quicktag』を使うメリットは、執筆中に自由に吹き出しコードを呼び出すことができるからです。

これがないと作業効率が劣悪になるのでぜひインストールして下さいね。

インストール後、「有効化」するだけで使用できる状態になります。

『Add Quicktag』のインストール方法

『Add Quicktag』のインストール方法を説明します。

WordPress左サイドバーから「プラグイン」→「新規追加」をクリック。

検索窓で『Add Quicktag』を検索すれば表示されるので、そこからインストールと有効化しましょう。

簡単ですね。

①画像を用意する【アップロードしておこう】

まず先に吹き出しに使用する画像をアップロードします。

WordPress左サイドバーから「メディア」→「新規追加」をクリック。

画像を用意する

 

クリックすると下記画面になるので、こちらから吹き出しに使用したい画像をアップロードして下さい。

 

画像をアップロード

 

次に「ライブラリ」を開き、アップロードした画像を選択。

 

 

選択すると右側に画像のステータスが表示されます。

そこにURLが表示されるのでひかえておきます。(後ほど使用します)

 

 

これで下準備は完了です。

 

吹き出しのショートコードをコピーする

次にSTORK19の吹き出し用のショートコードをコピーします。

吹き出し用ショートコードはこちらです。

 

[voice icon="ここに画像URLを貼る" name="ここに名前を入れる" type="l"]ここにセリフを書く。[/voice]

上記コードを右クリックでコピーしましょう。

次に今のコードを先ほどの『Add Quicktag』に登録します。

③『Add Quicktag』に吹き出し用ショートコードを登録する

では『Add Quicktag』にコピペしてきたショートコードを登録します。

WordPress左サイドバーから「設定」→「Add Quicktag」をクリック。

ボタン名の設定

先ず執筆の際、ショートコードを呼び出すために分かりやすいネームを設定します。

こちら画像の「ボタン名」に記入します。

「ボタン名」にネームを記入

特にこだわりがなければ「吹き出し(〇〇)」などにしておきましょう。(〇〇の部分にはセリフを喋るキャラ名を入れておきます。)

開始タグの設定

開始タグの設定

開始タグの設定ですが、先ほど公式サイトからコピーしたショートコードの[/voice]の前までを上記画像の枠にコピペして貼り付けます。

次に、コード内の「ここに画像URLを貼る」という記述を削除

削除した場所に先ほどのアップロードした画像URLを貼り付けて下さい。

 

次に「ここに名前を入れる」の記述を削除し、この吹き出しのセリフを喋るキャラの名前を記入しましょう。

続けて「type=”l”」の部分ですが、「l」だと左にキャラ画像が、「r」だと右側にキャラ画像が表示されます。

「ここにセリフを書く。」は削除せずにそのままで大丈夫です。

上記の通りにコードを書きかえればOKです。

補足:

「type=””」内に

KEN
「icon_blue」と記述すればアイコンの枠が青に。
KEN
「icon_red」と記述すればアイコンの枠が赤に。
KEN
「icon_yellow」と記述すればアイコンの枠が黄色に。
KEN
「icon_black」と記述すればアイコンの枠が黒になります。
KEN
「fb」と記述すればFacebook風に。
KEN
「line」と記述すればLINE風に。
KEN
「big」と記述すればアイコンがビッグになります。

ちなみに、

KEN
「icon_blue」「type=”l icon_blue”」で左に「type=”r icon_blue”」で右に表示させることができます。

コードとコードの間は半角スペースにして下さい。(shift+スペースキー)

さらに、スペースで区切れば上記の合わせ技も可能です。(この吹き出しがそれ。例:「 type=”r icon_blue line big”」)

終了タグの設定

 

「終了タグ(s)」の欄には、[/voice]と記入します。

そして、右のチェックボックスに全てチェックを入れ「変更を保存」で登録完了です。(一番右端のチェックボックスにチェックを入れると全てチェック状態になります)

 

これで、記事作成画面に「Quicktags」が表示されるようになり、執筆の際に吹き出しを自由に呼び出すことができるようになりました。

上記の手順で先にキャラ分の吹き出しを作っておくと作業しやすくなりますよ(。-`ω-)

 

④実際に記事に貼ってみる

では実際に吹き出しを貼り付けてみます。

先ずツールバーから「Quicktag」をクリック。

「Quicktag」をクリック

予め作成しておいた「吹き出し(KEN)」を選びます。

先ほど作成したタグネームがここに反映されます。

「吹き出し」を選ぶ

すると記事にコードが表示されます。

下地を削除

セリフ部分に「ここにセリフを書く。」があるので、削除してセリフを記入。

セリフを記入

とりあえず「吹き出しできた!」にしてみました。

プレビューで確認してみると…

吹き出しの作成成功

上手くいきました。いい感じですよね。(´ω`*)

 

以上で説明はおしまい。

それでは、まったねー(´・ω・`)

 

【まとめ】ストーク19の使い方|WordPressテーマ【STORK19】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUT US

KEN
レトロゲームが大好物な34歳。ゲーム攻略ブログ「kenblog」の管理人。 僕のブログでは【初心者でもクリアできる】をモットーに『テリーのワンダーランドRETRO』や『ロマサガ3リマスター』などの攻略記事を紹介しています。世界一簡単なゲームブログの始め方も書いています。ゲームブログを始めようと考えている方はぜひ参考にして下さい。