MOBILE WEB WING|Affinger5 WORDPRESS

【モバイル版:AFFINGER5カスタマイズ】CSS完全公開|ロゴを固定したい!スマホに最適な文字サイズとは??

投稿日:

 

パソコン版のカスタマイズの目処が見えてきた!
するとお次は、モバイル版をカスタマイズしたくなるもの!

 

モバイルサイトのカスタマイズ

行いたいカスタマイズ

  1. スクロールで上に付いて行かずにロゴを固定して上部にfixさせたい!
  2. ハンバーガーアイコン(開ける締めるボタン)もずっと左上にいてほしい
  3. 可愛くてパソコンと違うオリジナル画像をロゴにしたい!
  4. スライドメニューのトップに検索窓を入れたい!
  5. メニューをスライドした時、背景の色を変更
  6. スライドメニューの文字を小さく太くしたい!
  7. スライドメニュー(アコーディオンメニュー)の下に新着記事をつけたい!
  8. 文字のバランスを調整したい!

 

これが、AFFINGER5モバイルサイトに施したいカスタマイズだ!!!

 

全部出来たよ!
すごーい!

AFFINGER5モバイルカスタム <CSS完全公開>

+ CSSを見たい方はこちらをクリック

/*media Queries スマホサイズ(599px)以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
/*モバイルでヘッダー固定*/
@media screen and (max-width: 599px){
.pcnone{
position: fixed;/*ヘッダーを固定*/
z-index: 9999;/*一番前に表示*/
top: 0;/*画面の一番上で固定*/
left:0;/*画面の一番左で固定*/
right:0;/*画面の一番右で固定*/
width: 100%;/*横幅いっぱいに表示*/
}

#s-navi dt.trigger .acordion_button {
position: fixed;
z-index: 99999;
top: 0;
left: 5px;
}
#s-navi {
margin: 0;
}
/*背景半透明*/
#st-mobile-logo{background-color: rgba( 255, 255, 255, 0.45 );}
#st-mobile-logo img {
position: relative;
left:60px;
z-index: 99998;
width:300px;
height: 55px;

}

/*モバイルメニューを開いた時にロゴとハンバーガーアイコンに被ってしまうのでヘッダー分下げました。*/
#s-navi dd.acordion_tree {
padding-top: 55px;
}

/*ヘッダーが固定なので、コンテンツが下に逃げてしまうため、ヘッダー分下げました。*/
#wrapper {
margin-top: 55px;
}

/*モバイルトップピックアップスライダー タイトル部分修正*/
.content-post-slider .post-slide-title a, .post-card-list .post-card-title a {
font-size: 13px;
font-weight:normal;
}
/*モバイルスライダー記事一覧 タイトルまわりの余白なしに修正*/
.content-post-slider .post-slide-body, .post-card-list .post-card-body {
padding: 0;
}

/*モバイルNEW記事一覧 タイトル部分文字サイズ修正*/
dd h3:not(.st-css-no2) a{
font-size: 14px;
line-height: 24px;
font-weight: 600;
}

/*NEWタイトル上部の余白 削除*/
.n-entry-t {
margin-top: 20px;
}

/*スライダー上余白つけました*/
.entry-content {
margin-top: 20px;
}

/*アコーディオンメニュー一覧文字まわり修正*/
.acordion_tree ul.menu li {
font-size: 13px;
font-weight:bold;
}

/*アコーディオンメニュー一覧カテゴリタイトルそれぞれまわり余白修正*/
.acordion_tree ul.menu li a {
padding: 10px 20px;
}

/*アコーディオンメニューNEW一覧タイトル文字サイズ修正*/
#s-navi dd.acordion_tree .kanren-t
{
font-size: 10px;
font-weight:normal;
}

/*モバイルのずっと下の方ウィジットのカテゴリ一覧文字サイズ修正*/
#side aside .st-pagelists ul li a {
padding: 2px 20px;
font-size: 8px;
letter-spacing:1px;
}

/*フッターサイトマップのあるメニュー部分文字サイズ*/
#footer .footermenust a {
font-size: 8px;
color: #333;
}

}

AFFINGER管理のデザインページから最低限の各種設定ができます!

文字サイズの変更

その他の設定

メインの課題はロゴを固定すること

参考AFFINGER5公式サイト:https://the-money.net/smart-middlemenu/

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.