オタクの戯言

オタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログでコピーライトを表示する際に最下部の余白を無くす方法

スポンサーリンク

はじめに

当ブログにお越しいただき恐悦至極にございます。あにおです。


f:id:aniota-alvarado:20180514235131j:plain

ブログをパクられるという問題を意識したときに、取れる方法として「コピーライトを表示しておく」ことが考えられます。

直接的な効果はあまりないとしても牽制にはなりますし、何かあった時のために権利の帰属主体を明示しておくのは悪いことではないはずです。

そこで、今回はその方法について調べる過程でフッタの最下部に余白が出てしまうという問題に直面したので、その解決方法などを書いていきたいと思っています。


それでは、最後までお付き合いいただければ幸いです。

フッタにコードを貼り付けるだけだと余白ができてしまった

コードについてはうえの(id:uenoyou111)さんが運営している「うえのブログ」を参考にさせていただきました。

サイトにて説明されている通りやればできますが、一応こちらでも触れておきます。

まず、1つ目のコードを[ダッシュボード]→[デザイン]→[カスタマイズ]→[フッタ]に貼り付けて[変更を保存する]と進みます。

続いて、2つ目のコードを[ダッシュボード]→[デザイン]→[カスタマイズ]→[デザインCSS]に貼り付けて[変更を保存する]でおそらく一番下に表示されているはずです。


この2つの関係としては、まず1つ目のコードでコピーライト表記自体をブログに表示させるようにして、2つ目のコードで表示したもののデザインを整えるという関係だと思います。


ちなみに、2つ目のコードの

padding: 20px;

という部分の数字を変更すると帯の太さが変わりますし、

font-size: 14px;

という部分の数字を変更すると文字の大きさが変わります。



もちろんそのままでも十分目的を果たせるのですが、私の場合は最下部に帯と同じ幅の余白ができておりどうしても気になってしまいました。

そこで、この余白をどうにか除去できないかと考えたのですが、今思えばなんて余計なことを・・・と後悔するほどに調整に苦労しました。

フッタを最下部(一番下)に表示するためのコード

基本となるコードについては、株式会社WEB企画さんの「ウェブ企画ラボ」を参考にさせていただきました。

掲載されているCSS用のコードをコピーライト表記用に一部変更して、[デザインCSS]に以下のコードを貼り付けます。

#copyright {
    position: fixed;
    bottom: 0;
    width: 100%;
}

自分なりに調べてみて、「#copyright」というのがフッタに貼り付けたコードを指定することになり、「bottom: 0;」とすることで余白部分を削除できるみたいです。

ちなみに、「height: 100px;」を付けたままにしてしまうと高さを指定したことになり、結果として帯が下に伸びてしまうのでカットしています。

おわりに

元々あるコードをあれこれいじってみたり、調べて使えそうだと思ったコードを貼り付けたりとあれこれ試したものの、中々上手くいかず相当苦労しました。

もっとも、当ブログでは使用しているテーマを作成してくれたかたがコードを載せてくれていたのでそれを使っています。

今回の方法を試しているのはリンクに載っている「FREE TO WRITE」というサブブログのほうなので、試しにどんな感じになっているか覗いていただければと思います。



長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

Copyright © 2016-2018 オタクの戯言 All rights reserved.