【Minimal】ロゴ画像をスマホでもスマートに表示する方法

BLOG

こんにちは、ゆゆやろです。
本記事では、WordPressの『Minimal』テーマで、ロゴ画像をスマホでもキレイに表示する方法を紹介します。


まずは当ブログを例に見ていきましょう。スマホでの表示です。
比較1
左側が悪いロゴ画像の例なのですが、左右を見比べるとスマートではないのが分かると思います。
これを右側のようにスマートに表示する方法を『Minimal』テーマ初期設定の状態から解説していきます。

『Minimal』でロゴ画像をスマホでもスマートに表示するための手順

編集を始める前にheader.phpcssフォルダ内のstyle.cssのバックアップを取っておきましょう。
FTPソフトでパソコンに保存すればオッケーです。

手順1:ロゴ画像を表示できるようにしよう

その方法はホシタニさん(@yukihoshitani)が【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法にて公開しておられます。
“3-3. タイトルロゴ画像の設定”のところを、説明どおりにすればオッケーです。

さて、表示はどうでしょうか。
比較2
PC表示もスマホ表示も画面いっぱいに広がって表示されていますね、、、これはよくないので、次は大きさを整えましょう。

補足:ロゴ画像が正しく表示されない場合

FTPソフトでロゴ画像のURLをコピーしたのに正しく表示されない場合があります。そんな時は下記のURLを参考に書き換えてみてください。
https://sample.com/wp-content/uploads/logo.png
https://sample.com/wp-content/uploads/2018/08/logo.png
これは例ですが、このようにすればロゴ画像が表示されるはずです。

手順2:画像サイズを設定してPC表示を整えよう

それでは、画面いっぱいのロゴ画像をちょうどいいサイズに縮小しましょう。
今度はcssフォルダ内のstyle.cssに下記のコードを追加します。何行目に置いてもオッケーですよ。

header img.logo {
  max-width: 170px;
  margin-bottom: 10px; }

どれどれ、、見てみましょう。
比較3
PC表示はこれでキレイに整いましたね。ロゴ画像の下に余白をつくるとバランスがよくなりますよ。
右側のスマホ表示は、、まだ整っているとは言えません。不必要にスペースを取ってしまっています。
次はロゴ画像を小さくして、余白もなくしていきましょう。

手順3:スマホ表示でもロゴ画像をスマートに見せよう

まずはロゴ画像の周りの余白をゼロにしていきます。
@media only screen and (max-width: 479px)の所だけを修正するので注意してください。

@media only screen and (max-width: 479px) {
  header h1.title {
    margin-top: 0;
    margin-bottom: 0; } }

cssフォルダ内のstyle.cssのだいたい5880行

@media only screen and (max-width: 479px) {
  header .title {
    margin-top: 0; /* これは自分で追加してください */
    margin-bottom: 0; } }

cssフォルダ内のstyle.cssのだいたい5890行

@media only screen and (max-width: 479px) {
  header .title a {
    margin-top: 0;
    margin-bottom: 0; } }

cssフォルダ内のstyle.cssのだいたい5900行

これでロゴ画像の上下にあった余白は消すことができました。
次に以下のコードをcssフォルダ内のstyle.cssに追加します。これも何行目でもオッケーです。

@media only screen and (max-width: 479px) {
  header img.logo {
  margin-top: 10px;
  margin-bottom: 3px;
  padding: 0px 9% 0 12%; } }

これで最後です、見てみましょう。
比較4
黒いバーの中にロゴ画像がキレイに収まりました!
右側の手順2と比較すると、とてもスッキリしました。記事も見やすくなりましたね。

補足:Google Chromeの検証機能を使ってみよう

ロゴ画像をキレイに表示するにはpaddingの値が重要で、コピペするだけではうまく配置されていないはずです。
最適な数値を見つける必要があるのですが、そんな時に便利なのがGoogle Chromeの検証機能です。

» 初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
"4-2. CSSの値を変更する"の機能を使います。

検証機能を使えばブラウザ上でpaddingの値を変更しながら表示を確認できます。
今回の用途ではとても役に立つので使ったことがなければ試してみましょう!

という訳で、以上が『Minimal』テーマでロゴ画像をスマホでもスマートに表示する方法でした。

最後まで読んでくださりありがとうございました。