はてなブログのブログ説明をヘッダー上に表示｜コピペOK

本ページにはプロモーションが含まれます。

自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。

はてなブログのヘッダーに表示される「ブログのひとこと説明」をヘッダー上に表示されるようにした他、ヘッダー下の間延びした空間を無くしました。

また、フッターのカスタマイズも載せておきます。

ご自由にコピペして使っていただいて構いません。

1. はてなブログ無料版ではヘッダーとフッターのカスタムは禁止されています。
2. はてなブログProの方のみお使いください。
3. 【参考】はてな利用規約 - Hatena Policies

当ブログのヘッダー

タブレット横表示（画面左上に説明）

タブレット縦表示（画面左上に説明）

スマホ表示（画面上に説明）

上の余白を拡張しているので本来のヘッダーの比率とは変わっています。

デフォルトの文字書式は無効にして、CSSで設定し直しています。

タイトル文字あり

いやいや、タイトル文字は消したくないんだよっていう場合、タイトル文字有りだとこんな感じです。↓

タブレット縦表示(タイトル有りver.)

余白拡張なし

上の余白を広げたくないんだよっていう場合、省スペースバージョンはこんな感じ。↓

タブレット縦表示(省スペースver.)

※掲載しているコードは適宜微修正しており、画像と完全に同じではない場合がございます。

当ブログのフッター

トップページへのリンク付きです。

※掲載しているコードは適宜微修正しており、画像と完全に同じではない場合がございます。

引用元

↓こちらのサイトで紹介されているコードを参考に作成しました。

みやもとメモ

【はてなブログ】ブログヘッダーのデザインを変更してみる（CSS対応） - みやもとメモ

Minimal Green

はてなブログのヘッダー、タイトル画像の設定について - Minimal Green

ぶろぐライフ

【はてなブログ】フッターを作りコピーライトとプライバシーポリシーを記載 - ぶろぐライフ～パソコン苦手なブログ初心者さんを全力でサポート～

デザインテーマ・設定など

はてなブログ：Pro

デザインテーマ：Smooth（デフォルト）

設定：レスポンシブデザイン

ヘッダー画像：透過PNG

◎管理画面→詳細設定からヘッダとフッタを非表示にする。

◎管理画面→基本設定から「ブログのひとこと説明」を書いておく。

◎デザイン設定→ヘッダーの表示設定を「画像とテキストを表示」にする。

ヘッダーのコード(説明のみ表示させる場合)

【デザインCSS】に貼るコード

#blog-title{
display:none!important;
}
#blog-title{
padding-top:42px!important;
font-size:0px!important;
}
#blog-description{
text-shadow:none!important;
font-weight:bold!important;
font-size:12px;
color:#3D2A00!important;
letter-spacing:0.3pt !important;
font-family: 'Lucida Grande','segoe UI',Verdana,Arial,sans-serif!important;
position:absolute!important;
left:24px!important;
top:15px!important;

margin-top:-3vw!important;

padding:px!important;

}

CSS解説

#blog-title{
display:noneでブログタイトルを非表示に!important;
}
#blog-title{
padding-top:ヘッダー上の余白の数値px!important;
font-size:0にしてヘッダー下の余白を消す!important;
}
#blog-description{↓以下ブログのひとこと説明をカスタム
text-shadow:noneでデフォルトの説明文の影を消す!important;
font-weight:文字を細くしたいならnormal!important;
font-size:文字サイズの数値px;
color:#文字の色(カラーコード)!important;
letter-spacing:文字と文字の間隔の数値pt !important;
font-family:字体!important;
position:absoluteで位置固定!important;
left:左端から数値で位置指定px!important;
top:上端から数値で位置指定0px!important;
margin-top:-上にはみ出す数値vw!important;

padding:文字の上下左右の余白の数値px!important;

}

• ・省スペースバージョンの場合、太字部分2箇所を抜きます。
• ・!importantを付けると他のコードより優先して反映させることができます。
• ・通常、CSSは下に追加したコードの指示が優先して反映されます。
• ・↓カラーコードはこのサイトで調べられます。
• WEB色見本 原色大辞典 - HTMLカラーコード

ヘッダーのコード(タイトルも表示させる場合)

【デザインCSS】に貼るコード

