見やすくお洒落なブログのフッターカスタマイズをコピペで
ブログのデザインをカスタマイズするとき、面倒なのはプログラミング。
見れば見るほどわからなくなり、結局諦めてしまうことも。
デザインは読み手が感じる印象におおきく影響するほか、サイト内のほかのおすすめ記事を紹介するのにも大事な役割を果たします。
今回はコピーだけでできる、ブログフッターのカスタマイズをご紹介します。
シンプルで見やすく、スマホにも対応しています。
【この記事を読むメリット 】
- ブログのフッターをコピペでカスタマイズできる。
それでは今回のコンテンツです。
フッターカスタマイズはコピペOK
ブログの本業は記事を書くこと。デザインは最低限の時間で仕上げてしまいましょう。
1.ブログフッターHTMLをコピペ
2.ブログフッターCSSをコピペ
言葉がわからなくても大丈夫。手順通り進めるだけ。
1.ブログフッターHTMLをコピペ
以下のコードをコピーして、必要な場所を自分のブログ用に書き換えます。
【書き換える場所】
- カテゴリー名(大分類)
- カテゴリー名(小分類)
- リンク先URL ※a href="この部分"
<div class="side-category">
<div class="side-sub">
<li class="side-sub-title">About site</li>
<li>
<ul class="side-category-child">
<li><a href="https://www.biz-thinking-k.com/">サイトトップ</a></li>
<li><a href="https://www.biz-thinking-k.com/entry/about-blog/recommend">アクセスランキング</a></li>
<li><a href="https://blog.hatena.ne.jp/biz-thinking-K/biz-thinking-k.hatenablog.com/subscribe"></i>★はてな読者登録</a></li>
</ul>
</li>
</div>
<div class="side-sub">
<li class="side-sub-title">Working income</li>
<li>
<ul class="side-category-child">
<li><a href="https://www.biz-thinking-k.com/archive/category/%E5%83%8D%E3%81%8D%E6%96%B9">働き方</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E3%83%BB%E8%BB%A2%E8%81%B7">キャリア・転職</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%82%B3%E3%83%B3%E3%82%B5%E3%83%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%83%A0"> - コンサルファーム</a></li>
</ul>
</li>
</div>
<div class="side-sub">
<li class="side-sub-title">Skill Up</li>
<li>
<ul class="side-category-child">
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E3%82%92%E8%80%83%E3%81%88%E3%82%8B">自己啓発</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97">スキルアップ</a>
</li>
<li><a href="https://www.biz-thinking-k.com/archive/category/IT%E3%82%B9%E3%82%AD%E3%83%AB"> - ITスキル</a>
</li>
</ul>
</li>
</div>
<div class="side-sub">
<li class="side-sub-title">Blog work</li>
<li>
<ul class="side-category-child">
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E5%8F%8E%E7%9B%8A%E5%8C%96">ブログ収益化</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6%E6%88%A6%E7%95%A5">運営戦略</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84">コンテンツ</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%82%B3%E3%83%94%E3%83%9A%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E9%9B%86">コピペサンプル集</a></li>
<li><a href="https://www.biz-thinking-k.com/archive/category/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0">はてなブログ</a></li>
</ul>
</li>
</div>
<div class="side-sub">
<li class="side-sub-title">Other</li>
<li>
<ul class="side-category-child">
<li><a href="https://www.biz-thinking-k.com/archive/category/%E9%9B%91%E8%A8%98">雑記</a></li>
</ul></li>
</div>
<div class="side-sub">
<li class="side-sub-title">Support</li>
<li>
<ul class="side-category-child">
<li><a href="https://www.biz-thinking-k.com/about">運営者</a></li>
<li><a href="https://www.biz-thinking-k.com/contact-me"> お問い合わせ</a></li>
<li><a href="https://www.biz-thinking-k.com/privacy-policy">ポリシー</a></li>
</ul></li>
</div>
</div>
カテゴリー名(大分類)が多い場合は、改行している区切りで丸ごと削除してください。
追加する場合も、改行の単位で追加すれば表示することができます。
また、当サイトではカテゴリーの記事一覧ページにリンクさせていますが、個別の記事に飛ばすこともできます。
書き換えたコードは、フッターのHTMLにコピペします。
はてなブログの場合は デザイン設定>カスタマイズ>フッタ から貼付けができます。
あとはCSSだけ。CSSは自サイト向けの編集もありません。
2.ブログフッターCSSをコピペ
CSSはこのまま張り付けるだけです。このまま問題なく見ることができますが、ややコードが冗長な個所もありますので、ご了承ください。
.side-category{list-style-type:none;text-align: center;}
@media screen and (max-width:768px){.side-category{padding-left: 5%;}}
.side-sub{padding-bottom:10px;min-width: 180px;display: inline-block;vertical-align: top;text-align: left;}
@media screen and (max-width:768px){.side-sub{min-width: 160px;}}
.side-category-child{list-style-type:none;margin-left:5%;}
.side-sub-title{color:#666;font-size:17px;margin:5px 0 2px;}
.side-sub-title:first-letter {font-size: 1.5em;}
.side-sub-title:after {content: "";display: block;height: 2px;width: 60%;background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}
はてなブログでのCSSの張り付け方は以下のページをご参照ください。
フッターカスタマイズはコピペで簡単
表示はできたでしょうか。PCから見るときは横並び、スマホから見るときは2列で縦並びになるかと思います。
このようなカテゴリー集をフッターに表示しておくと、最後まで読み終わった読み手が、別の興味のある記事を見つけやすくなります。
ぜひ活用いただければと思います。
▽ほかにもいろいろなカスタマイズをご紹介しています。