ブログ関連

WordPressの吹き出しプラグインSpeech Bubbleを導入!憧れの会話ブログを書くまでの道のり

こんにちは、ままゴンです。超初心者ながら、ブログを書き始めてようやく10記事以上を更新することができました。2人育児の合間に手さぐりでポチポチ・・・。いや~、時間かかる!笑。

こんなところでめげないよう、自分で自分に気合を入れるため、無謀にも憧れの「会話形式」のブログを書きたい!と奮起しました。

今回は、超初心者の私が吹き出しプラグインSpeech Bubbleを駆使して会話ブログを実現させるまでの道のりを書かせていただきます。

まずは結果から・・・

ままゴン

ままゴンだってやればできるぜ~ぃ(大声)

チビゴン1号

まま、うるさいよぉ(怒)

ままゴン

あ、なんかすんません・・・

チビゴン1号

2号ちゃんが泣いちゃうでしょ!(本気の怒)

チビゴン2号

あぶぶぶ~笑

 

やればできました~!!!超初心者で、コードうんぬんとかまったくわかりませんが、それでもなんとかここまでたどり着けました!(涙)

会話形式のブログって、グッと読みやすくなる感じがしますよね!

初心者だと、とても有用なサイトも専門用語が多くて目がチカチカしたりするもんです。今回は、私がたどった道のりだけにしぼって書かせていただきます(それしかできない)。

使ったのは『Speech Bubble』

今回使用したのは、ワードプレスの吹き出し用プラグイン「Speech Bubble」です。

まずはプラグインをインストール

基本的なプラグインのインストール方法と同じようにインストールします。

  • ダッシュボードのプラグインを開く
  • 「新規追加」から右端の検索バーにて「Speech Bubble」と入力
  • 「今すぐインストール」
  • 「プラグインを有効化」

これでインストールと有効化は終了です。ここまででもふ~・・・って感じですね。

問題はここからです。

実際に投稿できるか確認する

ここが謎でした。プラグインを有効化したんだから、なんかうまいこと勝手に吹き出しになるんじゃないの?!なんていう考えは甘すぎました・・・。

そうです。超ハードルの高い「コード」とやらの登場です。知識の豊富な方や、プロブロガーの皆さんが当たり前のように使いこなしている「コード」。これがまったくわからん!!ただの暗号にしか見えない・・・。

そこで、コードをコピペできるように提示してくださっているサイトを発見し、そこから拝借いたしました。初めての「コード」入力とやらにチャレンジです。

参考にさせていただいたサイトはこちらです:WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

ここでリンク先へ飛んだ方、もう私の記事いらないんじゃ・・・なんて冷たいことは言わずにお付き合いください。

投稿画面にて、コードをコピーして、貼り付けて、よし!プレビューで確認!・・・。できてない。なぜ???なんかコードがそのまま載っちゃうんだけど?え?

みたいな苦悩がしばらく続きました・・・。本当に初心者なので。涙。

試行錯誤の末、右上のビジュアルモードとテキストモードを切り替えたときになんとなく原因がわかりました。ビジュアルモード画面ではコピーしたコードがそのまま張り付いていましたが、テキストモードにすると訳がわからない感じになっていたのです。

きっとこれだ!と思い、テキストモード画面にコピーしたコードをそのまま貼り付けました。

ままゴン

できたぜ~ぃ(大声)

チビゴン1号

・・・(怒)

 

ここまで来るとうれしさでテンションが上がっているため、チビゴン1号の冷たい視線なんて気になりません(おいっ!)。

吹き出しの種類を変更したり、名前を変更したり♪

作業がぐっと楽しくなってきましたね。せっかくコピーしたコードは極力さわらず、必要箇所だけ慎重に変更しながら作業を進めました。

吹き出しの種類は、個人的には”ln”がお気に入りですが、pinkやthinkも今後活用していきたいなぁとは思っています。

ままゴン

ピンクかわいいや~ん

ぱぱゴン

