スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

画像の幅は広くテキスト幅は狭く


2011-2-7-2-4.jpg
大きな画像をエントリーテキストに入れると文字の所も広くなって島しますよね。
あまりに横に広いと読みづらいですよね
そこでテキスト文字だけを狭くする方法。
2011-2-7-2-4.jpg
使っているテンプレートのスタイルシートに

.text{
width :450px;
}

と書いておき
記事を書くときに

<div class="text">
ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。
</div>
と書きます

スポンサーサイト
画像の幅は広くテキスト幅は狭く/2011/02/19 12:43/[ライフ]随想/ トラックバック(0)/ comment(2)

discus-3column-1の真ん中の幅を広くする


discus-3column-1をお使いの方のカスタマイズ一例です。

管理者画面→テンプレートの設定で 現在使用しているテンプレートの複製をクリックし
念のため複製をカスタマイズしてください。


スタイルシートのところで緑の文字の所をプラス200してください。2箇所ありまして下のほうはIE6向けですので両方やってください。
先ずcontainer、全体の幅です。

div#container {
width : 900px; /* コンテンツ幅を設定 */     プラス(+)200=1100px
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
border-top: solid 1px #6080C0;
border-left: solid 1px #6080C0;
border-right: solid 1px #6080C0;
border-bottom: solid 1px #6080C0;
voice-family: "\"}\"";
voice-family:inherit;
width: 880px;       プラス(+)200=1080px
}


*次にbrandingというところ、ここにディスカスのフラッシュが入ります。まだ前のままの幅です。


div#branding {
width : 900px; /* 幅を設定 */     プラス(+)200=1100px
border-top: solid 0px #685d4d;
border-left: solid 0px #685d4d;
border-right: solid 0px #685d4d;
border-bottom: solid 0px #685d4d;
voice-family: "\"}\"";
voice-family:inherit;
width: 880px;       プラス(+)200=1080px
}

*次にラッパーです。


div#wrapper {
float : left; /* ラッパー(プライマリーカラム+セカンダリーカラム)を左側に回り込ませる */
width : 700px; /* 幅を設定 */  プラス(+)200=900px
voice-family: "\"}\"";
voice-family:inherit;
width: 680px;       プラス(+)200=880px
}


プライマリーカラムです。ここが真ん中の写真や記事が入るところです。


div#primary-column {
float : right; /* プライマリーカラム(記事等)を右側に回り込ませる */
width : 500px; /* 幅を設定 */       プラス(+)200=700px
border-top: solid 1px #6080C0;
border-left: solid 1px #6080C0;
border-right: solid 1px #6080C0;
border-bottom: solid 1px #6080C0;
background-color : ; /* 背景色を透明に設定 */
voice-family: "\"}\"";
voice-family:inherit;
width: 480px;       プラス(+)200=680px
}


更にプライマリーカラムの中にentry_textがあります。

その前にentry_titleも広くしたほうがいいですね。緑の所プライマリーカラムに入る大きさで変えてくださいね。

.entry_title {
width : 350px;
text-align : left ;
height : 36px;
color : #6080C0 ;
font-size: 17px;
font-weight : bold;
padding-top: 8px;
padding-left: 40px;
padding-right: 0px;
padding-bottom: 0px;
background-image : url(http://blog-imgs-27.fc2.com/d/r/e/dreamy/discus-main-title.jpg);
background-repeat : no-repeat;
voice-family: "\"}\"";
voice-family:inherit;
width: 330px;
}



そしてentry_text

.entry_text {
width: 470px;       プラス(+)200=670px
font-size: 17px;
line-height: 180%;
color: lightsteelblue;
 padding: 0 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 0px;
overflow: hidden;     消す?(これを書くことで決められた幅からはみ出した画像などの右端をカットします)
voice-family: "\"}\"";
voice-family:inherit;
width: 450px;       プラス(+)200=650px
}

少し下の方のentry_text imgです。記事内の画像の設定です。画像の周りの白い部分どうします?
padding: 7px;がダブっていますのでとりあえず上の赤いのを消してください。
周りがいらないと本来の画像をその分大きく出来ますがどうします?
消すようだったら緑のも消してください。


.entry_text img {
background-color: #ffffff;
padding: 7px;            消す
border-top: 0px solid #000000;
border-right: 0px solid #808080;
   border-left: 0px solid #000000;
border-bottom: 0px solid #808080;
padding: 7px;             がぞうのまわりの白  消す?
margin: 0px 0px 0px 0px;
}

以上で幅が広くなったと思います。プレビューを押して確認してください。良かったら
更新ボタンを押します。

カスタマイズ後の様子はこちら
http://dreamy.blog2.fc2.com/index.php?style2=discus-3column-1_1&index
トップページしか見れませんが、どうでしょうか?
discus-3column-1の真ん中の幅を広くする/2011/02/18 07:11/[Blog]カスタマイズ/ トラックバック(1)/ comment(5)

650pxまでの画像

2-15-650px.jpg
夜の雪です。幻想的でした。
650pxまでの画像/2011/02/15 10:12/[Blog]カスタマイズ/ トラックバック(0)/ comment(2)
| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。