So-netブログ小僧：記事の幅を変更 [コンピューター]
まず、バナーの画像のサイズを幅1000pxに変更しま～す。
【変更手順】
1.まず、バナーの画像のサイズを幅1000pxに変更する。
(1) JTrimで画像ファイルを開く。
(2) リサイズ - 1000px Ｘ 300pxに変更
(3) 保存
2. 管理ページ - デザイン - テンプレート管理
3. テンプレート名の右の[編集]をクリック
4. トップページを選択
5. ファイル - 参照をクリック。バナーの画像ファイルを選択。
6. アップロードボタンをクリック。
7. アップロードした画像ファイルの「編集」をクリック
8. サムネイル長辺を1000pxに変更して保存
9. 「選択中のブログを見る」をクリック
10. 「プロフィール」をクリック
11. 「画像一覧」から、アップロードした画像をクリック
12. 画像をクリック
13. ブラウザのURLの「/_images/blog/_XXX/XXXXXX/XXXXXXXXXXXXXXX.jpg」をコピー
14. 管理ページ - デザイン - テンプレート管理
15. テンプレート名の右の[編集]をクリック
16. トップページを選択
17. スタイルシートをコピー
18. テキストエディタを開く
19. テキストエディタにペーストして保存
20. テキストエディタでスタイルシートを編集
(1) #container部分
・widthを770px ⇒ 1000pxに変更(21行目)
width :1000px;
・backgroundのurlを、13項でコピーしたURLに変更(23行目)
background:#ffffff url(/_images/blog/_XXX/XXXXXX/XXXXXXXXXXXXXXX.jpg) no-repeat center top;
(2) #banner部分
・heightの値をバナーの画像の高さに合わせて300pxに変更(60行目)
height: 300px;
(3) #banner h1部分
・ブログのタイトルの文字列の大きさと位置をfont-sizeとpaddingで調整(66, 67行目)
padding:10px 0 0 10px;
font-size:20px;
(4) .archive-links部分
・113行目の「background:url(/_common/skins/211/images/arrowT_small.gif) no-repeat left center;」を削除。
(5) /* Articles */ #main部分
・119行目のwidthを変更。今回、#containerの幅を770px⇒1000pxに変更したので、ここも、230px(=1000px - 770px)増やして、540px⇒770pxに変更。
width:770px;
(6) /* Articles */ .articles部分
・124行目のwidthを変更。今回、#containerの幅を770px⇒1000pxに変更したので、ここも、230px(=1000px - 770px)増やして、540px⇒770pxに変更。
width:770px;
(7) /*-----Footer-----*/ #footer部分
・506行目のwidthを770px⇒1000pxに変更。
width:1000px;
21. 編集後のスタイルシートを保存（テキストエディタ）
22. 編集後のスタイルシートをコピー（テキストエディタ）
23. ブログのスタイルシート編集画面に、編集後のスタイルシートを貼り付け
24. ブログのスタイルシート編集画面で「保存」をクリック
【参考URL】
・この記事の元になっているM-1さんの記事(2009-12-03 06:50投稿)
http://blog.so-net.ne.jp/pc-tips/layout
・CSSセレクタ(タグ)一覧 (So-netブログのマニュアル）
http://blog-help.blog.so-net.ne.jp/css_tag
・とほほのWWW入門（スタイルシートの参考に）
http://www.tohoho-web.com/www.htm
【使ったツール】
・JTrim
フォトレタッチソフト。jpegファイルのサイズ変更に使用。
http://www.woodybells.com/jtrim.html
・DF(テキストファイル比較）
・xyzzy（テキストエディタ）
ではでは。。![[猫]](https://blog.ss-blog.jp/_images_e/101.gif)
【変更手順】
1.まず、バナーの画像のサイズを幅1000pxに変更する。
(1) JTrimで画像ファイルを開く。
(2) リサイズ - 1000px Ｘ 300pxに変更
(3) 保存
2. 管理ページ - デザイン - テンプレート管理
3. テンプレート名の右の[編集]をクリック
4. トップページを選択
5. ファイル - 参照をクリック。バナーの画像ファイルを選択。
6. アップロードボタンをクリック。
7. アップロードした画像ファイルの「編集」をクリック
8. サムネイル長辺を1000pxに変更して保存
9. 「選択中のブログを見る」をクリック
10. 「プロフィール」をクリック
11. 「画像一覧」から、アップロードした画像をクリック
12. 画像をクリック
13. ブラウザのURLの「/_images/blog/_XXX/XXXXXX/XXXXXXXXXXXXXXX.jpg」をコピー
14. 管理ページ - デザイン - テンプレート管理
15. テンプレート名の右の[編集]をクリック
16. トップページを選択
17. スタイルシートをコピー
18. テキストエディタを開く
19. テキストエディタにペーストして保存
20. テキストエディタでスタイルシートを編集
(1) #container部分
・widthを770px ⇒ 1000pxに変更(21行目)
width :1000px;
・backgroundのurlを、13項でコピーしたURLに変更(23行目)
background:#ffffff url(/_images/blog/_XXX/XXXXXX/XXXXXXXXXXXXXXX.jpg) no-repeat center top;
(2) #banner部分
・heightの値をバナーの画像の高さに合わせて300pxに変更(60行目)
height: 300px;
(3) #banner h1部分
・ブログのタイトルの文字列の大きさと位置をfont-sizeとpaddingで調整(66, 67行目)
padding:10px 0 0 10px;
font-size:20px;
(4) .archive-links部分
・113行目の「background:url(/_common/skins/211/images/arrowT_small.gif) no-repeat left center;」を削除。
(5) /* Articles */ #main部分
・119行目のwidthを変更。今回、#containerの幅を770px⇒1000pxに変更したので、ここも、230px(=1000px - 770px)増やして、540px⇒770pxに変更。
width:770px;
(6) /* Articles */ .articles部分
・124行目のwidthを変更。今回、#containerの幅を770px⇒1000pxに変更したので、ここも、230px(=1000px - 770px)増やして、540px⇒770pxに変更。
width:770px;
(7) /*-----Footer-----*/ #footer部分
・506行目のwidthを770px⇒1000pxに変更。
width:1000px;
21. 編集後のスタイルシートを保存（テキストエディタ）
22. 編集後のスタイルシートをコピー（テキストエディタ）
23. ブログのスタイルシート編集画面に、編集後のスタイルシートを貼り付け
24. ブログのスタイルシート編集画面で「保存」をクリック
【参考URL】
・この記事の元になっているM-1さんの記事(2009-12-03 06:50投稿)
http://blog.so-net.ne.jp/pc-tips/layout
・CSSセレクタ(タグ)一覧 (So-netブログのマニュアル）
http://blog-help.blog.so-net.ne.jp/css_tag
・とほほのWWW入門（スタイルシートの参考に）
http://www.tohoho-web.com/www.htm
【使ったツール】
・JTrim
フォトレタッチソフト。jpegファイルのサイズ変更に使用。
http://www.woodybells.com/jtrim.html
・DF(テキストファイル比較）
・xyzzy（テキストエディタ）
ではでは。。
nice! ありがとうございます。
[__猫]
by cheese999 (2013-02-24 22:21)