［はてなブログ］ トップも個別記事でも共通のフッターにするには

はてなブログPro（有料版）では、
ブログヘッダーやフッターの表示・非表示が選べます。

ヘッダーフッターを選択できる有料はてなの画面

 

ま、ヘッダーといってもこの部分です。
タイトル上のバー部分…

タイトル上のバー表示画面

 

ブログタイトルのあるヘッダーじゃありませんで。。。有料版だと、このバーが非表示にできるってことです。

スタイルシートを駆使して、
このバー箇所も非表示にできるでしょうが;;
まずは前提として…のお話ということで😅

 

PCやスマホのフッターは、
トップページからだとページの最下部に、こんな感じで表示されます。

はてなブログのフッター画面

著作表示がよく載るココも、
カスタマイズで文言を変えられたりできる。

 

ところがマイ著作に変えたとして、、
各記事ページへ飛ぶとフッターはこんな感じ ↓

はてな個別記事のフッター画面

え~~なにやらズラズラと…
トップページと同じにできないの?!💧
と思っちゃった方へのカスタマイズです😁

 

レスポンシブデザインのチェック画面

前提として、
レスポンシブデザインはここにレ点を入れ、スマホにも反映させてね~というやり方になっており。

 

はてなのスマホカスタマイズな画面

PC版とスマホ版、
同じテンプレートになるので、スマホ用のカスタマイズは反映されません~とある。

問題は、、
フッター表示をトップと個別で同じにしたいんだけど??という😒

 

ならば、、、
独自にフッターを設置し、
それをスマホやPCに反映させてしまおう！✊
そんなカスタマイズです。

 

HTML

デザイン →🔧カスタマイズ →
フッターへ以下を入力します。

スパナマーク🔧のフッター箇所へ入力くださいね。

つまりPC用設定に記述します。
そしてレスポンシブなので、スマホにも同じように反映される。

<!--フッターコピーライト-->
<div class="footer">
<p><a href="https://〇〇jp/">
<img src="https://▲▲.jpg"
alt="サイト名" width="35" height="35"></a></p>
<!--<p><span class="blogicon-mail lg">&nbsp;</span>
<a href="">お問い合わせ</a>
|　<span class="blogicon-private lg">&nbsp;</span>
<a href="">プライバシーポリシー</a></p>-->
<p>©2025 ★★サイト名 All rights reserved.</p> </div>

 

<a href=” “>の” “には
自身のブログURLを入れてください。

<a href="https://〇〇jp/">
<img src="https://▲▲.jpg"

<img src=” “>の” “には
ブログアイコンのURLを入れてます。

アイコンをお持ちであれば、
はてなfotolifeに上げた画像を載せるのがやりやすいかと思います。

<p>©2025 ★★サイト名

★★にはブログ名を、、著作表記の部分です。

項目については適当に調整してみて下さい。
ポリシーや問い合わせなど付けてますが、不要なら消してもok

 

CSS

次にCSSを設置します。
デザイン →🔧カスタマイズ →
{ }デザインCSSへコードを記述。

PC版もスマホ版も、
元のフッター指定をいったんクリアし、
新たにクラス指定作って反映させる…というやり方やってみました。

/* 従来のフッター（個別版が長いので無効に） */
#footer {
display: none;
}

/* 新フッター（class指定にして設定） */
.footer {
font-family: "Arial Nova";
font-size: 13px;
color: #ffffff;
padding: 10px 0px 20px 0px;
}

/*.footer-address {
display: none;
}*/

/*.services {
display: none;
}*/

変更を保存するをクリック。

 

カスタマイズできたフッター画面

よっしゃーー😆
また他にもやり方あればこれからも…まずはこれで大丈夫なはずです。

これ…Pro版じゃなくてもコレでいけるんじゃないの?というツッコミはさて置き、、🤣

コメント