てばお独り言

【WordPress】JINで吹き出しが表示されない原因【実例で説明】

WordPressテーマJIN
てばこ
てばこ
WordPressのテーマであるJINって、私達のこの会話を簡単に吹き出し形式でだせるから便利なんだけど初心者にはちょっと敷居が高いのよね~
てばお
てばお
はい。てば旅も最初は吹き出しの画像が表示されなかったりするトラブルがあって殺風景なブログでした
てばこ
てばこ
それが今じゃサクサクじゃないの。成長したわね~
てばお
てばお
はい~。ですので今日は、僕が最初の吹き出しの設定で苦労したところをWordpress初心者の皆さん向けに解説します~

 

吹き出しってなあに?

WordPressの有名テーマである「JIN」を使いますと簡単に吹き出しが利用できます。吹き出しを知らない方のために一応出しておきますと、

 

とり子
とり子
コケ~

 

と、こんな感じにキャラクターといっしょに表示される会話部分が吹き出しですね。

文章ばかりのブログだと疲れてしまいますので、たまに吹き出しで会話が入ると一旦の区切り感がでて脳が落ち着きます。

ちなみにJINを使ってなくともWordPressでしたら吹き出しを入れることができるんですが、通常ですと吹き出しプラグインの「LIQUID SPEECH BALLOON」を使ったりするのですが(吹き出しプラグインで有名だったSpeech bubbleは配布終了しました)、このLIQUID SPEECH BALLOONは吹き出しに登録できるキャラクターの数が10人までなんですよね。

てば旅は、スタートして2ヶ月で登録キャラクターは10個を超えてしまったのでちょっと足りません。

しかしWordPressテーマのJINは、この吹き出しをプラグイン無しで使えて、さらにキャラクター登録数無制限なんですよね。

 

てばこ
てばこ
これめちゃくちゃ便利なのよ!

 

しかし・・・

JINで吹き出しがちゃんとでてこない問題

JIN吹き出しエラー

吹き出しの端っこにへんな■がでますね

 

JIN吹き出しエラー

画像が切れちゃいますね

 

吹き出しを使い始めの頃、結構な頻度で上記のようなトラブルに見舞われる方が多いかと思います。そこで今回は実例を踏まえて解決方法や原因を書いていきますね!

まずこんな表示になってしまう代表的な原因ですが、これは大抵コードのどこか1文字間違ってるなんてことがほとんどです。

例えば上の■が出るのは、下のコードの「none」が「non」になってただけで、てばこさんが切れちゃってるのは「left」を「lift」と記述間違いで起こりました。

JIN吹き出しコード

あと、キャラクターの画像指定ですが、このコードの画像の1行目の拡張子(この場合はtebakoの後ろの「.jpg」)も記入することが必要です。これをよく忘れてる方がいらっしゃるんですよね。

 

吹き出しの位置がキャラクターよりずれてしまう場合

JIN吹き出しエラー

ちょっとだけ吹き出しが下がってます。そんな時はエディタの画面を開きまして・・・

 

JIN吹き出しエラー 見出しを選ぶタグのところが「整形済み」になっていないかをチェック。

 

微々たる差ですが、気になる人は気になる吹き出しのズレ。

大抵の場合、見出しが原因だったりしますが、たまに吹き出しがずれているのではなくて、キャラクターの画像がずれている場合もあります。その場合は吹き出しの画像サイズを80×80で作ってみてください。

 

吹き出しに画像が表示されない場合

JIN吹き出し 画像が表示されない

こちらの症状がでた場合は考えられる原因が多いです・・・

 

  1. コードの記述間違い
  2. 画像のファイル名が長すぎないか
  3. 吹き出しを入れる時はテキストエディタでいれてみる
  4. WordPressとPHPとJINのバージョンが最新かどうか?
  5. 以前テーマを変更したことがある方でしたら、WordPressの管理画面から【設定】→【メディア】→下の方にある【年月ベースのフォルダに整理】にチェックをいれる
  6. Lazy Load系のプラグインを使っていたら止める

とこの辺りを試してみてください。

 

吹き出しの便利な呼び出し方

みなさん吹き出し入力の時はプラグインの「AddQuicktag」を使っている方が多いと思いますが、てば旅では吹き出しのコードをそのまま辞書登録しちゃうことをおすすめしてます。

たとえば「みぎ」って打つと・・

吹き出し便利な使い方
てばお
てばお
僕がでてきます

「せんせい」って打つと・・

JIN 吹き出し 便利な使い方
先生
先生
ハロー!

吹き出しは会話形式でキーボードだけでサクサク記述しちゃいたいので、いちいちマウスを触らなくて良いのでとっても便利ですよ!

 

てばこ
てばこ
ただし!MicrosoftIMEは辞書登録できる文字数が短いから、もしできなかったらGoogleのIMEを使えば長めの文字も登録できるわよっ!

【WordPress】JINで吹き出しが表示されない原因【実例で説明】まとめ

てばこ
てばこ
吹き出しの件もそうだけど、Wordpressって最初はトラブル多いわよね~
てばお
てばお
はい。特にエディターのGutenBerg絡みは凄い多いみたいで、てば旅のJINの記事は沢山の方が検索してくれています
てばこ
てばこ
でもJINってフォーラムの人たちや製作者のひつじさんもすごい丁寧に教えてくれるわよね~
てばお
てばお
そうなんですよね。ひつじさんTwitterとかでも教えてくれますし、すごい労力だと思います
WordPressテーマJIN
【WordPress初心者向け】JINでGutenbergは使ってはいけないさまざまな便利機能が着いたワードプレステーマJINで起こる色々なトラブルを紹介しています。事前に押さえておけばいざ事が起こったときも焦らず対処できますよ!...
こちらの記事もオススメ!