てばお独り言

JINで吹き出しが表示されない時に試すこと【wordpress】

WordPressテーマJIN
てばこ
てばこ
ワードプレスの人気テーマであるJINって、記事中に簡単に吹き出し形式をだせるからとっても便利なんだけど、初めてJINを使うと画像が正しく表示されないことがあって初心者がつまづくところなのよね
てばお
てばお
なので今回は僕らが吹き出しの設定で苦労したところをWordpress初心者の皆さん向けに解説します~
ブログで稼ぐ
1ヶ月200記事ペースで書くとお金は稼げるのか① 巷にあふれる「ブログで稼げる」噂は本当なのか? Twitterなんかを見ていますと、「初心者が半年で月30万円達成しました!」なん...

JINの吹き出し機能ってなあに?

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系のプラグインを使っていたら止める

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

 

吹き出しの会話を入力してないと名前がでなかったりもする

吹き出し

ひとまず吹き出しをテストで作ってみた時に、キャラクターの下の名前がでないことがあります。特に表示位置をrightにしている時になる傾向があるのですが、これは吹き出しに会話をいれればきちんと名前も表示されるようになります。

試しに作ってみて「名前がでないっ!」となったらとりあえずは会話を入力してみましょう。

 

吹き出しのコツと便利な使い方

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

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

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

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

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

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

 

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

 

吹き出しの画像サイズはきっちりと圧縮

吹き出しは記事内容によっては気軽が故にかなり多用することになります。この記事だけでもサイズ80×80の画像を10個以上使っています。

そのため、吹き出しに登録する画像はぎりぎりまで圧縮して画像サイズを小さくするべきです。

この記事も、もともとは一つの画像がPNG形式で40KBほどあったのですが、圧縮して1つ20KB以下にしたらトータル200KB以上も節約ができました。

キャラクターによっては10KB以下まで圧縮してもまったく問題ありません。吹き出しの画像は小さいですから画像のあらが見えにくいのです。

通信回線は5Gがでてきたとはいえ、まだまだ3Gのような低速回線で見る機会も必ずありますし、グーグルの検索順位もページの軽さが重要度を増してきていますので重要なところですよ。

WordPressを使うならエックスサーバーが安定&安くておすすめ

長くブログを書いていくならパームレストとトラックボール式マウスは必須

ブログですが、もしこれから10記事、100記事と長期目線で見ているのならばパームレストとマウスはきちんと選ぶ必要があります。

初心者はだいたい1000文字くらい書いたらメンタルがへばってしまいますが、慣れてくると3000文字くらいなら余裕で書けるようになります。しかしその時に疲労が出てくるのが腕と手首です。

てばこさんは一時期、毎日3000文字のペースで書いていたのですが、メンタルは慣れたものの、ノートパソコンの高さが合わず、手首が腱鞘炎になってしまったことがあります。

てばこ
てばこ
腱鞘炎になると中指と薬指を上げる度に痛みが走るのよ・・・(泣)

 

一度腱鞘炎になるとブログを書くことが億劫になり、これまでせっかく習慣づけできていた執筆ペースが崩れてしまう原因にもなりかねます。

そこでおすすめがパームレストトラックボールマウスです。

パームレストをキーボード手前に挟めは手首の背屈した状態を緩和できますので、疲労が格段に変わります。

また、マウスもトラックボールという親指のみで操作するものをおすすめします。これはマウスパッドがいらなくなる上に、ワイヤレスのものだと手元に置いて自由に操作できる優れものです。慣れるのに2日かかりますが、プロの現場ではトラックボールのマウスがスタンダードとなっています。

 

JINブロガーへおすすめのパームレスト&マウス

こちらはAmazonで評判の良いHyperXのパームレストです。天然ゴム仕様で柔らかすぎず、ヘタリにくくて耐久性に優れた商品です。一時期は人気すぎて手に入りにくかったですが、最近は安定して購入できるようになりました。

 

トラックボールマウスに関してはこれ1択です。圧倒的な耐久性と即時交換してくれる手厚いサポート。バッテリーの持ち具合などどれをとっても一級品です。

ワイヤレスで大きなディスプレイがあればかなり離れた状態でも操作ができ、これまでのマウス人生がなんだったのかと思わせるオススメの一品です。

 

こちらはREALFORCEというガチの方向けの高級キーボードです。てばこさんも利用していますが、押した時の反応速度の速さと押し込んだ時の音は打てば打つほど打ちたくなる至高の逸品。

一日10000文字など追い込む時があっても、タッチが非常に軽いのでサクサク打てます。また、耐久性も非常に高く、PC交換時も続けて引き継げるので新しいキーボードに変えた時に配置が微妙に変わってイラっとくる経験もしなくてすむようになります。

てばこ
てばこ
このREALFORCEシリーズは種類も多いから好みのものは必ず見つかるわよ!

 

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

てばこ
てばこ
吹き出しの件もそうだけど、Wordpressって最初はトラブル多いわよね~
てばお
てばお
はい。特にエディターのGutenBerg絡みは凄い多いみたいで、てば旅のJINの記事は沢山の方が検索してくれています
てばこ
てばこ
でもJINってフォーラムの人たちや製作者のひつじさんもすごい丁寧に教えてくれるわよね~
てばお
てばお
そうなんですよね。ひつじさんTwitterとかでも教えてくれますし、すごい労力だと思います

 

WordPressテーマJIN
【WordPress初心者向け】JINでGutenbergは使ってはいけないさまざまな便利機能が着いたワードプレステーマJINで起こる色々なトラブルを紹介しています。事前に押さえておけばいざ事が起こったときも焦らず対処できますよ!...
こちらの記事もオススメ!