ナチュログ管理画面 キャンプ キャンプ 近畿 アウトドア&フィッシングナチュラムアウトドア用品お買い得情報

キャンプの日記です。

ブログカスタマイズでブログ愛を高めよう!ヘッダーの背景画像変更方法

テンプレート18

ブログカスタマイズでブログ愛を高めよう!ヘッダーの背景画像変更方法

ごく一部の方から支持を頂いている僕の公開しているテンプレートのカスタムネタです。
ブログのデザインを自分好みの見た目に変更してブログ愛を高めようシリーズです。

今回はナチュロガーさん定番のヘッダーの背景画像を変更しようです。
ブログのカスタマイズで一番お問い合わせいただくのもこの話題なので記事にしました。

ご利用の方でもうすでに変更されている方がほとんどですが今一度おさらいということで...

今回のカスタマイズは先日公開したテンプレート(ガーリー)(クール)共通の内容になっています。
その他のテンプレートでは方法が違いますのでご注意ください!


ぽちっと応援お願いします。

にほんブログ村 アウトドアブログ キャンプへ
にほんブログ村


人気ブログランキングへ

画像を用意しよう

まずは背景に使う画像を用意します。
とっておきの画像を用意してください。
ただ、注意が必要なのはこのテンプレートはPC画面で見ると背景画像がブラウザの画面左右いっぱいに広がります。
なのであまり小さい画像を使うとぼやけてしまいます。
大きい画像を用意しましょう。
1,920pxもあれば大丈夫。(ナチュログの画像アップロード最大サイズは2,040px)

用意した画像はナチュログの画像一覧にアップロードしておいてください。

ブログカスタマイズでブログ愛を高めよう!ヘッダーの背景画像変更方法

PCでのヘッダー画像の見え方なんですが、画面左右いっぱいに写真が広がるので写真全体を表示しようとすると↑の画像のように画面いっぱいが背景画像に占領されてしまいます。
トップの画像が大きすぎてあまり見た目的にもよくないですね。

ブログカスタマイズでブログ愛を高めよう!ヘッダーの背景画像変更方法

なので画像の上下を隠して(トリミングして)見える部分を小さくしています。
画像を用意する時は、こういった見え方になるということをちょっと覚えていてください。

スタイルシートに変更を加えます。

それでは用意した画像を表示されるようにテンプレートを変更していきます。スタイルシートに画像urlを貼り付けて高さを指定するだけですので、そんなに難しいことではないです。

  1. スタイルシートの該当部分を探します。
    • 97行目あたり(スマートフォン・タブレット共通の設定)
      /*ブログタイトル*/
      #header_top{
      height: 0;
      padding-top: 44.5%;/*ヘッダー画像の高さ→画像の高さ÷横幅×%を指定*/
      background: url(http://◯◯◯.jpg) 0 0 no-repeat;/*背景画像urlをurl()の中に入力*/
      background-size: cover;
      }
    • 967行目あたり(PC用の設定)
      #top_d {
      height: 0;
      background: url(http://◯◯◯.jpg) no-repeat 50% 80%/*2番めの80%で高さを調整*/
      background-size: cover;
      padding-top:350px;
      max-width:100%;
      }
  2. スタイルシートの探し出した箇所にある(http://◯◯◯.jpg)と書かれている所にアップロードしておいた画像のurlを入力します。
    ※()は消さないで!
  3. 続いて画像の高さを指定します。
    スマートフォン・タブレットの設定にはpadding-top: 44.5%;の44.5%という数値を用意した画像の(高さ÷横幅×100)%の数値を入力してください。
    PCの設定は単純に見栄えのいい数値を入れてください。
  4. 最後にPC用にだけ微調整が必要です。
    ↑にも書きましたがPC用は画像の上下を隠して(トリミングして)見える範囲を小さくしているので、80%と書かれている箇所を調整(→見える位置を上下に動かす)して、一番きれいに見えるように調整してください。

以上でテンプレートの更新は完了です。

おまけ...

ヘッダーの背景画像の変更方法についで問い合わせが多いのが、PC用の表示でヘッダーの背景画像がコンテンツの幅と同じにしたいというリクエストです。

ブログカスタマイズでブログ愛を高めよう!ヘッダーの背景画像変更方法

ナチュログの公式テンプレートなどと同じパターンのやつですね。

背景が画面左右いっぱいに広がる設定を頑張って考えたのに使っていただけないのは残念ですが...
変更方法をこちらに記しておきます。
(2017年1月23日以前にテンプレートをご利用の方は最新のスタイルシートに更新しておいてください)
2017年2月20日:設定方法に誤りがありましので訂正しました

  1. スタイルシートの該当部分を探して書き換えます。
    • 967行目あたり
      #top_d {
      height: 0;
      background: url(http://◯◯◯.jpg) no-repeat 50% 80%;/*2番めの50%で高さを調整*/
      background-size: cover;
      padding-top:350px;
      }
    • 上記を
      #top_d {
      max-width:1080px;
      }
      に書き換えてください。
  2. さらにその下にある
    • #header_top{
      border-radius: 10px;
      background-image: none;
      padding-top: 0;
      }
    • background-image: none;
      padding-top: 0;
    • を削除してください。

