ブログ関連 ブログの改造
てぃーだブログ・オリジナルテンプレートの作成方法⑤
今回は、ブログヘッダー画像の高さを拡大する方法を紹介します。
テスト表示用ブログ
『ブログをカスタマイズ!「ブログスタイル」』に適用しました。
今回は、ブログヘッダー画像の高さを100px拡大する方法を紹介します。
「オリジナル★テンプレートの作成 」の初期設定では、ブログヘッダー画像の高さが200pxになっているので、下記のブログヘッダー画像のハイビスカスの花びらがすべて表示できなかったので、表示させるために高さを100px調整したいと思います。
【画像イメージ】:改造前
【スタイルシート】:改造前
/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 200px;
width: 900px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_900x200.jpg);
}
【画像イメージ】:改造後
【スタイルシート】:改造後
/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 300px;
width: 900px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_900x300.jpg);
}
上記の赤字が変更及び、追加(改造)部分です。「height」 を「100px」増やし、
ブログヘッダー画像を変更しました。数値を変えることで、高さの調整が可能です。
※事前に画像を準備して下さい。(ヘッダーサイズ:横900px 縦300px )
実際にオリジナルテンプレートを、テスト表示用ブログ
『ブログをカスタマイズ!「ブログスタイル」』に適用しました。
同じ画像(写真)でも、カットによって印象が変わりましたね!
ヘッダー画像を変更することで、ブログの印象がかなり変わると思います。
皆さんも、チャレンジしてみては、いかがでしょうか!?p(*^-^*)q がんばっ♪
【免責事項について】このソースコードの使用に関しては、限られたテスト環境での動作確認などは行なっていますが、すべての環境に対応したものではありませんので、恐れ入りますが、使用に関しては自己責任でお願い致します。
↓ 只今、ランキング参加中なので、クリックをお願いしま~す!(⌒-⌒)ニコニコ...
[PR]
minne(ミンネ)はハンドメイド作品のオンラインマーケットです。
手作り作品のネット販売が、月額利用料「0円」で行えます。
お金のやりとりはminneが代行するので、初めての方でも安心です♪
パソコン、スマホどちらからでも
すぐにあなたの作品を販売できるminne(ミンネ)はこちらから。
はじめまして ゆ~き~です。
教えてほしいことがありましてコメントしました。
オリジナルテンプレートのカスタマイズについてですが、
どうしても750x200以上の画像がアップロードできません・・
スタイルシートにも
* ブログタイトル・概要 */
の
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_900x300.jpg);
の部分にも
bg_900x300
の部分が表示されません・・
分かりにくいコメントですいません・・
良かったらアドバイス頂ければ幸いです。
はじめまして、コメントありがとうございます。
返事が遅くなりすいません。m(_ _)m!!
早速ですが、この内容では、はっきりしたことは言えませんが、
たぶん、ゆ~き~さんは、「簡単投稿」で画像アップロードを
しているのでは、ないでしょうか?
そういう事であれば、下記の方法で試してみて下さい。
----------------------------------------------------------------
【画像アップロード方法】
事前に画像を準備し、「てぃーだブログ 管理画面」で、
左側「記事を書く」の中に[画像一覧]があるので、
クリックすると、「画像一覧」と「ファイル一覧」の
ページが表示されますので、
上部の「画像一覧」で、、
オリジナルサイズでファイルのアップロードすると、
下部の「ファイル一覧」に追加されますので、
表示の項目にある追加した画像をクリック、
新しいページで、実際の大きさの画像が
表示されますので、アドレスバーのアドレスをコピーして
スタイルシートの「background-image: url」に貼り付けて下さい。
----------------------------------------------------------------
恐れ入りますが、カスタマイズに関しては自己責任でお願い致します。
ゆ~き~さん、
カスタマイズ上手くできるといいですね!p(*^-^*)q がんばっ♪
お役に立てたでしょうか?
こちらとしても、お役に立てれば嬉しいで~す。(*⌒-⌒*)