ぶろぐライフ~パソコン苦手なブログ初心者さんを全力でサポート~

パソコンは苦手だけどブログを始めたい人を全力で応援!15年間パソコン講師を勤めた私が苦手克服のお手伝いをします♪

【はてなブログ】フッターを作りコピーライトとプライバシーポリシーを記載

はてなブログにフッターを作りコピーライト載せよう

【はてなブログ】を使っていると自分のサイトは他の人達みたいに恰好良くないなぁ~って思った事ないですか?

はてなブログ無料版でも十分出来栄えの良いサイトができます。

が、有料(Pro)を利用している人は【ブログを育てる】ひとつとしてフッターのカスタマイズをおススメします。

 

元々表示されるフッターはProでは非表示にして自分の好みの背景色に【コピーライト】や【プライバシーポリシー】を載せましょう。

 

この記事通りにすると簡単にフッターが作れます。

カスタマイズしていくとブログが育ってる感を得れますよね。

 

 

- スポンサーリンク -  

 

フッターを作りコピーライトとプライバシーポリシー記載

このカスタマイズは【はてなブログPro】(有料)を利用しているサイトしか出来ません。

 

ココでは

  1. フッター作成
  2. コピーライトのみ記載
  3. コピーライトとプライバシーポリシー記載

をお届けします。

 

収益化を考えている人は、広告非表示になるProを検討される事をおススメします。

「読まれるブログ」は、はてなブログPro

 

はてなブログのフッター非表示

はてなブログには、標準で表示されるフッターがあります。

これは正直ダサイです(泣)。

 

背景色を変えたものの

  • Powered by Hatena Blog
  • ブログを報告する

は要らないなぁ、こんな感じで。

はてなブログのフッターを作ろう

 

まずこの部分丸ごと非表示にしちゃいましょう!

STEP
詳細設定で非表示
ダッシュボード【設定】ー【詳細設定】ー【ヘッダとフッタ】

はてなブログにフッターを作りコピーライト載せよう

はてなブログにフッターを作りコピーライト載せよう

どちらもチェックを入れて非表示するのが望ましいです。
STEP
【変更保存】
保存をする事を忘れないように!

 

フッターを作りコピーライト記載

標準のフッターを非表示し、まず新しいフッターを作成し【コピーライト】を記載しましょう。

 

ここでは<HTML>コードと<CSS>コードを適切な場所に貼り付けます。

【コピーライト】はリンクではないので簡単に出来ます。

 注意! 

 使用中のテーマでのカスタマイズはしてる?

上手く反映されない場合:
テーマ作成者発行【コード】を利用し既にカスタマイズしている

まずはコレを作成します。『フッターの高さ』は説明です(笑)
例1)コピーライトだけ表示

はてなブログ

STEP
<HTML>コードを貼る
ダッシュボード【デザイン】ー【スパナ】ー【フッタ】

はてなブログにフッターを作りコピーライト載せよう

右上のをクリックでコピーされます。


貼付けてから【***】部分を自分のブログ名に変更しましょう。
STEP
<CSS>コードを貼る
ダッシュボード【デザイン】ー【スパナ】ー【デザインCSS】

はてなブログにフッターを作りコピーライト載せよう



*<CSS>では文字装飾や位置、背景色や高さなどの設定をします。
注意  半角スペースの部分は修正時に詰めてしまわないように!
STEP
変更を保存
保存をし忘れないように

 

 背景色・文字色変更 

背景色や文字色は【#6桁英数字】となります。

WindowsとMac共通のwebカラー216色はこちらからどうぞ

【カラーコード】WinとMacで共通に存在する216色Webセーフカラー

「読まれるブログ」は、はてなブログPro

 

フッターに問い合わせとプライバシーポリシー追記

次に【コピーライト】に【問い合わせ】と【プライバシポリシー】を追加します。

この2つはリンクで別ページに飛ぶようにします。

 

例2)問い合わせとプライバシーポリシー追加

はてなブログにフッターに問い合わせとプライバシーポリシー追加

貼り方は上記と同じですので【コードのみ】を載せます。

 【HTMLコード】

あえて例のまま私のURLを載せています。

 変更箇所 

3行目:”ご自身のURL”

4行目:”ご自身のURL”

5行目:『maysun53.comぶろぐライフ』をご自身のブログ名

  注意:
https://www.***とhttps://****は違います。
wwwがあるのと無いのとでは別物になります。

 【CSSコード】

例1と同じものになります。

 

リンクの場合、文字色はテーマに依存するものがあります。

例で使用した背景色の場合、文字が見にくいですよね。

 

 

 

フッターに問い合わせとプライバシーポリシーにマーク追記

はてなブログのフッターにアイコン付きプライバシポリシー載せよう

見やすくするためにアイコンを付けてみました。

アイコンが付くと見やすくなりますね。

 

しかも可愛いアイコンでしょ?

これが有るのと無いのとでは見た目がかなり違いますよね。

 

記事内にも使えて邪魔にならないアクセントにもなるので私のお気に入りです。

使い方はこちらを参考にどうぞ!

【はてなブログ】誰でも出来る方法でアイコンフォント122種表示 

 

【HTMLコード】

 

 

 変更箇所 

4行目:”ご自身のURL”

6行目:”ご自身のURL”

7行目:『maysun53.comぶろぐライフ』をご自身のブログ名

  注意:
https://www.***とhttps://****は違います。
wwwがあるのと無いのとでは別物になります。

  【CSSコード】

例1と同じものになります。

 

フッターにブログアイコン追記

はてなブログにフッターに画像を載せよう

最後はこのブログでファビコンとして使用しているアイコンをフッターに載せます。

【画像】をフッターに載せると同じ事になります。

 

ファビコン設定していると見つけやすくなりますよ。

作り方も設定も簡単です。興味のある方はこちらをどうぞ!

【ブログ】サイトタグに目立つファビコンで差別化しよう 

 

【HTMLコード】

 

 

 変更箇所 

3行目:”飛びたいところのURL”

4行目:”画像が格納されているURL”

5行目:alt=”マウスを乗せると出てくる文言”

7行目:問い合わせのURL

9行目:プライバシポリシーのURL

10行目:『maysun53.comぶろぐライフ』をご自身のブログ名

  注意:
https://www.***とhttps://****は違います。
wwwがあるのと無いのとでは別物になります。

 

画像URL取得

はてなブログ記事内で画像を扱うには、【写真を投稿】を選択して貼り付ければOKです。

その写真は【フォトライフ】に保管格納されます。

そこから画像を引っ張ってくると画像が劣化した経験があります。

 

  【画像のURL取得方法】

  1. 記事作成画面に【写真投稿】
  2. 【HTML編集】からURL取得
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/****>

 

普通に記事に画像を投稿し【HTML編集】でURL取得する事をおススメします。

 

画像のURLが取得できれば<HTML>コードに貼り付け(差し替え)ます。

<width="○○" height="○○">部分で程よいサイズに変更可能。

 

- スポンサーリンク -  

 

フッターにコピーライトとプライバシーポリシー記載まとめ

はてなブログProを使っているのに標準のフッターを使うのは勿体ない!

この機会に【ブログ育て】の1つとしてサイトカラーに併せてフッターを作成し【問い合わせ・プライバシポリシー・コピーライト】そしてブログアイコンをいれてみてはどうでしょう。

にほんブログ村 ブログブログ ブログ生活へ 

f:id:maysun:20220106121849g:plain