吹き出し!これ、いいじゃないですか!使えると思います!!

これ!見てみてください!いいですよね!

お知らせです

「無料ブログテーマ」をご利用されていると吹き出しが作れるのは魅力です。有料テーマではこの機能があるでしょうけどね。うらやましい機能です。これからブログをはじめようと考え中である皆さんも、Speech bubbleは、諸先輩からも「使いやすくて、良いですよ」という声を沢山聴きましたし、おいらも、吹き出しの記事を作りたいと思っていましたので使い始めました!

この記事がまさに、それです。(使ってます!)

 

ガーン!

ところが、注意しいて頂きたい事ありました。

AMP機能を有効に設定した場合に「Google Search Console」さんから未対応ページとして問題がある旨のメッセージが頂きました。
AMP(GoogleとTwitterで共同開発されているモバイル端末でウェブページを高速表示するためのフレームワーク(AMP HTML))のことで、そのマークアップルールに従う必要があります。AMPを適用させるには、AMPが定める厳格な記述に誤りがあると機能を有効化してもページによってはエラーとなる可能性あり

これを、再現してしまいました。

現時点では、AMPを有効に設定した状態で、問題ページを修正しています。
(2019/02/06)現在検証依頼中。

AMP機能が無効の状態であれば、問題メッセージは発生しないでしょう、これから先はこのままAMP機能を無効のままという訳にはいかなくなりそうです。

こういった理由から、Speech bubble (ふきだしプラグイン)はとても気に入ってたものですが、AMP対応が施されて登場するかどうかわかりません。

この記事は、残しますが、今このAMP問題で対応した方法を、ご参考にして頂けると幸いです。

以下の記事がその関連記事です!

ドキッ!GoogleSearchConsoleからAMP問題解決催促のメールが飛び込んできた。

落ち込んでも仕方がない顔をあげて!仕事で叱られる人の心理と特徴

実は、この記事でも「Speech bubble」を使ってます。ですが、今の所ところ問題にはなっていません。今後くるのかもしれませんね。

待つという選択肢もありすけど、不安があるので画像を取り込んで、AMPの記述に引っかからないようにします。

AMPを有効にしてない場合は、大丈夫です。(実証済みです(笑))

 

Speech bubble (ふきだしプラグイン)は、Wordpressのプラグインページから検索してインストールします。それから有効化にできます!
     ※Speech bubbleの表示イメージはスナップショットで画像化しています。

対話している感じを表現できます。

SNSっぽいブログに出来ますね!

上記の吹き出しを出す記述のサンプルを表示します。(全く同じものです)

[speech_bubble type="ln" subtype="a" icon="1.jpg" name="ボス" ]なんかしゃべってるみたいに見える![/speech_bubble][speech_bubble type="pink" subtype="b" icon="2.jpg" name="ちはる" ]わぁー感じがいいですよね![/speech_bubble][speech_bubble type="fb-flat" subtype="c" icon="1.jpg" name="ボス" ]割と、か、かわいいじゃねーか[/speech_bubble][speech_bubble type="pink" subtype="d" icon="2.jpg" name="ちはる" ]あら、当然ですわ!ハッハッー![/speech_bubble]

コピペして試してみてください(笑)。

・・・

っと、実際に試す場合は「Speech bubble 」プラグインをインストールしてあげないと使えませんでした。

先にそっちを説明せねば・・・

解説をご覧になって、こんな風にできるのか!とご理解を深めて頂いてからでも遅くはないでしょう。
インストールはチャチャっと完了しますからね!

 

プラグインをインストールしてもらったら、このテスト用の投稿記事にコピペしたコードを貼り付けて、プレビューしてもらえたら、同じものが出ますよ。(笑)


これ、活用していきたいなぁ!


軽い感じでも、しっかり記事になると思うし、読んでても楽しくなると思う!

感動したので、簡単いですが記事にしてみました。

やってみたら思ったほど、難しくはなかったですよ。

それに、やりながら憶えていけばいいと思ったので、やってみようとチャレンジして見てください。

絶対に、ブログの記事が読み易くなります。

全編これでやるとなると大変かもしれません。(笑)

スポンサーリンク

吹き出しの形状は9種類ありました!

