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

PCとモバイルのロゴを変更 ブログ

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

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

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

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

 

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

PCとモバイルのヘッダーロゴ

 

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

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

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

 

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

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

プー太郎
プー太郎

なんか恩着せがましいな。

おっと、久々に出たな、プー太郎。

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

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

プー太郎
プー太郎

まぁな。

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

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

スポンサーリンク

モバイル用のロゴを作る

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

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

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

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

 

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

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

 

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

フリーフォントで簡単ロゴ作成」で透明な壁紙だけを用意。

その透明な壁紙に「PhotoScape X」のフォントを重ねる。

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

 

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

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

「フリーフォントで簡単ロゴ作成」の設定画面

プー太郎
プー太郎

なるほど、文字を入れなきゃ、ただの壁紙になるもんね。

 

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

透明な壁紙にロゴを重ねた
(このロゴはただの見本ですので)

 

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

「PhotoScape X」ロゴの設定

 

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

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

 

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

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

プー太郎
プー太郎

そこまでこだわらない人向けの方法だよね。

 

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

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

「ココナラ」トップページ
▲ロゴの作成依頼は「デザイン>ロゴ作成」をクリック(出典:ココナラ

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

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

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

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

ココナラでデザイナーの方にお願いして、おしゃれなロゴを作るのもいいと思います。

プー太郎
プー太郎

値段はもちろんだけど、見本や評価を見て、デザイナーさんを決めるといいよ。

 

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




興味がないという方はこちら(続き)

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

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

モバイル用のロゴ

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

 

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

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

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

設定完了後のPCとモバイルのロゴ

気がつきましたか?

そうです。つまり

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

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

プー太郎
プー太郎

男はもっと大きく生きた方がいいぞ。

 

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

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

 

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

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

ロゴのURLの調べ方

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

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

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

今回のやり方として

画面の幅が1023px以下で通常のロゴを消す

同じく1023px以下でモバイル用のロゴを表示させる

という設定にしました。

ヘッダーモバイルボタンが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カスタマイズ記事」をご覧下さい。

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

プー太郎
プー太郎

そうやって「pv」を増やしたいだけじゃないの?

最後に

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

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

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

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

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

コメント