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

関連記事

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

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

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

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

記事を読む

「それ引用じゃなくて盗用でしょ」と、無断転載を祓う御札(おふだ)の話 アイキャッチ画像 イラスト:佐藤利音 illust by @310104o

無断転載を祓う御札(おふだ)と、「それ引用じゃないでしょ」の話

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

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

『異世界』要素についてgdgd談義 ファンタジーには「ハイ」と「ロー」がある? アイキャッチ画像 illust by ss

『異世界』要素についてのgdgd談義 異世界モノと呼べるのはハイファンタジーだけ?

  最近の小説に欠かせない『異世界』要素について再考してみました。  

記事を読む

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

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

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

記事を読む

ワードプレスの不具合騒動、利用中のレンサバ統合されるってよ、など。 恐怖のエラー画面

「ワードプレスの不具合騒動(未解決)」と、「利用中のレンサバ統合されるってよ」など。

  サトウトシオのサイトがバグりました; ホラーなエラー!に驚いたる赤ちゃんのアイコ

記事を読む

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた "Select your web browser(s) by zipckr, on Flickr

ブラウザ表示チェック3大サービスを無料範囲内で試してみたよ♪

 各ブラウザによっての見え方を改めてテストしてみた Select your w

記事を読む

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

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

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

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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