チャット風吹き出しデザイン雛形

チャット風吹き出しデザイン雛形

カスタマイズ HTML, CSS, JavaScript
2017/04/16
58
vanillaice (Akira)
vanillaice (Akira)
InstructionTipsHTMLCSS中級者向け

モバイルチャット風の吹き出しの雛形ですー (´・ω・`)

チャット風吹き出し

やり方は色々あるのですが

  • 吹き出しの横幅が常に100%に ならない ように
  • レスポンシブ
  • テキスト内容の位置合わせが可能

こんなところに気をつけて組みました。
1 に関しては、常に横100%(あるいはそれに近い分量)取っていると記事幅が広い時、吹き出しの中身が少ない時なんかに見た目がちょっと鬱陶しいというか。
ですから①が主な目的になっているコード内容です。
横幅制限が不要な場合にはhtml内容を少し減らすことができますけれど。
で、これ私ごめんなさい。
当記事内のものはスクリーンショット掲載です。
一度使用したら 恒久的にCSSソース内容の管理が必要 だからです。
それがそのまま使用にあたっての注意点でもあるのですが。
テンプレートを変更したら該当部位のCSSを常に移設しないとスタイリングが失われます。
ちょっと私それ嫌なので、スクショで((((笑)

全てをhtmlのみ(style属性含む)で作成できれば良いのですが、今回のソース内容はCSSスタイルシートを利用しなければ使えないCSS内容が含まれます。
また、htmlだけでなんとかしようと思うとソース内容がかなり冗長になってしまいますので、今回はスタイルシートを利用する ことが前提です。
つまり 独自クラス です。

旧投稿画面をご利用で
① 改行の扱い「自動」の場合 --- ソース内の改行及びインデントを取り除いてお使いください
② 改行の扱い「htmlタグのみ」の場合 --- ソースはそのままコピペでOKですが、文章内の任意改行は文末に <br> を記してください。

新投稿画面をご利用の方はHTML編集モードでそのままコピペし、文章編集は通常モードに戻して行ってください。
(HTML編集モードのままの場合は文末に <br> が必要です)

html内容
(記事を書く際に編集画面にコピペして使用します。記事作成時毎回記述します。)

<div class="b-left-wrapper">
  <div class="b-left">
    左テキスト内容
  </div>
</div>
<div class="b-right-wrapper">
  <div class="b-right">
    右テキスト内容
  </div>
</div>

CSS内容
(管理画面「下段」のソースの末尾に追加します。一度きりの作業です。)

/* 左右 */
.b-left-wrapper,
.b-right-wrapper {
  margin: 0 auto 10px; /* 後続要素との距離は10px */
  width: 100%;
  min-height: 80px; /* アイコン画像の高さと同じ数値を入れます */
}

/* 左 */
.b-left-wrapper {
  padding-left: 100px; /* アイコン画像の横幅+吹き出しまでの距離 注意1 */
}

/* 右 */
.b-right-wrapper {
  padding-right: 100px; /* アイコン画像の横幅+吹き出しまでの距離 注意2 */
  text-align: right;
}

/* 左右吹き出し共通 */
.b-left,
.b-right {
  display: inline-block;
  width: 100%;
  max-width: 500px; /* 吹き出しの横幅最大値指定 */
  background-color: white; /* 吹き出し背景色 */
  border: 2px solid rgb(240,240,240); /* 吹き出しボーダー色 */
  border-radius: 6px;
  padding: 10px 15px;
  position: relative;
}

/* 左右吹き出し角部分共通 */
.b-left:before,
.b-right:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: white; /* 吹き出し背景色と同じ色を指定 */
  border-bottom: 2px solid rgb(240,240,240); /* 吹き出しボーダー色と同じ色を指定 */
  position: absolute;
  top: 15px; /* 角の位置 吹き出し上辺から15px下 */
}

/* 左吹き出し角部分 */
.b-left:before {
  border-left: 2px solid rgb(240,240,240); /* 吹き出しボーダー色と同じ色を指定 */
  left: -8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 右吹き出し角部分 */
.b-right:before {
  border-right: 2px solid rgb(240,240,240); /* 吹き出しボーダー色と同じ色を指定 */
  right: -8px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 左右アイコン共通 */
.b-left:after,
.b-right:after {
  content: "";
  width: 80px; /* アイコン横幅 */
  height: 80px; /* アイコン縦幅 */
  border-radius: 50%; /* アイコン円形指定 */
  position: absolute;
  top: 0;
}

.b-left:after {
  background: url(左側アイコン画像URL) center center /cover no-repeat;
  left: -100px; /* 注意1と同じ数値をマイナスで指定 */
}

.b-right:after {
  background: url(右側アイコン画像URL) center center /cover no-repeat;
  right: -100px; /* 注意2と同じ数値をマイナスで指定 */
}

● 注意点

① 右側吹き出しのテキスト位置合わせを「右」にしてあります。
左寄せに変更したい場合には

.b-right {
  text-align: left;
}

を追加してください。

くれぐれも 独自クラスである ことを念頭にお使いください。
テンプレートを変更したらスタイルは失われます。
継続してスタイルを適用したい場合にはCSS内容の移設をお忘れなく。
細かくコメントを付けたつもりですので、アイコン画像のサイズ変更や吹き出し背景色の変更等のカスタマイズは自力で ╭( ・ㅂ・)و

Related post

Comments  58

ぼっちん
2017/04/16 (Sun) 08:33

To Akiraちゃん

あの~ 
------------
① 吹き出しの横幅が常に100%に ならない ように
③ レスポンシブ
④ テキスト内容の位置合わせが可能
------------

② がないんですが、何か意図がありますでしょうか~?
もしかして一旦②を書いたけど、削除したとか?(笑) 

細かいツッコミですみません (^^ゞポリポリ

Akira
2017/04/16 (Sun) 08:50

To ぼっちんさん

あ。ホントだ((((笑)
特に意図はなく単純に間違えた!
ご指摘ありがとうございます(笑)

ぼっちん
2017/04/16 (Sun) 10:57

To Akiraちゃん

あっ 修正早かったですね~(笑)
間違いの件了解です~。

吹き出し、前から使ってみたいとは思ってましたが、確かにテンプレ替えた時のHTML&CSSの移植が面倒 (^_^; アハハ…
まあ、移植し易いようにソースにコメント付けておけば良いのかもしれませんが(笑)

お返事は無用ですから(笑) ('◇')ゞラジャ


Akira
2017/04/16 (Sun) 16:20

To ぼっちんさん

吹き出しのことは置いといて ←

殿!事件ですぞ!
いやー。びっくりのコンコンチキ ( ̄∀ ̄;)
Amebaの新エディターが使いづらいということで炎上中なので、一体どんなもんやらと思い開設してみました。
そして気づいたんです。
エディターとかどうでもいい。
Amebloはhttps化したけれどリダイレクトをしていないってことに!(笑)
http:のブログとhttps:のブログとが共存(?)してるんですよ。
これホントにびっくりなんだけど(笑)
しかもそれ、ちゃんと告知・広報されてないんですよね。
どうなってんだAmeblo!!!(笑)

こんなことになっちゃうと、httpsの方はJSに制限がかけられててhttpの方にそれは無いので、みんなhttpから動かないですよね。
下手するとhttpsのアクセスをdisplay: none;で非表示にする人まで出てくるんじゃないかと思う。
そしてそれを誰かが広め、わけわかってない人たちが右へ倣え。
Ameblo帝国滅亡すんじゃないか。これ(笑)

-------- 追記

amp版URLまである!!!(((((笑)

httpの通常ブログ
httpsの通常ブログ
httpのampブログ
httpsのampブログ

4つもある!!!
えー。異常でしょ。これって… ( ̄∀ ̄;)
ダイナミックサービング導入したばっかじゃん…。無駄じゃん… ってゆーか差し引きゼロどころかマイナス…( ̄∀ ̄;)

ぼっちん
2017/04/16 (Sun) 16:48

To Akiraちゃん

あらららら(爆)
炎上に対するAmebaの逆襲か? (≧ω≦。)プププ
まぁ、どえりゃあことやりはりますな~ (^_^; アハハ…
>>>
覗いて来ました(爆)
やっぱりこりゃAmeba、追い込まれて運営もぶち切れちゃったみたいですね~(爆)
米国VS北朝鮮より殺気だって来てる~ (〃^▽^〃)oあはははっ♪
LIVE中継したい気分(笑)

■追記させて戴きますね~ (^^ゞポリポリ
「amebaオウンド」表示めちゃくちゃになってます (^_^; アハハ…
怒ってる人達が怖い(爆)

Akira
2017/04/16 (Sun) 22:00

To ぼっちんさん

どうなるんでしょうね。
なんだかおもしろいことになってきた。
とか言っても良いんだろうか ^^;
一番の問題はアメブロユーザーさんが全く気づいてなさそうなところなんだけど(笑)
FC2も同じことになったりして。
え。ちょっと!それはやめてよ?それはヤダよ!(笑)

Akira
2017/04/19 (Wed) 18:36

To 吹き出しの件 内緒さん(移動先)

今の状態が「落ち着いた」形でしょうか。
うーん…。うぅーん (´-ε-`;)
まず、全体像が左寄りになってますよね。
パソコンでブラウザ幅をゆっくり縮めてみてください。
途中ではみ出して右サイドメニューと重なります(横幅1100px付近)

