Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

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



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) |
コメント(2)
Ktaro/ どりーみー/ 

 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
トップページしか見れませんが、どうでしょうか?
【2011/02/18 07:11】 カスタマイズ | トラックバック(1) |
コメント(5)
Ktaro/ どりーみー/ -/ -/ -/ 

 650pxまでの画像


2-15-650px.jpg
夜の雪です。幻想的でした。
【2011/02/15 10:12】 カスタマイズ | トラックバック(0) |
コメント(2)
Ktaro/ どりーみー/ 






| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

01 | 2011/02 | 03
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 - - - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

01 | 2011/02 | 03
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 - - - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview