［はてなブログ］トップと個別記事のフッターを同じ見えかたにするには？

はてなブログ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="https://〇〇jp/">

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

<img src="https://▲▲.jpg"～

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

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

©2025 ★★ All rights reserved.

★★にはブログ名を、、著作表記の部分です。
項目については適当に調整してみて下さい。

ポリシーや問い合わせなど、
付けながらも非表示にしてますが、不要なら消しても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;
}*/

保存する ⇨ 変更を公開するをクリック。

PC版個別記事フッタ ⇩

スマホ版個別記事フッタ ⇩

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

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