以上でテンプレートの更新は完了です。
テンプレートのカスタマイズはスタイルシートに詳しい方のみ行ってください。

テンプレートのダウンロードはこちらから

今回紹介したテンプレートのカスタマイズは、僕の公開しているテンプレートについての方法です。
僕の公開しているテンプレートはレスポンシブデザインで使っていただいている方からはスマフォやタブレットでとても見やすくなったと嬉しい声を頂いております。
よろしかったらどうぞw

バージョン3のテンプレート(クール)をご希望の方はこちらからどうぞ

バージョン2のテンプレート(ガーリー)をご希望の方はこちらからどうぞ

バージョン1のテンプレートをご希望の方はこちらからどうぞ

ナチュログと同じデザインのレスポンシブデザインテンプレートをご希望の方はこちらからどうぞ

最後に、僕はウエブデザイナーでも何でもございません。
趣味の領域で作成したテンプレートなので、テンプレート運用に関わるサポートはございません。
が、何かしらテンプレートの不具合があれば一緒に解決策を探っていきたいとは思っています。
このテンプレートで気になったことなどがあればお問い合わせください。

また、本職の方で「ここの記述はおかしい・ここはこうした方がいい」などアドバイスなどがあれば、大歓迎でお待ちしておりますので、どしどしコメントください。

お約束ですが、ご使用の際は自己責任でお願いします。
テンプレートの利用で不具合など生じても当方では責任は負えませんのでよろしくお願い致します。

また、このテンプレートは古いブラウザには対応していません。あしからずw





同じカテゴリー(テンプレート)の記事
この記事へのコメント
一部のファンですw

トップページの写真の入れ方アップありがとうございます。
これを参考にTryしてみます。

引き続き、いろいろお願いしますー

たいちちたいちち
2017年01月23日 21:08
私もファンです。(分かってると思いますがw)
サポートしないと言いつつ、きちんと質問に答えるあたりが大人ですね!

それはそうとヘッダーの星空写真が凄いですね!自分もこんな星空撮りたいです。

へりへり
2017年01月23日 22:35
こんばんは!
私もediさんのテンプレートどれも大好きです(^O^)

