固定フッターエリアを縦に並ぶレイアウトにしてみました。
といっても当サイトでは採用していません。
あくまでレイアウトパターンのひとつとしての実験です。
縦に並ぶボタン 作る前に内容を整理
作るボタンはメニューボタンと目次に戻るボタン
メニューボタン
メニューボタンは THE THOR に標準で搭載されているものを利用します。
固定フッターエリアの設定では、項目3だけがメニューを設定できるようになっています。表示する項目でメニューを選び設定します。
目次に戻るボタン
目次に戻るボタンは THE THOR 1.5.1 には搭載されていません。
目次にもどるボタンの作り方はこちらで紹介しています。
・THE THOR ザ・トール 固定フッターエリア 目次に戻る ボタンを設置
当サイトではワードプレスのテーマ THE THOR を利用しています。THE THOR は優れたテーマです。 THE THOR の個人的評価は以下をご覧ください。 THE THOR とは？ 『ザ・トール レビュー』[…]
その他、THE THOR のデフォルトで設定されている固定フッターエリア右のTOPへボタンを削除が必要になります。固定フッターエリアの背景色を無しにすると前述のボタンとはまた別のTOPへ戻るボタンが出現します。こちらも削除します。
もうひとつ固定フッターエリア用に用意されたページ最下部のスペースを削除します。
これらはこの記事のcssに組み込まれています。知らないと改良するときに困ると思うのでアタマに入れておいてください。
固定フッターエリア 縦並びボタン
出来上がりは以下のようになります。
何もコンテンツのないテスト用サイトで作ったのでわかりづらくて申し訳ない！
以下のコードを追加cssなどにコピペしてください。
/*固定フッターエリア*/
/*背景透明*/
.controllerFooter{
background-color: rgba(0,0,0,0);
}
/*固定フッターエリア*/
/*TOPへを消去*/
.controllerFooter__item:last-child{
display: none;
}
/*固定フッターエリア*/
/*TOPへを消去２*/
@media screen and (max-width:767px){
.bottomFooter__topBtn{
opacity: 0;
}
}
/*固定フッターエリア*/
/*項目3MENUを右下へ*/
.controllerFooter__item:first-child{
position:fixed;
bottom:12px;
right:12px;
color :#ffffff;
background-color: rgba(220,20,0,0.6);
}
/*固定フッターエリア*/
/*項目4を項目3の上へ*/
.controllerFooter__item:nth-child(2){
position:fixed;
bottom:80px;
right:12px;
color :#777777;
background-color: rgba(255,255,255,0.5);
box-shadow: 0px 0px 0px 1.5px #777777;
}
/*固定フッターエリア*/
/*項目共通設定*/
.controllerFooter__item {
font-size: 1rem;
width: 60px;
height: 60px;
border-radius: 30px;
}
.controllerFooter__item i {
font-size: 22px;
margin: 4px;
}
/*固定フッターエリア*/
/*固定フッターエリア用に用意されたスペースを削除*/
.t-footerFixed {
padding-bottom: 0px;
}
以上です。
・THE THOR ザ・トール 固定フッターエリア トップページだけ非表示
今回は 固定フッターエリア を トップページだけ非表示 にするカスタマイズです。 THE THOR には固定フッターの機能が標準で装備されています。フッターだけでなくヘッダーの固定も標準装備されていてとても便利です[…]
おまけ 縦に並ぶボタン フルメニュー
デフォルトで設定されているトップへボタンを活かしたまま固定フッターエリアに表示できるボタンをフルで縦並びにしてみました。
こちらもテストサイトで作成。プレビュー画面なので実際のスマホ画面とは比率が違います。
こちらのcssは以下の通り。
見た目は物珍しく多少のインパクトがあります。しかし使い勝手は悪そうですw
/*固定フッターエリア*/
/*背景透明*/
.controllerFooter{
background-color: rgba(0,0,0,0);
}
/*固定フッターエリア*/
/*TOPへを消去２*/
@media screen and (max-width:767px){
.bottomFooter__topBtn{
opacity: 0;
}
}
/*固定フッターエリア*/
/*項目1*/
.controllerFooter__item:first-child{
position:fixed;
bottom:244px;
right:12px;
color :#ffffff;
background-color: #ffab35;
}
/*固定フッターエリア*/
/*項目2*/
.controllerFooter__item:nth-child(2){
position:fixed;
bottom:186px;
right:12px;
color :#ffffff;
background-color: #8bbf07;
}
/*固定フッターエリア*/
/*項目3*/
.controllerFooter__item:nth-child(3){
position:fixed;
bottom:128px;
right:12px;
color :#ffffff;
background-color: #95e3cb;
}
/*固定フッターエリア*/
/*項目4*/
.controllerFooter__item:nth-child(4){
position:fixed;
bottom:70px;
right:12px;
color :#ffffff;
background-color: #7bd7f9;
}
/*固定フッターエリア*/
/*項目5TOPへ*/
.controllerFooter__item:last-child{
position:fixed;
bottom:12px;
right:12px;
color :#ffffff;
background-color: #767c7c;
}
/*固定フッターエリア*/
/*項目共通設定*/
.controllerFooter__item {
font-size: 0.8rem;
width: 60px;
height: 44px;
border-radius: 30px;
opacity: .8;
box-shadow:0 2px 6px 0 #999999;
}
.controllerFooter__item i {
font-size: 16px;
margin-bottom: 4px;
}
/*固定フッターエリア*/
/*固定フッターエリア用に用意されたスペースを削除*/
.t-footerFixed {
padding-bottom: 0px;
}
以上です。
あとがき
THE THOR はcssで遊ぶには良いテーマかもしれません。なにしろ何もないところにcssで何かを生み出すのは難しいわけで、そこに何かがあれば派生させていくのは割と簡単です。機能の豊富な THE THOR は題材として優れているかも知れないと思うようになってきました。
固定フッターエリアはまた何かレイアウト案があれば作って行きたいと思います。
THE THOR カスタマイズ 一押し↓