内緒さんの方針をはっきりさせてもらえませんでしょうか。
一番に決めておかなければならないのは「横幅をどうするの?」ってところなんです。
常に横100%(あるいはそれ以下)にするの?それとも制限をかけるの?
という点が決まらなければソースの組みようがありません。

> ipad pro以外のサイズではキチンと吹き出しが中央に寄る
= 画面幅が縮小されたので左右の余幅が無くなっただけです。

元のソースコードの流用で左右marginとwidth: 100%;の同時指定は確実にはみ出します。
横幅100%を指定された吹き出しは記事幅と同等(100%)のままで左右に移動するからです。
元のソースをどうしても使いたいのであれば元通り、そのままで使うのが一番だと思います。

=======

当記事内のソースはお試し頂いたんでしょうか。
動作確認など済ませてからお尋ねくださいね。
利用する・しないは自由ですが、元の簡素なソースにこだわりをお持ちであればこちらのソースは不要なはず。
お尋ねの件に回答するにはこれまた結構な長文説明になります。
現在の調子ではその全てが無駄になりかねませんよね。
結局のところどうしたいの?というのをまずはご自身でお決めください。
ちんぷんかんぷんと仰っておられますが、基本を理解せずに使いこなせるとは思いません。
最低でもご自身で基本形をお試しになってその次にカスタマイズ、という手順でお願いできませんでしょうか。
よろしくご理解ください。

