小見出し、パート2 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

$やさしいアメブロカスタマイズ!と女性タレント画像-紙とペン 540x


fc2ブログや、はてなブログだと小見出しや引用符のボタンがあって、簡単に記事に書けるみたいですけど、アメブロさんには無いのでチョット作ってみました。←暇人(笑)



<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; font-weight:bold;">青の小見出し</div>




青の小見出し



・幅、短め

<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; font-weight:bold;width:400px;">青の小見出し</div>





青の小見出し


______


<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;">ピンクの小見出し</div>




ピンクの小見出し


・幅、短め

<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;width:400px;">ピンクの小見出し</div>




ピンクの小見出し


______

<div style="border-left:10px solid #ff0000; border-bottom:2px solid #ff0000; padding-left:10px; font-weight:bold;">赤の見出し</div>




赤の見出し



・幅短め

<div style="border-left:10px solid #ff0000; border-bottom:2px solid #ff0000; padding-left:10px; font-weight:bold;width:400px;">赤の見出し</div>




赤の見出し




※カラーコード、#~をお好みで変えてみて下さい。(縦と横の2ヶ所あります)

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定


※width:400px;の数値を変えると横幅を変えられます。(少なくすると、狭くなります。このタグを記入しない場合は、記事幅と同じになります。)



もう少し、色々やってみようと思いましたが、面倒くさくなったので、やめます。(汗)


参考になれば、うれしいのですが・・


ブィブィ(((( ;°Д°))))




上のは前回、ご紹介してみたものですが、それに加えて、もう一つご紹介してみたいと思います。

今、自分が一番気に入っている小見出しです^^;


<div style="border-left:10px solid #00CC00; border-bottom:1px solid #bbbbbb; padding-left:10px; font-weight:bold;">縦緑、横グレーの見出し</div>




縦緑、横グレーの見出し




あと、こういったアメブロのカスタマイズの方法を一番解りやすく説明してくれているのは、松田さん$あんなこと そんなこと どうでもいいこと...-外部リンクだと思います。

で、そのカスタマイズの目次のようなものも今日、投稿されてました。

⇒松田流アメブロカスタマイズ目次?$あんなこと そんなこと どうでもいいこと...-外部リンク



参考になると、うれしいのですが・・( °◡°)