WordPress初心者なのでモバイルフレンドリーテスト不合格に悪戦苦闘

WordPressでブログを始めてまだ半月の初心者です。
がっ、いきなりっ、まさかのっ、

モバイルフレンドリーテストに不合格

モバイルフレンドリーテスト不合格

モバイルフレンドリーテストとはGoogleが無料で提供している、Webページがスマホ対応しているかどうかをチェックしてくれるサービスです。

モバイルフレンドリーテストサイトはコチラ

スマホ画面に対応していないと開いても読みたくないのは、自分の経験からしても常識。
WordPressで利用させて頂いているテーマは『Simplicity 2』
間違いなくレスポンシブデザイン対応で無料の素晴らしいテーマです。
まだカスタマイズと言えるほどのカスタマイズはしていません。
なにせHTMLとかCSSとか良くわかってませんから……只今勉強中!

まだWordPress初心者、まだ投稿数4本で、合格する自信満々だったので大ショック!!
スマホやタブレットで自分のサイトを見ているのですが、キレイに収まっています。
『Simplicity 2』様のおかげですけどね。
意味がわからなくても何とかしなければいけません。

クリック可能な要素同士が近すぎます???

クリックできる場所はSNSボタンや本文内のリンクとか?
サイドバーにも特別なカスタマイズはしていないし。
原因が思いつきません。

コンテンツの幅が画面の幅を超えています???

具体的にどのコンテンツ?
本文に貼った画像は小さく指定しています。
圧縮は画像の容量を見て、必要だったらかけたりかけなかったり。
サイト全体をテストしても1記事ずつテストしても不合格なので、共通する何か…。
テーマ、サイドバー、プライバシーポリシーの固定ページ…。

あっ!

ロゴ画像が怪しいぞ

自分のイメージを何となく表現できる仮のロゴを描きました。
『Simplicity 2』でタイトルロゴを希望通りに配置するにはCSSでの設定が必要ということで、後からゆっくりカッコよく改造しようと思っていました。
まずは簡単に、画像を横長に作って貼っています。
タイトルなのでちょっと大きめに作ったのですが、これか?

ブログタイトルロゴの配置
試しに、ロゴに画像を使わない設定にしてモバイルフレンドリーテストにかけたら見事合格。
自分のロゴ画像が悪いのはわかりました。

さて、どうすれば?
画像を小さくするべきなのでしょうが、バランスが崩れる…。
CSSに手を出すには早すぎる…。
文字だけのロゴでしばらく我慢するべきか…。
テーマはレスポンシブデザイン対応のはずだから、何か方法がある気がする…。
う〜ん、う〜ん、う〜ん。

altタグは必ず入れましょう

画像に関する注意事項を検索していると必ず見かけるこの一文。
ファイル名は画像に合った名前を注意して付けていたのですが、altタグはHTMLをいじらないといけないと思って触りませんでした。
しかし、WordPressでは簡単に付ける事ができたのですね。

「altタグ」 又の名は「代替テキスト」

「代替テキスト」なら画像をアップロードした時に見ました。
キャプションと代替テキストの違いもわからず、無視してしまいました…。

altタグを入れる場所

試しに「代替テキスト」に「MUTSUニカルスキルのタイトルロゴ」と入れて画像を修正。
モバイルフレンドリーテストにかけたら、見事合格でした、パチパチ。
「クリック可能な要素同士が近すぎます」も消えていました。
Googleさんが「これはロゴだね、だったらココにあっても許す」と認識してくれたのですね。

もちろん画像の幅も各テーマで推奨するサイズを調べて作りましょうね。

ブログデザイン変更する前に自作ロゴVer.1の画像を残しておきましょう〜。↓
もちろん「代替テキスト」もバッチリ入力しました。

MUTSUニカルスキルのロゴを持つMUTSU