-
2017/04/20 (Thu) 10:00

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2017/04/20 (Thu) 12:45

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2017/04/20 (Thu) 12:54

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/20 (Thu) 15:03

To 吹き出しカスタマイズの件 内緒さん

どなたにもお願いしていることですが、ご質問の際には質問対象を「表示状態」「設定状態」にしておいてください

> 「きちんと表示できている問題がない」と私が書いたので確認に来るだろう、という予測までした上で、元のテンプレに戻していました。

私が拝見した時は既に元のソースに戻っていたわけで、それでは私の方のソースで「どんなカスタマイズを行い」「なににつまずいているのか」が全くわかりません。
ですから私が推測したり仮定を立てたりという手間が生じるわけなんです。
私の製作したものについてお尋ねになるのならば、それをとにかく表示しておいてください

これは例外なくどちら様にもお願いしていることです。

vanillaice (Akira)
Akira
2017/04/20 (Thu) 15:16

To 吹き出しカスタマイズの件 内緒さん②

① 左右を入れ替えたい件
② キャラを増やしたい件

上記2件についてはわかりました。
最後に説明しますが、
結局「横幅はどうしたいんですか?」というのがはっきりしません。
現在の状態は全体像を最大600pxにする
という縛りをかけるようカスタマイズされていますが、それがご希望ですか?
私のデフォルトソース内容は全体像への制限でなく、各吹き出しのサイズへの制限です。
見た目が全然違いますよね?

内緒さんの現在の状態
アウトラインのサイズ = 最大600px
アウトラインの中にアイコン+吹き出しが100%の状態で配置。
記事幅が600px以上の時も全体像は600px以上にはならず、中央に配置される。
左右アイコンの位置は記事幅が1000pxならば
左アイコン = 左から200pxの位置
右アイコン = 右から200pxの位置

