2007-02-14 12:15:20

アメブロのカスタマイズに挑戦!!-CSS編集 

テーマ:アメブロカスタマイズ

アメブロをカスタマイズしようと思いCSS編集を少ししてみました。今回挑戦したのは
ムーバブルタイプなどでよく見かける枠を表示してその中に記事を表示できる様にしてみました。


こんな感じです。

まず、「アメブロの編集」→「デザインの変更」→「CSSの編集」と移動して

CCSの編集画面へいきます。CSSの一番したに下記をコピペして「保存」するだけでOKです。


pre { margin: 15px; /* 枠線を表示する上下左右の空白 */ padding: 10px; /* 枠線から文字までの上下左右の空白 */ background: #fffff6; /* 背景色 */ border: 1px solid #999999; /* 文字色 */ font-size: 12px; /* フォントサイズ */ line-height: 150%; /* 改行幅 */ text-decoration:none; font-family: Verdana, Arial, sans-serif,"Osaka";}


///上記の内容は「小粋空間さんの本文に引用をつける 」を引用させていただきました。
///preのタグにスタイルをつけたのと text-decoration font-family の部分は自分なりに少し工夫してみました。


CSSの編集が終わったら、あとは実際に記事を書くときに編集画面の”HTMLタグを表示”のところで
枠つきで表示させたい部分を<pre>~</pre>で囲みます。
例:<pre>こんな感じです。</pre>

こんな感じです。


preのタグにすればHTMLの編集画面での改行やスペースが有効になるので良いかなと思います。

が・・・しかしHTMLの編集から通常の編集画面に戻る際に時々

HTMLの所での改行が崩れる場合があります。


小粋空間さんのところにあるように<blockquote>にスタイルをあてた方がよいかも・・・


<pre>にした大きな理由は<blockquote>という綴りを覚えるのが面倒だから(笑)です。



コメント

[コメントをする]

コメント投稿

一緒にプレゼントも贈ろう!

トラックバック

この記事のトラックバック Ping-URL :

http://trb.ameba.jp/servlet/TBInterface/mush-up/10025239544/284f891b

Amebaおすすめキーワード