本サイトはアフィリエイトで報酬を得ています

アメブロの絵文字をライン(区切り線)にしてみる

アメブロにはたくさんの絵文字がありますが、

「せっかくあることだし、ライン(区切り線)に使ってみたらどうかな?」

と思ってやってみました。

↓生ビールの絵文字ライン

 
↓きのこの絵文字ライン
 
↓矢印の絵文字ライン
 
↓宝石の絵文字ライン
 
タグは簡単なものですので載せておきます。
<div style="background:url(https://stat100.ameba.jp/blog/ucs/img/char/char3/212.png) repeat-x 0 center/16px 16px;border:0 none;height:20px">&nbsp;</div>
赤い文字の部分がアメブロで絵文字として登録されている画像ファイルのURL(この例は生ビール)で、ここを変えると色んな絵文字でラインを引けます。

「&nbsp;」の部分は、全角のスペース(空白文字)の方が扱いやすいかもしれません。

パソコン、スマホなど、どんな画面サイズのデバイスでも記事領域の端から端まで一列に絵文字が並ぶので、ラインとしては使いやすいです。

赤い文字の部分に入れる画像はアメブロの絵文字でなくても、縦横の長さが同じなら、だいたいどんな画像でも大丈夫です。

絵文字のURLは、絵文字で右クリックすると表示されるメニューにある「画像アドレスをコピー」(Google Chromeの場合)でクリップボードに入ります。

image

タグを作ったら、例えば拙作amecareの「定形文」に登録しておくなど、定型文として簡単に再利用できるようにしておくと良いでしょう。

ちなみに、区切り線なので最初は「hr」タグでやってみたんですが、表示がとても不安定だったので、「div」タグに変えてやってみました。

それでも、ちょっとした操作で消えたり、行間の調節が難しかったりもするので、もう少し別のタグで検討したほうがいい可能性もあります。

「hr」ではなく「div」タグにしたことで、ライン内に文字を書くことができるので、上手く使うことができれば少し面白いかもしれません。

こんな感じです。
一行しか画像を表示しないので、長い文は無理があります。