IT the Best
はてなブログの一番下にある本当のフッターは、はてなブログPROでないと簡単にはカスタマイズできません。(下の写真の文字がある部分)
(JavaScriptファイルを別で作成して、読み込ませる方法ではカスタマイズできる。多分)
はてなブログPROになれば、フッターの非表示ができるため、私はそれを利用してフッターのカスタマイズをしました。
ステップ１
まず、非表示にする前に開発者ツールを開いて<footer id="footer" ...>の要素をコピーします。開発者ツールの開き方は、クロームの場合右クリックをして検証から開けます。
コピーしたらフッターを非表示にします。
ステップ２
自分のブログのデザインのカスタマイズで、フッターを選択します。そこに、コピーしたフッター要素を貼り付けます。
これで、一番下にあったフッターのカスタマイズができます。
フッターによくあるコピーライトなどの記入がフッターにできます。
フッターのカスタマイズができない理由
- はてなブログ側でフッターのカスタマイズが用意されていないこと。
- HTML記述欄でJavaScriptで無理にカスタマイズしようとしても、HTMLが記述できるところがフッターより前に位置しているので、フッター要素の取得ができない。(※おそらくですができません。)
//追加:2019/5/29
フッター要素の読み込みが完了した後に処理をさせればできる。
//
他の方法
別で作成したJavaScriptファイルを読み込ませれば、はてなブログPRO関係なくカスタマイズができると思います。ただ、そのファイルはインターネットに公開しなければならないので、サーバーに置くなどしなければいけません。
//訂正:2019/5/29
別ファイルで作成したところで、ページが読み込まれる前(フッター要素が読み込まれる前)に処理をさせていたらできませんでした。
今回のフッターをカスタマイズするというお題では、フッターが読み込まれてから処理をさせれば、はてなブログPRO関係なくカスタマイズすることができます。
ページが読み込まれてから処理を実装する方法(JavaScript)
<script>
window.onload = function() {
// ページが読み込まれてから実行したい処理
}
</script>別ファイルでもはてなブログ側で直接書く方法でも、どちらでもできます。ダメなのは、読み込まれる前に処理をさせるからでした。
もしフッターより下に書ければ、別ファイルでも直接書く方法でも、「読み込みが終わってから」という条件処理をさせなくても、フッターの要素を操作することができます。
//
私は、現在HTML記述欄に直接記入しているのですが、カスタマイズ量が増えると管理が大変になるので別で用意する方がいいのかもしれません。ついでにCSSも。
それでは、良いプログラミングライフを。
