~アメブロの記事の書き方~

【アメブロ書いている人必見】コピペだけで作れる箇条書きリストのデザインを紹介!

Ameblo

どうも、こんにちは

 

今回はアメブロでもコピペするだけできれいにできる箇条書きリストのデザインを紹介します。よかったら参考になれば幸いです。アメブロ内のデザインでは嫌だ、私はもっとかっこいい、おしゃれな、かわいい、箇条書きリストを作りたい人におすすめです。それではいきましょう。

今回のテンプレート

今回のテンプレートはこちらでいきます。

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

このおにぎりの具の種類で箇条書きをしました。それではこの箇条書きをデザインしていきましょう。

ちなみにこの箇条書きをHTMLで表すとこのようになります。

<ul>
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

 

シンプルイズベスト

黒枠で囲ってみました。

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

他にも、様々な色で囲むことができます。

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子
  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

以下はHTMLのコードです。

/*黒色*/
<ul style="border: solid 3px black;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

/*赤色*/
<ul style="border: solid 3px red;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

/*緑色*/
<ul style="border: solid 3px green;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

/*青色*/
<ul style="border: solid 3px blue;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

styleの中の英語で色がついているところを変えることによってさまざまな色に変化します。

 

点線(ドット)の枠

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子
/*黒色*/
<ul style="border: dotted 0.5px black;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>
/*青色 ちょっと線の厚さ太め*/
<ul  style="border: dotted 2px blue;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

 

ちょっと長い線(破線)の枠

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子
/*黒色*/
<ul style="border: dashed 3px black;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>
/*青色*/
<ul style="border: dashed 3px blue;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

二重線の枠

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

  • しゃけ
  • 梅干し
  • ツナマヨ
  • おかか
  • 明太子

 

/*黒色*/
<ul style="border:double 7px black;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>
/*青色*/
<ul style="border:double 7px blue;">
  <li><span style="font-size: 24px;">しゃけ</span></li>
  <li><span style="font-size: 24px;">梅干し</span></li>
  <li><span style="font-size: 24px;">ツナマヨ</span></li>
  <li><span style="font-size: 24px;">おかか</span></li>
  <li><span style="font-size: 24px;">明太子</span></li>
</ul>

 

まとめ

ということで今回はアメブロで箇条書きをデザインする方法を書きました。アメブロ内では、CSSといってデザインをする場所がないので多くのデザインをすることができません。しかし、上記のように枠組みを作る程度であればできます。なので、一度コピペをして試してみましょう。また、ワードプレスであれば細かいデザインもできるので今回を機にやってみるのもいいでしょう。

タイトルとURLをコピーしました