創作ブログにピッタリな「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

関連記事

マルチサイト化とかサーバーどうするかとかの雑談会 Money - Savings by 401(K) 2013, on Flickr

流行りに逆らってサーバーを選択した話

  サーバー選びのリアルな話 順調だったwpXクラウドのマルチサイト化(サブディレクトリ型)に影

記事を読む

Amazon Kindle by Robert Nelson, on Flickr Attribution 2.0 Generic (CC BY 2.0) 投稿者が安心できそうな電子書籍プラットフォームの利用規約(「著作権」のみ)

投稿者が安心できそうな利用規約(著作権)の電子書籍自己出版サービスよっつ

  甥っ子姪っ子を急遽預かることになったり、とあるサイトへの寄稿をはじめたりと、時間的な余裕が

記事を読む

McDonald's Thai Welcome - Bangkok by MsAnthea, on Flickr

「実在の商品名、店舗名、商標、有名人名は創作に使えるか?」を弁護士ドットコムさんに質問してみました♪

  McDonald's Thai Welcome - Bangkok by MsAnth

記事を読む

326/365 - plug in. by Bryan Rosengrant, on Flickr Some rights reserved

Q:ワードプレスの記事内にSoundCloudの音楽を埋め込むには? A:【WPプラグイン】は不要です!

タイトル通りです。今はURLだけで埋め込み完了です。  326/365 - pl

記事を読む

弱小個人の作品保護のための、タイムスタンプサービスに代わるアイディア3選+オマケ アイキャッチ用画像 by くつきちよこ

~個人作家さんの作品保護のための~ タイムスタンプサービスに代わるアイディア3選+オマケ

図:くつきちよこ フォント:851チカラヅヨク   登場人物:くつきちよこ

記事を読む

看これ!看板コレクション 看板の種類(ポールサイン、チャンネル看板、屋上看板、袖看板など)説明図

看これ!看板コレクション

  写真の権利説明図:くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト &n

記事を読む

佐藤利音『宇宙(セカイ)をデバッグする、簡単なお仕事です。』宣伝回:その2 挿絵 ※ラフ案:佐藤利音 デザイン:くつきちよこ アイキャッチ用

佐藤利音『宇宙(セカイ)をデバッグする、簡単なお仕事です。』宣伝回:その2「現実逃避」と「現実退避」

  ※ラフ案:佐藤利音 デザイン:くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 

記事を読む

SAI2始動! 3Dパース定規からバケツの隙間調節まで、クリスタ、FireAlpacaとざっくり比較してみたよ♪ 「FireAlpaca」の3Dパースは神!この発想はなかった!!!!2

SAI2始動! 3Dパース定規からバケツの隙間調節まで、クリスタ、FireAlpacaとざっくり比較してみたよ♪

「SAI2」ツールの漏れ出し防止幅は上限100px!スライダーで直感的に使えます♪ &

記事を読む

写真を加工して漫画の背景にする小技が流行っているので、試してみました♪ 空も含めてカットアウトしてみたサンプル

写真を加工して漫画の背景にする小技が流行っているので、試してみました♪

写真撮影・加工:くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

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

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

  • マウスコンピューター/G-Tune