現在使っているTCDテーマ「MAG」は、シンプルかつ優れたデザイン性と多種な機能で、とても使いやすいテンプレートだと思います。
レスポンシブも標準装備していて、面倒なHTMLの編集無しで、スマホやタブレットなどのモバイル端末に対応してくれます。
MAGはモバイル端末で表示できるロゴを設定できるのですが、初期設定のままだとそのロゴがかなり小さかったです。
今回、CSSを追加して、モバイルバージョンのロゴを大きく変更してみました。
TCDテーマなら操作方法が同じ場合もあるので、MAG以外を使っている人も参考になると思います。
モバイル端末にロゴを設定
MAGはPC端末だけでなく、モバイル端末でもロゴを設定できます。
設定手順
・WordPressのダッシュボードから「外観→TCDテーマオプション」を選択
・ロゴの設定を選択
・一番下の「スマホ用ロゴ設定」からロゴに設定したい画像を選択
・設定を保存をクリック
スマホの画面のロゴを設定できました。
スマホ用ロゴのサイズを変更
スマホ用のロゴは、初めはかなり小さく設定されています。
そのため、もしロゴを大きく表示したいなら、CSSを追加してカスタマイズする必要があります。
追加するCSSは下記の通りです。
|
1 2 3 4 |
#logo_image_mobile a{ height:30px; float: left; padding-left :8px; } |
「height」でロゴのサイズ指定、「padding-left」で左側の余白を指定しています。
MAGにはカスタムCSSを入力できる機能があります。そこにCSSを書き込むだけで内に追加することができます。
ここに入力したCSSは、MAGをアップグレードしても初期化されないため、かなり便利です。
カスタマイズ手順
・TCDテーマ編集から基本設定を選択
・カスタムCSSにCSSを書き込む
↓
・設定を保存をクリック
モバイル画面でのロゴが大きくなりました。
MAGのダウンロードはこちらから
スマホのロゴのサイズを変更
もし、これでも小さいと思うなら、さらに大きさを変えることもできます。
heightの数字を大きくすれば、画像も大きくなります。
あまり大きくしすぎると、ヘッダーの画面を越えてしまうため、収まる範囲で設定しましょう。
ここでは、50pxに設定してみます。
画像のサイズがいい感じになりました。
設定する画像の大きさ
スマホ用に設定する画像はある程度サイズの大きな画像を選んだ方がいいです。
理由としては「画像がぼやけないから」の一択です。
スマホで記事を読む時って、結構拡大して読みますよね。
そんな時に、ロゴの画像がぼやけていたらちょっと恥ずかしくないですか？
私だけですかね？
私はスマホのロゴ用に作成した画像は、1000×200pxです。
この大きさにすることで、スマホで記事を拡大してもロゴがぼやけませんでした。
画像は基本的に大きい画像を縮小する方がきれいに表示されるようです。
まとめ
MAGはスマホ用のロゴも簡単に設定できるため便利です。
しかしデフォルトでは画像が小さく設定されているため、気になるようならCSSを追加してカスタマイズする必要があります。
スマホは現在多くの人が記事を読むために使っているツールです。
今やスマホ用の設定をすることは必須になってきています。
少しでも多くの人に満足してもらえるように、完璧を目指すのは大切なことかもしれません。
最後までお読みいただき、ありがとうございました。
MAGのダウンロードはこちらから
この記事へのコメントはありません。