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

関連記事

Venice Muscle Beach by Lin Mei, on Flickr 『ArtPose』がAndroidで使えないとお嘆きの皆様へ(*´∀`*)つ筋肉モデルサイト『BOYS POSE.COM』という男の園へようこそ♪

筋肉モデルが少ないとお嘆きの皆さまへ『ArtPose』のキャプチャ画像を利用した筋肉モデルサイト『BOYS POSE.COM』へのいざない

Venice Muscle Beach by Lin Mei, on Flickr So

記事を読む

創作支援屋靴キッチュスクラップス!くつきちよこアイコン木の実モザイクVer  Illust by 佐藤利音 ベジェ化 by くつきちよこ

ランボー 怒りの新規ファイルのアップロードが出来ないWordPressトラブル※未解決 と、電子書籍出版お手伝い裏舞台

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

気になるアイツ、三点リーダーのこと……。 創作支援屋くつキッチュスクラップス 三点リーダーと戯れる小学生 illust by サトウトシオ@310104o

気になるアイツ、三点リーダーのこと……。

  三点リーダーと戯れる小学生 illust by @310104o 登場人物:くつきちよこ

記事を読む

Town Block by Matija Grguric, on Flickr Some rights reserved  アイキャッチ画像:創作において、制約なく表現できる「創作ステージ@まちペディア」を建設中

創作において制約なく表現できる「創作ステージ@まちペディア」を建設中

Town Block by Matija Grguric, on Flickr Some rig

記事を読む

html tattoo by webmove, on Flickr

ワードプレスの記事内でコード表示をするには?【WPプラグイン】

html tattoo by webmove, on Flickr もくじ ドキ!トラ

記事を読む

「あの」アプリが使えないとお嘆きのアナタへ、アプリなしで簡単に写真をアニメ背景風に加工する方法♪ 空を夜に変えて写真をアニメ背景風(夜)にしてみた2♪

「あのアプリ」が使えないとお嘆きのアナタへ、アプリなしで簡単に写真をアニメ背景風に加工する方法♪

都市伝説らしい理想の泥犬と記憶の中の泥犬 illust by サトウトシオ@310104

記事を読む

小説に実際の商品名、店舗名、人物名は使えるか? くつキッチュスクラップス アイキャッチ画像 はてな標識

実際の商品名、店舗名、人物名は小説などの創作作品に使えるか?

  最近、当サイト創作支援被験者 ⇒ SS が読んだ本に、おもいっきり実在の商品名、作品名、作

記事を読む

縦書き小説PDFメーカー使ってみた♪ 縦書き小説PDFメーカー 挿絵⇒本文サンプル2 ※芥川龍之介『あばばばばば』青空文庫より2 http://www.aozora.gr.jp/cards/000879/files/14_14602.html

縦書き小説PDFメーカー使ってみた♪

  縦書きPDFメーカー使ってみた♪   登場人物:くつきちよこ ※管理人   佐藤

記事を読む

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

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

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

記事を読む

2014-10-03 17.25.44 by sstrieu, on Flickr

実在の商品名、店舗名、人物名を小説などを創作作品に登場させた場合の一インディーズ作家の対応メモ

2014-10-03 17.25.44 by sstrieu, on Flickr  S

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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