YouYubeチャンネルも登録お願いします

WordPress初心者がライオンメディアで吹き出しを1番簡単につける方法 プラグイン【WP-Speech-Balloon_2.2】

WordPress初心者がライオンメディアで吹き出しを1番簡単につける方法 プラグイン【WP-Speech-Balloon_2.2】

どうも和田しょういちです。

 

チャットをしている様な

吹き出しをブログにつけたい!!

 

そう思ったのは

ブログを真剣に始めて

Twitterでブロガーさん達のサイトを見る様になって来て

有料テーマにある

吹き出し機能

いいな〜って思って

お金かかるしな〜って思ったら

他の可能性を探しますよね笑

 

で、やっぱありました!!

 

プラグイン【WP-Speech-Balloon_2.2】

 

 

これを使った結果・・・

 

超さいこう♪( ´▽`)

 

イメージ通りの吹き出しが出来ました。

avatar

わだ

超さいこう♪( ´▽`)

できるまで2時間かけたけど

改行だって余裕( ^ω^ )

avatar

わだ

 

 

なんですけど・・・

これをプレビューするまでに

相当試行錯誤しました!!

ホント挫折する勢い(;ω;)

だから初心者さんが苦戦しない様に

回答の全てを書き連ねようと心に誓いました。

 

WP-Speech-Balloon_2.2をインストールしよう

僕はこちらの開発主様のサイトを

完全に参考にしました。ありがとうございます!!

Tips 4 Life さんのサイト

こちらからダウンロードをお願いします。

今回はバージョンは2.2での説明なので

迷わず2.2をダウンロードしてください。

 

(ちなみに

以前のバージョンをインストールしてない人の場合で話を進めるので

リンク先のページ下の方の

《管理画面からインストールする方法》

を参考にしてください。)

 

 

WP-Speech-Balloon_2.2の使い方

インストール、有効化まで出来たら

あとは簡単!!

 

と言いたいところですが

こっから超苦戦したんです。

 

開発者様のページを参考にやってみたんですが

https://tips4life.me/wp-speech-balloon-how-to-use

 

一向に反映されない!!

 

書いてある通りやると

[L1_wsbStart][L_wsbAvatar][L_wsbName]わだ[L_wsbText]テスト[L_wsbEnd]

こんな感じで全然イメージ通りにならない_:(´ཀ`」 ∠):

 

 

メモに貼り付けた物をコピペしちゃダメ

記載されている通り

メモに貼り付けて便利に使おうと

やってみたらなぜか反映されない。

 

webあるあるですよね〜

もうそうゆうの慣れました。

 

そこから検索しても一向に知りたい内容が出てこない。

 

じゃ最終的にどうしたかと言うと・・・

 

ユーザー辞書機能を使ったんです!!

 

 

ユーザー辞書の登録方法

僕が使っているのはMacなのでそれでやっていきますね。

 

  • 右上の『あ』をクリック

 

 

 

  • 下の方に『ユーザー辞書を編集…』をクリック
  •  

 

 

 

 

  • 好きな感じで入力の文字を決めてコードを貼り付ければOK

 

 

 

 

 

 

【通常吹き出し(左パターン)】

 

 

 

 

【通常吹き出し(右パターン)】

 

それぞれユーザー辞書に登録しておいてください。

 

ユーザー辞書機能で書いてみよう

ユーザー辞書に登録しておくと

こんな感じに文字を入力するだけでコードが表示されます。

(僕は「吹き出し右」の略で「ふみ」と登録しました)

 

あとはサイトに書いてある通りの場所に

文字を打ち込めば完璧です!!

 

まだあるぞ!!画像のURLを表示する方法

と思いきや

まだ苦戦したことがありました。

 

肝心のアバター写真を反映出来ない問題!!

 

 

現在のワードプレスのエディターでは写真のURLをコピペすると

画像が生成されてしまいます。

avatar

わだ

じゃどうすりゃいいんですか!?

 

  • 投稿ページの『メディアの追加』をクリック

 

 

  • 使いたい写真を選択したら右にURLと表示されるのでそれをコピペ

 

 

ペーストすると上みたいに写真が生成されるので

ペースト後すぐに

⌘(コマンド)+z を押す

 

すると

https://shoichiwada.com/wp-content/uploads/2018/08/IMG_9533-e1537514420164.jpg

って感じにURLになります。

 

あとはこんな感じに

[L1_wsbStart][L_wsbAvatar]https://shoichiwada.com/wp-content/uploads/2018/08/IMG_9533-e1537514420164.jpg[L_wsbName]わだ[L_wsbText]ルールは大事[L_wsbEnd]

ルール通りに書いていけば

 

avatar

わだ

ルールは大事

と表示される様になります。

 

 

写真の大きさは変更すべき?

↓試しに推奨されていないサイズのままアップしてみます

3024×4032の写真を入れてみます

 

avatar

増渕

ど、どうですか?

 

 

全然OK!!♪( ´▽`)

 

元画像の真ん中を中心にトリミングされるけど

メディアライブラリの正方形に表示されてる感じになるのがわかるから

あんまり気にしなくてもいいかもですね。

 

 

まとめ

メモに貼り付けると何故か反映されなかった吹き出しが

ユーザー辞書だと出来る!!

謎ですがむしろ高速なのでよかったし

ユーザー辞書の登録の仕方わかっていい勉強になったよね。

avatar

わだ

無駄に使うからよろしくね〜

ではまた〜

Wordpressのアレコレカテゴリの最新記事