« フォトグラフィプラン(Photoshop+Lightroom)、購入前の情報と、購入後の登録手順まとめてみました | トップページ | 【葵祭前儀「献撰供御人行列」2015年度参加者募集】葵祭前日(5/14)、滋賀堅田から京都下鴨神社へ、琵琶湖の鮒を納めに行く行事です »

2015年4月24日 (金)

モバイル フレンドリー 対策・対応について(簡単にできる最低限の応急措置、まとめました)



スマートフォンでご覧のみなさま、こんにちは。
2015年4月21日から、Googleが「モバイル フレンドリー」という方法を採用することになりました。

「スマホ画面対応」の見やすいサイトは、モバイルでの検索結果で優遇しますよ”、というものです。
(”スマホで見づらいサイトは、モバイルでの検索結果で順位を下げますよ”、ということです。)

このブログは、@niftyのブログシステムを使っているため、「モバイル フレンドリー」になっています。
しかし、2015年4月現在もかなりの数のウェブサイトが、モバイル フレンドリーに対応していないようです。
この連休中、サイトを手直しするか、思い切って作り直すか、頭の痛い人も多いのでは・・・?

筆者のホームページも非対応だったため、4月にちょこちょこ手直しをしました。
その経験をもとに、とりあえずモバイル フレンドリーにする、簡単にできる方法を書いています。

1.モバイル フレンドリーかどうか確認する
こちらですぐに分かります。調べたいサイトのURLを入れて下さい⇒モバイルフレンドリーテスト

2.「PageSpeed Insights」で、具体的な問題点を把握する
こちらですぐに分かります。調べたいサイトのURLを入れて下さい⇒PageSpeed Insights


以下で、具体的な設定をしていきます。

3.(1)「モバイル用 viewport (ビューポート)を設定する」
htmlの
<head>部分に、この一文を追加しました。
<meta name=viewport content="width=device-width, initial-scale=1">


↓こんな感じになります(一例です)↓

<head>
<title>Jun Kanematsu Photo Works</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="robots" content="noimageindex">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="Keywords" CONTENT="beautiful scnery photos,nature photos,Japan,Katata." >
<meta name="Description" content="兼松純の公式ホームページです" />
</head>



▼画像検索から外してもらうために、<head>部分にこちらも追加しております。
<meta name="robots" content="noimageindex">

▼viewport の設定パターンは他にもあるということなので、ご関心のある方はこちらをどうぞ。
http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/
(上記の「てっく煮ブログ」さんで紹介されている「パターン4」が、今回ご紹介している方法です。)


3.(2)「リンク同士が近すぎます」(タップ要素同士が近すぎます)対策
・改行(<br>)やスペース(空白)を入れて、リンク同士を遠ざけるのが一番早いです。
・この際リンクボタンを大きくするのもひとつの方法です。

※あくまで「簡単にできる最低限の応急措置」ということでご容赦下さい。

3.(3)「テキストが小さすぎて読めません」(フォントサイズが小です)対策
CSSで{font-size}の箇所を探す。
たぶん{font-size: 12px; }など小さい数字になっていると思うので、16や20などの数字に変えてみる。

※{font-size}の箇所の探し方
・Windowsの場合⇒CSSの管理画面を開いた後、CTRLキーを押しながらFを押す
⇒出てきた検索ボックスに font-size と入力

※私の場合、デザイナーさんの作った雛形を一部利用しているので、CSSをむやみにいじれず・・・。
やむをえず、htmlで対処しました。 <body>部分に、<p style="font-size:150%;">を追加。

↓こんな感じになります↓

<body>
<p style="font-size:150%;">
(本文が書かれている)
</p>
</body>


▼今回参考にしたページ
Googleのサポートページ(モバイル ユーザビリティ)
(技術者以外には難しい部分も含まれているので、あくまで触りの部分のみ参考にしました)



今後の対応・・・レスポンシブ・ウェブデザインへの移行

スマートフォン用、パソコン用と分けてページを作る必要がなく、単一の設計図(html)で対応できる。
それがレスポンシブ・ウェブデザインです。

当ブログもいずれ独自ドメインに移して、Wordpressで運用することを検討中です。
(このブログは容量が2Gまでなので、そろそろ画像で一杯になりつつあります・・・)

Wordpressテーマで考えているのが、こちらのsimplicity。
日本語で、無料でできるWordpressテーマをお探しの方は、こちらもチェックしてみてください。
http://wp-simplicity.com/


普段他のことに追われて、なかなかこういう作業って後回しになってしまうんですよね。
ご参考になれば幸いです。


« フォトグラフィプラン(Photoshop+Lightroom)、購入前の情報と、購入後の登録手順まとめてみました | トップページ | 【葵祭前儀「献撰供御人行列」2015年度参加者募集】葵祭前日(5/14)、滋賀堅田から京都下鴨神社へ、琵琶湖の鮒を納めに行く行事です »

ソフト・カメラ・機材・ネット関連など」カテゴリの記事

2016年12月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
サイト内検索
ココログ最強検索 by 暴想

東日本大震災の記事を御覧の皆さまへ

このブログのご案内

  • ご訪問ありがとうございます♪

  • 風景写真家、アマナイメージズ契約作家。故郷滋賀の里山や寺社、各地の知られざる風景を撮影して歩いています。2007年12月から琵琶湖畔の町・堅田の写真を更新してきた写真ブログです。

  • ▼公式ホームページ(堅田を初めとする風景写真・自然写真を掲載しています) junphotoworks.com

    フェイスブックへのリンクは下記をご利用下さい。応援ありがとうございます!



  • Copyright(C)2007-2015.
    兼松 純(Jun Kanematsu)

    写真に電子透かしを使用しています。

    当ブログに掲載されている写真・画像・文章・イラストの無断複写、転載等の使用および二次使用を禁じます。
    No reproduction or republication without written permission.

    ■当ブログ掲載写真は、地域の方に楽しんでいただく作品発表の場として、2007年より掲載してきました。2014年には、祭事写真のために筆者(兼松)が書いた解説文を専門家が新聞コラムに無断使用する事態があり、弁護士相談の上で関係者各位に申し入れを行いました。 判断に迷うときは、事前にお問い合わせいただきますようお願いします。

    ■2014年春からアマナイメージズに作品の一部を預けています。 WEBに掲載していない作品もございますので、詳細はお問い合わせ下さい。

連絡先/Contact

堅田の町のご紹介

お気に入りサイト・ブログ

無料ブログはココログ