【Cocoon】ヘッダーロゴをPCとモバイルで使いわける方法

こんにちは、ikuzo(いくぞう)です。

少し前からCocoonのヘッダーモバイルボタンを使ってます。

自分でやった設定をもとに記事にもしました。

【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ

ikuzoblog.com

 

ヘッダーモバイルボタンのロゴは、PCと同じヘッダーロゴが表示されます。

 

でもですね、スマホだと同じロゴがなんかしっくりこなかったんですよ。

そこで約半日かけて、PCとは別の

「ヘッダーモバイル専用のロゴ」を表示させる方法を見つけました。

 

ずばり、この記事を見ているあなたはラッキーです。

私が半日かけて見つけた設定を、ほんの10分もあれば終わらせることができます。

おっと、久々に出たね、プー太郎くん。

ちなみにこのプー太郎は今から約20年前、イトーヨーカドーの千円の福袋に入っていたにもかかわらず、

当時3才だった娘の1番の宝物となり、今でも我が家に住みついております。

すみません、どうでもいい話ですね。

プー太郎のことはさておき、それでは今回もいってみましょう！

モバイル用のロゴを作る

当然のことながら、まずは「モバイル用のロゴ」を準備する必要があります。

これをご覧になっている方は、「すでにPC用のロゴはあるよ」という方がほとんどだと思います。

あとはそれを加工するか…、まぁ私がイチイチ言うことでもありませんね。

「すでにモバイル用のロゴは用意してある」という方は、次の章へお進み下さい。

 

「ロゴはこれから作る」という方には、こんな記事もありますのでよろしければご覧下さい。

ブログのロゴを作ってみよう！作成からCocoonの設定方法までを解説

ikuzoblog.com

 

今回はもう少し簡単にこんな方法で作りました。

これで背景透明なロゴが出来上がります。

 

「フリーフォント～」で透明な壁紙を作るには、

「透過PNG」に  チェックを入れて、文字は入れなければいいだけの話です。

その透明な壁紙に「PhotoScape X」で好きなフォントを重ねます。

（このロゴはただの見本ですので）

 

アウトラインや影を入れることもできるので、いろいろ試してみて下さい。

 

 PhotoScape Xのダウンロードや使い方

【PhotoScape X】の基本的な使い方

ikuzoblog.com

 

工夫次第では「PhotoScape X」でもそこそこのロゴは作れますが、無料の方法だけに

ものには限度というものがあります。

お金を払ってもいいから、もっと本格的なロゴを作りたいという方は

ココナラで、デザイナーの方に作ってもらうという手もあります。

最近はコロナの影響で、ブログを始める人が多いそうです。

それによってココナラを利用する人も急増中とのこと。

依頼するデザイナーさんにもよりますが、ロゴの制作は4,000円～と、意外に高くありません。

 

「自分で作ってみたけど、どうもうまくいかない」と悩むくらいなら、

ココナラで、おしゃれなロゴを作ってもらうのはいかがでしょうか。

ココナラに興味を持たれた方はこちら（ココナラ公式サイト）
↓



興味がないという方はこちら（続き）
↓

モバイル用のロゴをアップロード

そして今回用意したモバイル用のロゴがこちらです。

（本当はロゴだけですが、わかりやすいように色と枠線をつけてます。）

 

大きさは600×162pxで、モバイル用にしては少し大きめに作りました。

大きさはあとから調整できるので、表示させたい「倍」くらいの大きさで作ればいいと思います。

今回最終的には、PCとモバイルでこんなふうに変わります。

気がつきましたか？

そうです。つまり

「ヘッダーモバイルボタンではイラストを表示させないようにしたかった」

ただそれだけの、ほんの小さな拘こだわりです。

モバイル用のロゴは、WordPressの「メディア」→「新規追加」からアップロードします。

 

アップロードしたらそのまま「編集」を押すか、

「メディア」→「ライブラリ」で画像（ロゴ）を選択すると「ファイルのURL」が分かります。

このURLをあとでコピーして使います。

URLの出し方を覚えておいて下さい。

モバイル用のロゴを表示させるCSS

今回のやり方として

という設定にしました。

ヘッダーモバイルボタンが1023px以下になると出現するので、それに合わせてロゴも切り替えよう

という作戦です。

たしか、ヘッダーモバイルボタンが現れるタイミングをいじった記憶はないので、これはデフォルトのままだと思います。

そして、半日かかったCSSがこちらです！

/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
	img.site-logo-image{
		visibility: hidden;
	}
}

/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
	.logo-menu-button.menu-button{
		background-image: url(ここにロゴのURLを入れる);
		background-size: auto 30px;
		background-position: center;
		background-repeat: no-repeat;
}
}

「ここにロゴのURLを入れる」の部分に先ほどのURLをコピペして下さい。

ロゴを切り替えるタイミングは、2つある「1023px」の部分で変えることができます。

あとは、ロゴの大きさ「auto 30px」の部分ですね。

「横方向 縦方向」の順番なので、横方向を指定する場合は「110px auto」、

縦方向を指定するなら「auto 30px」のように、もう片方を「auto」にすることによって縦横比を保持します。

「110px」や「30px」の数字を変えて、ロゴの大きさを調整して下さい。

 

CSSの貼り方はもうご存知だと思いますが、もし「やったことがない」という方は

大変お手数ですが、私が書いた他の「Cocoonカスタマイズ記事」をご覧下さい。

たぶん他の記事にはだいたいやり方が書いてあるはずです。

最後に

今回もおつかれさまでしたー。

無事に設定できましたでしょうか。

まだまだスキルが足りないもので時間はかかりましたが、できあがったヘッダーモバイルボタンを見ながら飲むビールは格別でした。

もっと他のモノ見て飲めよ、って話ですけどね（笑）

今回も最後まで読んでいただき、ありがとうございました。