当ブログのWordPressテンプレートは言わずと知れたあの「賢威」です。

ほとんどのアフリエイターさんが推奨しているテンプレートでとても有名ですよね~。
アフリエイターにとって「賢威」で作ったWordPressブログはある種のステータスとも言えます。

SEOに強くて、しかもスマホ対応にも完璧なレスポンシブデザイン!

レスポンシブデザインというのはアレですね。
パソコンで見た画面をスマホ向けに見やすくなっている仕様のことです。

賢威で作ったブログをスマホで見てみよう

実際に賢威で作ったばかり、出来立てほやほやの時の当ブログを見てみましょう。

プロフィールページです。うん、パソコンでは特に問題なく見れますね。
改行もきちんと入れており、訪問先さんに読みやすい工夫が施されています。(自画自賛)

 

ではこのページをスマホで見てみましょう!

ん~、デザインもスマホ向けに修正されてますし、特にこれと言った問題はなさそうですが…。
少々違和感がありますね…。改行が不自然というか不自然ですね!

改行タグのbrがスマホ画面でもそのまま反映されてるので、変なトコロで改行されちゃってますね。

このままでは文章がとても読みにくいです!
パソコン画面では改行タグを維持しつつ、スマホ画面の時は改行タグを省略しましょう!

スマホ画面では改行タグを省略する!

「パソコンでは改行して、スマホでは改行しない?なんか難しそう…」
と、思うかもしれませんが…実は1行追加するだけで簡単に出来ちゃうんですよ。(・∀・)ニヤニヤ

では参りましょう!

まずはWordPressにログインして外観→テーマの編集を選びます。
賢威(Ver6.2)の場合だと、下の方に「mobile.css」という項目がありますね。

開いてみると「スマホ向けのデザイン」のクラスが書いてあります。
正確には「ディスプレイサイズが680px以下の時のデザイン」です。

ここの項目に以下のコードを追加しましょう!

p br{ display:none; }

このコードは改行タグのbrをディスプレイに反映しません!という意味です。
つまり「ディスプレイサイズが680px以下の時はbrを反映しません」ということですね!

コードを記入したらファイルの更新を忘れずに…。

 

早速どうなったのか見てみましょう!

パソコンで先ほどのプロフィールページを見てみましょう!

うん、ちゃんと問題なく改行されていますね!

 

続いてスマホ画面です。

おぉ!改行タグが消えています!

 

さっきの改行ありの時よりも文章がまとまって見えます!
だいぶ読みやすくなったのではないでしょうか!?

sumaho08

まとめ

スマホの普及にともなって、レスポンシブデザイン対応は今では必須の仕様になっています。

このブログでは無いのですが私が運営している別のWordPressブログのアクセス解析を見ると…。
実に…訪問者の約60%以上がスマホからアクセスしています!

2人に1人以上はスマホでブログを見ているということですね。

せっかくスマホからアクセスしてくれたのに画面が見にくい、
ましてや文章が読みにくいなんてことでは非常にもったいないです!

レスポンシブデザインのテンプレートだから大丈夫、ではなくてもう一工夫…。
ぜひ、ブログのデザインだけでなくて文章の見え方にもこだわってくださいね!

The following two tabs change content below.
うたと
2014年11月から本格的にアフィリエイトを開始、Lureaで基礎を学ぶ。 初月で○万突破!という感じではなく、地道に少しずつコツコツと稼げるようになったタイプ。現在の月収はほったらかしでも約12,000~16,000ほどのクソザコ。 さらなる飛躍を求めてこのブログを立ち上げます。