実は吹き出しの種類も9種類用意されています。( type=”〇〇”)9種類のコードはdrop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkのどれかを選ぶのですが、9種類の表示イメージを提示しておきます。

 

「Speech bubble 」での記述例

type=”drop” とした場合
[speech_bubble type=”drop” subtype=”a” icon=”1.jpg” name=”ボス” ]dropを使ったよ![/speech_bubble]

type=”std” とした場合
[speech_bubble type=”std” subtype=”a” icon=”1.jpg” name=”ボス” ]stdを使ったよ![/speech_bubble]

type=”fb” とした場合
[speech_bubble type=”fb” subtype=”a” icon=”1.jpg” name=”ボス” ]fbを使ったよ![/speech_bubble]

type=”fb-flat” とした場合
[speech_bubble type=”fb-flat” subtype=”a” icon=”1.jpg” name=”ボス” ]fb-flatを使ったよ![/speech_bubble]

type=”ln” とした場合
[speech_bubble type=”ln” subtype=”a” icon=”1.jpg” name=”ボス” ]lnを使ったよ![/speech_bubble]

type=”ln-flat” とした場合
[speech_bubble type=”ln-flat” subtype=”a” icon=”1.jpg” name=”ボス” ]ln-flatを使ったよ![/speech_bubble]

type=”pink” とした場合
[speech_bubble type=”pink” subtype=”a” icon=”1.jpg” name=”ボス” ]pinkを使ったよ![/speech_bubble]

type=”rtail” とした場合
[speech_bubble type=”rtail” subtype=”a” icon=”1.jpg” name=”ボス” ]rtailを使ったよ![/speech_bubble]

type=”think” とした場合
[speech_bubble type=”think” subtype=”a” icon=”1.jpg” name=”ボス” ]thinkを使ったよ![/speech_bubble]

こんな感じです。以外にピンクがよさげに見えますね。

吹き出しの表示位置(左右)と普通の吹き出しと心の声を表現

subtype=”〇〇”では、画像の左右の位置と、2種類の吹き出しを選びます。
それに記述方法が3タイプあって、どれを使うかは自由だそうです。
3つのタイプはこんな感じで理解してもらって、実際どれを採用するか決めるのはあなたになります。

3つのタイプ
subtype=”a” は、subtype=”L1″や subtype=”left1″と記述しても同じ意味になります。

a = L1 = left1
b = R1 = right1
c = L2 = left2
d = R2 = right2

と同じ扱いをしてくれます。

ここでは一番簡単な「a,b,c,d」の設定で記述します。

「Speech bubble 」での記述例

a=アイコン左、通常の吹き出し

[speech_bubble type=”drop” subtype=”a” icon=”1.jpg” name=”ボス” ]aを使ったよ![/speech_bubble]

b=アイコン右、通常の吹き出し

[speech_bubble type=”drop” subtype=”b” icon=”1.jpg” name=”ボス” ]bを使ったよ![/speech_bubble]

c=アイコン左、心の声の吹き出し

[speech_bubble type=”drop” subtype=”c” icon=”1.jpg” name=”ボス” ]cを使ったよ![/speech_bubble]

d=アイコン右、心の声の吹き出し

[speech_bubble type=”drop” subtype=”d” icon=”1.jpg” name=”ボス” ]dを使ったよ![/speech_bubble]

こんな感じです。

 

後、名前を表示させることも、大事な部分ですね。

画像付近に表示される名前を入れます。
この上の設定イメージでは、name=”ボス” と入れています。

 

それと、セリフ(〇〇〇〇・・・)はテキストで自由に表現できます。

コードのどの部分に書くのか?黄色の部分に書きます。

