こんにちは bibaです。

このブログではWordPressの無料テーマSimplicityを使っています。このテーマは無料であることと、カスタマイズがしやすいことが魅力です。

他の無料テーマを使っていて、まだSimplicityを使ってみたことがない方は、ぜひ試用してみてほしいテーマのひとつです。

今日の記事は、またしてもSimplicityのカスタマイズに挑戦してみた記録です。

取り組んだカスタマイズはメニューの上部固定

メニューを上部に固定するカスタマイズは、実は前にも取り組んだことがあります。その時は、具体的な方法を書かなかったので、今回は備忘録的に紹介しておきたいと思います。

手を加えるのは、header.phpとstyle.cssとmobile.cssの3つのファイルだけです。

まず、header.phpを開いたら、</header>のの真下にある次の3行の記述を<!– header –>のすぐ下に移動します。

 <?php if (is_navi_visible())://ナビゲーションが表示のとき
        get_template_part('navi');//グローバルナビのためのテンプレート
      endif; ?>

次に、style.cssに次の記述を追加します。

#navi {
	width:100%;
	position: fixed;
	z-index: 10;
}
#site-title {
	margin-top: 50px;
}

そして、mobile.cssに次の記述を追加したら、完了です。

#site-title {
	margin-top: 20px;
}

サイトヘッダーのフォローボタン表示位置の調整

ただ、メニューを上部に固定するカスタマイズをすると、サイトヘッダー部分のフォローボタンがメニューと重なってしまう場合があります。

もし、メニューを上部に固定するカスタマイズを行なった上で、フォローボタンをサイトヘッダーに表示したい場合は、style.cssに先の追加記述に次のような記述をさらに追加しておくことで調整できます。

もちろん、マージンの幅はお好みの大きさで大丈夫です。

.sns-pages {
margin-top: 65px;
}

以上、無料ブログテーマSimplicityでメニューを上部に固定する方法とフォローボタンの表示位置を調整する方法についてでした。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
bibalogue