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

はてなブログのフッター

こんにちは。

4児パパです。

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

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

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

私のブログのテーマは『DUDE』の為レスポンシブ非対応になっております。(現在はワードプレスに移行した為、SANGOを利用しております。)

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

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

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

www.papa-programing.jp

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

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

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

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

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

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

 早速カスタマイズしていきましょう。
コピペだけで済みますので、誰でも出来ます。

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

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

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

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

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

コピペして♪

<!– copy right –>
<div id=”footer_copyright”>このサイトについて プライバシーポリシー<br>Copyright ©2015-2020 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>

参考にしたサイト

レスポンシブはコード記入は一箇所

レスポンシブデザインの時は、コードが一括化されますので、スマホ表示用などの個々のコーディングは必要ございません。

最後に

ブロガーって結構たくさん覚えなくてはならないし、

継続しないと結果は出ませんよね。 

でも私思うんですよね。

ただ継続しているだけで、そのうち結果を出す為にスキルに繋がっていくし、

ただ継続しているだけなのに、他が脱落していると。

継続は力なりとは力強い言葉。

人生伸びしろしかないよね。

4児パパ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です