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

2019-07-062020-05-16

当ページのリンクには広告が含まれています。

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

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

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

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

作るボタンはメニューボタンと目次に戻るボタン

メニューボタン

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

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

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

目次に戻るボタン

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

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

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

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

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

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

以下のコードを追加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 ザ・トール固定フッターエリアトップページだけ非表示

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

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

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

こちらの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 カスタマイズ一押し↓

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

この記事が気に入ったら
フォローしてね！

Follow @karaagebow1214

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

ブログテーマ選びについて

この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。

THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る
THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る
自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト