主婦の隙間時間いろいろ

子供が巣立ったあとの夫と犬と姑との暮らし

吹き出しのアイコンは表情別にあったほうがいい

CSSの途中に記述ミスがあるとその下の文は無効

まだアイコンにこだわっている私です。

アイコンの画像はPNGでもできることが分かりました。

かっこが足りなかったとは、あまりに初歩的なミスで情けないです。

見慣れてきたら、分かってきました(言い訳しているみたいですけど)。

先日の記事は訂正しました。

かっこが足りなかったということは、当然、その下の行に書いた見出しの変更の記述が有効にならなかったわけで、やり直しをしたときに犬のアイコンの部分を削除してやり直したからできたのですね。キャッシュ云々難しい話ではないようでした。

クラス名のつけ方を考える

表情別にアイコンを用意することにしました。

クラス名をどのようにするか考え、以下のようにしました。

私はmama_normal (普通)mama_niko(にっこり) mama_syobon(しょんぼり)の3つを用意しました。

画像のファイル名もCSSのクラス名も同じにしました。

夫のアイコンと姑のアイコンも表情別にあるものに変更しました。

 

そめの藍です

やっとできました

でも、顔のサイズがほかと違ってておかしくないですか?

 

画像のサイズは統一しよう

なんか、満足いかない結果です。

きちんとサイズと中心を合わせてトリミングしなければいけないのですね。

そうすると、ペイントを使ってピクセル数をきちんと指定したほうがよさそうです。

でもこんなことに時間を費やせるのは今日までです。

明日からは仕事します。

今日はここまでです。

 

2020.3.1追加

<p class="r-fuki mama_normal">ママノーマル</p>
<p class="r-fuki mama_niko">ママにっこり</p>

<p class="r-fuki mama_syobon">ママしょんぼり</p> 

の3つをはてなブログの定型文に登録しました。

 2020.3.10追加

ペイント3Dでトリミングするとピクセル数が表示されるので、320ピクセル×320ピクセルでトリミングすることにします。