ブログ関連 ブログの改造
てぃーだブログ・オリジナルテンプレートの作成方法④
今回は、前回作成したオリジナルテンプレートを改造して、テスト表示用ブログ
『ブログをカスタマイズ!「ブログスタイル」』に適用してみたいと思います。
「オリジナルテンプレート 3カラム(サイドバー左右)」の場合は、
記事を表示する部分が狭くて、読みにくいので
ブログの横幅を拡大する方法を紹介したいと思います。
今回は、ブログの横幅を150px拡大する方法を紹介したいと思います。
【画像イメージ】:改造前
【スタイルシート】:改造前
/* =================================== */
/* レイアウト設定 */
/* =================================== */
#container{
text-align: left;
padding: 0px;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
color: #6699ff;
}
/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 200px;
width: 750px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_750x200.jpg);
}
/* ブログの配置 */
#content{
width: 370px;
padding: 10px;
float: right;
margin-right: 10px;
}
/* ブログ外枠 */
.blog{
margin-top: 0px;
margin-bottom: 15px;
overflow: hidden;
width: 350px;
}
~ ソースコード一部省略 ~
/* 記事本文 */
.main{
padding: 10px;
margin: 0px;
overflow: auto;
font-size: 87%;
line-height: 150%;
width: 330px;
}
【画像イメージ】:改造後
【スタイルシート】:改造後
/* =================================== */
/* レイアウト設定 */
/* =================================== */
#container{
text-align: left;
padding: 0px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
color: #6699ff;
}
/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 200px;
width: 900px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_900x200.jpg);
}
/* ブログの配置 */
#content{
width: 520px;
padding: 10px;
float: right;
margin-right: 10px;
}
/* ブログ外枠 */
.blog{
margin-top: 0px;
margin-bottom: 15px;
overflow: hidden;
width: 500px;
}
~ ソースコード一部省略 ~
/* 記事本文 */
.main{
padding: 10px;
margin: 0px;
overflow: auto;
font-size: 87%;
line-height: 150%;
width: 480px;
}
上記の赤字が変更及び、追加(改造)部分です。各「width」 を「150px」、増やしました。
数値を変えることで、横幅の調整が可能です。
※事前に画像を準備して下さい。(ヘッダーサイズ:横900px 縦200px )
実際にオリジナルテンプレートを、テスト表示用ブログ
『ブログをカスタマイズ!「ブログスタイル」』に適用しました。
皆さんも、チャレンジしてみては、いかがでしょうか!?p(*^-^*)q がんばっ♪
【免責事項について】このソースコードの使用に関しては、限られたテスト環境での動作確認などは行なっていますが、すべての環境に対応したものではありませんので、恐れ入りますが、使用に関しては自己責任でお願い致します。
↓ 只今、ランキング参加中なので、クリックをお願いしま~す!(⌒-⌒)ニコニコ...
[PR]
minne(ミンネ)はハンドメイド作品のオンラインマーケットです。
手作り作品のネット販売が、月額利用料「0円」で行えます。
お金のやりとりはminneが代行するので、初めての方でも安心です♪
パソコン、スマホどちらからでも
すぐにあなたの作品を販売できるminne(ミンネ)はこちらから。
自分の写真書き出ししてサイズを900×546だったかな、に変更してアップロードして、いざカスタム画面で上の通りに数字を900にしてみたいのですが、プレビューで確認すると720幅のサイズのままで拡大した所が同じ写真の左端で埋まっています。。
どうしたら900サイズにキレイに写真を入れきれるのでしょうか?
アップロードの時点で720サイズにされてしまうような気もするのですが、、、
わかりにくい説明ですみません。
ぜひ指導お願いします。
はじめまして、(⌒-⌒)ニコニコ...
そうですね!
アップロードで、問題があるかもしれませんね?
(または、画像のリサイズに問題があるのでは?)
私が、その画像を確認したところ、
750 x 498 のサイズになっているようですが・・・
アップロードは、どうのようにしているのですか?
[てぃーだブログ 管理画面]⇒[画像一覧]から、
”オリジナルサイズ”で、アップロードしていますか?
それから、スタイルシートの設定も、必要ですよ!
(/* ブログタイトル・概要 */の部分です!)
ご確認下さいね!p(*^-^*)q がんばっ♪
僕も上記のような現象が起きて写真が大きくならずに大きくした部分は左や下の写真がくっついてしまうんですがどうすればいいでしょうか?
はじめまして、(⌒-⌒)ニコニコ...
ご質問、ありがとうございます。
てぃーだブログ「オリジナル★テンプレートの作成」では、
画像サイズ(横幅)が750pxに固定されてしまうようなので・・・
再度、[てぃーだブログ 管理画面]⇒[画像一覧]から、
同じ画像を”オリジナルサイズ”で、上書きアップロードして下さい。
オリジナル画像が、横900px x 縦200px であれば、
ヘッダー部分に、ピッタリと表示されると思いま~す♪
たぶん・・・(=⌒▽⌒=) ニャハハハ♪
もし、それで、上手くいかないようであれば、
ブログ記事で、画像をつけて、詳しく説明したいと思います!(⌒-⌒)ニコニコ...