ちょっと応用

最終更新: 2018年11月20日

アメブロのリストは、頭に付く記号が黒丸(・)ですが、これを別の記号に変更することもできます。

エディタの切り替えが必要になり、最初は少し取っつきにくいかもしれませんが、コピー&ペーストでできるので、試してみてください。


1.通常の記事を書き、リストを設定します

リストの設定については、ひとつ前の記事を参照してください。番号付きリストではなく、箇条書きリストの方を使用します。



2.アメブロエディタを「HTML 表示」に切り替えて、タグを変更します

アメブロエディタの下にあるタブを切り替えて、リストの先頭にある <li>を書き換えていきます、


白丸にしたい時

<li style="list-style-type:circle">白い丸</li>


塗りつぶしの四角にしたい時

<li style="list-style-type:square">塗りつぶしの四角</li>


3.「通常表示」に切り替えて、外観を確認します

タグを書き直せば、リストのマーカーはひとつずつ変更することができます。アメブロのデフォルトは黒丸なので、<li>に戻すと、黒丸になります。



リストのマーカーを変更する方法について見てきました。無理に変更しなくてもいい要素ではありますが、知っていると好みの見た目にすることができます。必要に応じて使ってみてください。

最終更新: 2018年11月20日

前回の記事で、アメブロ内で引用や強調として、テキストに枠を付ける方法について解説しました。今回は、枠の外観を変えるサンプルを一部紹介します。

これを基本として、色や線の太さなどを自由に買えてみてください。


1.枠のサンプル

枠内にも書いてありますが、点線・実線・背景色のサンプルです。



2.コピー&ペーストするテキスト


<div style="border: 1px dashed #CCCCCC; padding: 15px;">点線で枠線が付けられます</div>


<div style="border: 1px solid #000000; padding: 15px;">これを使うと実線の枠が付けられます</div>


<div style=" background:#e9f3fe; border:none; padding: 15px;">背景に色を設定することもできます</div>



3.点線や実線、色の指定について

「dashd」は点線、「solid」は実線、「background」は背景色の指定に使います。また、「#000000」は、色の指定を行っています。カラーコードからお気に入りの色を探すことで、好きな色や線の種類で枠が作れます。試してみてくださいね。

「1px」は線の太さなので、この数字を大きくしていくと、より太い枠線が作れます。

最終更新: 2018年11月20日

アメブロで記事の引用をする時は、引用ボタンを使う以外に、手入力することで枠で囲むこともできます。引用部分として使えるだけでなく、枠で囲むとテキストの強調もできるので、告知などがある時に使うと便利です。


1.アメブロエディタを開き、「HTML 表示」に切り替えます

下にある「テキスト表示」の隣にある「HTML 表示」をクリックして、エディタを切り替えます。この時、テキストはあってもなくても大丈夫です。



2.以下のテキストをコピー&ペーストします


<div style="border: 1px dashed #CCCCCC; padding: 15px;">ここに囲みたいテキストを入力します</div>


3.エディタを「通常表示」に戻し、枠内に入れたいテキストを入力します

「ここに囲みたいテキストを入力します」部分に上書きする形で、テキストを入力していきます。別に書いておいたテキストを上書きでコピー&ペーストすると、うっかり枠が消えたりすることがないので安心です。



今回の例は、黒い点線で枠を囲みました。他にも、実線で囲んだり、背景色を設定することもできます。サンプルはこちらの記事を参照してください。