デフォルト
アウトラインのサイズ = 100% = 記事幅が600px以上の時は記事幅いっぱいまで拡がる。
アウトラインの中のアイコン+吹き出しの最大幅が600px
記事幅が1000pxならば
左アイコン = 左隅を基準に配置, アイコン+吹き出し = 左辺を基準にそこから600px
右アイコン = 右隅を基準に配置, アイコン+吹き出し = 右辺を基準にそこから600px

まずデフォルトのスクショと内緒さんの現在の状態を見比べて、どちらにしたいのかお返事をお願いします。
要するに最終的な見た目はどうしたんでしょうか。
わざわざデフォルトの横幅を変更している点から、現状の内緒さんの形がご希望なんですか?

一旦投稿。

vanillaice (Akira)
Akira
2017/04/20 (Thu) 15:32

To 吹き出しカスタマイズの件 内緒さん③

アイコンを増やす手順

まずデフォルトのCSSソース

.b-left:after.b-right:after
双方の background:〜省略〜;
の一行を削除してください。

そして以下を追加
(クラス名は任意ですのでご自身が覚えやすく、テンプレ内の他要素と被らない名称を付けてください)

.aaa:after {
background: url(アドレス) center center /cover no-repeat;
}

.bbb:after {
background: url(アドレス) center center /cover no-repeat;
}

.ccc:after {
background: url(アドレス) center center /cover no-repeat;
}

.ddd:after {
background: url(アドレス) center center /cover no-repeat;
}

くれぐれもクラス名は任意ですので、ここでのaaaやらbbbはテキトーにつけてるだけです。
増やしたいだけ同じ法則で追加してください。

------- ここまでがCSS修正。
ここから記事内でのhtmlの書き方。

左右の別は

<div class="b-left-wrapper">
<div class="b-left">
左テキスト内容
</div>
</div>

赤字部分で指定してください。
左なら上記の通りですし、右ならrightに書き換えてください。
アイコンの指定は

<div class="b-left">

この中に

<div class="b-left aaa">

と、こうしてクラス名追加で振り分けを行ってください。
左右指定用のクラス名の後ろに半角スペースを入れてからアイコン指定用のクラス名を書きます。

======

ご質問2件については以上です。

別件で注意。

他の方のソース内容と私のソース内容とを混ぜないでください。
entry-contentのアウトラインは不要です。
要素を無駄に増やせば無駄に混乱するだけです。
よろしくお願いします。

-
2017/04/20 (Thu) 16:50

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2017/04/20 (Thu) 17:59

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/20 (Thu) 18:15

To 吹き出しアイコンの件 内緒さん

ソース内説明とコメント欄での私の説明をよくよくお読みください。

● 「.b-left:after と .b-right:afterを消せ」とは言っていません。「双方に含まれる「background: 内容;」の一行を削除」と言っています。

.b-left:after {
background: url(左側アイコン画像URL) center center /cover no-repeat;
left: -100px; /* 注意1と同じ数値をマイナスで指定 */
}

.b-right:after {
background: url(右側アイコン画像URL) center center /cover no-repeat;
right: -100px; /* 注意2と同じ数値をマイナスで指定 */
}



.b-left:after {
left: -100px; /* 注意1と同じ数値をマイナスで指定 */
}

.b-right:after {
right: -100px; /* 注意2と同じ数値をマイナスで指定 */
}

● 注1と注2の参照は

/* 注意1と同じ数値をマイナスで指定 */
/* 注意2と同じ数値をマイナスで指定 */

この部分です。

-
2017/04/20 (Thu) 19:22

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2017/04/20 (Thu) 19:28

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2017/04/20 (Thu) 23:08

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/21 (Fri) 14:52

To 吹き出しアイコンの件 内緒さん②

横幅の件は了解です。
現在の状態でOKということですね。

で、ごめんなさい。
クラス追加は

.aaa:after
.bbb:after

のようにクラス名の後ろに
:after
をつけてください。
(コメント内容、赤字にしておきました)
よろしくお願いします。

-
2017/04/22 (Sat) 15:14

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2017/04/22 (Sat) 15:25

To 吹き出しカスタマイズ完了の件 内緒さん

お出来になったようで安心しました(笑)
お疲れ様でした :)

