2007年12月12日
ワイド設定の例
みみすけさんのご要望にお答えし 私が行った設定をご説明します
※1 スタイルシートをいじりますので 自己責任にて設定願います
※2 テスト後の適用をお勧めします
※3 変更前のテンプレートは 万が一のため保存しておいてください
ブログバージョンアップにより 3個のテンプレートが保存できます
さて私の設定例ですが スタイルシートの変更は ①から⑥の全7箇所です

①ブログ全体の横幅 ②記事欄の横幅 ③左サイドバーの横幅
④右サイドバーの横幅 ⑤記事欄内部の横幅 ⑥あと1箇所
横幅の指定は px(ピクセル)または%にて行います
私はpxにて指定しました %指定だとブログを参照される方の端末設定(画面解像度)により
ブログが崩れてしまう可能性があるからです
※1 スタイルシートをいじりますので 自己責任にて設定願います
※2 テスト後の適用をお勧めします
※3 変更前のテンプレートは 万が一のため保存しておいてください
ブログバージョンアップにより 3個のテンプレートが保存できます
さて私の設定例ですが スタイルシートの変更は ①から⑥の全7箇所です

①ブログ全体の横幅 ②記事欄の横幅 ③左サイドバーの横幅
④右サイドバーの横幅 ⑤記事欄内部の横幅 ⑥あと1箇所
横幅の指定は px(ピクセル)または%にて行います
私はpxにて指定しました %指定だとブログを参照される方の端末設定(画面解像度)により
ブログが崩れてしまう可能性があるからです
私の場合 掲載する写真(画像)のサイズを基本に横幅を決定しました
写真(大)の横幅が500px (小)の横幅が250px ちなみに携帯からの写真は240px
①980px ②580px ③180px ④180px ⑤580px と(テストしてみて)決めました
⑥の値は単純に計算してください ②580px-28px=⑥552px
さてここからが スタイルシートへの設定です 秀丸などにコピーすると変更しやすいかも
知れません 参考にアウトドア3カラムからの変更箇所を【レコード数】にて表示します
①の設定は1箇所
#container{ の width:980px; 【108レコード】
②の設定は1箇所
#content{ の width:580px; 【177レコード】
③の設定は1箇所
#links{ の width:180px; 【185レコード】
④の設定は1箇所
#links2{ の width:180px; 【195レコード】
⑤の設定は2箇所
#container{ の .description{ の width:580px; 【158レコード】
#copyright{ の .blog{ の width:580px; 【223レコード】
⑥その他1箇所
#copyright{ の .main{ の width:552px; 【268レコード】
ここまで設定したら オリジナルデザインとして保存し 使用テンプレートを切り替えて
見てください 思ったように表示されましたか?
あくまでも私の設定値ですので ご希望とおり表示されるまで テストをしてみてください
写真(大)の横幅が500px (小)の横幅が250px ちなみに携帯からの写真は240px
①980px ②580px ③180px ④180px ⑤580px と(テストしてみて)決めました
⑥の値は単純に計算してください ②580px-28px=⑥552px
さてここからが スタイルシートへの設定です 秀丸などにコピーすると変更しやすいかも
知れません 参考にアウトドア3カラムからの変更箇所を【レコード数】にて表示します
①の設定は1箇所
#container{ の width:980px; 【108レコード】
②の設定は1箇所
#content{ の width:580px; 【177レコード】
③の設定は1箇所
#links{ の width:180px; 【185レコード】
④の設定は1箇所
#links2{ の width:180px; 【195レコード】
⑤の設定は2箇所
#container{ の .description{ の width:580px; 【158レコード】
#copyright{ の .blog{ の width:580px; 【223レコード】
⑥その他1箇所
#copyright{ の .main{ の width:552px; 【268レコード】
ここまで設定したら オリジナルデザインとして保存し 使用テンプレートを切り替えて
見てください 思ったように表示されましたか?
あくまでも私の設定値ですので ご希望とおり表示されるまで テストをしてみてください
Posted by kumataro@東京杉並 at 23:17│Comments(12)
│日常 その他
この記事へのコメント
これはこれは、私目の為にどうもすいませんです~(^^)y
なるほど、これはちょっと参考にさせてもらいますよ。保存してからやるというのもポイントですね。
コレまでのものも大事だしねえ
ありがとうございますm(_o_)m
なるほど、これはちょっと参考にさせてもらいますよ。保存してからやるというのもポイントですね。
コレまでのものも大事だしねえ
ありがとうございますm(_o_)m
Posted by みみすけ at 2007年12月13日 17:49
みみすけさん こんばんは
ご参考になりましたでしょうか 時間のある時にじっくり 試してみてください
みみすけさんのブログを見ながら わくわくしてます
ご参考になりましたでしょうか 時間のある時にじっくり 試してみてください
みみすけさんのブログを見ながら わくわくしてます
Posted by kumataro at 2007年12月13日 23:12
はじめまして!
参考にさせていただきました。
とても見やすくなり感動しています^^)
参考にさせていただきました。
とても見やすくなり感動しています^^)
Posted by さとちゃん
at 2007年12月13日 23:27

