Next Home  Prev
No,183 comment 5

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分19秒/カスタマイズ /コメント:5 /トラックバック:1/▲ページトップへ戻る

コメント


コメント index

 ありがとうございました。先ほど無事改修いたしましたよ。イメージの周囲は何もないと暗い画像の時に境目がなくなるから2pxに設定して微妙に残してみました。
 これで横650pxの画像を貼り付けられるんでしたよね?文章も横に長くなってしまいましたが、新たに650pxの画像で作った記事を見ながら微調整してみようと思います。
 そうそう、どこか他のところをいじって上のディスカスを広げるか両サイド均等にあけることって可能ですか?
2011-02-19(08:58) : Ktaro 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の記事を見てください。
写真は広く、文章は狭くなっていると思います。
タイトルについてはまた投稿しますね。
2011-02-19(14:10) : どりーみー URL : 編集

承認待ちコメント

このコメントは管理者の承認待ちです
2011-04-18(07:20) : : 編集

承認待ちコメント

このコメントは管理者の承認待ちです
2011-04-19(07:37) : : 編集

承認待ちコメント

このコメントは管理者の承認待ちです
2011-04-19(18:45) : : 編集
絵文字

非公開コメント

トラックバック:
トラックバック URL
→http://dreamy.blog2.fc2.com/tb.php/183-588eb509

トラックバック
expedia kortingscode
Het grootste online reisbureau heeft regelmatig couponcodes voor extra korting! kortingscode expedia[2014/06/20 15:56]
Next Home  Prev


どりーみー

カテゴリー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

11 | 2018/12 | 01
- - - - - - 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 29
30 31 - - - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

 

カテゴリー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

11 | 2018/12 | 01
- - - - - - 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 29
30 31 - - - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク