STINGER +2のフッターメニューの間隔を調整するCSS

WordPress

STINGER PLUS2を別のブログでカスタマイズしています。

また別のサイトをWordPressへ移行予定なので、もしまたSTINGER PLUS2を使う場合にすぐにカスタマイズできるよう、覚書しています。

今回はページの一番下に表示されるフッターメニューと、 メニュー設定で「ヘッダー上部にフッター用リンクと同じリンクを追加する」で追加した右上のメニューの間隔を調整しました。

スポンサーリンク

STINGER PLUS2のフッターメニューの上下の間隔を調整・変更する方法

STINGER PLUS2でフッターリンクを設置すると、このように上下に間隔があきます。

CSSを確認すると、デフォルトでこのようになっていました。

/*フッター*/
.footermenust {
text-align: center;
padding:20px;
margin-bottom:5px;
}

この中のmarginを調整します。

追加CSSにコードを追記する。

WordPress管理画面 >外観 >カスタマイズをクリック。

「追加CSS」をクリックし以下のCSSコードを追記します。

/*フッターメニューの間隔を狭く*/
.footermenust{
margin:-25px 0px;
}

marginを上下マイナス25pxで調整しました。

CSS追記前はこちらです。

CSS追記後はこちらです。上下の間隔を狭くしました。

STINGER PLUS2のヘッダー上部のリンクの間隔を調整・変更する方法

メニュー設定で「ヘッダー上部にフッター用リンクと同じリンクを追加する」を有効にすると、右上のヘッダー上部にリンクが表示されます。

この位置をもう少し下に表示するように、また、色とサイズも変更しました。

CSSを確認すると、変更したい箇所がデフォルトでこのようになっていました。

/*ヘッダーリンク*/

#header-r .footermenust {
padding:0 10px 0 0;
margin:0px 0 5px;
text-align:right;
}

#header-r .footermenust a {
padding:0px;
margin:0px;
font-size:12px;
color:#000;
}

追加CSSにコードを追記する。

WordPress管理画面 >外観 >カスタマイズをクリック。

「追加CSS」をクリックし以下のCSSコードを追記します。

まず、全体のpaddingを以下に変更しました。

#header-r .footermenust {
padding: 12px 10px 0 0;
}

また、リンクの文字サイズを大きくし、色も変更しました。

#header-r .footermenust a {
font-size:15px;
color:#9e9e9e;
}

変更前はこうですが

変更後はこちらです。

続いて、font awesomeのwebアイコンの色も変更します。

WordPress管理画面 >外観 >メニューをクリック。

FontAwesomeを指定した「CSS class(オプション)」を表示し、

FontAwesomeのアイコン指定の最後に「topnav」というクラスも追加しました。これを、リンク全てのCSS classに追記して保存します。

この「topnav」に対してスタイルを指定していきます。

WordPress管理画面 >外観 >カスタマイズをクリック。

「追加CSS」をクリックし以下のCSSコードを追記します。

/*ヘッダー右上webfont*/
.topnav{color:#666;}

これで設定完了です。

設定前

設定後

STINGER PLUS2のスマホ表示のハンバーガーメニューを消す(非表示)にする方法

ここまで設定した後、スマホで確認してみると三本線のハンバーガーメニューが表示されていたのでクリックすると、表示が変になっていました(汗)

CSSで調整しようかと思いましたが、そもそもスマホ用にこのハンバーガーメニューは必要ないと思い、表示しないようにするCSSを追加しました。

追加CSSにコードを追記する。

WordPress管理画面 >外観 >カスタマイズをクリック。

「追加CSS」をクリックし以下のCSSコードを追記します。

#s-navi dl.acordion {display: none;}

これでPC以外の画面でハンバーガーメニューが非表示になりました。