こんばんは さとちゃんさん
拝見させていただきました 900pxでも十分な横幅ですね
写真と文字と空白がバランスよくて とても読みやすいです
私も再度 見直そうかなぁ・・・
拝見させていただきました 900pxでも十分な横幅ですね
写真と文字と空白がバランスよくて とても読みやすいです
私も再度 見直そうかなぁ・・・
Posted by kumataro
at 2007年12月13日 23:34

はじめまして<(_ _)>
さとちゃんのブログから来ました!
今回kumataroさんの、そのままのサイズでやらせて頂きました^_^;
こんな事も出来るんだ!全く自分では分かりません(笑)
さとちゃんのブログから来ました!
今回kumataroさんの、そのままのサイズでやらせて頂きました^_^;
こんな事も出来るんだ!全く自分では分かりません(笑)
Posted by ポン吉
at 2007年12月14日 17:26

ポン吉さん こんばんは
ブログ拝見しました 横幅が広くなると 写真の配置とか 色々なパターンが 取れますよねぇ
ちなみにトップ画面のロゴでしょうか・・・ xマークが付いている部分の指定は、
#container{font-size:12px; の
.logo{ の
padding-left:605px; の
605pxを増やすと 右にずれます
ちなみに 【168レコード】 です
ブログ拝見しました 横幅が広くなると 写真の配置とか 色々なパターンが 取れますよねぇ
ちなみにトップ画面のロゴでしょうか・・・ xマークが付いている部分の指定は、
#container{font-size:12px; の
.logo{ の
padding-left:605px; の
605pxを増やすと 右にずれます
ちなみに 【168レコード】 です
Posted by kumataro
at 2007年12月14日 19:31

はじめまして。
同じくさとちゃんのところからおじゃまします。
現在、オリジナルテンプレートをいろいろ模索中で、解説が分かり易いので助かります。詳しいんですね。参考にさせていただきます!
同じくさとちゃんのところからおじゃまします。
現在、オリジナルテンプレートをいろいろ模索中で、解説が分かり易いので助かります。詳しいんですね。参考にさせていただきます!
Posted by ケーちゃん
at 2007年12月15日 06:43

ケーちゃんさん こんにちは はじめまして
オリジナルテンプレートは 前回のトップ写真変更 今回の横幅変更共に
とても好評のようで PVの数が多いです
今後もいろいろ工夫して 情報提供したいと思います
オリジナルテンプレートは 前回のトップ写真変更 今回の横幅変更共に
とても好評のようで PVの数が多いです
今後もいろいろ工夫して 情報提供したいと思います
Posted by kumataro
at 2007年12月15日 16:34

はじめまして、
みみすけさんのところからお邪魔しました。
早速、私も利用させていただきました。
見やすい!!
いいですね、参考になり助かりました。
みみすけさんのところからお邪魔しました。
早速、私も利用させていただきました。
見やすい!!
いいですね、参考になり助かりました。
Posted by yuta
at 2007年12月20日 11:20

yutaさん こんばんは
参考にしていただいて 光栄です
今後も よろしくお願いします
参考にしていただいて 光栄です
今後も よろしくお願いします
Posted by kumataro
at 2007年12月20日 23:25

検索からきました
スタイルシートをいじっていると、サイドバーの幅が狭いことが気になり、このページで無事解決しました
とても面白いブログです。
リンク貼らせていただきました。
スタイルシートをいじっていると、サイドバーの幅が狭いことが気になり、このページで無事解決しました
とても面白いブログです。
リンク貼らせていただきました。
Posted by だんべぇ at 2008年12月25日 12:24
だんべぇさん おはようございます
はじめまして お役にたてて何よりです
リンク 私も張らせていただきます
今後も よろしくお願いします
はじめまして お役にたてて何よりです
リンク 私も張らせていただきます
今後も よろしくお願いします
Posted by kumataro at 2008年12月26日 08:07