アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】会話風吹き出しに名前を追加する【初心者OK】

以前の記事で会話風吹き出しを作った www.agonose-nikki.com

当初は私と妻の2人だったが、今後増えそうなのでその対応。

すぐできちゃう

以下のコードで吹き出しが表示できるのは前回の記事でやった。

<p class="chat papa-default">どや</p>

この記事にコードを追加していく

<p class="chat papa-default"><span>パパ</span>どや</p>

デザインCSSに以下を追加

.chat span{
    position: absolute;
    left: -111px;
    top: 77px;
    font-size: 0.75rem;
    color: #555;
    width: 100px;
    text-align: center;
}

これだけ

結果

想定通りに名前が表示された。

f:id:agonosetaro:20200217175641p:plain:h100

いろんな名前が使える。

<p class="chat papa-default"><span>ワイ</span>天才と呼びましたか?</p>
<p class="chat mama-default"><span></span>呼んでない</p>


ワイ天才と呼びましたか?

呼んでない

終わり

実はこのブログ...成長しているんです。

以上!





CSS解説

時間が余ってしまったので解説。 (いつもは面倒くさくて書かないけども)

.chat span {

まずこのコードで 『パパ』とか『妻』を囲っているspanタグを対象の要素にしている。

 position: absolute;

これは対象の要素を自由な場所に配置したいときに使う。
position: absolute;を使う時はセットで以下のコードも必要になってくる。

left: -111px;
top: 77px;

対象要素の具体的な配置場所だ。あえてわかりやすくいうと

leftは吹き出し(親要素のpタグ)の左端からどれだけずらした場所に配置するか。 吹き出しの左端を0として、それよりもさらに左側に配置したかったので、マイナス値を設定している。

topも同じく吹き出し(親要素のpタグ)の最上部からどれだけずらした場所に配置するか。

他にもbottomrightも存在する。良い感じに使い分ける。

width: 100px;
text-align: center;

これは意外と大事。widthは要素の幅を指定するのだが、指定しないと文字数によって可変してしまう。わかりやすくwidthを指定せずに赤枠で囲ってみた。

f:id:agonosetaro:20200218101618p:plain:h200

lefttopで指定した位置に配置されている状態だ。 text-align: center;は対象要素(赤枠)内の文字を中央に寄せる動きのため、赤枠自体が小さいとあまり意味を成さない。

width: 100px;を復活させるとこうなる。

f:id:agonosetaro:20200218102023p:plain:h200

文字数に影響されずに固定のサイズとなった。十分なサイズがあるため、text-align: center;で文字の中央寄せが機能している。


まぁぶっちゃけCSSは覚えられないので、挑戦と失敗を繰り返していくものだと過去の自分には言ってあげたい。

でも目に見える成果だから楽しいよね

以上!

スポンサーリンク