ブログ関連 ブログの改造
てぃーだブログテンプレート簡単カスタマイズ:ヘッダー画像①
今回は、てぃーだブログテンプレートの
「[sp-21] 専科特別テンプレート_2カラム」で使用されている
レイアウト設定(ヘッダー画像)部分を変更したいと思います。(⌒-⌒)ニコニコ...
前回は、このページの上へ部分に設定されている
背景画像ファイルを削除する方法を紹介しましたが、
今回は、レイアウト設定部分に設定されている
ヘッダー画像ファイルの変更方法を紹介します。
下記が
「[sp-21] 専科特別テンプレート_2カラム」の
レイアウト設定(ヘッダー画像)部分です。(⌒-⌒)ニコニコ...
【レイアウト設定(ヘッダー画像)部分:背景画像ファイル変更前】
【スタイルシート】変更前
/* レイアウト設定 */
#container{
padding: 0;
width: 100%;
background-image: url(http://admin.ti-da.net/_img/hadasenka/bg_illust.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
}
今回、準備した画像は、
上記の変更前のヘッダー画像ファイルと同じサイズ(1,270px × 365px)です。
【レイアウト設定(ヘッダー画像)部分:背景画像ファイル変更後】
【スタイルシート】変更後
/* レイアウト設定 */
#container{
padding: 0;
width: 100%;
background-image: url(//img01.ti-da.net/usr/blogstyle/img_1270x365.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
}
下記の、赤文字部分で、ヘッダー画像ファイルの設定をしています。
背景画像の指定:変更前
background-image: url(http://admin.ti-da.net/_img/hadasenka/bg_illust.jpg);
背景画像の指定:変更後
background-image: url(//img01.ti-da.net/usr/blogstyle/img_1270x365.jpg);
今回は、ヘッダー画像ファイルの設定を変更するだけでOKです。
上記のソースコード(青文字)に変更しただけです!∑( ̄ロ ̄|||)なんと!?
もちろん、画像ファイルは、事前に準備して、アップロードしなければいけませんけどね~♪
皆さんも、いろいろと画像を用意して、
試してみると楽しいですよ~♪p(*^-^*)q がんばっ♪
実際の表示は、テスト表示用ブログの
『ブログをカスタマイズ!「ブログスタイル」』で!
上記をクリックすると表示されますよ~♪(⌒-⌒)ニコニコ...
皆さんも、この機会にカスタマイズしませんか?
- 関連記事
- 『てぃーだブログテンプレートの簡単カスタマイズをスタート!』
- 『てぃーだブログテンプレート簡単カスタマイズ:テンプレート選択』
- 『てぃーだブログテンプレート簡単カスタマイズ:ソースコード①』
- 『てぃーだブログテンプレート簡単カスタマイズ:ソースコード②』
- 『てぃーだブログテンプレート簡単カスタマイズ:背景①』
- 『てぃーだブログテンプレート簡単カスタマイズ:背景②』
- 『てぃーだブログテンプレート簡単カスタマイズ:背景③』
- 『てぃーだブログテンプレート簡単カスタマイズ:フッター』
- 『てぃーだブログテンプレート簡単カスタマイズ:記事タイトル』
- 『てぃーだブログテンプレート簡単カスタマイズ:サイドタイトル』
- 『てぃーだブログテンプレート簡単カスタマイズ:左サイド』
- 『てぃーだブログテンプレート簡単カスタマイズ:このページの上へ』
- 『てぃーだブログテンプレート簡単カスタマイズ:ヘッダー画像①』
- 『てぃーだブログテンプレート簡単カスタマイズ:ヘッダー画像②』
- 『てぃーだブログテンプレート簡単カスタマイズ:ヘッダー画像③』
↓ 只今、ランキング参加中なので、クリックをお願いしま~す!(⌒-⌒)ニコニコ...
[PR]
minne(ミンネ)はハンドメイド作品のオンラインマーケットです。
手作り作品のネット販売が、月額利用料「0円」で行えます。
お金のやりとりはminneが代行するので、初めての方でも安心です♪
パソコン、スマホどちらからでも
すぐにあなたの作品を販売できるminne(ミンネ)はこちらから。
エステルームeclaroから宮里です。
実は、今のブログのヘッダーの写真を変えたく、いろいろ調べてるのですが、なかなか上手くいかないです。
ぜひ教えていただきたくコメントしました。
ヘッダーの写真を大きく一枚にしたいのですが、どうしても3分割になってしまいます。スタイルシートを変えればいいのですか?
はじめまして、たーちゃんパパで~す♪
コメント、ご質問ありがとうございます。
ヘッダー写真の変更に挑戦しているようですが・・・
実際に使用されているテンプレート名を教えて頂かないと、
何とも、アドバイスができないので・・・( ̄ー ̄;)アレ??
できましたら、使用しているテンプレート名を教えてください!
また、通常、ヘッダー写真(画像)を変更する場合は、
現在、設定されている写真(画像)サイズであれば、
問題なく表示されるのですが・・・アレレレ!?(・_・;?
写真(画像)の横幅サイズが小さくなると横にリピートされたり、
縦サイズが小さければ、縦にリピートされたりする場合が
ありますので、事前にヘッダー部分の設定確認が必要です。
このご質問に対しての解決策や手順等を記事として、
紹介したいと思いますので、もう少し、詳しく教えて頂けないでしょうか?
①使用しているテンプレート名は?
②変更したい写真(画像)サイズは?
よろしくお願いします。☆ヽ(▽⌒*)よろしぅで~す♪