【初心者コピペOK】はてなブログフッターをシンプルにカスタマイズ【PC表示】

こんにちは。

4児パパです。

はてなブログで記事を書き続けると躓く箇所の一つとして、やっぱりブログデザインかな。Webデザインをやるにはプログラミングを少し学ばなくてはならない。

はてなブログで記事を書き続けるとヘッダーやフッターの細かい部分まで気を配る様になる。ただコピペでOKだとしても最低限度のプログラミングの知識が必要になる。幸いにもはてなブログで開発している人は多くいるので、情報が既に出回っているし、だいたい同じ様なデザインになる事に気づく。

— ４児パパ (@ARTS_papa) 2019年8月13日

はてなブログで記事を書き続けるとヘッダーやフッターの細かい部分まで気を配る様になる。ただコピペでOKだとしても最低限度のプログラミングの知識が必要になる。幸いにもはてなブログで開発している人は多くいるので、情報が既に出回っているし、だいたい同じ様なデザインになる事に気づく。

Follow @arts_papa

■目次

▶1.レスポンシブデザインはおすすめ

▶2.はてなブログのPC表示フッターのカスタマイズ

▶3.最後に

１.レスポンシブデザインはおすすめ

私のブログのテーマは『DUDE』の為レスポンシブ非対応になっております。

レスポンシブデザインならコードが一括化している

前回でレスポンシブデザインでのコードは、PC表示とスマホ表示で一括化されているとお伝えしました。

【レスポンシブ非対応】スマホ表示見出しのカスタマイズ

www.papa-programing.jp

はてなブログのスマホ表示も大切

レスポンシブデザインではないので、スマホ側でも開発が必要になります。コードをPC側とスマホ側で書かないと２重で必要になる為、気になる点が増えてしまいます。

スマホ側からのアクセスがほとんど

アクセスの大半の方が、スマホを経由して流れてきます。

ですので、第一印象を大切にしつつ、戦略を立てましょう。

2.はてなブログのPC表示フッターのカスタマイズ

早速カスタマイズしていきましょう。

はてなブログPC表示のフッターカスタマイズ

はてなブログについてのカスタマイズは簡単にできますが、少しだけプログラミング知識を要するので、コピペできる様に解説していきます。

はてなブログフッターカスタマイズの手順

『管理画面』→『デザイン』→『カスタマイズ』→『フッタ』

CSS記入がありますので、記入していきましょう。

コピペして♪

<!– copy right –>
<div id=”footer_copyright”>このサイトについてプライバシーポリシー<br>Copyright ©2015-2019 4児パパ</div>

<style type=”text/css”>

#footer_copyright
{
width: 100%;/*領域の横幅の割合*/
padding: 10px 0px 10px 0px;/*上右下左の余白*/
text-align: center;/*文章をセンター揃えにする*/
background: #00ced1;/*背景色*/
font-size: 13px;/*文字のサイズ*/
color: #000000;/*文字の色*/
}

</style>