●掲載ソースを追加して正しく表示されないときは次を確認ください。
・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。
・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。
●画像は説明用のイメージサンプル画像です。
実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。
●CSS/HTMLソースの行数の番号/色は説明用です。
実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。
ヘッダーの表示内容
ヘッダーの表示内容の変更方法を説明します。
※クリックすると該当箇所を表示します
１．ヘッダー画像を入れる
この説明はアップデート版（2015-12-10以降のリリース分）から適用します
書き替えしたメインCSSの●ヘッダー&グローバルメニューから次の箇所を見つけてください。
/*ヘッダー内側 : 画像利用のサイズ指定は 縦幅 width:900px; 縦幅 height:200px; 等を追加*/
#header-in {
clear: both;
overflow: hidden;
border: solid 0px #d1d1d1;
background: none;
}
/*スマホ・タブレット用ヘッダー画像調整*/
@media screen and (max-width: 800px) {
/* #header-in {height: 0px;} /*ヘッダー画像 780px÷横幅px×縦幅px*/
}
@media screen and (max-width: 670px) {
/* #header-in {height: 0px;} /*ヘッダー画像 650px÷横幅px×縦幅px*/
}
@media screen and (max-width: 415px) {
/* #header-in {height: 0px;} /*ヘッダー画像 395px÷横幅px×縦幅px*/
}
/*タイトルと説明文を横並び*/
.header-l {width: 100%; float: left;} /*左側:タイトル:横並びは50%*/
.header-r {width: 100%; float: right;} /*右側:説明文 :横並びは50%*/
/*サイトタイトルの文字*/
.blog-title {
padding: 0 0 0 0;
text-align: left;
}
/*サイト説明文の文字*/
.blog-intro {
padding: 0 0 0 0;
text-align: left;
}
【１】メインCSSに画像ソースを入れる
6行目の background: none; を次の記述に変更してください。※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
background: url(画像のURL) no-repeat; width: 900px; height: 200px;
※上記は画像サイズが横900px・縦200pxの場合の入力例です。
※画像URLの後にある no-repeat は画像を繰り返さないの指定です。
画像を繰り返すときは no-repeat を削除ください。
【２】タイトルと説明文の位置・文字色を調整する
文字位置の調整
27行目と33行目の padding: 0 0 0 0; を変更します。数値は左から 上余白 右余白 下余白 左余白 となります。
(例：padding: 10px 10px 0 10px;)
文字色の調整
ヘッダー画像によってはタイトルや説明文の文字色の変更が必要になります。文字色を白にするときは、次の記述を、35行目の下に追加してください。
※2016-01-19 11:00 ソース更新
.blog-title a,.blog-intro {color: #fff;}
【３】スマホ・タブレット用の画像縦幅の指定をする
画像の縦幅を指定するため、スマホやタブレットでは、画像が縦に間延びして表示されます。それが気になるときは、次の変更をして画像の縦幅を指定ください。
11行目
/* #header {height: 0px;} /*ヘッダー画像 780px÷横幅px×縦幅px*/
記述の頭の /* を削除して、height: 0px; → 計算した数値（四捨五入）に変更します。例えば、画像が横幅900px、縦幅200pxならば、173pxになります。
14行目
/* #header {height: 0px;} /*ヘッダー画像 650px÷横幅px×縦幅px*/
記述の頭の /* を削除して、height: 0px; → 計算した数値（四捨五入）に変更します。例えば、画像が横幅900px、縦幅100pxならば、108pxになります。
17行目
/* #header {height: 0px;} /*ヘッダー画像 395px÷横幅px×縦幅px*/
記述の頭の /* を削除して、height: 0px; → 計算した数値（四捨五入）に変更します。例えば、画像が横幅900px、縦幅100pxならば、66pxになります。
２．リンクありのヘッダー画像を入れる
ブログタイトルや説明文の表示があるヘッダー画像を入れて、さらに、
画像にトップページのリンクを貼るときはメインHTMLで変更します。
スマホやタブレットでは、自動で画像サイズが調整されますので、CSSの変更は不要です。
書き替えしたメインHTMLから次の箇所を見つけてください。
<!-- ▼ブログタイトル 開始▼ --> <div id="header-outer"><div id="header-in"> <div class="header-l"> <p class="blog-title"><a href="<% blog.page_url -%>" title="<% blog.title -%>"><% blog.title -%></a></p> </div> <div class="header-r"> <p class="blog-intro"><% blog.description -%></p> </div> </div></div> <!-- ▲ブログタイトル 終了▲ -->
↓ 下記に変更します。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼ブログタイトル 開始▼ --> <div id="header-outer"><div id="header-in"> <div class="header-l"> <p class="blog-title"><a href="<% blog.page_url -%>" title="<% blog.title -%>"><img src="画像のURL" alt="<% blog.title -%>" border="0" /></a></p> </div> </div></div> <!-- ▲ブログタイトル 終了▲ -->
※画像のURLは実際のURLに変更します。
画像サイズを調整するときは、この記述を、
<img src="画像のURL" alt="<% blog.title -%>" border="0" />
↓ 下記に変更します。
<img src="画像のURL" alt="<% blog.title -%>" border="0" width="900" height="100" />
※width="900"が横幅、height="100"が縦幅です。pxを付けない数値だけを入力します。
３．タイトルと説明文を横並びにする
下記図のようにタイトルと説明文を横並びにできます。
書き替えしたメインCSSの●ヘッダー&グローバルメニューから次の箇所を見つけてください。
/*タイトルと説明文を横並び*/
.header-l {width: 100%; float: left;} /*左側:タイトル:横並びは50%*/
.header-r {width: 100%; float: right;} /*右側:説明文 :横並びは50%*/
灰色行の記述の width: 100%; → width: 50%; に変更します。
４．検索BOXを非表示にする
この説明はアップデート版（2015-07-29以降のリリース分）から適用します
ヘッダーナビにある 検索BOX を非表示にする方法です。
書き替えした メインCSSの●表示制御 から次の箇所を見つけてください。
/*検索BOXの非表示は適用*/
/*
.kensaku {display: none;}
灰色行の記述の /* を削除ください。