ままゴン、もうそんな年齢ではないんじゃ・・・

アイコン画像を変更する

これもまた謎すぎた!!わからなすぎて発狂するかと思いましたが、またチビゴン1号に怒られそうなのでぐっとこらえました・・・。

これまでずっと参考にさせていただいたサイトを引用させていただくと、

手順1)あなたの使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。

例:ドメイン>public_html>wp-content>plugins>speech-bubble>img

手順2)・・・・

引用:WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

さらっと書いてありますが、まったくなんのことだかわかりませんでした。ごめんなさい・・・。このサイトはとても親切で、この先の手順は動画が貼ってあり、非常にわかりやすく解説してあるのだと思います。

ただ、説明に使用しているサーバーが「Xサーバー」でした。

私はロリポップを使用しているため、ここでもう頭がはてなでいっぱいになりました。涙。

サーバーのユーザーページにて画像登録を試みる!

これまでなんとか書いてきた10記事たち、これはすべてこのWord Pressのダッシュボードにて作業が完結していました。サーバーなんて、一番最初のセットアップ時に手探り状態で登録しただけ。それ以降は触れることなんてないと思っていました。

しかし、今回の吹き出しに使用するアイコンは、サーバーの方のサイトに画像をアップロードしなければならなかったのです!衝撃!!ダッシュボード上でいくら苦悩しても答えが出なかったのはこのためでした(気付くの遅い!っていうツッコミは重々承知しております)。

そこで次に参考にさせていただいたのがこのサイトです:【スピーチバブル】サーバー別画像アップ方法!ファイルマネージャーの使い方

またもや勝手にリンクを張らせていただきました・・・。

画像に手書きで説明が入っており、とてもわかりやすかったです!

ファイルマネージャーの入り方

  • ロリポップ!:ログイン後、「ロリポップ!FTP」を選択。
  • X・X2サーバー:ログイン画面から、「ファイルマネージャー」選択し、別アカウントで入る。

フォルダの場所の違い

  • ロリポップ・X2:「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」
  • エックスサーバー:「public_html」⇒「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」を開く。

引用:【スピーチバブル】サーバー別画像アップ方法!ファイルマネージャーの使い方

ファイルマネージャーっていうんですね。またひとつ勉強になりました。

登録した画像をコードに入力し、画像変更完了♪

画像の登録方法がわかれば、あとは自分の好きな画像を登録して会話に登場させるだけですね!

私の場合、プロフィール画像もそうですが、似顔絵はスマホの「ゆるかお」というアプリを私用して作製しています。無料なのにある程度の表情は作れるため重宝しています♪

表情の変化も出せるのでなかなか面白いです。

ぱぱゴン

・・・、オレ?

ままゴン

うん!おどろいてみて!

ぱぱゴン

フリが雑すぎないか?!

まとめ

超初心者、知識なしでもなんとかここまでたどり着くことができました。しかし、コードをどうやったら使いこなせるのか?とか、リンクの貼り方はこれでいいのか?とか。まだまだ謎だらけです。

どなたか親切な方がいましたら、ぜひご教授願います・・・(他力本願か!)。

自分でももっと勉強せねば。とにかくこれでブログの幅が広がったことは確かです。初心者で、右も左もわからない仲間の方がいましたら、こんなんでも会話ブログが書けるのなら、自分でもできそう!と、励みにしていただければ嬉しいです。

 

最後まで読んでいただき、ありがとうございました。

 

ABOUT ME
南マイコ(ままゴン/maiko)
南マイコ(ままゴン/maiko)
「子育てママに笑顔とゆとりを」がテーマ 収益は完全在宅+1日3~4時間で月20万超 最高月収40万超 初心者からWebライターに転身、月20万円ほどの収入を確保し副業からガッツリ本業に! 在宅ワーカー&初心者ママライターを応援中♪ 主婦こそ在宅で自由に!初心者ライター講座&セミナー開催中☆ ▼『LINE@』のお友だち登録で最新&限定情報をGET▼