創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

くつキッチュ!アイコン wordpressカテゴリへ

あけましておめでとうございます。

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像JPG

 

会話形式の多いブログにピッタリのLINEっぽいCSS

 

数日前こんな記事 ⇒ WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法 を目にしまして……

アイコン92 illust by ss 会話形式の多いこのブログにピッタリということで、早速導入♪ 会話形式のブログだけでなく、創作系ブログの方がキャラクター同士の会話をさせてみるのも良いかと。

アイコンss illust by ss たしかに会話形式多いからここにはピッタリだろうよ……だが……

アイコン92 illust by ss な、なに?……(´∀`;)

アイコンss illust by ss サンプルのトーク場面は画像だし、ここはいつもどおりじゃ?

アイコン92 illust by ss そこです! カンタンに導入できるCSSですが、実はちょっとした落とし穴がありました。

参考元サイトさんのコードをコピペした際、環境によってはとあるタイミングで表示がこんな風に↓崩れてしまうんですね。

創作ブログに最適な「LINEトーク吹き出しCSS」で表示が崩れるときの忘備録  1.最後のタグが消えるバグ?

今回はその場合の詳細と対処法、(オマケで)バルーンの背景色のカスタマイズを記事にしてみました。

 

最後の[clear]タグが消える?

参考元サイトにも注意書きがありました、最も忘れちゃいけないタグ↓


<br class="clear_balloon"/>

も忘れず貼っているのに表示が崩れるのは、一体なぜ??(´∀`;)

と思ってよくよく観察してみると、タグが消えるタイミングはココ↓。

創作ブログに最適な「LINEトーク吹き出しCSS」で表示が崩れるときの忘備録 タグが消えるタイミングが判明 テキストタグ⇒ビジュアルタグに切り替えた瞬間

[ビジュアルタブ]⇒[テキストタグ]に、切り替えた瞬間です。

タグが消えるとこんな感じで、背景色が反映されませんし、記事のお尻の表示がおかしくなります。

創作ブログに最適な「LINEトーク吹き出しCSS」で表示が崩れるときの忘備録  2.最後のタグが消える?なぜ?

 

対処法のヒント「自動整形」と、どうしてもダメない場合の応急処置

ググってみて判明した原因は、どうやらWordPressの「自動整形」機能。

ビジュアルタブに切り替えた瞬間特定タグが消えるのは、比較的有名なWordPressのバグ症状らしく、[clear]も消えやすいタグの一つのようです。

こちらの記事に自動整形に関しての詳細な記事があります ⇒ HTMLエディタで、自動整形の影響を最小限に抑えるには

というわけで、PS Disable Auto Formatting などの自動整形を無効にするプラグインをいくつか入れては消ししてみたのですが、私の場合は効ほぼ果ナシでした。
なにをやっても[clear]を含んだタグが消えてしまいます。
創作ブログに最適な「LINEトーク吹き出しCSS」で、タグ消失で表示が崩れるときの忘備録 clearが消えるイメージ

【ダメな場合の最後の手段として】

どうしても自動整形の影響でタグが崩れてしまう場合の最後の手段なのですが、「記事保存後[投稿一覧]などに移動して、そのままそっとしておく…(∪。∪)」というものがあります。

その記事を開かなければ、(開いても最終的な設定がビジュアルタブになっていなければ)表示は崩れませんが、万が一最終設定がビジュアルエディタになっていた場合、該当記事の編集画面を開いた瞬間にバグが発生します。

プラグインでも効果がない方は、対処法が見つかるまでの応急処置として、バルーン仕様記事は基本的になるべく触れないようにし、まま可能な限りそっとしておきましょう。

※触れてしまった場合は再度タグをいれてテキストタブで保存すれば、表示は戻ります。

 

バルーンをカスタマイズしてキャラクターに会話させよう

くつキッチュ!SCRAPス アイコン creator-help創作支援)カテゴリへ
気を取り直して……

このCSSに飛びついたのは、このブログが会話形式の記事が多めということもあったのですが、創作サイトなどでこれを応用して、キャラクターの会話をさせられるのでは?とも思ったからです。

本編がずっとこの形式だとちょっとキツイかもしれませんが、たまに閑話休題的なノリの時に、小説やマンガのキャラクターアイコン付きで会話させるのはいかがでしょう?

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 バルーン背景色カスタマイズサンプル画像

 

【バルーンCSSカスタマイズ方法】

