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

関連記事

電子書籍のタイトルは『BUG(バグ)式』に決定!テンパり中ではありますが、万策尽きて……ませんっ!

  佐藤の電子書籍の作成のお手伝いで、絶賛テンパり中! ぐるぐるエブリデイな毎

記事を読む

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

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

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

記事を読む

【一次創作】防御と開放のバランスを取るには?|著作者とユーザー両方を守る御札(おふだ)その2

  イラスト:佐藤利音 デザイン:くつきちよこ 無名一次創作者が大手にパクられたら

記事を読む

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

一次創作向けハッシュタグ(日本語、英語)を調べてみました♪ アイキャッチ design by くつき

一次創作発信用の、英語ハッシュタグを調べてみました♪

下駄のようなHashtags 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

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

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

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

記事を読む

「一分でレース素材が作れる、そうクリスタ対象定規ならね!(*´∀`*)」からの~「ブラシ登録ができない!(;_;)」 ※解決済み アイキャッチ用画像

「一分でレース素材が作れる、そうクリスタ対象定規ならね!(*´∀`*)」からの~「ブラシ登録ができない!(;_;)」 ※解決済み

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

記事を読む

html tattoo by webmove, on Flickr

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

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

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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