(※今回は、P活ほとんど関係ありません)

 

アメブロで、P活のことを綴っているわけですが、自分の表現したいものをアメブロで表現したいときのメモです。

 

他のブログ同様、アメブロでもHTMLをいじることができるのでいろいろ試行錯誤をしながら発見したことをメモとして残しておきたいと思います

 

今回のお題は「絵文字を文字サイズに(だいたい)揃える」です。

 

ーーーーー

 

 絵文字を文字の大きさに合わせようとしてもなかなかうまくいきません。たとえば、
 
   「10円やるから勃ててみなキメてる
 
 という文章の文字サイズをXLにすると、
 
   「10円やるから勃ててみなキメてる
 
 となってしまいます。絵文字の大きさは変わらず、また、文字より下に下がっていますよね。
 
 これを直すために
  1. 画像としてコピーしてペースト
  2. HTML表示で絵文字の場所を特定して、絵の大きさをwidthで指定
してやります。
 
1.画像としてコピーしてペースト
 
 まず、絵文字が下がっているのを直します。画像としてコピーしてやります
 
 絵文字を選択して右クリックして「画像をコピー」を選択します↓
 
   
 
これで貼り付けすると、
 
   「10円やるから勃ててみなキメてるキメてる
 
初めの絵文字を削除して、
 
   「10円やるから勃ててみなキメてる
 
となりました。これで文字の下面と絵文字の下面が合いました。
 
 

2.HTML表示で絵文字の場所を特定して、絵の大きさをwidthで指定

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