.header-image-enable #title {
}
#title a{
text-shadow:none!important;
font-weight:bold!important;
font-size:28px;
color:#3D2A00!important;
letter-spacing:1.5pt !important;
font-family:'Zen Maru Gothic','Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif!important;
position:relative!important;
text-align:center!important;
vertical-align:30px!important;
margin-left:-4.5vw!important;
}
#blog-title{
padding-top:42px!important;
font-size:0px;
}
#blog-description{
text-shadow:none!important;
font-weight:!important;
font-size:12px;
color:#3D2A00!important;
letter-spacing:0.3pt !important;
font-family:'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif !important;
position:absolute!important;
left:24px!important;
top:15px!important;
margin-top:-3vw!important;

padding:px!important;
}

CSS解説

.header-image-enable #title {
}
#title a{↓以下タイトル文字のコード
text-shadow:noneでデフォルトの影を消す!important;
font-weight:細字にしたいならnormal!important;
font-size:字の大きさの数値px;
color:#字の色(カラーコード)!important;
letter-spacing:文字間隔の数値pt !important;
font-family:字体!important;
position:relativeは相対位置!important;
text-align:centerで中央配置!important;
vertical-align:中央から位置を上下させる(-数値で下に下がる)px!important;
margin-left:-中央より左に移動する数値vw!important;
}

#blog-title{
padding-top:ヘッダー上の余白を広げる数値px!important;
font-size:0でヘッダー下の余白を無くすpx;
}↓以下「ひとこと説明」のコード
#blog-description{
text-shadow:none!important;
font-weight:bold!important;
font-size:12px;
color:#3D2A00!important;
letter-spacing:0.3pt !important;
font-family:'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif !important;
position:absoluteは絶対位置!important;
left:左端から数値で位置指定px!important;
top:上端から数値で位置指定px!important;
margin-top:-上にはみ出して配置する数値vw!important;

padding:文字の上下左右の余白の数値px!important;
}

• ・省スペースバージョンの場合、太字部分2箇所を抜きます。
• ・!importantを付けると他のコードより優先して反映させることができます。
• ・通常、CSSは下に追加したコードの指示が優先して反映されます。
• ・↓カラーコードはこのサイトで調べられます。
• WEB色見本 原色大辞典 - HTMLカラーコード

フッターのコード

HTMLとCSSの２箇所貼りつけます。

【フッタ】に貼るコード

<div id="footer-top"><p><a href="https://＊＊＊＊＊＊＊＊＊/"><span class="blogicon-home">&nbsp;</span>TOP</a>　
<div id="footer"> ©20×× ブログタイトル All rights reserved.</div>

HTML解説

<div id="footer-top"><p><a href="トップページのURL"><span class="blogicon-アイコンフォントのコード">&nbsp;</span>トップページを表す言葉</a>　
<div id="footer">著作権持ってますよっていう言葉</div>

• ↓アイコンフォントの一覧とコードはこちらで調べられます。

  【一覧表】はてなブログのアイコンフォントでブログの見やすさを向上させよう！ - みにまる。

【デザインCSS】に貼るコード

#footer {
padding-top:0px;
padding-bottom:18px;
margin:0px;
text-align: center;
background:none;
font-size: 12px;
color: #;
}
#footer-top {
padding-top:12px;
padding-bottom:0px;
margin:0px;
text-align: center;
background:none;
font-size: 12px;
}

CSS解説

#footer {↓著作権表示についてのコード
padding-top:上の余白数値px;
padding-bottom:下の余白数値px;
margin:周囲の余白数値px;
text-align: 中央に配置;
background:noneで背景色無し;
font-size: 文字サイズ数値px;
color: #文字の色(カラーコード);
}↓以下TOPについてのコードも意味は同じ
#footer-top {
padding-top:12px;
padding-bottom:0px;
margin:0px;
text-align: center;
background:none;
font-size: 12px;
}

• ・通常、CSSは下に追加したコードが優先して反映されます。
• ・上手く反映されない場合、「　; 」の前に「!important 」と入れると他のコードよりも優先して反映されます。
• ・↓カラーコードはこのサイトで調べられます。
• WEB色見本 原色大辞典 - HTMLカラーコード

以上ご参考になれば幸いです。

リンク