ブログ改造計画Posted at 2007年01月31日 23:49
Posted at 2007年01月31日 23:49[デザインアレンジ-3]説明文を折り返す
ブログに、あまり長ったらしいタイトルをつけることはできませんよね。
(うちは、、、かなり長い方だと思いますが
)
となると、どんなことを書いてあるブログなのかは、
説明を書かなくてはいけません。
ところが、これも、画面の端から端までずらずらと書いてあっては、
写真と重なってしまったり、読みにくかったりします。
そこで、この説明文を、途中で折り返して見やすくしてみたいと思います。
うちのブログであれば、
松本市とその近郊を中心に、長野県内のおいしいお店・お気に入りのお店を
「本音で」ご紹介♪今は無い懐かしいお店も登場します!
という奴です。
これをそのまま表示させてしまうと、右側の写真に重なってしまって、
とても読みにくいのです。そこで………
前回と同じく「オリジナルデザインを登録」→「スタイルシート」という欄をいじります。
● 変更するところ
なんだかごちゃごちゃいろいろと書いてある中に、
.description{
color : #006600;
font-size : 12px;
padding : 25px ?????px 0px 15px;
text-align : left;
letter-spacing : 2px;
}
という部分があると思います。この赤い部分は、
説明文の右側にどれぐらい余白を作りますか?
という幅を設定しているのです。
なので、これが0だと右端まで説明文がだらだらと続いてしまうことになります。
そこで、これを 300px にしてみました。すると、このブログのように、途中で折り返されます。
この数字をいろいろと変えてみて、ちょうど良い余白を決めてみてください♪
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
同じことを、別の方法で freeman さんが実現されていらっしゃいますので、
こちらもご覧ください。
このように、目的が同じでも、その方法は色々とあったりします。
次は、どこをいじりましょうか♪
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
バックナンバーは、こちら
(うちは、、、かなり長い方だと思いますが

となると、どんなことを書いてあるブログなのかは、
説明を書かなくてはいけません。
ところが、これも、画面の端から端までずらずらと書いてあっては、
写真と重なってしまったり、読みにくかったりします。
そこで、この説明文を、途中で折り返して見やすくしてみたいと思います。
うちのブログであれば、
松本市とその近郊を中心に、長野県内のおいしいお店・お気に入りのお店を
「本音で」ご紹介♪今は無い懐かしいお店も登場します!
という奴です。
これをそのまま表示させてしまうと、右側の写真に重なってしまって、
とても読みにくいのです。そこで………
前回と同じく「オリジナルデザインを登録」→「スタイルシート」という欄をいじります。
● 変更するところ
なんだかごちゃごちゃいろいろと書いてある中に、
.description{
color : #006600;
font-size : 12px;
padding : 25px ?????px 0px 15px;
text-align : left;
letter-spacing : 2px;
}
という部分があると思います。この赤い部分は、
説明文の右側にどれぐらい余白を作りますか?
という幅を設定しているのです。
なので、これが0だと右端まで説明文がだらだらと続いてしまうことになります。
そこで、これを 300px にしてみました。すると、このブログのように、途中で折り返されます。
この数字をいろいろと変えてみて、ちょうど良い余白を決めてみてください♪
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
同じことを、別の方法で freeman さんが実現されていらっしゃいますので、
こちらもご覧ください。
このように、目的が同じでも、その方法は色々とあったりします。
次は、どこをいじりましょうか♪
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
バックナンバーは、こちら
[デザインアレンジ-5]サイドバーにマイマップを
ブログデザインをアレンジしてみよう
[デザインアレンジ-1]背景を変えてみる
[デザインアレンジ-2]配色を変えてみる
[デザインアレンジ-4]タイトル部分の背景画像を変えてみる
ブログデザインをアレンジしてみよう
[デザインアレンジ-1]背景を変えてみる
[デザインアレンジ-2]配色を変えてみる
[デザインアレンジ-4]タイトル部分の背景画像を変えてみる
この記事へのコメント
ふむふむ・・なるほど・・勉強になるなあ!
一つ、無謀な事を聞いてみてもいいですか?・・・
写真そのものを変えることは・・・・・・
かなり・・難しい・・ですよねぇ?!(^_^;)
やっぱり・・
変えられるもんなら変えたいなあ。。なんて。。
素人にゃ、無理?
一つ、無謀な事を聞いてみてもいいですか?・・・
写真そのものを変えることは・・・・・・
かなり・・難しい・・ですよねぇ?!(^_^;)
やっぱり・・
変えられるもんなら変えたいなあ。。なんて。。
素人にゃ、無理?
Posted by ぴあん at 2007年02月26日 09:16
ぴあんさん、こんにちは♪
写真そのものを変える、というのは、うちであれば、
上のスコーンの写真を、ってことでしょうか?
それであれば、やろうと思えばできますよ♪
おお!良いネタをいただきました!(笑)
次のブログ改造計画はその辺りをネタにさせていただきます!
こうご期待!w
写真そのものを変える、というのは、うちであれば、
上のスコーンの写真を、ってことでしょうか?
それであれば、やろうと思えばできますよ♪
おお!良いネタをいただきました!(笑)
次のブログ改造計画はその辺りをネタにさせていただきます!
こうご期待!w
Posted by moo-ii-kai at 2007年02月26日 11:04
このブログシステムの難しいところ。
サイドバーのDIVタグがさわれないじゃないか〜。ってところです。
あ、はじめまして。MOSSから来ましたM君です。
W3C遵守できないのが悲しいなぁ〜。
それ以外は何でも実装できちゃうんですけどね。
メニューもAJAX入れてぐりぐり動くの、今度やってみようかなぁ〜って思ったら、サイドバーの中身がさわれないでお預けです。(w)
松本の美味しいとこ、期待してます〜。
ハングリーキャタピラみたいなところ無いのかな。
サイドバーのDIVタグがさわれないじゃないか〜。ってところです。
あ、はじめまして。MOSSから来ましたM君です。
W3C遵守できないのが悲しいなぁ〜。
それ以外は何でも実装できちゃうんですけどね。
メニューもAJAX入れてぐりぐり動くの、今度やってみようかなぁ〜って思ったら、サイドバーの中身がさわれないでお預けです。(w)
松本の美味しいとこ、期待してます〜。
ハングリーキャタピラみたいなところ無いのかな。
Posted by M君 at 2007年02月26日 11:42
サイドバー、class が、わりとこまめに指定してありましたよ。 >M君
AJAX ということで、javascript まで使うのだったら、わりと簡単に操作できそうですね。
AJAX ということで、javascript まで使うのだったら、わりと簡単に操作できそうですね。
Posted by たか at 2007年02月26日 12:16
そですねぇ~
大筋で何でもできちゃうのはいいんですけどね~♪
でも、、、とりあえず、OperaとIEでレイアウトが崩れなければ、
なんとかなるかな、と思っているんですが…
Macから見て、デザインが崩れているところとか、ないですか?
どうしても、Macでの表示の確認のしようがなくって…
大筋で何でもできちゃうのはいいんですけどね~♪
でも、、、とりあえず、OperaとIEでレイアウトが崩れなければ、
なんとかなるかな、と思っているんですが…
Macから見て、デザインが崩れているところとか、ないですか?
どうしても、Macでの表示の確認のしようがなくって…
Posted by moo-ii-kai at 2007年02月26日 12:22
ベースとなるデザインをなににするかによって、
初期のCSSが変わってくるんですかねぇ~
ひょっとして、おいらが使ってるこのデザインでは、
CSSとして載っているけど、他のデザインではない…
なんてことも有るんでしょうか。。。
CSSの仕様書というか、classの一覧のような物を、
公開していただけると、いじりやすくなりますかねぇ~
初期のCSSが変わってくるんですかねぇ~
ひょっとして、おいらが使ってるこのデザインでは、
CSSとして載っているけど、他のデザインではない…
なんてことも有るんでしょうか。。。
CSSの仕様書というか、classの一覧のような物を、
公開していただけると、いじりやすくなりますかねぇ~
Posted by moo-ii-kai at 2007年02月26日 12:50
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。