Home > FC2ブログ > basic_white > basic_whiteテンプレート 大きな画像のヘッダーデザイン

basic_whiteテンプレート 大きな画像のヘッダーデザイン

 basic_whiteテンプレートのヘッダーに大きな横長の画像を表示するデザインです。

 最上部にブログタイトルを配置するのでメニューにトップページへのリンクを追加することを推奨します。

1. スタイルシート

[ サンプルページ ]

 スタイルシートに上記コードを追加します。色を選択すると色が変わります。サンプルページをクリックするとサンプルテンプレートが開きます。

2. HTML

 場所はCtrl+Fキーで『id="header"』を検索。以下の強調部分のコードを追加します。

<div id="header"><div id="header-title">
  <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
  <p><%introduction></p>
</div></div><!-- /header -->
<div id="headerwrap"><div id="headermenu">

(省略)

</div></div>
<div id="wrap">

 以上で完成です。

ヘッダー全体に背景画像を入れるのカスタマイズを行っている場合はそちらの「変更点1:HTML」と「変更点2:スタイルシート」で追加したコードなどを削除してください。

画像の差し替え方法

 [1]で追加したスタイルシートの以下のアドレスを表示したい自分の画像アドレスと入れ替えてください。

background: #000000 url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic-white-plant22.jpg) center 32px no-repeat;

 テンプレートが初期状態のままであれば、用意する画像は横幅1200px、高さ270px程度になります。

 横幅を変更したかどうかわからない時はスタイルシートにあるContent Widthのmax-widthの数値を確認してください。この数値が「1100」となっていれば、横幅1100pxの画像がピッタリのサイズになります。「1300」なら横幅1300pxの画像です。

#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 800px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 802? "800px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
}

 画像の高さは[1]で追加したスタイルシートの「padding: 0 0 300px;」の「300」を増減させることで調整できます。高さがないヘッダー画像を使用する場合は数値を250pxなどに減らしてください。

#container #header {
  padding: 0 0 300px;

 画像の調整がどうしても難しい場合は以下の強調部分のコードを追加してください。ただしこれはIE8以下(XP)のブラウザには適用されないのでご注意ください。

#container #header {
  background-size: cover !important;
  padding: 0 0 300px;

※画像が綺麗に収まらない場合はリサイズ・切り取りなどをご自身で行ってください。

 メニューの背景に使用されている画像はダウンロード(右クリック名前を付けて保存)して自分のブログにアップロード、アドレスを差し替えることを推奨します。

#headerwrap {
  border-top: 1px #ffffff solid;
  background: #fafafa url(アップロードし直した画像アドレス);

その他背景色などの変更

 記事タイトル部分(最上部)の背景色は以下の部分で変更できます。

#header-title {
  background: #4488bb;

 画像の両サイドの背景色は以下の部分で変更できます。

background: #000000 url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic-white-plant22.jpg) center 32px no-repeat;

 ブログ説明文を非表示にしたい時は以下の強調部分を追加。

#header #header-title p {
  display: none;
  font-size: 11px;

 タイトルと説明文の文字サイズは「font-size: 16px;」「font-size: 11px;」の数値で調整。

 メニューにHOMEリンクを追加する場合は、HTMLにある記事一覧のリンク前にHOMEのリンクコードを追加してください。ヘッダメニューにリンクを任意の横幅で追加設置する方法でも設置できます。

<p class="archives"><a href="<%url>">HOME</a></p>
<p class="archives"><a href="<%url>archives.html">記事一覧</a></p>

ヘッダー全体をトップページへのリンクにする

 HTMLにある「</head>」の前、script部分に以下の強調部分を追加してください。

jQuery("#header,#header-title").bind("click",function(e){if(this.id==="header-title"){e.stopPropagation();}else{location.href="<%url>";}});

  });
</script>
</head>

 カーソルの形状を変える時は[1]のスタイルシートに以下の強調部分を追加。

#container #header {
  cursor:pointer;

#header-title {
  cursor:auto;

ページが表示される度にランダムで画像を表示する

 HTMLにある「</head>」の前、script部分に以下の強調部分を追加してください。以下のようにすると4枚の画像がランダムで表示されます。[サンプルページ](リロードする度に4枚の中から1枚を表示)

var image = [
  "http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic-white-plant22.jpg",
  "http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic-white-ume4.jpg",
  "http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic-white-sky17.jpg",
  "http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic-white-bird4b.jpg",
0];jQuery("#header").css("background-image","url("+image[Math.floor(Math.random()*(image.length-1))]+")");


  });
</script>
</head>

 アドレス部分が表示される画像候補になります。これを入れ替えてください。表示候補を増やす場合は「"画像アドレス",」の行をさらに追加してください。減らす場合は行ごと削除してください。

※画像を入れ替わるように順番に表示することはできません。

※こちらで用意しているサンプルのヘッダー画像はそのまま利用しても構いませんが、basic_whiteのヘッダー用として公開しているものになりますので、ヘッダー画像以外の用途で使用したり、別のテンプレートで使用する場合は写真素材配布ページの利用規約が適用されますのでご了承くださいませ。

関連記事
スポンサー リンク
コメント
#297 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#298 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#322 : No title
「ヘッダー全体をトップページへのリンクにする」に関してです。
IEだと正常に動作するのですが、Firefoxだと、カーソルは変化しますが、クリックしてもトップページに移動しません。Firefoxでも正常に動作させるには、どうすれば良いでしょうか。
#323 : No title
上のコメントを投稿した者です。どうやらFirefoxだと、リスト表示とグリッド表示の切り替えすらできないようです。Firefoxとは相性が悪いのかもしれませんね。
#325 : No title
ヘッダーの最上部(色等を決めれる部分)のみを入れる場合は、
#header-title {
background: #000000;
height: 32px; line-height: 32px;
margin:0 auto; padding: 0 0 0 35px;
text-align:left;
overflow: hidden;
}

で宜しいでしょうか。やってみたのですが、上手く
行きませんでした;;

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered