アメブロ 記事内の箇条書きを目立たせる方法とは?

アメブロ 記事内の箇条書きを目立たせる方法とは?

アメブロでも無料ブログでもそうですが、
ブログの外側だけでなく、記事内も
ちょっと目立たせてみる。

リスト項目(箇条書き)なども、
ちょいと目立たせてみましょう。

 

 

ブログカスタマイズって、見せるということもありますが、
外観が整ったら、記事内でも工夫をしてみましょう。

 

ここがポイントなのよ!

 

といかって箇条書きとか、使ったりしません?

 

 

箇条書きは、ワードとかの文章でも、
よく使えいますよね。

 

通常は●とかが最初についたりしますよね。

CSSなんか変更しなくても、
HTMLタグだけでできます。

 

 

例えば・・・

<ul>を使うと、番号なしのリスト項目となります。
<ul>
<li></li>
</ul>

で、囲みます。

<ol>を使うと、番号付のリスト項目となります。
<ol>
<li></li>
</ol>

<li>と</li>の間に文字を入れるわけです。

 

 

通常の箇条書き

 

<li>ここに文字ね</li>

<li>で始まったら、</li>で閉じます。
タグ構成は、<○○>で始まったら、</○○>で閉じると
覚えておいてね。

 

このリストマークも先頭につくリストマークを変更することができます。

 

<li style=”list-style-type:disc”> ← 塗りつぶされた●
<li style=”list-style-type:circle”> ← 線で書かれた○
<li style=”list-style-type:square”> ← 線で書かれた□

 

好きなものを選んで使うのもまたよしです。

ですが・・・

 

見せる記事を作る場合は、
シンプルなものもいいのですが、
ちょっと目に留まりやすいものもいいでしょう?

 

このリストの部分を、
小さいアイコンなどを利用して、
ちょっと記事のリスト項目を目立たせましょう。

 

出来上がりはこんな感じね。

 

アイコンを付けた後の箇条書き

 

ちょっとだけ、CSSを追加・変更するだけでできるので、
ぜひチャレンジしてみて!!

 

リスト項目のアイコンを変更する方法

※今回は、CSS編集可能なテンプレートを使います。

ミニアイコン等の画像を用意して、アップロードしてください。

 

ミニアイコンなら、こんなサイトが便利です。

http://bluegreen.jp/
※画像をクリックするとサイトへ飛びます。

 

 

CSSの一番下に、下記コード(ソース)を追加して、
画像のURLを変更していくださいね。

 

 

 

貼ったら、保存をかけてください。

 

記事を書くときに、下記のようにタグを含めて文章を書いてね。
アメブロの新エディタを使っている方は、
通常表示だと、タグが打てませんので、HTML表示に変えてから、
記事の入力をしてくださいね。

 

<ul class=”list”>
<li>ここにテキスト</li>
<li>ここにテキスト</li>
</ul>

 

 

表示を確認で、見てみましょう。

 

 

こんな感じになったらOK!!です。

アイコンを付けた後の箇条書き

 

 

このタグ(コード)を忘れそうだったらば、
PCの付箋やメモなどに貼って置くと、
すぐに使えて便利です。

 

先頭につけるアイコンによっても、
項目が目立つようになりますよね。

 

CSSの設定の時に、
ul.list li{ と設定してありませすが、
この list のところは、自分の解りやすい名前に変えてもOK!!
(なぜなら、あなたのCSSなので)

 

 

私は解りやすく、 list にしていますが、
もっと短くしても大丈夫です。

 

リストマークを増やしたい場合は、
違う名前にすれば、何個でも増やせますよ。

 

 

ただ、間違えないようにしてほしいのは、
記事投稿の時に、CSSを呼び出さないと、
記事には反映しませんので、必ず設定した名前を
class で呼び出してくださいね。

 

<ul class=”list”> のlist のところを、
自分で設定した名前に変更するだけです。

 

それから、アイコンの大きさによって、
line-height(行間のことです。)

padding(余白のことです。)の数字が変わってきます。

 

 

数字を入れながら、設定してみて!!
(ちょっと面倒くさいかもしれませんが、
これも練習だと思って・・・・)

 

いいあんばいのところで、調整してくださいね。

 

こんな風に、箇条書き(リスト項目)も
自分のブログのテーマに合わせると、読者さんも、喜んでくれるはず!!

 

 

ぜひお試しあれ!!
 

 

 

 
A6A6

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