-
2017/04/22 (Sat) 20:38

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/23 (Sun) 00:23

To pタグの件 内緒さん

> 吹き出しはPで挟んだほうがいいんでしょうか〜

いえ。挟む必要はありません。
入れ子は無駄に増やさない方が良いです。管理が大変になるだけですし。
pは「段落 paragraph」の定義ですが、会話をパラグラフとして定義する必要は無いと思います。

pタグというのはCSS初期値に上下marginが付いてます。
私のテンプレートではリセットでmarginを0にしていますが、何も指定が無ければ上下に比較的大きめな空白ができます。
それがデフォルトです。
リセットCSSを入れていないテンプレートに変更された時点で吹き出しの見た目が変わってしまいます。
そういった意味でもpタグは安易に使うタグではありません。
あくまでも「段落 = 別の段落と区別し、英語のGrammarを遵守して上下空白を付ける」という場合には利用すれば良いと思いますが。

-
2017/04/23 (Sun) 10:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/23 (Sun) 13:12

To Pタグの件 内緒さん②

> 改行まで、みんな<p> </p>でやって?ますがそれも基本的にはやらないほうがいいんですかね〜

いえ。pのmarginの用途はまさしくそのためです。
日本語はちょっとわかりませんが、英文というのはパラグラフ間に空白を設けるのがルールです。
英語で論文を書いたことがある方はご存知かと思います。
なのでパラグラフを意味するpタグには空白がデフォルトで付いてるわけです。

吹き出しを「段落」と定義したいという意図があるならば、内側の<div>を<p>に変更しても良いと思いますが、
吹き出しはそれそのものが定義よりもスタイリング重視ですよね。
なのでpタグに変更するのならば margin のリセットもそのpに対してダイレクトに記しておいた方が後々安心ですね (´・ω・`)
んー。でも、吹き出しにしている時点でpタグにこだわる必要はないと思います。
検索エンジン的には<p>になっていれば「段落なのね。ああそう。」
<div>になっていれば「一定のまとまりなのね。」
と解釈するだけです。
ただ、交互の会話がそのまま段落になることの方が稀じゃないかと思います。
言ってみれば

「おはよう」
「おはよう」
「よく眠れた?」
「うん」

これが全部で4段落とかちょっとおかしいと思う(笑)

-
2017/04/23 (Sun) 15:09

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/23 (Sun) 18:14

To brの件 内緒さん

ひとつ記事を書きました。
お暇な時にでも。

http://vanillaice000.blog.fc2.com/blog-entry-518.html

-
2017/04/25 (Tue) 16:24

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2017/04/25 (Tue) 17:03

To h2見出しの件 内緒さん

> なぜかh2見出しの三角の所に線が入ったりするんですがこれは何かテンプレが関係していますか〜

関係ありません (´・ω・`)
独自でカスタマイズをされていますので、そのCSS内容に起因しています。
テンプレートのデフォルトでは要素に直接スタイルを定義をするようなことは避けています。

例)
X
<h1>見出し</h1>

h1 {
text-align: center;
}

✔ --- 私のテンプレでの定義はこちら
<h1 id="midashi">見出し</h1>

#midashi {
text-align: center;
}

