a#scroll-to-top{left:0;bottom:0}}.sfl_thumbnail{background-image:url(https://tips4life.me/wp-content/uploads/2018/04/wp-speech_balloonTP.jpg)}.broken_link,a.broken_link{text-decoration:line-through}.inv-recaptcha-holder{margin-bottom:1em}WP-Speech-BalloonWP-Thumbnail-and-TextSimple-FB-LikeboxABOUTお問い合せプロフィールサイトマップ大幅なサイトメンテナンスを行った為、一部「画像が表示されない」などの可能性があります。ページを更新してみて、それでも表示されない場合はご一報お願い致します。2017.08.10プラグイン版「WP-Speech-Balloon」をリリース致しましたので、これからお使いになる方はプラグイン版の「WP-Speech-Balloon」をお使いください。今後アップデートなどはプラグイン版のみ行う予定で、本記事の内容は今後修正する予定はありません。詳しくは以下の記事をご覧ください。【WP-Speech-Balloon_2.0】をリリース!名前を表示出来るようになったよ☆Wordpressの記事で吹き出し会話が使えるプラグイン「WP-Speech-Balloon」の上位版「WP-Speech-Balloon_2.0」をリリースしました。バージョン2.0では「アバターの名前を表示」出来るよう...tips4life.me2017.10.23※上記により本記事のサンプルなどはプラグイン版に変更致しました。WordPressの記事中で「吹き出し会話」を使えると、アクセントを出せたり伝えたいことを強調して伝えたりなどといった使い方ができます。先日、便利そうなプラグインを紹介されている記事を拝見させて頂いたのですが、「もしかしたら使えないかも?」との事だったので、簡単なものですが自作したので紹介です。プラグインにはせずにショートコードで使う仕様にしてあり、設定から実際に使うまでコピペ2回で出来ますのでご自由にお使い下さい。※なるべく多くの方が使えるように書いてるつもりですが、使用しているテーマや環境によっては正常に機能しない場合がありますのであらかじめご了承ください。※不具合などあれば、当ページ下部よりコメント頂けたら比較的簡単な内容であれば出来るだけ対応致します。]「function.php」は1文字でも記述をミスるとサイトが真っ白になって管理画面にもアクセス出来なくなる可能性がありますので、ご利用は自己責任でお願いします。「functions.php」などを編集する際は、FTPソフトを使い、必ず事前にバックアップを取るようにしてください。]吹き出しの「ぽわぽわパターン」を追記致しました。これに伴いそれぞれの項目を追記・編集致しましたのでご確認・更新をお願い致します。まとめどんな感じになるか今回作ったものを使うと、以下のような吹き出し会話を使うことができます。]吹き出しのパターンに「ぽわぽわパターン」もあった方が良いとお声を頂いたので追記致しました。吹き出し会話だよ~♪こんな感じだよ~♪このように、非常にシンプルで簡単なものですが左右のパターンがあります。ショートコードの設定(コピペ)今回の吹き出し会話は、ショートコードを使うと今後使う時にも非常に便利なので、ここで紹介するコードを「functions.php」にコピペします。それでは早速やってみましょう。]吹き出しの「ぽわぽわパターン」追記に伴い、下記のコードも追記してあります。ぽわぽわパターンもお使いになられる方はお手数ですが下記コードに更新してください。次にCSSの設定(コピペ)ショートコードの設定が完了したら、次はCSSのコピペです。以下のコードをお使いのCSSファイル(大抵はstyle.css)の一番下にコピペします。※子テーマをお使いの方は「子テーマのstyle.css」です。]吹き出しの「ぽわぽわパターン」追記に伴い、下記のコードも追記・編集してあります。ぽわぽわパターンもお使いになられる方はお手数ですが下記コードに更新してください。「functions.php」と「CSS」をコピペしたら残る下準備は吹き出し会話に使う画像の用意です。以下のような吹き出し会話に使う「正方形の画像」をアップロードしておいてください。※すでにアバター画像など、吹き出し会話に使いたい画像がある場合はこの作業は不要です。※実際に表示されるのは最大で「60px*60px」にCSSで調整してあります。画像サイズを変更されたい場合は先程のCSSを編集していただいてOKです。【左パターン】[bal_L1]と[bal_L2]と[bal_L3]【右パターン】[bal_R1]と[bal_R2]と[bal_R3]になるので、使い方は以下になります。]吹き出しの「ぽわぽわパターン」を追記致しましたので、お使いになる方は下記をご覧ください。※ポワポワパターンは左右共に最初の[bal_L1]と[bal_R1]を変更するだけで使えます。【左パターン】[bal2_L1]画像URL[bal_L2]テキスト[bal_L3]【右パターン】[bal2_R1]テキスト[bal_R2]画像URL[bal_R3]では、実際に上記のショートコードを使って吹き出し会話を表示した例を見てみましょう。具体的には、[bal_L1][bal_L2][bal_L3]を「ばるl」、[bal_R1][bal_R2][bal_R3]を「ばるr」のようにユーザー辞書に登録して、例えば「ばるl」を変換してまずショートコードを一発で全部記述→その後に画像のURLとテキストをそれぞれ入力すると便利かと思います。※ぽわぽわパターンの時は上記からそれぞれ最初のショートコードの部分に2を追記すれば効率良いと思います。※管理画面のメディアからアップロードして使っている場合は別です。ショートコードの使い方については以下の記事をご覧ください。【プラグイン無し】コピペ一発!Wordpressショートコードの便利な使い方!Wordpressでショートコードを使う方法はいくつかありますが、皆さんプラグインを使われる事が多いようです。「functions.php」を触りたくない方はここまで利便性を考えて「functions.php」にコードを記述してショートコードで運用する方法で説明してきましたが、やはり「functions.php」をいじるのはちょっとコワイという方もいらっしゃると思います。そこで、以下に「functions.php」にコピペはせずに、素のhtmlで使えるようにコードを記載しておきます。※「CSSの設定(コピペ)」で説明した「CSSコードのコピペ」は必要です。alt="アバター画像"></div></div>上記コードをお使いのPCのメモ帳などにコピペして保存しておくと便利です。勘違いされないように念のため書いておきますが、上記コード内の「alt=”アバター画像”」の「alt」というのは画像の代替テキストという意味なので、「アバター画像」という文字はご自分の好きな文字(画像の簡単な説明など)に変えて頂いて大丈夫です。_)mまとめ今回はWordpressの記事内で、ショートコードを使って「吹き出し会話」を使う簡単なコードを作ってみたので紹介しました。一応ショートコードを使わない方法も紹介しましたが、汎用性を考えると個人的にはショートコードを使うほうが便利だと思います。しようRA's(らす)@Tips4LifeWordPressでPCやスマホ(iPhone)などのTips(便利情報)、その他日常生活で便利だと感じた事やモノを書いているIT関係のナンデモ屋さんです。Life|毎日が便利で快適なiPhone&PC生活あなたにおすすめの関連記事この記事を読んだ人がよく見る記事です。functions.php【プラグイン無し】コピペ一発!WordPressショートコードの便利な使い方!Wordpressでショートコードを使う方法はいくつかありますが、皆さんプラグインを使われる事が多いようです。CSS]Wordpressを使っている方に限らず、CSSは基本的に<head>~</head>の中に「style.css」などへの外部参照のリンクを記述して管理されている方がほとんどだと思います。‘sc_p_fix’);に書いてある内容は、どういう意味なんでしょうか?この部分だけ、記載してもしなくても何も変化が無いので質問させていただきました。「sc_p_fix」に付いて、結論から言うと「ショートコードを使った際に自動挿入されるpタグやbrタグを排除する」というfixコードになります。WordPressはデフォルトだと文章や画像などに対して自動的にpタグが挿入されるようになっています。これはWordPressの管理画面でブログの文章をそのまま書いても自動的にPタグで囲ってくれるWordPressの便利な機能です。CSSなどでデザインを装飾する人からすると逆に邪魔な機能となる場合が多く、そういう方はpタグの自動挿入自体を機能させないようするなどの対応をします。汎用性を考えてWordPressのpタグ自動挿入機能を排除するのではなく、ショートコードを使った際に自動挿入されるpタグとbrタグを排除するように該当コードを記述してました。記事にその旨記載しておけば良かったですね(^_^;)実際に行われている処理は上記なのでブラウザ上で見た際にあまり変化が無いように見えますが、ソース上ではpタグやbrタグが消えているかと思います。見た目的にはあまり変化はありませんので、気にならない場合は削除して頂いて問題ありません。01:14初めてコメントさせていただきます。最近テーマを変更したのですが、以前使用していた吹き出しのコードが現在のテーマに合わないようで、表示が崩れてしまう状態でした。こちらのコードに変更したところ綺麗に表示され、とても感謝しています。一ヶ所手を加えたい箇所があるのですが、質問宜しいでしょうか。吹き出しの三角形の線を、吹き出しの線と同じ太さにするにはどこを変更したらよいのかわかりませんでした。コードの変更に問題がないようでしたら、御伝授お願い致します。08:52こんにちわ。実際に使われているページを見てみないとちょっと何とも言えないので、出来れば吹き出しを使われているページのURLを頂けると助かります。※プラグイン版のWP-Speech-Balloonをリリースしてますので、可能であればプラグイン版をお使い下さい。コメントをキャンセルメールアドレスが公開されることはありません。Life』の管理人RA'sです。現在はIT関係のアドバイザー(簡単にいうと何でも屋さん)です。Life』管理人プロフィール自作プラグインWP-Speech-BalloonWP-Thumbnail-and-TextSimple-FB-LikeboxTwitterフォローするとTwitterでブログの更新情報を受け取れます。Life』管理人の個人アカウントです。Facebookいいね!するとFacebookでもブログの更新情報を受け取れます。Life』のFacebookページです。ブログの更新情報をお知らせします。Life』の管理人RA'sです。現在はIT関係のアドバイザー(簡単にいうと何でも屋さん)です。Life』管理人プロフィール自作プラグインWP-Speech-BalloonWP-Thumbnail-and-TextSimple-FB-LikeboxTwitterフォローするとTwitterでブログの更新情報を受け取れます。Life』管理人の個人アカウントです。Facebookいいね!するとFacebookでもブログの更新情報を受け取れます。Life』のFacebookページです。ブログの更新情報をお知らせします。t("").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});performance.mark("https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js-end");performance.measure("https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js","https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js-start","https://tips4life.me/wp-content/plugins/table-of-contents-plus/front.min.js-end");。