妻にスイート10ダイヤモンドを贈るブログ > ロードtoスイート10 > 副業ブログ > JINで吹き出しがうまく表示されない⁉AddQuicktag設定でミスってない?
理学療法士副業推進課主任
妻にスイートテンを贈りたい人(贈り人スズキ)
社畜で何とか家族を養ってきたしがない理学療法士です。結婚10周年を目前に、妻からスイートテンダイヤモンドのおねだり…資金調達の為に無謀にもブログに調整して収益を目指しているブログサイトです。同じような境遇の方の一助となれればと思います、一緒に頑張りましょう!
\ Follow me /
副業ブログ

JINで吹き出しがうまく表示されない⁉AddQuicktag設定でミスってない?

このブログ記事はwordpressのテーマ「JIN」で作成しています。

そして私はブログの中に「吹き出し」をいれようと思って色々作業してきました。

アイコン用の画像も用意した、JINの公式ホームページもチェックした、AddQuicktagも導入して有効にした、AddQuicktagにコードも入れた。

よし!これでワンクリックで表示…されない!!

JINで簡単に吹き出しを利用する為のプラグイン「AddQuicktag」これで登録した吹き出しが簡単に入力されるはずなのに!どうやってもうまく表示されない!

数々の設定方法が諸先輩型のブログに載っていますが、その通りにやっても上手く表示されない!

私と同じ過ちを犯して欲しくないので、私よりもこの辺の事に弱い人向けに解決策を紹介したいと思います。

最近ではWordpressを更新したらAddQuicktagが使えなくなったとか、グーテンベルグにしたら使えなくなったという話しを聞きますが、私は今の所影響が出ていません。

吹き出しが表示されない時の原因と解決策

完全に表示されないという訳ではなく、画像が上手く表示されな、右左の設定がうまくいかないというのが、主な現象だと思います。

私の場合は以下を試した結果、簡単に解決する事ができました。というかそもそもミス以前の問題でした。

一番最初に確認する事は、JINの公式ホームページからコピペしたコードをきちんと弄れているかどうかです!

テーマ、プラグインに不具合が起きている可能性は極めて低く、ほぼこちらの設定ミスが原因で表示されていないので、自分で入力している所にミスがないか確認する事が重要です。

JINの公式マニュアルのコードを設定しよう

JINの公式マニュアルにあるコード↓これですね。


出典元:JIN公式HP

この「赤字」で書かれている部分、これをきちんと入力できていますか?

まずはこれを確認しましよう!

私が犯していたミスはまさにコレ、「画像情報」の入力で終わって、その他の配置や枠色・背景色の設定をしていませんでした。

スズキさん
スズキさん
それじゃ表示される訳ないですよね

基本的にはこれを見直してみる事が一番だと思います。私が解決できた一番の要因はこれだと思っています。

ファイル名を短く、アルファベットに直す

画像情報を入力する時に、画像ファイル名が長いと不具合を起こすと言われています。

画像ファイルは外注等ので作った場合には非常に長いファイル名になっている事が多いので、自分で管理する時の事も考慮して、このタイミングでファイル名を変更しておくと良いでしょう。

一応アルファベットで短いファイル名になるように意識して設定しましょう。

*ただし、ファイル名がアルファベットでなく「かな」であっても正常に表示されるので、この作業は第一選択でなくても良いと思います。

「スペースを入れない」を信じない、コピペのみ!

これも解決策を探している時に他人様のページで見つけた方法です。

この方法で解決できた時もありましたが、必ずしもそうではなかったです。むしろ、JINの公式マニュアルのコードを「コピペ」して「スペース」は弄らない方がきちんと表示されました。

AddQuicktagのコード入力の画面ですが、赤□で囲んだ部分には半角程度のスペースが空いています。ですが、このままコードを登録しても問題なく吹き出しが表示されています。

コード入力時にスペル間違いをしていないかチェックする

コード入力の際に手打ちで入力が必要な情報は「配置:左右」と「枠」「背景」の色の設定のみです。

この左右:left/rightを間違っていないか確認が必要です。当然半角英数です。

それと、枠・背景の色の設定も当然半角英数で英語で色を表記する必要があります。red/blue/yellow/green/none(なし)等、一つ一つスペル間違いがないか、しっかりと確認してみると、意外と間違えている事がありますよ!

Gutenberg問題…AddQuicktagを使って吹き出しは使えるの?

wordpressを更新し、最新のバージョンにするとエディターが変更されGutenbergになります。

そして今まで親しんでいたクラッシックエディターから完全にさよならする未来が待っています。

私も今の今までGutenbergに変更する事を避けて来ましたが、いよいよそうもいかなくなります。

ですが、一応の解決策はあります。解決策といっても快適ではないかも知れません。

GutenbergでAddQuicktagを使って吹き出しを表示する

今の所、最新版のwordpress(Gutenberg)でAddquicktagをさくさく使うという事は出来ません。

「Gutenberg」の中にある「クラッシクエディター」を選択して、その中から「AddQuicktag」を選択するという方法で表示させる事ができるようです。

色んなサイトで紹介されているので、参考になります。

ですが、ぶっちゃけ手間が増えて全然「クイック」ではないです…

Gutenbergに慣れる必要を再認識した記事になった

本来の目的はAddQuicktagで吹き出しが表示されない時の対処方の紹介記事になるはずでしたが、書いているうちに「これ近いうちに需要なくなるな…」「それよりGutenbergに早く慣れた方が良いかも…」なんて事の方が重要なように思えてきました。

ブログやWEBの世界は日進月歩…うとい私にとっては追いつくので精一杯なにのいつまでたっても追いつけません…

皆さんも諦めずに頑張りましょうね!