アイキャッチにある通り、タイトルロゴとは、
この赤枠部分のことです。
ヘッダーロゴとも言います。
Cocoonでヘッダーロゴを設置しても、
![](https://pcwebfun.com/wp-content/uploads/2022/06/6b-160x90.gif)
モバイルに反映されないんですよね。
スマホだと▼こんな表示になってる。
ロゴが表示されていないんです。
というわけで、
・モバイルでのロゴを表示する
・ロゴの表示位置を変更する
やってみましょう!
![FURIO](https://pcwebfun.com/wp-content/uploads/2022/12/me2.gif)
簡単だよ!
モバイルでのロゴの表示
*********** 作業開始 ***********
モバイルの高さを設定する
➊ WordPressにログイン
➋ 左メニュー「Cocoon設定」→「Cocoon設定」を選択
➌ 「ヘッダー」タブを選択
➍ 高さ(モバイル)が空白になっていませんか?
とりあえず80と入力しましょう!
※このブログの表示は80pxです。
➎ 数字を入力したら、「変更をまとめて保存」をクリック。
モバイル設定を確認する
➏ Cocoon設定の「モバイル」タブをクリックする
➐ モバイルボタンの「サイトヘッダーロゴを表示する」にチェックを入れる
➑ 「変更をまとめて保存」をクリック。
*********** 作業終了 ***********
![FURIO](https://pcwebfun.com/wp-content/uploads/2022/12/me2.gif)
表示されたかな?
されなければ、F5(Ctrl+F5)で再読み込みを試して下さい
ヘッダーロゴの表示位置を変更する
上記の方法で表示はできたものの、左側は見切れてるし、なんだかおかしいですね。
![FURIO](https://pcwebfun.com/wp-content/uploads/2022/12/me2.gif)
デフォルトで、表示が中央揃えになってるからです
ヘッダー画像を左寄せ・右寄せにする
ロゴそのものや、サイズ変更なんて考えずにできる、一番簡単な方法はこれ。
上記画像のように見切れているのは、そもそも左端、右端にロゴやイラストを配置しているからです。
![FURIO](https://pcwebfun.com/wp-content/uploads/2022/12/me2.gif)
じゃあ、そっちに寄せちゃえばいいじゃない!
*********** 作業開始 ***********
➊ WordPress 左メニューから、「外観」→「テーマファイルエディター」を選択
➋ Cocoon子テーマの中は、下記のようにCSSを記述することができるので……
➌ そこに、以下のコードをコピーして、貼り付ける。
▼ロゴを左側に寄せたい場合
.header{
background-position: left;
}
▼ロゴを右側に寄せたい場合
.header{
background-position: right;
}
➍ ファイルを更新して保存
*********** 作業終了 ***********
▼ こちらの記事も、あわせてどうぞ!
![](https://pcwebfun.com/wp-content/uploads/2023/05/57a-160x90.gif)
コメント