角の部分に「線が入る」とはどういった意味でしょうか。
背景にしている斜線のことでしょうか。
ちょっとよくわかりませんが (´・ω・`)

-
2017/04/25 (Tue) 17:51

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/25 (Tue) 17:56

To h2見出しの件 内緒さん②

Google Chromeをお使いではないですか?
一言で言うと「Chromeのグリッチ」です。
absoluteで配置されている要素が画面幅が奇数だか偶数だか(忘れた。たぶん奇数)の時に1pxズレます。
結構長く続いてますがいまだ修正されず。

> 以前は線など入ったりはしなかった〜

たぶん気づいていなかっただけじゃないかと。
もう5年ぐらい継続中なので(笑)
私の方にもサンプルありますのでどうぞ ↓

http://blog-imgs-102.fc2.com/v/a/n/vanillaice000/2948r9weth.jpg

-
2017/04/25 (Tue) 17:58

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2017/04/25 (Tue) 18:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/25 (Tue) 18:11

To h2見出しの件 内緒さん③

> てことは1pxぐらいずらせば直る〜

いえ。直りません。
文字の高さは関係ありません。
その要素がabsoluteであるのかどうかです。問題は。
吹き出しボディの下辺と角の上辺が同じ位置だとこの症状が出ますので(1pxずれるからボディ下辺のボーダーが見えてしまう)、角の部分をtop: -15px;とか多めに重なるようにしておいて(z-indexはボディよりも下位に)するなどの処置するぐらいですかね。
でもそれやると吹き出しボディの下辺のボーダーがどのみち消せませんし。
ボーダー色を取り除くなどしないと。
この手のグリッチはユーザーの妥協でしか解決しません。

-
2017/04/25 (Tue) 18:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/04/25 (Tue) 23:42

To h2見出しの件 内緒さん④

そうなんです。
地味にウザいんでいい加減直して欲しい(笑)

-
2018/03/04 (Sun) 16:11

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/03/04 (Sun) 22:07

To 吹き出しの件 内緒さん

> 左に寄せたい

marginの値を 0px auto 10px auto にカスタマイズされてますよね。
左右に auto を指定すると「中央寄せ」になります。
左に寄せたいのならば何もしなければ勝手に左に寄ります。
上記内容の場合は四方を指定せずとも
margin-bottom: 10px;
だけで良いと思いますよ。

> 後続要素との隙間

隙間を埋めてしまったら画像が重なります。
デフォルトで80px四方だったものを60pxにカスタマイズされたのですから、min-height も併せて変更してください。
min-height の指定は要素同士が接触したり重なったりしないように設けてあります。
画像が60pxなのであれば min-height も60pxで十分です。
最低でも60pxの高さが確保され、そこへ下marginの10pxが追加されます。
吹き出しだけを考えるのではなく画像も含めて考えなければ重なってしまいますよ。
そして吹き出し内容は画面幅によって折り返すのですから、大きい画面では距離があっても画面が縮小されれば距離は近くなるはずです(テキストが折り返した場合)
レスポンシブデザインは必ず画面サイズを変更しながら確認をしてください。
よろしくお願いします。

-
2018/03/04 (Sun) 23:37

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2018/03/05 (Mon) 02:14

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/03/05 (Mon) 17:19

To 吹き出しの件 内緒さん②

> ヘッドのブログタイトル部分に吹き出しを一つだけ入れてるんですが、それも左に寄ってしまった〜

同じクラス名を持つ要素は全て同じスタイリングになります。クラス名はそのために用います。
.b-left-wrapper と .b-right-wrapper が左寄せ(位置指定なし)になっていますのでこのクラス名の要素は全て左寄せです。
本来は別のクラス名を充てるべきところですが、今回は

#blog-name-container .b-left-wrapper {
margin: 0 auto 10px;
}

を追加することで修正できます。
(レンダリングには無駄が生じます)
よろしくお願いします。

-
2018/03/06 (Tue) 06:40

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2018/03/06 (Tue) 07:08

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2018/03/06 (Tue) 15:05

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/03/06 (Tue) 15:31

To 吹き出しとMochaの件 内緒さん

> 中央に寄ってくれません〜

カスタマイズ内容を一旦クリアして元CSSを確認してください。max-widthなどを設ける箇所がバラけていたり
エラーとなっている内容もあります。

-------
> 子カテゴリが表示されないですね。設定のし忘れでしょうか?〜

どこのことですか?
記事タイトル下のカテゴリのことですか?プラグインですか?パン屑ですか?

記事タイトル下 = 元々親カテゴリしか表示しない設定です。
プラグイン = 私のテンプレート内容とは無関係です。
パン屑 = FC2では子カテゴリ細分はSEO的に無意味です。

どこのことか不明ですが、記事タイトル下のことであれば公式のヘルプページを参照されまして個人カスタマイズをお願いします。

-
2018/03/08 (Thu) 20:08

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

凛音
2018/05/28 (Mon) 07:40

コメント失礼します。

現在吹き出しデザインの記事を書きたいと思い、こちらの記事にある方法を試させていただいたのですが吹き出しの横にアイコンが表示されません。。。
CSSの最後にある画像URLを入れる部分にきちんとURLを入れているのですが何故でしょう。。。
最後のところ以外の他の部分で何か設定をしなければいけないのでしょうか??

vanillaice (Akira)
Akira
2018/05/28 (Mon) 16:22

To 凛音さん

こんにちは。
まず、現在改装中で記事内容が非常に読みにくかったと思います。申し訳ない。
(修正しました)

画像が出ない原因は、正しくは
background: url(https://〜.jpg)
であるところが
background: urlhttps://〜.jpg
と、アドレス前後の半角カッコが削除されているためです。
よろしくお願いします。

凛音
2018/05/28 (Mon) 18:54

To Akiraさん

半角カッコをつけたら無事に表示されました!
ありがとうございます!

vanillaice (Akira)
Akira
2018/05/29 (Tue) 02:16

To 凛音さん(完了のご報告)

良かったです。
お疲れ様でした :)

はんのすず
2020/04/11 (Sat) 23:04

表示されないときは

いつもお世話になっています。
Akira先生の記事を参考に、出来る範囲でカスタマイズしています。説明が丁寧で初心者の自分にもわかりやすく、とても参考になります。こちらの吹き出し記事は、いつかやってみたいと思っていました。最近、時間ができましたのでやってみました。
html と css をコピー、貼付けたのですが、吹き出しが表示されません。アイコン画像もタテヨコ340pxで設定しました(左右同じですが)。内容のテキスト部分のみ表示されます。どこを直せば良いのかわかりません。
テンプレートは、Fallです。テンプレートを変更する際にもとてもお世話になっています。
どうぞよろしくお願いします。

vanillaice (Akira)
Akira
2020/04/12 (Sun) 00:11

To はんのすずさん

こんばんは ('0')/
吹き出しCSSの件

スタイルシート内に @import を追加されていると思いますが、 @import でルールセットを構成することはできません。

× (現在の内容)
.wall-6-3-text style {
@import url('アドレス');
}


@import url('アドレス');

つまりCSS構文エラーでこれ以降のCSSが全て無効化されています。正しく修正して再確認を行ってください。
あと、@importによる読み込みは非常に負荷が高いため極力避けた方が良いと思います。現状のひとつを維持するだけなら許容範囲だとは思いますが、便利だとしてもこれ以上数を増やさないよう注意してくださいね。

あと以前にも確かお伝えしたと思うんですが(別の方かもしれません。その場合はごめんなさい。)
<!-- 内容 -->
このコメントアウトは 絶対にスタイルシート内で利用してはいけません。
スタイルシートのコメントアウトは
/* 内容 */
この形です。htmlコメントアウトは「不正文字列」となりこれも構文エラーです。コメントアウトのミスは後続の内容に確実に影響しますので注意してください(こちらも修正必須です)
現在紛れ込んでいる内容は

<!---

---->
ですが、仮にhtmlだとしてもこの形は許可されません。コメントアウトは
<!--

-->
のようにハイフンは2つ、そしてコメント内容にハイフンを利用することはできません。コメントアウトは基本に忠実に用いるようにしてくださいね。

はんのすず
2020/04/12 (Sun) 20:36

調べていただき、ありがとうございます。

@importをスタイルシートに追加したのは、メッセージボード上の文字を新しいグーグルフォントで表示したかったためです。が、日本語フォントはきれいに表示されなかった(ギザギザ)ので、関連htmlやcssは全部削除したつもりでした。それから、スタイルシートのコメントアウト記号についても、以前、教えていただいています。注意していたつもりが、間違えたうえに、にハイフン3つも並べていたとは、大雑把な性格がばれました。Akira先生にお手間をおかけして恥ずかしいです。

最近追加した、メッセージボード数枚のcssのところに間違いがあったので、再度Akira先生のメッセージボードの記事を読みなおしました。ボードのcssについて、「CSSはスタイルシートに記載するか、スタイル用JSとして記事内に記載するか選択」の部分を読み飛ばしておりました。両方記載でやってました!!そのとき、同じ内容を二回も書くのね~などのんきに思っていたのですが(お笑いくだされ)。

結果、@import の部分を削除、コメントアウト記号を修正、スタイルシート内のボードcssを削除で、吹き出しがきれいに表示されました。ボードも思い通りに表示されています。
初心者から抜け出せずにいますが、Akira先生はいつも丁寧に回答していただいて、今回も本当にありがとうございました。

vanillaice (Akira)
Akira
2020/04/12 (Sun) 21:16

To はんのすずさん(完了のご報告)

こんばんは ('0')/
ご安心ください。私も大雑把です(笑)

修正できているのを確認しました。お疲れ様でした :)

bon
2020/06/13 (Sat) 20:55

Akiraさん
いつもありがとうございます。
こちらのチャット風吹き出しデザインを私も導入しました。

・左のみ使用するつもりで、rightは削除
・ボーダー色を変更

していますが他はデフォルト通りです。
パソコンで見ているとわからなかったのですが、スマホでピンチインして見ると、吹き出しの<部分がちょっとずれているように感じます。

スクショです
https://blog-imgs-135.fc2.com/b/o/n/bon3ten/IMG_1029.jpg

これはこんなものなのか、それともずれているのかわからないので、見ていただきたくコメントを入れさせていただきます。細かいことで申し訳ありません。お返事はいつでも結構ですので、よろしくお願い致します。

vanillaice (Akira)
Akira
2020/06/15 (Mon) 15:11

To bonさん

こんにちは ('0')/

.b-left:before

left
-6px
程度に調整されると良いと思います。

-----
この方法は吹き出し作成としては一番簡易的というか簡単な方法です。
以前「ボーダーで吹き出しのしっぽ(tail)を作る」件でお話したと思うんですが、しっかりやろうと思う場合はborderのみで作成した方が良いですね。ボーダーの方は上下左右の角の組み方で作成します。

こちらの方法は至極単純で、疑似要素(::before, ::after)で四角を作成、2辺だけボーダーをつけて45度傾けて本体にくっつける、というものです。ようはしっぽと本体の重なりが合わない場合は本体の方へギュっと押し込む(重なり位置を調整する)、という処理でOKです。
Chromeの場合はabsolute要素がブラウズサイズによって1pxずれる、という特徴(というかグリッチ)がありますが、大きな影響は無いと思います。
しっぽの位置を変更したり大きさを変更した場合に同じ問題が生じると思いますので、その際は「左右位置(疑似要素の left あるいは right)を調整」とおぼえておいてくださいね。

また、この方法はカスタマイズが簡単ではあるんですが、綺麗にやろうと思えばボーダーしっぽの方をおすすめします。ただカスタマイズにはちょっと頭を悩ませるかもしれません。計算とかしないとダメかも。
要はボーダーの「斜め切り口」を表現できるかどうかが見た目の美しさに関わってきて、本ページの内容ではそれが「できない」ボーダーしっぽの方は「できる」ということですね。

例えば「吹き出し自体にボーダーを付けない」場合、つまり「ベタ塗り」で良い場合はこの方法が適しています。わざわざ難しいボーダーしっぽを使う必要はありません。けれども逆の場合はこの方法よりもボーダーしっぽの方が綺麗だよ、ということですね。

よろしくお願いします。

bon
2020/06/15 (Mon) 20:45

To Akiraさん

こんばんは。お忙しいところご対応下さりありがとうございます( ᐪᐤᐪ )

ご指導の通りにしたところ、「ずれている感じ」がなくなりましたー!
ありがとうございます。
チャット風吹き出しはこちらの記事で使用しております。
https://bon3te.fc2.net/blog-entry-81.html

以前、バルーンの吹き出しでborderは線とは限らず、面と線で使うことを教えていただきました。
今回も吹き出しは吹き出しですが…
ずれているように感じたのは、45度傾けた四角(◇の左側のみボーダーをつけたもの)が、2px左にあったから。
修正案は、それを右2px右へ移動した(押し込んだ)、ということなんですねー!

バルーン吹き出しの時との手法の違いですけれど、本体と合体した部分のボーダーでわかりますね。なるほどです。

これはこんなもの?とわからず、Akiraさんに質問することになってしまいましたが、今後はまず「左右位置(疑似要素の left あるいは right)を調整」で調整するようにしてみますね。Akiraさんもお忙しいですし、なんとか独立しなくちゃあ…と思いながらも、またこちらの門をたたくことになるかもしれませんが…。今後とも、よろしくお願い致します。
これからもAkiraさんのご活躍を陰ながら応援しています。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)