あっちの多趣味なそらら ヘッダーイラスト

あっちの多趣味なそらら ヘッダーイラスト

あっちの多趣味なそらら ロゴ

イラストを使ってオリジナルのフッターを作る方法【はてなブログ】

フッターをイラストにする タイトルロゴとナムナムくん
こんにちはです。あっちのそららです。
最近、ブログの最下部「フッター」のデザインを改良しました。



フッター部分は内容的にもデザイン的にも、それ程重要な部分ではないと思うので、ヘッダーのように大きなインパクトや効果を求める必要は無く、逆にフッターがヘッダーや記事よりも目立ってしまうと、ブログ全体のバランスが崩れてしまいます。


フッターを画像で構成する場合は特に、ブログのメインとなる部分と比較し、上手くバランスを取ることが必要になってきます。



フッターを改良した


前のフッターイラスト 散歩中のナムナムくん


改良前のフッター画像。
うちのマスコットキャラ、ナムナムくんのお散歩シーンを描いたイラストです。

あっさりと薄めの色で塗り、インパクトを抑えていましたが、イラストメインの当ブログでは少し物足りないと感じたので、作り直すことにしました。




新フッター 散歩を続けるナムナムくん

改良後。
構図はそのままで、ナムナムくんのデッサンを整えて色を濃くし、地面はヘッダーの素材を再利用しました。これでヘッダーとの統一感も出てきたかと思います。



今回は、当ブログのようにフッターを画像にする方法とコードをご紹介していきます。
コードの入力はコピペでOK!


既存のフッターを消す

初期状態では、フッターは下の画像のようになっています。

はてなブログのフッター初期状態

アイコンとブログ名、その下に「Powered by Hatena Blog|ブログを報告する」の文章が入ってます。色々とリンクが貼られてますが、あまり使わない…


この部分が必要ないという方は、デザインCSSに下のコードを追加してください。
フッターが丸々消えます。

/* 既存のフッターを消す */
#footer {
    display: none;
}




残したい文字がある場合は、下のコードを使用してください。

/* 既存のフッターを消す(文字のみ) */
#footer address {
    visibility: hidden;
}
#footer p {
    visibility: hidden;
}


「footer address」はアイコンとブログ名、「footer p」はその下の文章です。
フッターから消したい部分のみデザインCSSに記述しましょう。



HTML

当ブログでは初期フッターを丸々消して、ゼロから新しくフッターを作成しました。

まずはフッターにしたい画像を用意しましょう。
これが無いと始まらない!


はてなフォトライフへの行き方

画像ははてなフォトライフにアップロードします。


右クリックで画像アドレスをコピー


アップしたら、フッター画像を実寸大で表示させ、右クリックで「画像アドレスをコピー」を選択します。
これで画像URLをコピーできます。このURLはHTMLの記述に使うので控えておいてください。



フッターhtmlの記述場所

フッターを作っていきます。
上の画像を参考にデザイン画面の「フッタ」へ行き、記述欄に下記のHTMLコードを入れます。

<div id="footer1">
<img src="ここに画像URLを入れる" width="100%" height="auto">
</div>

<div id="copyright">ここにコピーライトの文章を入れる</div>


作成するフッターの構成は「画像」と「コピーライト」の二つです。

「ここに画像URLを入れる」の部分を、先程コピーした画像URLに差し替えてください。

「ここにコピーライトの文章を入れる」の部分も、ご自身のブログのコピーライトに変えましょう。


コピーライトの書き方が分からない方は、下の記事が分かりやすく参考になります。自分も勉強になりました。
あと余談ですがデザインが凝っているサイトで面白いです。

liginc.co.jp




CSS

最後はCSSでフッター内要素の微調整をします。
またデザインCSSに戻り、コードを追加しましょう。

/* 新しいフッターの設定 */
#footer1 {
    display: block;
    background-size: cover;
}

/* コピーライト */
#copyright {
    text-align: center; /* 文字を中央揃え */
    background-color: #ffffff; /* 背景色 */
    font-size: 12px; /* 文字サイズ */
    color: #000000; /* 文字色 */
}


これでフッター画像は画面幅に合わせて自動でサイズ調整してくれます。


必要最低限のコードだけ紹介しましたが、好みに合わせて要素は自由に追加できるので、ブログ全体のバランスを保ちつつ、良いフッターに仕上げていきましょう。


自分の場合は、とにかくイラスト描きたいのと、個性のあるブログにしたいというのがあり、よくあるフラットなデザインのフッターと比べると派手です。でも気に入ってます。

あらゆる所にオリジナリティーを求めるあっちのそららさん。


ヘッダーもフッターも一段落。
明日もまた創作が続きます。


お散歩ナムナム並べてみた

 

前回のカスタマイズ

acchinosorara.hatenablog.jp




(フッタとフッター、どっち?)

フッターイラスト
フッターイラスト
ページトップへ戻る