サイト関係

WordPressのテーマ『JIN』で吹き出しを表示させる方法

テーマを「JIN」に変えてからというもの、試行錯誤の日々を送っております。

ひつじさんは丁寧に解説してくださってます。

理解出来ない私が悪いんです・・・

 

今回の課題は 「吹き出し」 です。

こんなのです。

簡単にできます。って書いてあるけど、結構時間がかかりました。

スーパー初心者でも設定出来るように解説してみたいと思います!!

ひつじさんが解説しているのを一緒に読んで下さいね。

 

 

吹き出しの下準備

まず、吹き出しに使いたい画像を選びます。

メディアに新規登録してしまうと、編集が出来なくなるので、ダウンロードをした時点で画像を加工しておいて下さい。

全身を使うことは少ないと思いますので、顔の部分になりますよね。

3Dペイントなどでトリミングをして、いらない部分は消しておくといいです。

 

また、画像の大きさは表示の重さに関係してきます。

吹き出し用の画像は小さくても良い、といいますか、表示サイズは小さなものです。

画像圧縮をして100×100くらいの小さな画像にしておいて下さい。

 

ここがポイント!

画像は正方形にしておくこと!!

 

アップロードする画像は正方形に加工しておきましょう。

上下左右が非対称になるか、どこかが切れた表示になってしまいます。

 

画像の圧縮はどうしたら良いの?という方がいらっしゃればご連絡下さい。

また、別の記事にしてみます。

 

AddQuicktagというプラグインがあると、作成した吹き出しを簡単に呼び出せるので、入れておくと便利です。

 

メディアから新規追加する

 

 

<メディア>から<新規追加>へと進み、

 

メディアのアップロード

 

<ファイルを選択>をクリックして、加工しておいた画像をアップロードします。

アップロードすると、このようになります。

 

 

ファイル名の右側(黄色で囲んだ部分)をコピーしておきます。

ヒツジさんは短い方が良いと言われていますが、短くする方法が分かりませんでした。

私の場合、長いですが、特に問題は起きませんでした。

 

ファイル名を短くする方法

ファイル名を短くする方法が分かりました。

画像をアップロードしてしまうと、ファイル名を短くする事は出来ません。

アップロードする前にファイル名を短くしておきます。

ファイル名を短くしたい画像を右クリックし、『名前の変更』をクリックします。

 

青く表示されている部分を削除し、新しく名前をつけます。

このとき、日本語では無く、アルファベットかローマ字のように英語表記にしておきます。

すると、

このように、短くなります。

 

すでにアップロードし、オリジナル画像がない場合の対処法

画像をアップロードし、やれやれ一安心と、パソコン上のオリジナル画像は削除してしまった・・・

ワードプレスあるあるですよね。

ご安心ください。

 

アップロードした画像を左クリックすると、添付ファイルの詳細という画面になります。

そこに表示されている画像を右クリックして、名前を付けて保存を選ぶとドキュメントかピクチャに保存されます。

そこで、名前を短くして再度アップロードすれば大丈夫です。

吹き出しのコードの設置

いよいよコードを設置していきます。

コードの設置方法

投稿画面のビジュアルモードに<CHAT>という吹き出しマークのところをクリックします。

クリックするとこうなります。

{chat face=”man1″ name=”” align=”left” border=”gray” bg=”none” style=””]ここに文字を入力してください[/chat}

他の文字と区別するために着色しましたが、黒く表示されます。

前後はわざと{}にしています。

 

テキストモードに切り替える

テキストモードに切り替えたら、先ほどコピーした、画像のファイル名を

{chat face=”man1” name=”” align=”left” border=”gray” bg=”none” style=””]ここに文字を入力してください[/chat}

man1の部分を消して、先ほどコピーしたもの(黄色で囲んだ部分)を貼り付けます。

この時に半角スペースや全角スペースが入らないように気をつけて下さいね。

私はここに半角スペースが入っていたために画像の表示が出来ず、何が原因なのか調べまくりました。

答えが書いてある記事に出会えませんでしたけど、自分で気づいたなんて奇跡です。

 

ここがポイント!

・画像の拡張子(jpgなど)までいれること

・入れる場所は”と”のあいだ

・半角、全角スペースは入れない

 

名前を入れる

画像の下に名前を表示させたい場合は、name=の次にある ”” の真ん中に入れます。

name=”ももこ” のようになります。

くれぐれもnameは消さないように。

 

名前はあっても無くてもいいですが、あった方が親切かな?と思います。

 

吹き出しの位置を決める

おおかみくんのように左に出す場合は align=”left” 

ひつじくんのように右に出す場合はalign=”right” にします。

ももこ
ももこ
次男坊!右から出ておいで~

