(※今回は、P活ほとんど関係ありません)
アメブロで、P活のことを綴っているわけですが、自分の表現したいものをアメブロで表現したいときのメモです。
他のブログ同様、アメブロでもHTMLをいじることができるのでいろいろ試行錯誤をしながら発見したことをメモとして残しておきたいと思います
今回のお題は「絵文字を文字サイズに(だいたい)揃える」です。
ーーーーー
絵文字を文字の大きさに合わせようとしてもなかなかうまくいきません。たとえば、
「10円やるから勃ててみな
」

という文章の文字サイズをXLにすると、
「10円やるから勃ててみな
」

となってしまいます。絵文字の大きさは変わらず、また、文字より下に下がっていますよね。
これを直すために
- 画像としてコピーしてペースト
- HTML表示で絵文字の場所を特定して、絵の大きさをwidthで指定
してやります。
1.画像としてコピーしてペースト
まず、絵文字が下がっているのを直します。画像としてコピーしてやります。
絵文字を選択して右クリックして「画像をコピー」を選択します↓
これで貼り付けすると、
「10円やるから勃ててみな
」


初めの絵文字を削除して、
「10円やるから勃ててみな
」

となりました。これで文字の下面と絵文字の下面が合いました。
2.HTML表示で絵文字の場所を特定して、絵の大きさをwidthで指定
このままだと絵文字が大きすぎますね。
そこで、HTML表示を選択して、「10円やるから」の文章を探して、絵文字の場所を特定して、絵の大きさをwidthで指定してやります。
具体的には、
- ブログの入力画面の左下で「通常表示」を「HTML表示」に変更する。
- 「10円やるから」の文章の近くで、絵文字の場所を特定する
- 絵文字を表現しているところ(<img...>)の最後に、width="36"で大きさ指定を追加する。(※”36”を指定したのは、文字の大きさがXLの場合。他の場合は後述。また、heightで指定してもうまくいかなかった)
- ブログの入力画面の左下で「HTML表示」を再度「通常表示」に戻す。
すると、
「10円やるから勃ててみな
」

これで希望の大きさの絵文字になり、字とも下面が揃っています。
これでできあがりです。
3.文字の大きさに合わせて、widthの値を選ぶ
なお、今
width=36
を指定しましたが、これはXLの場合です。私が試した感じでは、
XXLの場合 width=48
XLの場合 width=36
Lの場合 width=30
M(標準)の場合 width=24
Sの場合 width=16
XSの場合 width=12
を指定するとよいようです。