※カスタマイズは必ずバックアップを取ってから行ってください。
※小テーマでのカスタマイズ推奨です。(小テーマについてはこちらがわかりやすいです⇒結局必要なの?WordPress初心者こそ「子テーマ」を使ってほしい理由を分かりやすく説明するよ!

1.大本の「 左からの吹き出し」「右からの吹き出し」をコピペして、「割り込みを解除」の前に貼り付けます。

「 左からの吹き出し」

「右からの吹き出し」

「 左からの吹き出し2」

「右からの吹き出し2」

「割り込みを解除」

2.コピペしたそれぞれに「 左からの吹き出し2」「右からの吹き出し2」、具体的には、「right_balloon」と「left_balloon」末尾に「2」を入れて、「2」の方の設定をカスタマイズします。

3.色の設定

「right_balloon2」の場合、下記のように「Background」と「border-right-color」の色設定を変更します。


右フキダシ本体
.right_balloon2
background: #F5A9A9;

右フキダシしっぽ部分
.right_balloon2:after
border-left-color: #F5A9A9;

このborder-***-colorは、フキダシのしっぽの部分です。※左の場合は「border-left-color」です。

このくつきの記事はあくまでも「補足」ということで、コードは必要な部分だけ抜粋しております。参考元サイトさんに大本のコードがありますので、基本的にはそちらをご参考になさってください。

注意点は、「right_balloon2」の設定をする場合、そのballoon設定の全てを「balloon2」にするのを忘れないことです。

そうしないと、後ろの設定が優先され、カスタマイズしていない方のballoonまで、しっぽの色が変更されてしまいます。

あとは、設定したバルーンを必要に応じて呼び出すだけです。

20150102-k6

カスタマイズは以上です。

というわけで、実物はこちらです。

くつキッチュ!SCRAPス アイコン animal カテゴリへ今、時間ある?※画像を中央配置

くつキッチュ!SCRAPス アイコン animal カテゴリへちょっと手伝って欲しいんだけど、いいかな?※画像左寄せ

なに?

くつキッチュ!SCRAPス アイコン animal カテゴリへ近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな?musyage-tebura-janai illust by @310104o ©佐藤利音

くつキッチュ!SCRAPス アイコン ss-sそんなことより、これからの創作の話をしようぜ。

くつキッチュ!SCRAPス アイコン animal カテゴリへ真面目か?


 

バルーン背景色カスタマイズver

背景タグ(divタグで設定したBackground-colorのタグ)は入れておりません、背景白バージョンです。画像は普通に[メディアを追加]で入れてます。

LINE用背景色タグ詳細は、参考サイト様 ⇒ WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法 でご確認ください。 ※「divでラップして~」あたりにタグがあります。

くつきはleft_balloon2を薄いイエローの「#F5A9A9」、right_balloon2を薄いピンクの「#F5A9A9」にしてみました。

※ちなみに、脚本は佐藤、 【ニコニコ動画】【巡音ルカと神威がくぽ】ggrks-ググれカス-【オリジナル曲】リスペクトだそうです;;


くつキッチュ!SCRAPス アイコン ss-s今、時間ある?

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過うん?

くつキッチュ!SCRAPス アイコン ss-sちょっと手伝って欲しいんだけど、いいかな?

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過なに?

くつキッチュ!SCRAPス アイコン ss-s近くのコンビニでデラべっぴんを何冊か買ってきて欲しいんだけどいいかな?

くつキッチュ!SCRAPス アイコン animal カテゴリへそんなことより、手ブラの話をしようぜ。

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過手ブラと聞いて参上!画像の引用についてブログからの直接的な画像引用方法 手ブラ Illust by@310104o ©佐藤利音

くつキッチュ!SCRAPス アイコン animal カテゴリへふぁっ?;

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過パンツ青色?

ボクサーパンツ【青】【コットン】ニコニコ スマイル 面白ジョーク下着【ユニセックス】 (LL)
ボクサーパンツ【青】【コットン】ニコニコ スマイル 面白ジョーク下着【ユニセックス】 (LL)

くつキッチュ!SCRAPス アイコン animal カテゴリへググレカス;

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過(時事問題として)パンツ履いてる?

VCD くまのプーさん FlockyVer.(ノンスケール PVC製塗装済み完成品)
VCD くまのプーさん FlockyVer.(ノンスケール PVC製塗装済み完成品)

くつキッチュ!SCRAPス アイコン animal カテゴリへ楽○でググレカス;;;

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過楽○のパンツ履いてる?

くつキッチュ!SCRAPス アイコン animal カテゴリへ;;;;;;;;;;;;;;;

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過通報しますた。



な、感じです。

まとめ

  • WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法 の、大変ステキなCSSですが、自動整形の影響で表示が崩れる場合があります。
  • その場合の対処法は自動整形を無効にするWPプラグイン含めていくつかありますが、手軽な応急処置としては、
    「テキストエディタタブを選択したまま保存をし、その場から去る」
    です。
  • 別の記事をビジュアルエディタタグで編集しても、該当記事には影響ありませんが、該当記事を編集する歳WordPressの最終編集がビジュアルエディタになっていた場合は、開いた時点でタグが消えますので、入れなおす必要があります。
  • バルーンの背景色などカスタマイズすると、キャラクターの会話形式のブログも出来ますので、創作家さんにオススメです♪

 

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過 小説ブログでもたまにこういう趣向もいいかもね。 目先も変わるし。

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過2 でしょ? ちなみにバルーンなしの……

 

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過 「右揃え」

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過2 「左揃え」

 

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過2 …だけでも会話っぽく出来るけど、ちょっと見づらい(;´∀`)

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 佐藤利音アイコン-100透過 たしかにバルーンがあった方が見やすいね。

icon-kutsuki  創作支援屋『くつキッチュスクラップス!』 くつきちよこアイコン-100透過2 というわけでキャラの会話形式ブログにもってこいのCSS……、現在自動整形バグの対処は応急処置ではありますが、なにか解決策が見つかり次第また記事に致しますね。

たいていはWPプラグインでなんとかなると思いますが、プラグインでもダメだった方で「去る」以外の対処法を発見された方は教えて頂ければ嬉しいです;;

 

それでは保存したままそ~~~っとダッシュボードに移動しま~す;; 街Wikiはもう少しお待ちくださいませ~~ でっは~ε≡≡ヘ(*´∀`*)ノ

 

みなさまのクリックで明日も頑張れます。
今年度もどうぞよろしくお願いします♪
ブログランキング・にほんブログ村へ
にほんブログ村

 

 

キャラクター・ボーカル・シリーズ03 巡音ルカ 巡音ルカ Tony ver. (PVC製塗装済み完成品)
キャラクター・ボーカル・シリーズ03 巡音ルカ 巡音ルカ Tony ver. (PVC製塗装済み完成品)

 

がくっぽいど がくっぽいどつままれキーホルダー
がくっぽいど がくっぽいどつままれキーホルダー

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 Magnified Eye_5364c by hoyasmeg, on Flickr

「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪

本日は、『くつキッチュ/SCRAPス!』でもお世話になっておりますWordPressテーマ『

記事を読む

商標登録検索できるサイトとか、文字組実験とか、作品投稿専用アカウントなど、今年の更新予定ネタメモ 『宇宙をデバッグする、簡単なお仕事です。』佐藤利音 著

商標登録検索できるサイトとか、文字組実験とか、作品投稿専用アカウントなど、今年の更新予定ネタメモ

※準備中につき鍵つき 今年更新ネタの忘備録5つ 登場人物:くつきちよこ ※管理人

記事を読む

Jesus crown of thorns - West Pier Brighton by Leonski Oh Leonski, on Flickr くつキッチュ/スクラップス! アトリビュートをここへ

『茨の冠』から『初音ミクのメガフォン』まで 単なる小道具ではない『アトリビュート』って一体何?

Jesus crown of thorns - West Pier Brighton b

記事を読む

【創作者さん向け】アレやコレが写り込んだ写真って背景素材に使えるの?【写り込み規定メモ】 自分が撮影した写真に写り込んだ様々な著作物(付随対象物)+人物

【創作者さん向け】アレやコレが写り込んだ写真って背景素材に使えるの?【写り込み規定メモ】

  写真の権利説明図:くつきちよこ   登場人物:くつきちよこ ※管理人   佐

記事を読む

Q&A by opensource.com, on Flickr そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

検索キーワードで(個人的にツボに入ったという意味での)ヒットしたもの、及び当サイトでは該当す

記事を読む

【宣伝回】 電子書籍の表紙や挿絵、ブログのポイント使いなどに便利な素材屋やってます♪

    と と 姉妹サイト くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

「あの子のほうが かわいいから 私と別れたの?……(ΦωΦ)フフフ…」を使ったGIFPALの使い方補足 元絵を描く2 ※マール社さん『コマ送り - 動くポーズ集5 武器編』60P 斧 振り下ろす(上から)トレース

『GIFPAL』と『コマ送り-動くポーズ集』を使った簡単GIFアニメーションの作り方 「あの子のほうが かわいいから 私と別れたの?……(ΦωΦ)フフフ…」

今回はマール社さんの『コマ送り-動くポーズ集』とフリーオンラインツール『GIFPAL』を使っ

記事を読む

クリスタのライン抽出ツールがスゴい! まず早い! 適当背景

クリスタのライン抽出ツールがスゴい! まず早い! 漫画を描いたことのない私が一瞬で背景をつくってみました♪

  CLIP STUDIO-EX(クリップスタジオEX) 作成時間:約2

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

Message

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

Time limit is exhausted. Please reload CAPTCHA.

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場