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

はてなブログ フッター PC表示

はてなブログ フッター PC表示

こんにちは。

4児パパです。

 

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

 

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

 

 

  

■目次

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

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

3.最後に

 

 

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

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

 

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

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

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

www.papa-programing.jp

 

 

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

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

 

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

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

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

 

 

 

 

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>

 

参考にしたサイト

https://www.hucl.jp/entry/SPCustom2 

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

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

 

 

 

3.最後に

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

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

 

でも私思うんですよね。

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

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

 

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

 

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

 

4児パパ

 

 

 

 

コメントを残す

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