スポンサーサイト

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

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)

comment

 ありがとうございました。先ほど無事改修いたしましたよ。イメージの周囲は何もないと暗い画像の時に境目がなくなるから2pxに設定して微妙に残してみました。
 これで横650pxの画像を貼り付けられるんでしたよね?文章も横に長くなってしまいましたが、新たに650pxの画像で作った記事を見ながら微調整してみようと思います。
 そうそう、どこか他のところをいじって上のディスカスを広げるか両サイド均等にあけることって可能ですか?

Ktaro #xs9SEtpE/2011/02/19(土) 08:58:13/URL[ 編集]

良かったです。
昨日はもう修正したのを見て記事を書いていたので失礼しました。
仰っていただいたので、記事を修正できました。ありがとうございます。

>文章も横に長くなってしまいましたが・・・
そこなんですよね。私もテンプレートを作っている時、画像と文章が別ならどんなに良いかと思いました。

ただ、一手間かけるとしたら方法はあると思います。
それはスタイルシートの方へ

.text {
width :450px;
}

と書いておき

投稿の時
<div class="text">
ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
</div>
と書きます。
このFC2のBlogではこのようにするしかないと思います。例として
http://dreamy.blog2.fc2.com/index.php?style2=discus-3column-1_1&index
2011/02/19の記事を見てください。
写真は広く、文章は狭くなっていると思います。
タイトルについてはまた投稿しますね。

どりーみー #JalddpaA/2011/02/19(土) 14:10:01/URL[ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

#/2011/04/18(月) 07:20:24/[ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

#/2011/04/19(火) 07:37:30/[ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

#/2011/04/19(火) 18:45:58/[ 編集]

投稿















管理者にだけ表示を許可する

trackback

trackback url ↓

http://dreamy.blog2.fc2.com/tb.php/183-588eb509


blog_name=【kortingscode expedia】 ♥   expedia kortingscode
 
Het grootste online reisbureau heeft regelmatig couponcodes voor extra korting!
【2014/06/20 15:56】



| ホーム |

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