speech_bubble type=”drop” subtype=”d” icon=”1.jpg” name=”ボス” ]〇〇〇〇・・・〇〇[/speech_bubble 

黄色の色付き部分がそれに当たりますね。

 

画像にオリジナルが欲しい!と思った。

用意されているのは影みたいな画像ファイルですので、味気ないです。

デフォルトでは「1.jpg」と「2.jpg」の2枚が収録されています。
それぞれ、icon=”1.jpg”、icon=”2.jpg”と既定値として入力しています。


自分でアイコンを作ってみようか?

ネットで色々検索して情報を集めました。

アイコンの表示サイズがデフォルトでは幅77×高さ77ピクセルだそうですが、iPhoneのRetina対応を考慮すると画像のサイズを幅150×高さ150pxにすると良さそうだ、という事が解ったので、さっそく画像を準備。ネットで、無料で似顔絵を作成できるサイトがありますのでそこで作ったものを「150px:150px」にリサイズまで準備しました。

今回は、いらすと屋 さんなどフリー素材を使わせていただきました。

 

画像をサーバーにFTPでアップする!

作成した画像は、Speech bubbleプラグインのディレクトリにアップロードする必要があります。

FTPソフトを使い、WordpressがインストールされているFTPサーバーにアクセスします。

今回はエックスサーバーを利用していますので、エックスサーバーのファイルマネージャーWebFTPを使って、画像ファイルをアップロードしました。

エックスサーバーのインフォパネルへログイン(IDやパスワードはご勘弁!)します。

ファイルマネージャをクリック(赤い囲み)


以下の場所をを開きます。…/wp-content/plugins/speech-bubble

speech-bubbleの中に「img」ディレクトリがありますので、この中に新しい画像をアップロードしてください。デフォルトで1.jpgと2.jpgがあります。追加します。

ファイルの選択をクリック(赤い囲み)

アップロードする画像ファイルは今回、sampl.pngです。
エクスプローラーが開きますので、アップロードするファイルを選択します。

それから開くをクリックします。

アップロードするファイル名が表示されています。ファイル名に間違いがなければ、アップロードをクリックします。

アップロードしたら、sampl.png が表示(追加)されていましたら、完了です。

これで新しい画像を使えるようになります。

icon=”sampl.png” を アップロードしましたので、さっそく表示してみます。

[speech_bubble type=”drop” subtype=”a” icon=”sampl.png” name=”ボス” ]aを使ったよ![/speech_bubble]

アイコン画像が変わりました!

どうですか、いい感じですよね!!(笑)

 

あっ失礼!

順番が逆でした!speech_bubbleのインストールをしてないと、設定先のフォルダーは存在しませんからね!(失礼しました!)

インストールの方法は割と簡単ですよ。

この優秀なプラグインは更新がされていませんので、100%大丈夫ですとは言い難いのですけど…

2018/12/21現在、プラグインをインストールして利用を始めた、我が身としましては、ご覧の通りです。

全然、使えています!(笑)

インストール手順を書いときますね!

①WordPressメニュー左側に縦に並んでいる中から「プラグイン」→「新規追加」を選んでクリックしましょう。(↓のような表示になります)

②キーワード(右のほう)にspeech-bubble」と入力してみましょう。

以下のプラグインが表示されてるはずです。赤で囲った「今すぐインストール」をクリックします。

③インストールが正しく終わりました。メッセージが通知されたら、赤囲った「有効」をクリックしましょう。

これでインストールは終了です。

 

まとめ

ひょんなことから、技術系の記事を書くことになりましたが、自分でトライした事ですので上手く表現できたのか、これからこのプラグインを利用しようと考えている方に、少しでもお役に立て手数料たら幸いです。

私自身、吹き出しを使ったブログ記事はこれから始めるので、運用面で、コードをカキカキする際に、何か便利なやり方は・・・とか考えてしまいそうです!

これは!

とか発見できるものがあったら、関連記事として、ご紹介していけるといいですよね。

 

そうそう、グーテンベルグの使い方が今一つ?
この記事はクラッシックエディターで書きました。

WordPress5.0の更新時に、新エディターとして標準で使えるお話でしたが、日本語表記になってなくて日本語表記にする方法がよくわからず、クラッシックエディターをインストールして、記事を書いていましたが、いづれ、新エディターも使えないといかんだろうと考えてました。

グーテンベルグもWordPress5.0で標準装備・・・

 

テスト運用をやっていたことにきがついたら、グーテンベルグもプラグインがあったんで、ダメもとでインストールしてみました。

日本語表記になっちゃったんです。

これでいいのか、よくないのか、定かではありませんが、悩みが解消したのは事実です。

 

最後までお付き合い頂きありがとうございました。

 

最新情報をチェックしよう!
スポンサーリンク