【WordPress練習】STORK(ストーク)で吹き出しを作る。

ども!おもちです。

今日は、ワードプレスの練習をします。

前提環境として、ワードプレスのテーマは有料テーマの「STORK(ストーク)」を使用しています。

ブログを書いてみたいなーと色々とネット上で情報収集して、素人でも扱いやすそうで、なるべくお財布にやさしいテーマを、探してこれに決めました。

また、ワードプレスのエディター(ブログ作成画面)はGutenberg(グーテンベルグ)です。2018年12月のアプデでワードプレス5.0となりエディターが変更になったとのことですが、僕がブログをはじめた時にはすでにこのエディターだったため、そのまま使用しています。

色々と使いこなすために第一歩として吹き出しを作ってみたい!

というわけで、やってみます!

おもち
やっほーおもちだよ!

意外と簡単に出来ました!

それでは、手順を書いていきます。

メディアライブラリに画像をアップロードする。

まずは、吹き出しキャラクタの画像をメディアライブラリにアップロードします。

編集画面左側のメニューバーから入っていきます。

メディアライブラリの右側、「新規追加」をクリックします。

枠の中に、アップロードしたい画像をドラッグ&ドロップするとライブラリ内に画像がアップロードできます。

アップロードした画像のURLをコピーする。

アップロードした画像をクリックし、URLをすべてコピーします。

吹出しショートコードを作る。

まず、ブロックにショートコードを追加します。

ショートコードを入力する枠が出てくるので以下のように入力します。

入力ができたら、一旦これを「再利用ブロック」へ登録します。

これをすることで、次から入力しなくても吹き出しが使用できるようになります。

名前を付けれるので僕はひとまず「吹き出し左」にしました。

これで吹き出し左のテンプレートが出来たことになります。

このまま、編集するとテンプレートを編集することになってしまうため、ここで「通常のブロック」へ戻す操作を行います。

これで吹出しショートコードが作れました。

吹出しショートコードに画像URLを貼り付ける。

まず、テンプレートの「画像URL」に先ほどコピーした画像のURLを貼り付けます。

吹出しショートコードに必要なテキストを入力。

「名前」はキャラの下に表示されます。「l」は左側にキャラが表示され、右側に吹出しだ出る形になります。「本文」は吹出しの中身になります。

入力すると、このようになります。

以上で、無事に吹出しをマスターすることが出来ました。

これからバンバン使用していきたいと思います。

ショートコードはたくさんあるので、また新しいものを覚えて記事にしていけたらなと思います!それでは!

おもち
ここまで読んでくれてありがとー!

コメントを残す

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