アメブロ 記事中の文章を囲んで目立たせる方法とは?

アメブロ 記事中の文章を囲んで目立たせる方法とは?

アメブロの記事内のカスタマイズです。

記述でちょっと読んでほしいなーとか、
引用文など。
読んでもらいたい場所ってありますよね。

ちょいとCSSを追加して、
記事を目立たせる方法をご紹介します。

 

 

ブログの外観を素敵に変更したら、
記事を読んでいただく工夫をしていきたいもの。

 

ちょっとのポイントや、
引用文などを目立たせることによって、
読者さんを、その場所に誘導させることができます。

 

以前の記事でも書いたんですが、
記事を読んでもらうというこは、大事なこと!
箇条書きなども、リストマークを付けたりすると、
読者さんも喜んでくれますよ。
アメブロ 記事内の箇条書きを目立たせる方法とは?

 

 

出来上がりは、こんな感じになります。

記事を目立たせる

 

このブログでも、使っているんですが、
ここよ!!
っていう部分を、ちょっと色つきのもので囲んだりしたら、
目を惹きますよね。

 

 

HTMLだったらば、P タグがその部分に当たります。

Pタグというのは、段落を表しています。

 

<p></p> で、1つの段落をつくっています。

これを囲んであげるだけで、目立つでしょう?

 

このPタグにスタイル(style)を設定してあげればいいのですが、
タグ(コード)が実は長ーくなります。

 

コードが長くなると、一部に間違いがあった場合、
もっー!!
ってイラッとしますよね。

 

だったら、CSSでスタイルを設定して、
呼び出してあげましょう。

 

その方が、間違いが少ないし、
CSSで変更すれば、いいだけです。

 

これも、勉強だと思ってチャレンジです。

 

 

記述をCSSで目立たせる方法

このCSSは、アメブロの場合でも、
他のブログでもたぶん使えると思いますので、
CSSのところに、追加すれば大丈夫ですよ。

一応アメブロを例として、お伝えしていきますね。

 

※CSS編集可能なデザインの場合です。

CSS編集に入って、CSSのところ。
一番最後で大丈夫ですので、下記コードをコピーして
追加してくださいね。

 

CSSの解説

 

今回は、背景色はブルーのです。

 

#box001 ← 今回は、id で呼び出します。
box001 は、解りやすいようにしてありますが、
好きな名前を付けてもよし!

width:420px ← 横幅を決定しています。
これは、なくてもいいのですが、
設定していない場合は、記事エリア全部になってしまいます。
この数字を、変更すると小さくなったり、広くなったりします。

border ← 囲み線のことです。

今回は、点線の1px の鮮やかなブルーで囲んでいます。

線を入れたくない場合は、
この記述を削除してください。

margin ← 外側余白です。
padding ← 内側の余白です。

background-color ← 背景色です。
お好きな色に変更してくださいね。

font-size ← サイズは、ちょっと大きめにしました。
これも、いいあんばいの数字に変更してください。
em の設定にしてありますが、px でも大丈夫です。
font-weight ← フォントを太文字にしています。
太文字でなくてもいいかも?
って思ったら、この記述は削除してくださいね。

 

 

もし、囲みの周りを丸くしたいのであれば、

をチョイ足しするだけで、OKです。
(コピーして数字を変更してから、上記CSSに追加してください。)

 

CSSが貼れたら、保存をします。

 

記事投稿に戻って、目立たせたいかもっていう記述があった場合は、
下記のように、記述します。
アメブロの場合では、HTML表示の方に書いてくださいね。
(通常表示だと、タグ(コード)の記述はできません)

 

 

<div id=”box001″>
ここに、好きなことを書いてね。
</div>

 

<div~>で呼び出したら</div>で閉じます。

※こんな感じになりますよ♪
 

 

この</div> を忘れると、全体のレイアウトが崩れる場合もありますので、
注意が必要!!

絶対に忘れないでくださいね。

 

どうでしょう?

 

ちょいと使えるでしょう?

 

ワードプレスの場合は、プラグインを入れるだけで、
上記のような記述ができるのものもありますが、
プラグインに頼らずとも、CSSの追加だけで、簡単にできますよ。

 

※テンプレートによって、多少のCSS記述の違いがあります。

 

読まれる記事の工夫も、
読者さんにとっては、大事なことです。

ぜひ、お試しあれ!!
 

 

A6A6

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

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

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

arrow10_59x29_ylw

mail-pen1

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

 

 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ



お問い合わせ

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

pen

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

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

このページの先頭へ