【STORK(ストーク)】吹き出しを表示する際の画像アイコンの設定方法

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」で吹き出しを表示する際の画像アイコンの設定方法を説明していきます。

STORKには便利なショートコードが設定されているので、特に何も設定をしなくてもショートコードを使うだけで簡単に吹き出しを表示させることができます。

その際に吹き出しの内容を話している人の画像アイコンを設定するのですが、WordPress初心者の方はこの画像の設定方法が分からない場合があるのでその説明をしていきますね。

ちなみにやり方は超簡単ですから覚えておきましょう。

 

おさらい:吹き出しを表示させる方法

まずはおさらいとして吹き出しを表示させる方法を確認しましょう。

吹き出しを表示させるショートコードは

[voice icon="アイコンURL" name="名前" type="l"]吹き出しの内容[/voice]

でしたね。

あらやん
こんな感じになります。

上記のショートコードはシンプルタイプですが、ほかにも

  • Facebook風
    [voice icon="アイコンURL" name="名前" type="l fb"]

    あらやん
    Facebook風だとこんな感じ
  • Line風
    [voice icon="アイコンURL" name="名前" type="l line"]

    あらやん
    Line風だとこんな感じ
  • ビッグアイコン
    [voice icon="アイコンURL" name="名前" type="l big"]

    あらやん
    ビッグアイコンだとこんな感じ

このように色んなパターンがあります。ここまではおさらいです。

 

吹き出しを表示するショートコードの意味

それでは画像アイコンの設定方法を説明していきますね。先ほど紹介したシンプルタイプの吹き出しのショートコードを見てみましょう。

[voice icon="アイコンURL" name="名前" type="l"]吹き出しの内容[/voice]

詳しく見ていくと3つの項目があります。3つの項目が何を意味しているかと言うと

  • voice icon:吹き出しの画像のURLです。
  • name:吹き出しの画像の下につく名前です。
  • type:「l」だと画像が左、「r」だと画像が右に表示されます。

このようになっています。

つまりvoice iconの後に記述する画像のURLが分かれば好みの画像をアイコンとして表示させることができるということです。

 

画像URLを探す方法

画像URLを見るには、使う画像がメディアライブラリに登録されている必要があります。まだ登録していない場合はダッシュボード左の「メディア」から「新規追加」をクリックすることで画像ファイルのアップロード画面に行けますし、記事作成画面からでも画面左上にある「メディアを追加」から「ファイルをアップロード」をクリックすることで画像ファイルのアップロード画面に行くことができます。

アイコンに使う画像がメディアライブラリに登録出来たら使う画像をクリックして下さい。そうすると画面右側に URLという項目があるので、このURLをコピーして先ほどのショートコードのvoice iconの後に貼り付ければ完成です。

プレビューでちゃんと表示できていることを確認すれば完成です。ね、簡単だったでしょ?以上が吹き出しを表示する際の画像アイコンの設定方法です。お疲れさまでした。

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!