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

はてなブログ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;
}*/

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

PC版個別記事フッタ ⇩