affinger5

AFFINGER5 モバイル用ロゴを中央寄せ&サイズ調整 CSSコピペでOK!

モバイルロゴ調整_eyecatch2


悩んでる人
AFFINGER5を使っているけど、モバイル用のロゴを細かく調節したい!
色んな所を設定する必要があるから難しいよね、、。

今回はCSSをコピーするだけで自分好みにカスタマイズする方法を紹介するよ

わたし

AFFINGER5でできるモバイルロゴの設定

AFFINGER5では、

1.PCと共通のロゴを使う方法

2.モバイル用のロゴを使う方法

があります。

1.PCと共通のロゴを使う

PC共通ロゴ

ポイント

Good・・・大きい画像を使えて、デザイン性が増す

Bad   ・・・ページの半分近くがロゴで埋まり、ユーザビリティが低い

 

2.モバイル用ロゴを使う

ポイント

ヘッダーがすっきりし、多くの情報が伝えられる

 

eyecatch
カスタマイズ前に必読!親テーマ・子テーマを理解してデータ消えを防ぐ。

親テーマ・子テーマを理解していますか?何もわからずにコピペでカスタマイズをどんどん進めると取り返しがつかなくなるかもしれません!
この記事では親テーマ・子テーマとカスタマイズの関係について、分かりやすく図解で説明しています。
CSSやPHPをいじり始める前に是非御覧ください。

続きを見る

モバイル用ロゴの設定方法

用意するもの

横長のpng画像(ex. 600px × 150px)

「外観」→「カスタマイズ」→「ロゴ画像」→「モバイルロゴ画像」と進みます。

ロゴ設定

  1. モバイルロゴ画像を登録
  2. モバイル用ロゴを使用するにチェック
  3. モバイル用ロゴ画像サイズ調整チェック
  4. センター寄せにチェック

 

ここまでで、モバイル用のロゴ画像が大きめのセンター寄せになっていたら通常の設定は完了です。

(僕の場合全てにチェックを挿れても反映されず、左上に小さく表示されるだけでした。)

もしこれでセンター寄せにならなかった方は、

/*モバイル用ロゴ センター寄せ*/
#st-mobile-logo {
text-align: center;
}

上のCSSを追加CSSにコピペして下さい。

ここからはより細かい設定を行なっていきます。

スクロールしたときのロゴ挙動設定

続いて、スクロールしたときにロゴ画像がどう動くかの設定方法です。

「外観」→「カスタマイズ」→「メニューのカラー設定」→「スマホスライドメニュー」と開きます。

「表示パターン」から選びます。

  1. 画面上部に固定
  2. スクロール追尾

実際に公開してみて、自分の目的に合うものを選びましょう!


ロゴ画像&ハンバーガーメニューの背景設定

僕の場合、ここまで設定すると下の画像のように透過した状態のヘッダーになってしまいました。

ロゴ画像が透けてしまう

ロゴ画像_透過

ここではロゴ画像とハンバーガーメニューの背景色を設定します。

/*ハンバーガーメニュー背景色*/
#s-navi dt.trigger {
background-color: #【カラーコード】;
}
/*モバイル用ロゴ画像背景色*/
#st-mobile-logo {
background-color: #【カラーコード】;
}

上の【カラーコード】にメインで使っているカラーコードを記入して下さい。

 

この設定で、透過していたロゴ画像に背景がついたと思います。


ロゴ画像の大きさを調整

AFFINGER5の調整では、「少し大きくする」という設定しか無く少し小さく感じますよね。

ロゴ画像の大きさを調整するには

/*モバイル用ロゴ画像大きさ調整(heightで調整)*/
#st-mobile-logo img {
height: 45px;
}

上を追加CSSにコピペしてみて下さい。

height: ○○px;

の部分で大きさを調節する事ができます。

以上で、モバイル用ロゴ画像の微調節用設定は以上になります。

変更おつかれさまでした!

 

他のカスタマイズも見てみて下さい!

eyecatch
記事レイアウトで損してる!直帰率を下げる、コピペでできるaffingerカスタマイズ方法。

PVを上げるために重要な「直帰率」。今回は、5分ほどの簡単作業で直帰率を下げる、レイアウトの変更方法を紹介しています。
AFFINGER限定の方法ですが、他テーマにも応用することは可能なので、是非試してみてください。

続きを見る


まとめ

今回は、AFFINGER5のモバイル用ロゴの微調整の仕方について紹介しました!

大きさや位置を細かく調整して、自分好みのロゴデザインを作ってみてく下さい!!

関連記事

eyecatch

affinger5

記事レイアウトで損してる!直帰率を下げる、コピペでできるaffingerカスタマイズ方法。

PVを上げるために重要な「直帰率」。今回は、5分ほどの簡単作業で直帰率を下げる、レイアウトの変更方法を紹介しています。
AFFINGER限定の方法ですが、他テーマにも応用することは可能なので、是非試してみてください。

AFFINGER5_beginner_eyecatch

affinger5

【図解】AFFINGER5 初心者向け 管理画面を徹底解説

AFFINGER5を使い始めたばかりの初心者の方に向けて、管理画面の概要をまとめました。
これを見れば最初に何を設定するべきなのか、なにか変えたいときにどこを設定すればよいのか分かります!
ぜひブックマークして、その都度参考にしてみて下さい!

よく読まれている記事

プロジェクターアイキャッチ 1

10万円で手が届く、高画質・高機能のプロジェクターの選び方、おすすめの商品を紹介しています。
解像度、コントラスト、明るさ、機能性、値段などからあなたに最適のプロジェクターを紹介します!
最近増えてきた、モバイル用プロジェクターや変わり種も!

motorscooter_eyechatch 2

当サイトの運営はエックスサーバー で行っております。 悩んでる人日常の足になるような電動バイクってどんな種類がある? 通 ...

vezel_eyecatch 3

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

eyecatch 4

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

-affinger5
-, ,

Copyright© りくぶろぐ ~ブログ×ガジェット×モビリティ~ , 2020 All Rights Reserved Powered by AFFINGER5.