{chat face=”momoko_6.jpg” name=”ももこ” align=”left” border=”green” bg=”none” style=”maru”]次男坊!右から出ておいで~[/chat}

次男
次男
右ってこっちかな?お母さん、呼んだぁ?

{chat face=”jinan.jpg” name=”次男” align=”right” border=”yellow” bg=”none” style=”maru”] 右ってこっちかな?お母さん、呼んだぁ?[/chat}

実際のコードと吹き出しの内部が分かりますよね。

吹き出しの画像を丸く表示したい

なにもしなければ、画像は正方形で表示されます。

ひつじさんの吹き出しは正方形です。

わたしは丸く表示させたかったので、コードを足して丸くしています。

{chat face=”man1” name=”” align=”left” border=”gray” bg=”none” style=””]ここに文字を入力してください[/chat}

最後のstyle=”” の ”” 部分を “maru” とすると、画像が丸く表示されます。

{chat face=”man1” name=”” align=”left” border=”gray” bg=”none” style=“maru”]ここに文字を入力してください[/chat}

 

後半はひつじさんにトス

枠のカラー(言葉が入る部分)などは、ひつじさんの記事が最高によくわかるので、ここはひつじさんの記事を参考になさってください。

 

AddQuicktagの設定

AddQuicktagを設定すると吹き出しが簡単に呼び出せます。

こんな感じです。

今後、他にも登録する可能性があるので、種類=吹き出し 吹き出しの種類=ももこ、次男など自分で分かりやすいようにしておきます。

では、始めていきましょう。

AddQuicktagをインストールする

プラグインから新規追加をクリックします。

 

キーワードにAddQuicktagと入力し、左側の葉っぱのマークの方を「今すぐインストール」します。

インストール出来たら、有効をチェックして下さい。

 

AddQuicktagの設定方法

AddQuicktagの設定をクリックします。

このような画面に変わります。

吹き出しを設定していく ボタン名

[ボタン名]のところに 「吹き出し 任意の名前」を入力します。

他にも設定していく可能性がある場合は、最初に「吹き出し」など分かりやすくしておくと

あとあと自分が楽です。

吹き出しを設定していく 開始タグと終了タグ

開始タグは、最初に設定したコード

{chat face=”man1″ name=”” align=”left” border=”gray” bg=”none” style=””}

 {chat face~style””} まで。

終了タグは、{/chat} になります。

{ } としている部分は、本当は [ ] です。

吹き出しを設定していく チェックと保存

右側のチェック一覧にチェックを入れていき、最後に『変更を保存』をクリックしたら終了です。

右端にチェックを入れると、全てを一度にチェックする事もできます。

吹き出しが出てくるか確認

最後に投稿の新規追加をクリックして、ビジュアルモードのQuicktagsをクリックしてボタン名で入力した名前が出てくるか、さらにそれをクリックして、正しく表示されているかを

プレビューで確認して下さい。

 

これで設定は完了です。

大変お疲れ様でした。

 

ひぃ~設定方法の説明って、超大変ですね~・・・

分かりやすく説明してあるみなさまに大変感謝とねぎらいを送りたいと思います。

疲れた・・・

POSTED COMMENT

  1. かぢゅまる より:

    はじめまして!!
    ももこさんのブログの吹き出しの作り方を見て、私も吹き出しをつくるコトが出来ました!!
    ひつじさんの?JINの説明書の吹き出しの作り方を読んでも全然上手に表示されなくて´д` ;
    最後の「疲れた」っていう部分にスゴい共感しました笑

    私はブログを今年からはじめました。
    でもそもそもパソコンがど素人なので、ブログを書くのは楽しいけど書き終わった頃には死にそうです笑

    まだまだ技術とか全然追いつかないんですが、
    ももこさんの吹き出しの作り方も私のブログに貼り付けさせてもらいました。
    (って、勝手に大丈夫でしたでしょうか…もし何かあれば遠慮なくおっしゃってください)

    念願の吹き出しが出来て本当に嬉しいです!!
    私は、まだブログも始めたばかりで収入を得られるようなブログには遠いし、多分、設定とかも全然ですが、
    いつか自分のブログに訪れた人がこんな風に思ってくれたら嬉しいななんて思いました(´∀`)

    ちょっと長くなってしまいましたが、ももこさんのブログがあって良かったです!!
    どうもありがとうございました。

    • momoko より:

      かぢゅまるさん。コメントをどうもありがとう!!

      この記事を書くのに2日以上を費やしました(苦笑)
      困っている方がいれば少しでも役に立つと良いなぁという思いで必至に作りました。
      私の記事で設定できた事をとてもうれしく思って、リアルな感想をいただけてやる気が湧きました。
      リンクフリーなので気にせずに使ってくださいね。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください