THE THOR ザ・トール 固定フッターエリア 縦に並ぶボタン

固定フッターエリアを縦に並ぶレイアウトにしてみました。

といっても当サイトでは採用していません。

あくまでレイアウトパターンのひとつとしての実験です。

縦に並ぶボタン 作る前に内容を整理

縦に並ぶボタン 固定フッターエリア作るボタンはメニューボタンと目次に戻るボタン


メニューボタン

メニューボタンは THE THOR に標準で搭載されているものを利用します。

外観 → カスタマイズ → 共通エリア設定[THE] → 固定フッターエリア設定[THE]

固定フッターエリアの設定では、項目3だけがメニューを設定できるようになっています。表示する項目でメニューを選び設定します。


目次に戻るボタン

目次に戻るボタンは THE THOR 1.5.1 には搭載されていません。

目次にもどるボタンの作り方はこちらで紹介しています。

THE THOR ザ・トール 固定フッターエリア 目次に戻る ボタンを設置

必読

当サイトではワードプレスのテーマ THE THOR を利用しています。THE THOR は優れたテーマです。 THE THOR の個人的評価は以下をご覧ください。     THE THOR とは? 『ザ[…]


その他、THE THOR のデフォルトで設定されている固定フッターエリア右のTOPへボタンを削除が必要になります。固定フッターエリアの背景色を無しにすると前述のボタンとはまた別のTOPへ戻るボタンが出現します。こちらも削除します。

もうひとつ固定フッターエリア用に用意されたページ最下部のスペースを削除します。

これらはこの記事のcssに組み込まれています。知らないと改良するときに困ると思うのでアタマに入れておいてください。

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

狩野 祐東
発売日: 2017/02/22
Amazonの情報を掲載しています

固定フッターエリア 縦並びボタン

出来上がりは以下のようになります。

固定フッターエリア 縦並び ボタン

何もコンテンツのないテスト用サイトで作ったのでわかりづらくて申し訳ない!


以下のコードを追加cssなどにコピペしてください。

外観 → カスタマイズ → 追加css
※カスタマイズは自己責任でお願いします。
/*固定フッターエリア*/
/*背景透明*/
.controllerFooter{
background-color: rgba(0,0,0,0);
}
/*固定フッターエリア*/
/*TOPへを消去*/
.controllerFooter__item:last-child{
display: none;
}
/*固定フッターエリア*/
/*TOPへを消去2*/
@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 には固定フッターの機能が標準で装備されています。フッターだけでなくヘッダーの固定も標準装備され[…]

THE THOR 固定フッターエリアをトップページだけ非表示にする方法

おまけ 縦に並ぶボタン フルメニュー

デフォルトで設定されているトップへボタンを活かしたまま固定フッターエリアに表示できるボタンをフルで縦並びにしてみました。

縦に並ぶボタン プレビュー

こちらもテストサイトで作成。プレビュー画面なので実際のスマホ画面とは比率が違います。


こちらのcssは以下の通り。

見た目は物珍しく多少のインパクトがあります。しかし使い勝手は悪そうですw

/*固定フッターエリア*/
/*背景透明*/
.controllerFooter{
background-color: rgba(0,0,0,0);
}
/*固定フッターエリア*/
/*TOPへを消去2*/
@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 カスタマイズ 一押し↓

サイドメニューのCLOSEボタンをもっと使いやすく

固定フッターエリア 縦に並ぶボタン
呟くのよ・・・私の棒ストが