いろいろと試して、最新のガーリーのテンプレートに変更しました♪
そしてまた質問です(^^;

タイトルとサブタイトルの上下、左に移動は出来たんですが
画面右に移動が出来ません(泣)
そしてそれぞれが別々に移動できないんですが
どこをどうしたらいいですか?

お手すきの時にご教示お願いいたしますm(__)m

lulululu
2017年01月23日 23:37
ediさん画像調整のご教授ありがとうございます(^O^)
画面左右いっぱいに広がる設定も凄くクールで良かったのですが
画面いっぱいに適した画像が無かったのと
表示が重くなったので今回の画像調整のアドバイスをお願いしました(^_^;)

何はともあれediさんのテンプレでクールなブログになったので喜んでおります。
本当にありがとうございました!!
今後共よろしくお願いします!

次回のブログ記事にediさんの
テンプレを紹介させて頂いてもよろしいでしょうか?

レフアレフア
2017年01月24日 07:16
お世話になっております!
一部のファンです~

テンプレ変更してからますますブログ愛が増しています(笑)

ちょこちょこクールバージョン(星空)にしたり、がーリーにしたりいじりたいと思っているので今回の記事も参考になりました!

これからもよろしくお願いします~

ぴのこぴのこ
2017年01月24日 15:30
たいちち様コメントありがとうございます。

わかりやすくわかりやすく説明しようと考えて考えるほど難解な解説になった気がしますがいかがでしょうか(汗)

せっかくなので、このシリーズはもう少し続けてみようと思ってますんでお付き合いよろしくですw

ediedi
2017年01月24日 19:29
へり様コメントありがとうございます。

ありがとうございますw
まぁ、マイナー気味のネタですがこうして公開できるのもへりさんのおかげですw
今後ともよろしくおねがいしますw

ヘッダーの写真は自分でもまぁまぁ気に入っている写真でもあり悔しい写真でもあります(笑)
なぜかって。
それは、写真を撮影した時にへりさんの星空撮影の記事を読んでおけば、もっと納得の行く写真を撮れたはずという気持ちが強いからですw
年末のキャンプでへりさんの記事を参考にして撮影した星空をみて、今までモヤモヤってしてたところがスッキリ晴れた気がして...
今撮るともっと納得の行く写真が撮れるのではないかと邪な気持ちになっておりますw

ediedi
2017年01月24日 19:38
lulu様コメントありがとうございます。

テンプレカスタムにはまっておられますねw

ご質問の移動についてですが、移動はtop・right・bottom・leftで位置を決めます。
top:30px;なら上から30pxの場所 right:30px;なら右から30pxの場所という風に。
左に移動できて右に移動できないのならleft:-◯○px;という風にマイナスの値を入れるとか。
色々数値を入れて試してみていただけますか?

今回のテンプレートは知識のない人にも簡単に位置を調整できるように1箇所の設定でタイトルとサブタイトルの位置を設定できるようにしてますので、それぞれ位置を変えるにはスタイルシートの詳しい知識が必要ですので難しいと思います。
例えば...
タイトルだけを動かすには「 #top_d h1 」にスタイルを当ててやって、サブタイトルは「 #discription 」にスタイルを...。
この場合、「 #top_d 」にposition:relative;を設定しないといけないかもしれません。
そうなってくると、他の要素も色々変更しないといけなくなってくると思います。
みたいな。

僕の知識が趣味のレベルですのでお力になれなくってスイマセン。

ediedi
2017年01月24日 20:11
レフア様コメントありがとうございます。

今回の記事がお役に立てたようでなによりですw

紹介?
全然オッケーです逆にこっちからお願いしたいぐらいです(笑)。
僕のテンプレは再配布以外なんでもオッケーですよw

ediedi
2017年01月24日 20:15
ぴのこ様コメントありがとうございます。

ファンだなんて嬉しいお言葉w
作った甲斐があるというものです^^

女性の方のクールverもギャップがあっていいかもですね。
逆のギャップ(男性がGirly ver)は引かれる可能性大で危険ですが...

ediedi
2017年01月24日 20:17
お返事ありがとうございます!
タイトルとサブタイトルの関係分かりました(^O^)

別々で移動できないならバランスが悪くなってしまうし
今のデザインもステキで気に入ってるので
このままにしようと思います。

いつもご親切に教えていただき、ありがとうございます(^O^)

lulululu
2017年01月24日 22:57
lulu様コメントありがとうございます。

今回はお力になれなくてスイマセン(汗)
ヘッダーまわりは、レスポンシブデザインという性質上色々なデバイスで表示させないといけないので非常にややこしくなっていて現状僕ができる最善の表示方法だと思います。

おそらく、本業の方が見ればもっといい方法があると思いますが...。

今後もテンプレネタ続きますんでまたご訪問くださいね。

ediedi
2017年01月26日 01:01
初めまして!
他の方のブログでediさんのテンプレを拝見して、私もクールバージョンを使わせていただくことにしました^^よろしくお願いします♪

そしてこのクールバージョン、とっても素敵で気に入っているのですが、男前すぎなのでせめてタイトルだけはちょっと女子的配色に変更したいのですが、そういったことはできますか?

それからタイトルの写真をもう少し下に持っていくことはできますか?

それから(沢山すみません。)、記事の数をページの最後まで(ナチュロムのinformationのところまで)増やすことはできますか?


質問ばかりで恐縮ですが、お手すきの際に教えてくださると助かりますm__m

あっこたんあっこたん
2017年02月18日 19:10
あっこたん様コメントありがとうございます。

&テンプレご利用有難うございます!
お問合わせのブログタイトルの色の指定箇所は
.blogtitle a{ color:◯◯;}
という箇所です。
さらにその下の
.blogtitle a:hover{color:◯◯;}
が、マウスホバー時の色の指定ですので、ここでお好きな色を指定してください。

タイトルの写真→ヘッダー背景画像については、あっこたんさんのブログを調べてみたんですが僕が作った設定とは異なっているので、恐らくヘッダー背景画像を変更する際に間違ってしまっているのではないかと思います。
もう一度、スタイルシートをもとに戻して、この記事の通りに最初からやり直してみてはいかがでしょうか?
ちょっと、今のままだと画像を下に下げる方法が思いつかないです..。

トップページの記事の数を増やすのは、ナチュログの管理画面からブログ環境設定→表示内容の設定→記事の最大表示数のトップページで表示される記事数で表示する記事の数を設定できますよ。

スタイルシートは慣れないと難しいかもしれませんが頑張ってください!!

ediedi
2017年02月19日 00:22
ediさん、教えていただきありがとうございました!
タイトルの色変更や記事数を増やすことができました^^

タイトルの写真はもう一度テンプレートのコピペをやりなおしてみて、うーん、よくわからなくなってきましたが、とりあえずこれでいいです^^
重ねて申し訳ありませんが、タイトルの下のサブタイトルの色も変えられますか?
私の場合、背景の空色になじんでしまい見えづらく、できれば変えたいなーと思います。

カスタマイズ、楽しいですけど恐る恐るですね(笑

あっこたんあっこたん
2017年02月20日 00:44
あっこたん様コメントありがとうございます。

サブタイトルの色などの指定箇所は
#description
と書かれているところなので、ここに色の指定を追加してやってください。

あと、ヘッダー背景画像のところは

/*/////////////
パソコン
/////////////*/
@media all and (min-width: 801px){

と書かれている下に
#top_d {
max-width:1080px;
margin:3em auto;
}
と記述してみてください。

それと、ヘッダー画像の高さ→画像の高さ÷横幅×%を指定の数値が間違ってますよ。
あっこたんさんの用意した画像だと27.66%がちょうどいい数値だと思います(現在35%になってます)

ediedi
2017年02月20日 01:34
なかなかPCを開く余裕がなく、せっかく教えていただいたのに反応が遅くなり申し訳ありませんでした。
やっと教えていただいた内容でテンプレを修正することができました。
写真のサイズも適正に直していただき、ありがとうございます!

こう素敵なテンプレートだとブログに愛着が沸きますね^^
引き続きよろしくお願いします!

過去記事に失礼いたしました~。

あっこたんあっこたん
2017年02月26日 18:51
あっこたん様コメントありがとうございます。

うまく行ったようで安心しましたw
自分仕様のブログになっていくとホント愛着わきますよね。

今後もネタがあればテンプレネタ上げていこうと思ってますんで、またご訪問くださいw

ediedi
2017年02月26日 21:57
コメントください!

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。