iiie

物づくりと生活、"経験"を記事へ

2カラムのフッターを実装する【はてなブログ カスタマイズ】

 

フッターのカスタマイズをしました。

 

今回はカスタマイズの内容と、参考にした記事、あとは構成について記載します。

 

カスタマイズの内容 (2019/06/07 現在)

 

レスポンシブデザインを採用

 

f:id:gorislog:20190607103354p:plain

 

PC・タブレットの表示サイズを768px以上として想定し、該当する表示端末の媒体では2カラムのデザインで表示されます。

 

f:id:gorislog:20190607104247p:plain

 

767以下ではシングルカラムで表示されます。

 

2カラム表示の左側を上側、右側を下側へ配置します。

 

適度なアニメーションを搭載

 

f:id:gorislog:20190607105225g:plain


CSSアニメーションとJavascript、jQueryを使用し、動きのあるデザインにしました。

 

  • マウスオーバーによる要素のゆっくりした変色
  • マウスオーバーによる要素を跳ねる動き
  • Jvascriptによるページ上部へのスクロール

 

参考

以下の記事の技術を参考にしています。

 

lab.syncer.jp

saruwakakun.com

 

naruhodo.repop.jp

www.webopixel.net

考え方

コードは大変汚い状態になっているので、掲載することはできませんが構成について記載します。

 

今まではシングルカラムのデザインとのことで、サイドバーの一番下に「HTML」のサイドバーモジュールを使用し、疑似フッターとして表示していましたが、今回は768px以上の表示領域では2カラム表示をしたいと考え、「デザイン」→「カスタマイズ(スパナマーク)」→「フッタ」にコードを記載、デザインCSSにてカスタマイズしています。

 

まず、表示領域の指定から。

 

ベース側はメインがスマホで、タブレット・PC表示をレスポンシブ表示するようにしているので、タブレット・PCデザインの768以上を@mediaで指定します。

 

.footer-box {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}

 

flexで横並び、wrapで折り返しを指定。justify-content: centerで要素の中を中央揃えにします。

 

.footer-box-inner {
box-sizing: border-box;
width: 100%;
}
@media (min-width: 768px){
.footer-box-inner {
width: 50%;
}
}

 

追加する要素.footer-box-innerを@mediaで指定。

768以上の場合、width50%の表示となり、footer-boxのfrexとwrapが効いて横並び・折り返しに。768未満だとwidthが100%となるので、折り返しができず、シングルカラムのデザインで表示されます。

 

なので追加された要素が二つあれば、2カラム表示されます。

 

あとは「デザイン」→「カスタマイズ」→「フッター」に

 

<footer id="footer">

<div class="footer-box">

<div class="footer-box-inner">

要素1

</div>

<div class="footer-box-inner">

要素2

</div>

</div>

</footer>

 

で768以上は2カラム、それ以下はシングルカラムになるレスポンシブデザインのフッターエリアのベースができます。

 

要素に関しては上記の参考にした技術を部分部分に使えば似たようなデザインになりますよ。