So-net無料ブログ作成

【私のブログの進化論 ~ソネットブログ第二次レスポンシブデザイン化計画】 [ブログ運営]

【私のブログの進化論 ~ソネットブログ第二次レスポンシブデザイン化計画】
ブログ記事画像_パソコンとスマートフォン
グーグルの検索結果評価基準として導入された『モバイルフレンドリー』に対応すべく始めたブログのレスポンシブデザイン化。
現在進行形で進む私のブログの改造化についてご紹介したいと思います。ブログの改造をお考えの方はご参考にして下さい。

執筆中の記事を公開するスタイルで実験中のため当記事は執筆中の部分があり未完成ですが個別の内容についてはご参考になるかとと思います。詳しくはこちらの記事をご参照下さい。

この記事の目次

ブログをスマホ対応にしようとしたきっかけは…

私はこのソネットブログを始めてから一貫してPCでの閲覧(それも自分が利用しているブラウザ「グーグルクローム」を中心に)を前提として記事の体裁を考えてきました。

スマホを持っておらずスマホで閲覧すると自分のブログがどの様に見えるのかを自分自身で確認する術を持っていなかったことがスマホ対応をないがしろにしてきた主要因でした。

ただ、もしスマホを持っていたとしてもタグを駆使しながらブログの体裁を整えられるほどブログ執筆(というかサイト運営の)スキルを持ち合わせていなかったので結果は同じだったかもしれません。

さりとて勉強するモチベーションも十分ではなく心のうちでは「そのうちに…」とは考えていながらもそのきっかけもないまま放置していました。

修正のきっかけは他の記事でも書いてきた通り、グーグルがスマホによる検索結果の評価基準として「スマホ対応しているかどうか」という点を採用すると宣言したこと、そして私のブログもスマホからのアクセスの比率が高まりその重要度が増してきたという分析結果(そんな大げさなことをしていませんが)を考慮したからです

スマホで閲覧してみた私のブログ

私がスマホの購入に踏み切ったのは世間にスマホが出回ってからだいぶ後のことでした。

その詳細をこんな記事で語っていますのでご興味ある方はご参照下さい。
ブログ記事トップ画像_i-phone_ババ抜き
私はガラケー好きでスマホの必要性を感じておらず、キャリアが「もうガラケーでの通信サービスは終了しました」って言うまでスマホへの乗換えは考えていませんでした。
その私がなんと年末にあっさりとガラケーを捨てiPhoneに乗換えてしまいました。
今回はその経緯と使ってみた感想をお伝えしたいと思います。
スマホへの乗換えにイマイチ乗り気でない方は参考にしてみて下さい。

まずは自分のブログがスマホでどの様に見えるのかを過去記事で見てみました。

それはもうヒドイ状態でした。

体裁が崩れているページも多くとても見にくく、「これではせっかく検索して訪問してくれたとしても読んではもらえないな」というのが率直な感想でした。

それまであまりにもスマホ閲覧に関して無頓着過ぎてまったく気にしていなかっただけに愕然としました。


ブログをスマートフォン対応にするために立てた私の修正計画

既に500件を超える記事のそのほとんどがスマホ対応しておらず、正直なところ「どこから手を付けていいやら…」という有り様です。

そして立てた計画が…
まずはスマホ閲覧で最もストレスを感じる 『横スクロール』 を解消しよう!
ということでした。

そのほかにもいろいろ修正したい点は多々あったわけですが、そこはグッとこらえてこの『横スクロール問題の解消』を全記事について施すことを『第一次レスポンシブデザイン化計画』として取り組むことにしました。

「それ以外の問題は『第一次計画』が完遂できたら取り組もう」、そう考えました。

スマホ対応をせず放置したツケが一気にやってきてこの修正作業は私のブログ運営ではかなり「しんどい作業」となりました

『横スクロール』が発生してしまう原因

横スクロールが発生してしまうのは各要素の幅(width)設定が長すぎることに起因しています。
  1. 画像の幅が長すぎる
  2. 画像の貼り付け位置が悪い
  3. 表<table>の幅が長すぎる
  4. ボックス要素<div>の幅が長すぎる
  5. リンクとして記載したURLが長すぎる
これらの原因をひとつづつ潰していくしか無いようです。

『横スクロール』を解消するためにしたこと

解消するためにはまずそれぞれの項目について適切な改善策を調べました。

そして以下の様な方針で取り組みました

画像の大きさを調節

ブログに画像を挿入するには画像貼り付けのタグ<img>を使いますが、ソネットブログの編集画面の画像挿入ボタンを使用するとデフォルト(初期値)では以下の様な感じになります。

<a href="(ここには画像の保存先アドレス)" target="_blank"><img src="(ここには画像の保存先アドレス)" width="350" height="231" border="0" align="" alt="(ここには画像の保存名称)" /></a>

私はソネットブログのこの機能を利用して画像の貼り付けをしてきたのですべてこの形式になっていました。

上記のwidth="350" height="231"の部分が画像の大きさを表すタグですね。

ソネットブログではどんな大きさの画像でも長辺の最大値を調節してくれます。

ブログに画像登録する際に自動的に長辺の最大値が設定されるので『元画像』が大きな画像でも自動的に「縮小して」貼り付けてくれます。

この指定した『長辺の最大値』はブログの設定メニューで調節可能ですが私は上の例の様に350px(ピクセル)にしています。

これが350pxの画像です。
ブログ記事画像_パソコンとスマートフォン.jpg

当初は『長辺の最大値』以上の大きさを貼りつけることをしていなかったのですが、その後敢えて画像挿入タグの大きさを手で直したりして時々特大サイズの画像を掲載したりし始めました。

width="640"

なんてタグが混じっているとスマホで閲覧すると問題になります。

でも大きい画像も時には載せたい…。

そんな時は

width="640" height="427"

この記載を

width="100%"

これに変更するとこんな風にパソコン、スマホどちらでも最大幅で表示できます。
ブログ記事画像_パソコンとスマートフォン.jpg

スマホで見るとどちらも同じように見えるかもしれませんが、『横持ち』でご覧になるとその違いがわかると思います。

ちなみに画像登録の『長辺の最大値』以上の大きさにしてしまうと画像は大きくなりますが、元々の画像を『引き伸ばして』大きく表示させるので解像度が粗く見栄えが悪くなりますので画像ファイルの『編集』ボタンをクリックして『長辺の最大値』を大きめに設定し直します。

『元の画像:横600ピクセル×縦150ピクセル』
『長辺の最大値:350ピクセル』
『画像貼り付けタグの設定:width="500" 』


上記の設定ですと画像が綺麗に表示されません。

『元の画像:横600ピクセル×縦150ピクセル』
『長辺の最大値:600ピクセル』
『画像貼り付けタグの設定:width="500" 』


に変更します。

ブログ記事画像_ソネットブログ_画像ファイル編集画面.jpg

ブログ記事画像_ソネットブログ_画像ファイル編集画面2.jpg

この場合も元々の画像が設定より小さい画像ですと粗さが改善されませんので大き目に表示させたい画像は大き目の画像を用意する必要があります

ソネットブログはスマホ用に画像を自動調節してくれる?

実は画像の横幅について修正を加えてみたのですが、よく見たら大きい幅を設定をしてる画像があってもスマホの横スクロールが起きない記事があることに気付きました。

ソネットブログはPC用とスマホ用は違う表示をさせているので単純に大きな画像を貼り付けているだけなら自動調節してくれてスマホで『縦持ち』しても、はみ出さない程度の大きさに表示してくれます。

従って画像を単純に貼り付けているだけなら実はあまり画像の大きさ(横幅の長さ)を気にすることはないんですね。

ただ他の要素の中に入れている場合、例えば表やボックス要素、つまり<table>や<div>といったタグの中に画像を入れると調整が効かなくなり横スクロールを引き起こします。

結局後々のことも考えてソネットブログの自動調整機能を頼らなくても良いように画像はすべて調節しました

メディアクエリを適用してみた

ネットで画像のレスポンシブデザイン対応について調べていて『メディアクエリ』を利用する、という手法を知り試してみました。

CSSのことは良くわからない面も多かったのですが『どこに貼りつけるか?』まで説明されているサイトを探し当てたのでやってみました。

こんな感じです。
ブログ記事画像_ソネットブログ_スタイル編集画面_画像用メディアクエリー

詳細な説明は省きますが

『閲覧している画面の横幅が800px(ピクセル)未満になったら画像の最大値は画面の横幅の90%を最大値にしなさい』

という命令をするCSS(スタイルシート)を貼り付けているようです。

結論から言うとこれをやらなくてもソネットブログでは標準機能で自動調節してくれますし、div要素などの中に入っているとメディアクエリを使ってもうまく作動しないことからやっても意味がない?というのが私の結論です。(一応、せっかくやってみたのでそのまま活かしていますが…)

div要素内で反映しないのは、ソネットブログではスマホ用画面のスタイルシートの編集はできない仕様になっているからのようです。この点に関しては詳細を後述します

画像の貼り付け位置を調整

いろいろと凝った作りにしたくて画像の位置をアレコレいじった記事が多数存在しました。

いわゆる「文字の回り込み」がある画像の貼り付け方です。

先ほどのタグの例の

<align="">

ですね。

通常「""」つまり「空欄」のままですので左端に表示され文字は画像の横には表示されません。

ブログ記事画像_パソコンとスマートフォン.jpg align="left" と指定すると画像は左側に、その右には文字が書き込まれます。


ブログ記事画像_パソコンとスマートフォン.jpg align="right"と指定すると画像は右側に、その左には文字が書き込まれます。


これが文字数などの関係でぐちゃぐちゃになってくると『横スクロール』が発生してしまいます。

基本的に<align>タグは全て空欄を基本にして文字の回り込みが無いように書き換えました。

(その後<div>タグを使用してうまく整えて文字の回り込みもできるようにしました)

表の幅と余白を調節


基本的に長さ指定をほとんどしていなかった表全体の幅についてはスマホで表示できる程度を最大値とするようにしました。

これにより『横スクロール』問題は解決できました。

しかしながら「体裁」という面においては私のブログに掲載されている表は多分に改善の余地がある状態でした。

PCで閲覧すると整っている表もスマホで閲覧すると「スゴイこと」になっていたりします。

そうです。私のブログで最も厄介なのは表の取り扱いでした。

表の作成には<table>タグを使用しますが、そもそも<table>タグは現在のHTMLでは推奨されないタグとなっているようです。

指南サイトなどでは既にその使用を控えた方が良いと説いているものも多く、深入りは禁物だと思いながらレイアウトにバリエーションを持たせるために既にこのブログの多くに導入していました。

<table>タグにおいて幅や空白など「長さを指定」することがとても重要で、<div>タグよりもその指定が難しいということに気付かされました。

特にmargin や padding といった指定が「言うことを聞いてくれない」現象に悩まされました。

現在も根本的に置き換えが済んでいないページのレイアウトは体裁があまり整っていないものになったままですが順次ボックス要素を利用したレイアウトに変更したいと考えています。

私が<div>タグによるボックス要素を積極的にブログに取り入れなかったのは、width margin padding といった「長さを指定」するタグを指定するのが面倒だと感じていたからです。

しかしながらスマホでの閲覧を意識してレイアウトを調整するためにはこの様な「長さを指定」するタグを使いこなすことがとても重要であることを痛感し勉強しました。

そして先述の通り<div>タグ以上に<table>タグの方が「長さを指定」することが難しくPC画面、スマホ画面両方で綺麗な表示にすることが難しいと思っています。

現在の私の方針は表形式にした方が見やすいと判断したものだけにに<table>タグを利用することにしました。

URL記載によるリンクを修正する

ソネットブログではURLを記述した時に自動リンクをするかどうかの設定を選べますが私は『自動リンクする』を選択しているため記事内にURLを記述すると自動的にリンクを貼ってくれます。

ただつながった英文の記述は一つの単語として認識するようで途中で改行してくれません。

従ってスマホの横幅を超えるような記述があると横スクロールを引き起こす原因となります。

これには2つの対策を施しました。

1つ目の対策は文字の大きさを小さくして長い英文をスマホで表示しても1行になるようにしました。

http://hyokki.blog.so-net.ne.jp/2012-10-14-12

2つ目の対策はURLそのものではない表示方法、例えば

当サイトのサイトマップはコチラ

などの表示に変更しました

『横スクロール』以外に「ついでに」した修正作業

私のブログはスマホ閲覧の問題点は決して『横スクロール』問題だけではありませんでした。従って比較的すぐに取り掛かれそうなことについては一緒に対処を試みました。それらについてご紹介したいと思います

接近し過ぎたリンクの解消

私はブログ内に無数に他記事へジャンプするリンクを貼っています。できるだけ沢山のページをご覧になって頂きたいと考えてこの手法を重視しています。

場合によっては『記事一覧』のように「一覧形式」で記事タイトルにリンクを貼っています。その時に問題になるのがリンクを貼っているそれぞれの記事と記事の「すき間」が狭すぎることです。リンクを辿って該当記事にジャンプする時にパソコンで閲覧している時には問題ならなくてもスマホで閲覧するとクリックではなく「タップ」での不便さにつながるのです。

私のアドバイザー「グーグル ウェブマスターツール」からは私のブログの沢山の記事がこの問題を改善すべきだと指摘されていました。

最初は単純に「改行」で対応していみたのですが、改行だと今度は行間が開きすぎてしまいます。

仕方がないのでまた「長さ指定」の領域に手を出すことにしました。

<div>タグでボックス要素内の改行の高さ調節をしたのです。

先述の通り、私はこの様な幅や高さを数値で調節するのがすごく面倒に感じていました。それにこのように数値が沢山記述されていくと後で見たときにタグの記述が自分でもわからなくなってしまうのではないかと不安に感じていました。

しかしながら数をこなしていくと慣れるもので今では当初予想していたほど苦にならなくなりました。そして何より「もう少し左に寄せたいんだけでなぁ」とか「ちょっと間隔がイメージと違うけど仕方ないか…」って時に「もうひと手間かけてみようか」という気にさせてくれるようになりました

はめ込んだ動画の最適化

動画をブログにはめ込んだ場合、PCで閲覧した場合とスマホで閲覧した場合では微妙に動画の見え方が異なります。

通常のはめ込みだとこうなります。



幅(width)は420ピクセルで設定しています。

これをスマホで閲覧してみると…
ブログ記事画像_スマホの動画画面_通常版.jpg

なんかとても縦型、というか正方形に近い形の画面になりますね。

これをスマホ対応するとこんな風になります。

〔PCの画面はこうなります〕


〔スマホの画面はこうなります〕
ブログ記事画像_スマホの動画画面_レスポンシブデザイン版.jpg

見た感じが自然?

まぁ、気持ちも問題かな?

「文の途中で改行」を止めた

記事執筆中です<(_ _)>

修正作業をしていくうちにわかったこと

記事執筆中です<(_ _)>

ソネットブログではスマホ閲覧ページはカスタマイズが出来ない

記事執筆中です<(_ _)>

ソネットブログではスマホ閲覧ページにはスタイルシートが反映されない

記事執筆中です<(_ _)>

表(tableタグ)は推奨されないタグで制御が難しい

記事執筆中です<(_ _)>

strongタグはスマホでは太字にならない

記事執筆中です<(_ _)>

『第二次レスポンシブデザイン化計画』推進の原動力となった言葉とは…

色々なブログを参考にさせてもらいました。

とても洗練されたデザインで内容も理路整然と書かれているブログを読ませて頂くにつけ、何だか「手作り感満載」の私のブログが情けないないなぁ、と思う反面、そのブログを運営している方々も私と同じようにスキルの不足していた時代に書かれたブログをひとつひとつ丹念に修正していって『今がある』ということを知ることもありました。

既に第一次計画が終了して第二次移行期を検討するため、新しい技術の参考にアレコレ人様のサイトを物色していて出会ったサイトがあります。
というサイトです。

サイト運営にまつわるノウハウを判り易く解説してくれていてとても勉強になりました。

もともとは検索エンジンで検索して探し当てたブログの記事だったのですが過去記事にも目を通させて頂き参考にさせて頂きました。

その中の日記的な記事カテゴリーの中にこんなタイトルの記事を見つけ私を引きつけました。

『やり直したい…』

記事に書かれていた内容をご紹介したいと思います。


このサイト、1から全部作り直したい…
 いろいろ誤解していたり、分かっていなかったりしたCSSやHTML、このブログを書きながら覚えた感じなのですが…後から細々と手直しを繰り返してきましたが…
 収拾が付かなくなってきた…

 あー、いっそのこと全部作り直したい…
 でも、そんな時間も気力もない…

 苦しい管理人の独り言でした…


私も何度、「このブログを1から作り直そうか」と思ったことか…。

もう収集つかない状況を投げ出したいと思ったことか…。

気分は『サグラダ・ファミリア』を修復している作業員です。

ブログ記事画像_サグラダファミリア

ブログ記事画像_サグラダファミリア_作業員



でも、こんなスキルの高い人でも私と同じような悩みを抱えながら取り組んでいるんだ、って知ることができてとても励みになりました。

私の『第二次レスポンシブデザイン化計画』推進の原動力になったのは間違いありません。

管理人様には勉強をさせて頂いた上にモチベーションアップもして下さり感謝しております。
<(_ _)>

そして、ブログにはこんな力があることを私は信じています。

私も自分のブログが何か人に「良い影響を与える」ことができたらいいなって…

私が『第二次レスポンシブデザイン化計画』でしたいこと

記事執筆中です<(_ _)>

関連記事 リンク集

関連する記事も併せてご覧ください。
ブログ記事_トップ画像_パソコンとノートとコーヒー
現在ブログのリニューアル作業を進めていて記事の更新が覚束ない状況になっています。そこで記事公開に関して新しい試みにチャレンジしたいと考えています。
リニューアルの概要や私のブログ運営についても簡単に触れていますのでご参考にして頂けると幸いです。

ブログ記事画像_パソコンとスマホ
私は自分のブログを『レスポンシブデザイン』にすることが急務だと感じています。
『レスポンシブデザイン』とは『PC・タブレット・スマートフォンなど大きさの異なるディスプレイのデバイスから閲覧しても最適化されたレイアウトで閲覧できるWebサイトのデザイン』のことです。

ブログ記事画像_パソコンとコーヒーとスマホ
グーグルの検索エンジンのサイト評価基準に『モバイルフレンドリー』と項目が追加されました。
私のブログの検索状況に関しては大きな変化は無いように思われますが、それでも現在急ピッチでレスポンシブデザイン化を進めています。

ブログ記事画像_パソコンとペンとスマホ
今回当ブログの全記事565記事に導入が完了しました(はず?)のでご報告を兼ねて久しぶりに記事を書きたいと思います。
お伝えしたいことは沢山ありますが、今回は簡単に概要だけをお伝えしたいと思います。




カテゴリ別記事一覧
〔ブログ運営〕
◆ ブログ運営に関連する情報や私の思いなどをご紹介しています。
ブログ運営_はるのたわごと_カテゴリ別記事一覧_画像
画像をクリックすると関連カテゴリの記事一覧がご覧になれます



スポンサーリンク

記事を最後までお読み下さり
ありがとうございました<(_ _)>

記事が良かったと思われた方は
ご協力のクリックをお願いします
 にほんブログ村 転職キャリアブログ 転職・転職活動へ
〔当ブログのご紹介〕
『はるのたわごと』ってこんなブログです

〔サイトマップ〕
『はるのたわごと』の歩き方

〔記事カテゴリ一覧〕
『はるのたわごと』の記事カテゴリをご紹介

⇒ 最新記事へ

スポンサーリンク

nice!(14)  コメント(2)  トラックバック(0) 
共通テーマ:blog

【ブログリニューアルが忙しくて記事が書けない!私の考えたアイデアは…】 [ブログ運営]

【ブログリニューアルが忙しくて記事が書けない!私の考えたアイデアは…】
ブログ記事_トップ画像_パソコンとノートとコーヒー
現在ブログのリニューアル作業を進めていて記事の更新が覚束ない状況になっています。そこで記事公開に関して新しい試みにチャレンジしたいと考えています。
リニューアルの概要や私のブログ運営についても簡単に触れていますのでご参考にして頂けると幸いです。

この記事の目次


ブログのリニューアル作業をしています

現在私はブログのリニューアル作業を進めています。

前回進めてきた『第一次レスポンシブデザイン化計画』はグーグルの検索対策という意味が強かったのですが、今回やろうとしていることは『検索に引っ掛かりやすい』かどうかは二の次とにかくブログの見栄えの悪かったものを少しづつ変えて行こう!というコンセプトです。

以前からやりたかった様な項目もありますし、『第一次レスポンシブデザイン化計画』を進めている最中にいろいろな調べ物をしたり実際の作業をしているうちに副産物として生まれたアイデアもあります。

かなりの時間を費やしながら変えて行っています。

時々遅々としてはかどらない作業にイラつきながらも自分なりに気に入ったデザインに変更できた時の満足感を励みに頑張っている感じです。


手始めに取り組んだのは『関連記事一覧』ページ

最初にやりたかったのは一つ一つの一般的な記事ではなく『サイトマップ』とか『関連記事一覧』とか『リンク集』の様な『案内ページ』のリニューアルです。

特に『関連記事一覧』はずっと前から改善したいと考えていましたが、リンクを沢山貼らなければならず、しかも日々更新作業が発生するページなので体裁をきちんとして取り組まないと作り直しが面倒な項目であると考えて慎重にしていました。

そして今回『第二次レスポンシブデザイン化計画』として取り組む第一弾として満を持して取り組んだのがこの『関連記事一覧』です。

リニューアル前の関連記事一覧ページ

記事一覧でもまだリニューアルが『手つかず』なのが例えばこのページ。
ブログ記事画像_記事一覧_サイト画面_情報

実際に記事の末尾などに貼り付けている関連記事一覧ページへのリンクはこんな感じです。
〔情報〕
◆ジャンルを問わない
お役立ち情報
スマホの方はコチラ.jpg   パソコンの方はコチラ.jpg
 現在ご利用の機種に応じてスマホ/パソコンの画像をクリックすると類似記事が一覧で確認できます

リニューアル後の関連記事一覧ページ

既にある程度作りこみが済んだのがこのページです。
ブログ記事画像_記事一覧_サイト画面_暮らしのお金.jpg

リンクも併せてリニューアルしました。
はるのたわごと カテゴリ別記事一覧
〔暮らしのお金〕

◆ 暮らしのお金にまつわるお話を書いてます。
暮らしのお金_はるのたわごと_カテゴリ別記事一覧_トップ画像
画像をクリックすると関連カテゴリの記事一覧がご覧になれます


修正作業に時間がかかっている理由

修正作業に時間がかかっているのは私のブログ執筆スキルが低いというのもあるのですが、最も大きな理由は『記事の修正に手を出してしまう』からです。

上でご紹介した『リニューアル後』の関連記事一覧ページをご覧になって頂くとおわかりですが、記事の紹介文や画像を掲載していますが、その紹介文を記事本文と整合性をとるために記事そのものを見直したくなる衝動に駆られます。

画像も「もっと記事のイメージに合うものにしたい」とリニューアル魂に火がついてあれもこれも手を出したくなってしまうんですね。

ですから、ある程度関連記事一覧ページのリニューアルが済んだ〔暮らしのお金〕カテゴリも現在は記事そのものの体裁を新しいコンセプトで作り直しています。

しかも章立てにするためには記事の構成などにも手を出し始めて収拾がつかなくなっています。


修正作業がヘビーで困っていること

ブログの修正作業をしているとどうしても新しい記事の執筆が覚束なくなります。

書きたい題材は10以上あり書きかけの記事も沢山あります。

現在は1つの記事を除いてほとんど放置したままになっています。

以前は勢いであまり文章の構成やタイトルづけなどに構わず、とにかく記事の更新を最優先にしていたので、この方法をとれば現在の状況よりも記事の更新頻度は上げられるかもしれません。

しかしながらそうやって執筆した記事は先述の通り、大幅な記事の改修の対象となり現在の私の足を引っ張っているとも言えます。

自分で書いた記事なのでなんですが、こんな風に思いながら記事の手直しをしています。

「中身は悪くないこと書いてるけど読みにくいなぁ。
もう少し読み手を意識すれば良い記事になるのに…」


ブログに掛けている時間は以前とは比べ物にならないくら多いのに一向に記事更新がされないのを何とかしたいなぁってずっと思っています。


そこで思いついたアイデアとは?

以前の様な「思いついたことをとにかく書きまくってそのまま公開してしまう」執筆パターンから現在はそのパターンを変えています。

少しは記事の構成などを意識して章立てにするなどしているので、どうしても時間がかかります。

特に書き直しの時間が多いので書きたいことを思いついてから実際の記事になるまでの時間が格段に違います。

リニューアル作業に時間を割いていること、そして執筆時間が以前以上にかかってしまうこと、この2点が私の記事更新を阻んでいます。

そのため少し新しい試みをしてみようと思いつきました。

記事の構成がある程度出来上がったら骨組み段階から公開してしまおう!

というものです。

私の最近の記事の傾向として『説明的』な部分が多くてこれを記事の形にするまでにとても時間がかかってしまいます。

でも一部の説明的な部分が無くても全体的な内容を網羅できるケースもあります。

「詳細説明の部分は別ページに記載してリンクで飛ばす」方法が一般的なのでしょうが私のブログはできるだけ一つの内容はリンクを飛ばずに1ページで完結したいというコンセプトのもとに運営しております。

その分、『一項目でも書きかけの部分がある』と公開にこぎつけない。というのが今までのパターンでしたがそれを未執筆のまま公開してしまおうというものです。

読み手にとって不便なのでずっとこの方法を続けるつもりもありませんが、現在はブログ運営に関する記事を中心に公開を考えておりますので、記事の書き方のご参考にでもしてもらえるかもしれないなって考えてやってみることにしました。

現在書きかけの記事は…
ブログ記事画像_パソコンとスマートフォン
グーグルの検索結果評価基準として導入された『モバイルフレンドリー』に対応すべく始めたブログのレスポンシブデザイン化。
現在進行形で進む私のブログの改造化についてご紹介したいと思います。ブログの改造をお考えの方はご参考にして下さい。
という記事です。

第一次レスポンシブデザイン化計画として取り組んだブログのモバイルフレンドリー化の実作業とそこから派生した私のブログの諸問題、更には『第二次』でやりたいと考えていることなどをお伝えしようと考えています。

既に公開を済ませましたのでコチラの記事もご覧下さいね。



カテゴリ別記事一覧
〔ブログ運営〕
◆ ブログ運営に関連する情報や私の思いなどをご紹介しています。
ブログ運営_はるのたわごと_カテゴリ別記事一覧_画像
画像をクリックすると関連カテゴリの記事一覧がご覧になれます



スポンサーリンク

記事を最後までお読み下さり
ありがとうございました<(_ _)>

記事が良かったと思われた方は
ご協力のクリックをお願いします
 にほんブログ村 転職キャリアブログ 転職・転職活動へ
〔当ブログのご紹介〕
『はるのたわごと』ってこんなブログです

〔サイトマップ〕
『はるのたわごと』の歩き方

〔記事カテゴリ一覧〕
『はるのたわごと』の記事カテゴリをご紹介

⇒ 最新記事へ

スポンサーリンク

nice!(9)  コメント(0)  トラックバック(0) 
共通テーマ:blog

【グーグル検索でモバイルフレンドリーと判定されているかを確認する方法とは? 】 [ブログ運営]

2015年4月21日からグーグルの検索のサイトの評価基準に『モバイルフレンドリー』かどうかという点が考慮されることとなりました。

当ブログはほとんどがグーグルやヤフーの検索によりアクセスされることからこのグーグルの新しい基準に対応することが急務と感じ『レスポンシブデザイン化計画』を実行に移しました。

【『レスポンシブデザイン』をソネットブログに導入 それが私の急務】

そして当ブログがあまりにも『モバイルフレンドリー』ではないことに危機感を覚え膨大な過去記事のデータをひとつひとつ書き変えることを決意しました。

【グーグル検索で「スマホ対応」表示させる為に565個の記事を手直しした】

ようやくその作業もひと段落しましたので、その中でやってきたことや気づきなどブログをモバイルフレンドリーにするために役立ちそうな情報をお伝えしていきたいと思います。

今回はまず自分のブログがグーグルが言うところの『モバイルフレンドリー』なのかどうかを判定する方法をご紹介したいと思います。

ブログ記事画像_パソコンとペンとスマホ


 ★ この記事の目次 ★
  1. グーグルの『モバイルフレンドリー』とは何か?

  2. 『モバイルフレンドリー』における『モバイル』とは?

  3. モバイルフレンドリーの証し『スマホ対応』のマーク

  4. グーグルの検索におけるサイト評価基準『モバイルフレンドリー』

  5. モバイルフレンドリーかどうかを確認する方法

  6. モバイルフレンドリーテストの利用法

  7. 『モバイルフレンドリーテスト』の注意点

  8. 『ウェブマスターツール』を使ってサイトのモバイルフレンドリー状態を確認する

  9. モバイルフレンドリーのエラーの詳細

  10. グーグルのクローラにすぐに巡回してもらうには?

  11. この記事のまとめ



グーグルの『モバイルフレンドリー』とは何か?

まずはモバイルフレンドリーとはどのようなことを指すのかをおさらいしておきます。

グーグルの公式サイトでは以下の様な説明がされています。


タップやズームなどをしなくてもテキストが読みやすい、タップ ターゲットの間隔が適切、再生できないコンテンツが含まれていない、横方向へのスクロールが発生しない、などの特徴があります。

出典:グーグル「ウェブマスター向け公式ブログ」
 モバイル フレンドリー アップデートを開始します
/2015年4月21日
 

ここで説明されている特徴は逆に考えるとモバイルフレンドリーとみなしてもらえない阻害要因であると捉えることができます。

グーグルではモバイルユーザーの閲覧のしやすさを『モバイル ユーザビリティ』として、『ページのモバイル ユーザビリティの問題を修正する』と題して以下の様なエラーレポートが出力されるページを用意してサイト管理者へアドバイスしています。

ひとつづつ考えてみましょう。

携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと

携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと

『再生できないコンテンツが含まれている』原因の多くがflashコンテンツでありこれらがモバイル用のブラウザで閲覧できないことを挙げています。

そのページを閲覧しても観ることができないものがあると本来ブログの書き手が伝えたかったことが伝えられないことになります。

ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること

スマホでは画面を縦長に持ち下に下に画面をスクロールしながらサイトを閲覧するのが一般的なため横スクロールをして読むのはストレスになります。

ズームしなくても判読できるテキストを使用していること

フォントサイズが小さ過ぎて読みにくいことを警告しています。

単純にPCサイトを全体にぎゅっと縮小した様なサイトでは横スクロールをしなくて良い代わりに画面の小さなスマホでは文字が明らかに小さくて何が書いてあるか読むのが至難です。

ユーザーは画面を拡大して読める様にすることはできますが、そうすると今度は横スクロールしなければならなくなってしまいます。

目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

タップとはPCにおけるクリックに相当します。

PCのクリックはマウス操作とカーソルによって位置がシャープに特定しながら行えるのでリンクを貼った文字同士が2行続けて記載されていても特段の問題は生じませんがスマホでは太い指の腹で行間の狭い>2行に違うリンクが貼られた文字が記載されていたりすると誤って違うリンク先をクリック(タップ)してしまうことになりかねません。


『モバイルフレンドリー』における『モバイル』とは?

ここで言う『モバイル』とは「移動式のサイト閲覧機器」という意味ではなくスマートフォンを指します。モバイル本来の移動式という意味よりは移動式端末の『画面の大きさ』に着目して小さな画面で利用するスマホユーザーの特色に応じた対応をしているかどうかを問うています。

ちなみにガラケーは『モバイルフレンドリー』の『モバイル』には含まれていません。従ってガラケーでの閲覧に支障があるサイトであったとしてもスマホの閲覧に支障がなければ『モバイルフレンドリー』ではないとは言われません。


モバイルフレンドリーの証し『スマホ対応』のマーク

スマホでグーグル検索するとお分かりの通り、検索結果で表示されるサイトの紹介には『スマホ対応』の文字が記載されています。

これはグーグルがモバイルフレンドリーと認識したサイトに対してだけ表示されます。逆にモバイルフレンドリーと認識されていないサイトは検索結果にこの表示がされません。

試しに同様に『はるのたわごと』と検索してみて下さい。

スマホ_グーグル検索結果.jpg

上の画像は私が自分のスマホで『はるのたわごと』と検索したときの検索結果です。

検索の第一位は私のブログのトップページです。

矢印で示したのが『スマホ対応』のマークです。

これに対して検索の第二位のサイトには『スマホ対応』のマークが表示されていません。

第二位のサイトをスマホで閲覧してみると…

スマホ_グーグル検索結果からリンクへ.jpg

このサイトは人気ブログランキングの私のブログの紹介記事ですが、上の画像の様にスマホで閲覧するには文字が小さくて読めませんね。

つまりは『モバイルフレンドリー』ではないサイトとなっています。


グーグルの検索におけるサイト評価基準『モバイルフレンドリー』

グーグルの検索上位になることはサイトのアクセスを増やすにはとても重要なことです。

グーグルは今回の評価基準に『モバイルフレンドリー』であるかどうかということを取り入れるにあたり以下の様なことにも言及しています。

パソコンやタブレットでの検索順位に『モバイルフレンドリー』は影響するのか?

この点に関してグーグルはきっぱりと否定しています。

検索順位に『モバイルフレンドリー』かどうかが影響するのはスマホからの検索に限定していてPCから検索した場合の検索順位に『モバイルフレンドリー』かどうかは一切影響しないことを明言しています。

ページ単位とサイト単位のどちらでモバイルの掲載順位が上がるのか?

モバイルフレンドリーなサイトの検索順位はページ単位での検索順位が上がるだけであるとしています。

同一ブログにモバイルフレンドリーであるページとそうでないページが混在している場合にはそれぞれのページごとにその影響は限定されることを明言しています。

これはまたブログの記事にモバイルフレンドリーではないページが含まれていたとしてもブログ全体の評価が下がるようなことはないことも意味しています。

これらのことからスマホユーザーをブログのアクセスアップにおいて重視していないと考えているブログ運営者であれば今回のグーグルの評価基準の変更は気にする必要がないとも言えます。

また「既に新たなアクセスの見込みがない過去記事はどうでも良い」と考えているブログ運営者にとっては今後の運営は意識する必要があるとは言え、過去記事をスマホ対応にするメリットは低いかもしれません。


モバイルフレンドリーかどうかを確認する方法

前置きが長くなってしまいましたが、ご自分のサイトがモバイルフレンドリーかどうかを判定する方法をご紹介します。

大きく分けて2つの方法があります。

グーグルの『モバイル フレンドリー テスト』を利用する

グーグルは自サイトがモバイルフレンドリーかどうかを簡単に判定するチェッカーとなるページを用意しています。

そのページにアクセスして調べたいページのURLを入力すると簡単に判定結果を表示してくれます。

グーグルの『ウェブマスターツール』を利用する

グーグルはサイト運営者向けに『ウェブマスターツール』というものを用意してくれています。

サイト運営に必要な情報をいろいろと提供してくれるサポートツールなのですが、この中に自身の運営するサイトの全てのページがモバイルフレンドリーかどうかを判定してくれる機能があります。

いずれウェブマスターツールの運用についてもご紹介する記事を書きたいと思いますが、詳細をお知りになりたい方はグーグルが用意しているヘルプサイトをご覧ください。

『 ウェブマスター アカデミー』へ


モバイルフレンドリーテストの利用法

まずはモバイルフレンドリーテストのサイトにアクセスします。

モバイルフレンドリーテストページへ

モバイルフレンドリーテスト001.jpg

上の画面の入力欄に調べたいページのURLを入力して『分析』ボタンをクリックすれば直ぐに判定してくれます。

モバイルフレンドリーテスト002.jpg

上の画像は実際に私のブログの記事ページのURLを入力して得られた判定結果です。

画像をクリックすると拡大してご覧になって頂けます。

緑色の帯にある通り、まずはそのページがモバイルフレンドリーかどうかの判定結果をお知らせしてくれます。

問題ありません。このページはモバイルフレンドリーです。

とある通り、このページはモバイルフレンドリーと判定されました。

そしてその下にはスマホでどの様に表示されるのか、クローラ(ロボット)でブロックされたリソースが何件あるか等をお知らせしてくれます。

このテストでモバイルフレンドリーと判定されればモバイルで検索する場合のサイトの評価がスマホ対応とみなされて反映され、検索結果として表示された場合には『スマホ対応』と画面表示されます。

ちなみにチェックしたページが『モバイルフレンドリーではない』と判定されるとこんな感じに表示されます。

モバイルフレンドリーテスト003.jpg

判定結果は緑ではなく赤になります。

モバイルフレンドリーではありません


言葉もそっけなく句読点すら入れてくれません。

断定的な言い回しではありませんが、『何故、モバイルフレンドリーではないのか?』、その理由をお知らせしてくれます。

私のサイトの例では以下の理由でモバイルフレンドリーなサイトと判定された可能性が高いと指摘されています。
  • コンテンツの幅が画面の幅を超えています
  • リンク同士が近すぎます
そして更に『このページをモバイル フレンドリーにしましょう』とサイトの改善方法も提案してくれます。


『モバイルフレンドリーテスト』の注意点

このテストは2つのことに注意して利用すると良いでしょう。

1ページづつしか判定できない

チェックしたいページのURLを入力することにより判定する方法ですので、1ページづつしか判定できません。

ですから既に沢山の記事をアップしているブログの過去記事全部を判定するような場合にはあまり向いていません。

私が今回行った当ブログの『レスポンシブデザイン化計画』でもモバイルフレンドリーテストを1から利用してその判定をしたわけではありません。

この問題は後述するもう一つの判定方法である『ウェブマスターツール』が解決してくれます。

『モバイルフレンドリーテスト』は新しい記事を更新した際などにそのページがモバイルフレンドリーであるか確認する時などには便利に利用できるテストと言えるでしょう。

クローラ(ロボット)がクロールするまでその結果が反映されない

例えば自身のブログの過去記事が『モバイルフレンドリーではない』と判定されたのを受けてサイト記事を手直しして、修正後の記事が『モバイルフレンドリーかどうか』をこのテストで判定する様なケースでは注意が必要です。

修正した記事のURLを入力してテストしてみて問題ないことが確認できたので、試しにそのサイトが絶対検索上位に表示されるような検索ワードでスマホ検索しても検索結果にモバイルフレンドリーの証しである『スマホ対応』の文字が表示されません。

グーグルの検索の評価はあくまでもクローラ(ロボット)がそのページに巡回しに来て初めて更新後の情報が取り込まれますので、それまでは検索時の一連の動作は記事が更新される前の古い情報によります。

従って検索結果に記事修正の効果が反映されるのは次回のクローラの巡回後ということになります。

この『タイムラグ』を解消する方法も『ウェブマスターツール』が提供してくれます。


『ウェブマスターツール』を使ってサイトのモバイルフレンドリー状態を確認する

ウェブマスターは自身のサイトを登録してその状態をいろいろ判定してくれるツールです。

どうも正式名称は『Search Console』に変更になっているようで、実際トップページにも『ウェブマスターツール』の表記がありません。

ただグーグルの各種説明にしばしば『ウェブマスターツール』という呼称が使われていますので、当面は当ブログでも『ウェブマスターツール』と呼ぶことにします。

この『ウェブマスターツール』が提供する自サイトの情報の1項目として『モバイルフレンドリー』かどうかも判定してくれる、ということです。

ウェブマスターツールそのものの利用の準備については改めて記事にしたいと思いますが、利用開始の流れだけご紹介したいと思います。

ウェブマスターツール利用開始の流れ

ウェブマスターツール利用開始の流れは以下の様になります。
  1. グーグルアカウントを取得する
  2. ウェブマスターツールに自分のサイトを登録する
  3. 自分のサイトに登録を反映させる
  4. 自分のサイトのサイトマップを読み込ませる


さほど難しい設定などはありません。

まだお使いになっていない方はモバイルフレンドリーの判定以外にもサイト運営に有用な情報が得られますのでご利用をご検討してみてはいかがでしょうか?

ウェブマスターツールはこうして利用する

小さくて見にくい場合には各画像をクリックして拡大表示させながらご覧ください。

上記の利用開始の流れに沿ってウェブマスターツールが使えるようになりましたらまずはホーム画面を表示させます。

モバイルフレンドリーテスト004.jpg

ウェブマスターツールではサイトごとに登録しますので、登録しているサイトが一覧表示されます。

私は3つのサイトを登録していますので上の画像の様に3つ表示されます。

今回は一番下にある当ブログ『はるのたわごと』のURLをクリックします。

モバイルフレンドリーテスト005.jpg

『ダッシュボード』の画面が表示されます。

いろいろあるウェブマスターツールのうち自分の利用しそうなメニューをチョイスすればその概要を初期表示します。

私は特にダッシュボードに選択はせず初期設定のままにしています。
画像にある通り、『クロールエラー』『検索アナリティクス』『サイトマップ』が表示されています。

左のメニューから『検索トラフィック』をクリックします。

モバイルフレンドリーテスト006.jpg

更にサブメニューである『モバイル ユーザビリティ』をクリックします。

モバイルフレンドリーテスト007.jpg

図の上半分はモバイルユーザビリティに問題のあるページの数の推移を時系列で表すグラフです。

2015年6月25日現在で97ページがエラーのあるページです。
4月頃から随分とエラーページが減少していることがわかります。

そして下半分にはエラーの種類ごとに現在の該当ページ数が示されています。

モバイルフレンドリーテスト008.jpg

私のブログではユーザビリティエラーとして4種類が報告されています。

モバイルフレンドリーテスト009.jpg
  1. タップ要素同士が近すぎます
  2. コンテンツのサイズがビューポートに対応していません
  3. ビューポートが設定されていません
  4. フォントサイズが小です
この中でタップ要素同市が近すぎる、フォントサイズが小、というのは前述の説明でお分かりかと思います。

残りの2つのエラーについては後ほどご説明したいと思います。

エラーの明細が一覧で表示される

各エラーメッセージをクリックすると更にそのエラーの明細が表示されます。

『タップ要素同士が近すぎます』をクリックしてみます。

モバイルフレンドリーテスト010.jpg

私のブログには『タップ要素同士が近すぎ』のエラーが97ページあります。

そのページのURLがすべて表示されます。

『表示 10行▼』は1ページの表示行を示していますので初期値は10行しか表示されていませんが『▼』をクリックして表示行を100行に変更すれば全てにエラーページのURLが表示されます。

私は『レスポンシブデザイン化計画』を行った際、すでにほぼすべてのページがモバイルフレンドリーではないことがわかっていましたので全記事について手直しを進めながら時々この機能によってどの程度モバイルフレンドリー化がどこまで進んだかを確認していました。

『最終検出』はこのエラーをグーグルが認識したのがいつかを表しています。

前述のようにエラーが発見されその記事に修正を加えた後の日付で最終検出がされている場合には修正がうまくいっていないということがわかります。

このエラー一覧で表示されるのはURLのみなのでブログのどのページかの特定ができないこともあります。

その場合にはURLをクリックしてみます。

モバイルフレンドリーテスト011.jpg

上の画像にあるようにこのページのエラー解消の道筋が示されます。

モバイルフレンドリーテスト012.jpg

1番目にある『公開中のバージョン…(を確認する)』をクリックすると…

モバイルフレンドリーテスト013.jpg

モバイルフレンドリーテストの分析が開始されます。

そして先ほど示したこの画面にたどり着きます。

モバイルフレンドリーテスト003.jpg

ブログ内のどのページがエラーを起こしているのかも確認できますね。

尚、モバイルフレンドリーの阻害要因を確認するまでもないならばわざわざこの工程を踏まずに直接該当するページを表示させてエラーページを何なのかを確認することもできます。

モバイルフレンドリーテスト014.jpg

上の画像にあるように一番下に表示されているURLの末尾のアイコンをクリックすると…

モバイルフレンドリーテスト015.jpg

該当表示が表示されます。

今回の私のブログのエラーが指摘されたページは以下のページです。

モバイルフレンドリーテスト016.jpg

ソネットブログに用意されているタグクラウドのページです。

このページは私のリテラシーでは制御不能ですので改善はしない方針にしています。


モバイルフレンドリーのエラーの詳細

先ほどモバイルフレンドリーのエラーの種類としてご紹介した4つのうち説明が必要と思わる2つについてご説明したいと思います。
  1. タップ要素同士が近すぎます
  2. コンテンツのサイズがビューポートに対応していません
  3. ビューポートが設定されていません
  4. フォントサイズが小です
上記のうち真ん中の2つ。

コンテンツのサイズがビューポートに対応していません

これはモバイルフレンドリー阻害要因である『横スクロール』に影響することになります。

コンテンツ、つまりは画像であったり動画であったりといったサイトを構成する要素の大きさ、この場合問題になるのは幅ですが、画面の大きさを無視した大きな横幅を『固定幅』として設定することにより『横スクロール』が発生してしまいます。

例えば私が持っている『iPhone5C』の画面で表示できるのは320ピクセルと言われています。

この端末で横幅320ピクセルを超える大きな画像を表示できるようにするためには『width』タグで絶対値で設定せず100%など相対的な幅の指定をする必要があります。

『コンテンツのサイズがビューポートに対応していません』というエラーはこの様に指摘されているページ内にこの様な横幅指定が絶対値で大き過ぎる場合になります。

尚、解決方法などについては改めて別の記事でご紹介したいと思います。

ビューポートが設定されていません

これはサイトをレスポンシブデザインにする際に閲覧する機器(実際にはどのような画面サイズで閲覧するのか)によって最適な状態にすることと関連しています。

ただ私はこのことを確実に説明することができそうもありません。
申し訳ありませんがグーグルが用意しているページをお読み頂けたらと思います。
<(_ _)>

⇒ グーグル提供 ビューポートを設定する


グーグルのクローラにすぐに巡回してもらうには?

『モバイルフレンドリーの注意点』の『クローラ(ロボット)がクロールするまでその結果が反映されない』の項目でご説明の通り、過去の記事を修正してもすぐには検索結果に反映しません。

反映するのはクローラが巡回して修正後の記事のデータをクローラが認識した後となります。

ウェブマスターツールの機能を利用することによって次の定期巡回を待たずすぐに修正後の記事データを検索結果に反映することができます。

メニュー『クロール』⇒ サブメニュー『Fetch asGoogle』

メニュー画面から『Fetch as Google』を選択します。

ちなみに『fetch』とは『読み込む』という意味だとグーグル翻訳が教えてくれました。

モバイルフレンドリーテスト017.jpg

『Fetch as Google』のメイン画面はこんな感じです。

モバイルフレンドリーテスト018.jpg

URL入力欄にクローラに来てもらいたいページのURLを入力して、『取得してレンダリング』をクリックします。

モバイルフレンドリーテスト019.jpg

ちなみにサイトの基本URLは既に固定値となっていますのでそれ以降のURLだけを入力します。

『取得してレンダリング』をクリックするとしばらくして以下の画像にあるような画面になります。

モバイルフレンドリーテスト020.jpg

そうすると下の一覧の最上段に最新データとして1行追加されます。

この新たな1行の『インデックスに送信』をクリックします。

モバイルフレンドリーテスト021.jpg

新たなウィンドウが開き指定を要求されます。

モバイルフレンドリーテスト022.jpg

『このURLのみをクロールする』を選択して『送信』ボタンをクリックします。

モバイルフレンドリーテスト023.jpg

上記の様に『インデックスに送信されたURL』として当該アドレスが表示されればデータ送信完了です。

尚、URLの下の『PC』の右横の▼をクリックすると以下の画像の様にGooglebot の種類を選択することができます。

モバイルフレンドリーテスト024.jpg

『Fetch as Google』による診断

『Fetch as Google』についてグーグルでは以下の様に説明しています。


Googlebot は常時、ウェブサイト全体をクロールし、URL をレンダリングします。取得とは、Fetch as Google ツールを使って特定の URL を取得する際に、ウェブマスターがユーザーとして実行する操作の 1 つです。実際の処理の小規模なシミュレーションになります。



このシミュレーションによって診断ができるわけですが『取得』と『取得してレンダリング』の2つの操作モードの違いを以下の様に説明しています。

『取得』は簡易チェックを意味しており、Google がページから受け取った HTTP レスポンスが表示されます。Googlebot はリクエストしたパスに対応するすべての URL をクロールできます。リクエストした URL が Googlebot で正常にクロールされた場合、サイトから Googlebot に送られた応答を確認できます。比較的迅速で簡易な操作で、サイトでネットワーク接続やセキュリティの問題が発生している疑いがあるときに確認やデバッグに使用できます。

『取得してレンダリング』 は詳細表示を意味しており、HTTP レスポンスだけでなく、ページのレンダリング画像も表示されます。ブラウザでユーザーに表示されるのと同じようにページをクロールして表示するよう Googlebot に指示することになります。最初に Googlebot は、画像、CSS、JavaScript ファイルなど、その URL が参照するリソースをすべて取得します。コードがあれば実行して、ページの視覚的配置を画像としてレンダリングまたは記録します。レンダリングされた画像を使って、Googlebot によるページの表示と、ブラウザによるページのレンダリングの違いを検出することができます。

新しく追加された行をクリックすると診断結果を表示することができます。

モバイルフレンドリーテスト025.jpg


この記事のまとめ

  1. モバイルフレンドリーかどうかを記事ごとに確認する場合には『モバイルフレンドリーテスト』で行う

  2. サイト全体の状況を確認したい場合には『ウェブマスターツール』(Search Console)を利用して詳細データを取得する

  3. 記事を修正した場合にはクローラが巡回されるまで修正後のデータが検索結果に反映されない

  4. クローラの定期巡回を待たずに早期に修正後の記事データを反映させたい場合には『ウェブマスターツール』(Search Console)の『Fetch as Google』を利用する




カテゴリ別記事一覧
〔ブログ運営〕
◆ ブログ運営に関連する情報や私の思いなどをご紹介しています。
ブログ運営_はるのたわごと_カテゴリ別記事一覧_画像
画像をクリックすると関連カテゴリの記事一覧がご覧になれます



スポンサーリンク

記事を最後までお読み下さり
ありがとうございました<(_ _)>

記事が良かったと思われた方は
ご協力のクリックをお願いします
 にほんブログ村 転職キャリアブログ 転職・転職活動へ
〔当ブログのご紹介〕
『はるのたわごと』ってこんなブログです

〔サイトマップ〕
『はるのたわごと』の歩き方

〔記事カテゴリ一覧〕
『はるのたわごと』の記事カテゴリをご紹介

⇒ 最新記事へ

スポンサーリンク

nice!(12)  コメント(0)  トラックバック(0) 
共通テーマ:blog

【グーグル検索で「スマホ対応」表示させる為に565個の記事を手直しした】 [ブログ運営]

頑張りました。

毎日「来る日も来る日も」記事の修正に明け暮れました。

グーグル検索で「スマホ対応」の文字を表示させる為に…。

ブログ記事画像_パソコンとペンとスマホ


4月5日の記事でお伝えしてから本腰を入れて当ブログの『第一次レスポンシブデザイン化計画』をスタートさせました。


私は自分のブログを『レスポンシブデザイン』にすることが急務だと感じています。
『レスポンシブデザイン』とは『PC・タブレット・スマートフォンなど大きさの異なるディスプレイのデバイスから閲覧しても最適化されたレイアウトで閲覧できるWebサイトのデザイン』のことです。
書きかけの記事を抱えている状況もありながら今回この記事でこうしてお伝えするのは、私のブログ運営上の急務と感じるに至り全力でこれに取り組む近況をお伝えしたいと思ったからです。
(中略)
当ブログはレスポンシブデザイン導入モードに突入します。
この状況を受けて書きかけのyoutubeの記事も今は少し置いておいてこのミッションに全力で取り組みたいと思います。
もしうまくこのミッションに対処できたらこのブログでもご紹介したいと思います。


そして4月30日の前回の記事で途中経過をご報告しました。

【グーグルのモバイルフレンドリーに『レスポンシブデザイン』導入で対処する】

今回当ブログの全記事565記事に導入が完了しました(はず?)のでご報告を兼ねて久しぶりに記事を書きたいと思います。

お伝えしたいことは沢山ありますが、今回は簡単に概要だけをお伝えしたいと思います。

詳細は後日改めて項目を分けてご紹介できればと考えております。


レスポンシブデザイン化でまずやったこと

私がまずやったことはレスポンシブデザインになるCSS(スタイルシート)を貼り付けたこと。

グーグルの公式サイトの指南などを参考にとりあえず必要と思われる部分改良しました。

ソネットブログでのCSSの貼り付け方は改めて記事にしたいと思います。


CSS導入だけでは解決しない問題がわかった

上記の対策だけではすべての記事が即スマホ対応になるわけではありませんでした。

記事に掲載している要素によって守るべきルールがあってそれが適合していない記事が山ほどあることがわかりました。

最も大きなものは表を使っている記事です。

体裁を整えるために利用していた<table>タグを利用した表示がアダとなりかなりの記事に訂正を余儀なくされました。

またある時期から記事の最後は共通のテンプレートを作成してタグを貼り付けて利用していましたが、それが全滅となり少なくともそれ以降の記事は全て手作業でテンプレートの貼り直しを余儀なくされました。


「第一次計画」は横スクロール対策

「モバイルフレンドリー」にするためには私のブログは本当にやりがいがあるところではあります。

実際今回の修正作業においていろいろと直したいところが「てんこ盛り」で途方に暮れた一面があります。

しかし500以上の記事を全ての面において「モバイルフレンドリー」にすることはかなり時間を要すると観念しました。

そこで今回は私自身が以前から「どうにかせねば」と思っていた『横スクロール』問題解消だけに特化した、

『第一次モバイルフレンドリー化計画』

として極力ほかの部分に手を出さずにスピード重視で全記事に適用する方針にしました。

それでもこんなに時間がかかってしまったのは、どうしても過去記事に触れてしまいますと「見栄え」が気になってあれこれ手直しをし始めてしまったからです。


結果的にどうなったか?

記事ひとつひとつ『モバイルフレンドリー』になっていないものを手直しした結果現在の状況はどうなったかと言いますと…。

実は現状の正確な結果は私もまだ把握していません。(^^ゞ

ひとつの確認方法として私はグーグルが用意している『ウェブマスターツール』を利用しています。

既にグーグルアナリティクスとともにブログの分析用として導入していましたが、これまで活用していませんでしたが今回の『モバイルフレンドリー化計画』にあたって活用させて頂きました。

ウェブマスターツール画面

このウェブマスターツールの機能に『検索トラフィック』⇒『モバイル ユーザビリティ』というものがあります。

下の画像の様に自身のブログでモバイルフレンドリーではないサイトのページ数やその原因を教えてくれます。
ウェブマスターツール画面

この画面の下の方にどの様な理由でエラーがあるか、その理由と該当ページ数が表示されています。

更に各行をクリックすると該当ページのURLが表示されます。

私がとりあえず撲滅したいと考えている『横スクロール問題』に大きく影響しているのが、

『2 コンテンツのサイズがビューポートに対応していません』というものです。

この行をクリックしてみると…

ウェブマスターツール画面

上の画面の様にアドレスが表示されます。

上記の例では全てタグに関連するページばかりですが通常の記事でエラーの原因があれば通常のアドレスが表示されます。

上の例の様にタグに関連するページは自分で制御しているわけではなくブログが用意された仕組み上発生するページなので問題視していませんが、最初は通常の記事もほとんどがこのエラーページとしてカウントされていました。

最初の図の右肩下がりのグラフはエラーページの数の推移を表しています。

横ばいが続いて時期がモバイルフレンドリー化計画に着手する前の状態でほぼ770ページでした。

これが下がり始めたのが4月11日です。

4月7日の763ページから741ページに少し減少しました。

そしてそこから突貫工事が始まりました。

そして5月26日の最新データでは156ページまで減少しました。

そのうちの大半はタグに関わるページなので修正対象ではないと考えています。

また、最新データはグーグルのクローラーが私の記事の巡回をしてからでないと反映しませんので、修正しているのにエラー解消が反映されていないページ数も含まれますので実際には現在は要修正ページはかなり少なくなっていると思われます。

前述のエラー該当ページを表示させた画面からは更にそのページの現在の状態を調べる画面へ遷移することが可能で調べていくと本当に問題のあるページのあぶり出しも可能です。

これがその『モバイルフレンドリーテスト』の画面です。
モバイルフレンドリーテスト画面


現在はこのエラーページ156ページ全ての確認が終わっていないため正確な状況がつかめていないというのが現状です。

しかしながら、確認ができた範囲では現状のモバイルフレンドリー不適合ページは1ページだけです。

基本的なところを直しても記事固有の記述を細かくチェックしないと解消しないようなのでちょっと後回しにしています。

ここでテストに適合したページはクローラーの定期巡回を待たずにクローラーへ修正の通知を出すことも可能ですが手間がかかるのでまだ完ぺきにはできていません。

当面の目標はここで表示されるエラーがタグのページや記事カテゴリーページの様にソネットで用意された方式によるもののみにして通常記事ページのエラーをゼロにすることです。

大分時間を費やしましたがようやくここまでこぎつけた、そんな感じです。

そこまで完了しましたら、詳細記事の執筆に着手しようと思っております。

その時は是非当ブログの記事をご覧になって頂きたいと思います。

よろしくお願いします。<(_ _)>



カテゴリ別記事一覧
〔ブログ運営〕
◆ ブログ運営に関連する情報や私の思いなどをご紹介しています。
ブログ運営_はるのたわごと_カテゴリ別記事一覧_画像
画像をクリックすると関連カテゴリの記事一覧がご覧になれます



スポンサーリンク

記事を最後までお読み下さり
ありがとうございました<(_ _)>

記事が良かったと思われた方は
ご協力のクリックをお願いします
 にほんブログ村 転職キャリアブログ 転職・転職活動へ
〔当ブログのご紹介〕
『はるのたわごと』ってこんなブログです

〔サイトマップ〕
『はるのたわごと』の歩き方

〔記事カテゴリ一覧〕
『はるのたわごと』の記事カテゴリをご紹介

⇒ 最新記事へ

スポンサーリンク

nice!(8)  コメント(0)  トラックバック(0) 
共通テーマ:blog

【グーグルのモバイルフレンドリーに『レスポンシブデザイン』導入で対処する】 [ブログ運営]

パソコンとコーヒーとスマホ001.jpg

前回の記事【『レスポンシブデザイン』をソネットブログに導入 それが私の急務】でお知らせの通り、グーグルの検索エンジンのサイト評価基準に『モバイルフレンドリー』と項目が追加されました。

4月21日から導入と公式に発表されていましたので既に約1週間が経ったことになりますね。

私のブログの検索状況に関しては大きな変化は無いように思われますが、それでも現在急ピッチでレスポンシブデザイン化を進めています。

モバイルでの閲覧体制の整っていない当ブログの大改装を試みて約1ヶ月が経過しました。

今回はその途中経過ということで簡単に状況をご報告したいと思います。


そう、4月30日現在の今日、「急ピッチで進めています」と現在進行形で語っている通り全然終わっていません。
(^^ゞ

詳細は完了したらご説明しますが、精力的に進めているにも関わらず1ヶ月が経過してもいまだ完了できないでいるのは…

私のITスキルの低さもさることながら、阻害要因が記事1ページづつメンテナンスしなければならないとう点にあることが大きな原因です。


CSS導入していない弊害をもろにかぶりました

CSSについては勉強しよう、しよう、と思いながら先送りにしてきたため、この様なメンテナンスの必要に迫られると非常に脆弱です。

500以上の記事を1つづつ手作業で書き換えるとなると時間がかかって仕方ありません。

今回の作業がひと段落したらもう一度『CSS化』というテーマで総メンテナンスをしたいと考えています。

効率を考えれば今回のメンテナンスで一緒に取り組めば良いことはわかっていますが、今の私にはちょっと時間がかかりそうですので残念ながら、またも『先送り』することにしました。


作業を遅らせてしまうこの性格

私のブログにおいて最もモバイルフレンドリーではないのは『横スクロールしないと閲覧ができない』問題なので、この点だけを解消するのならば多くの過去記事においては記事のテンプレート部分をコピペで一気に修復してしまえばこんなにも時間がかからなかったのですが…

ダメなんです。気になっちゃうんです。

過去記事のスマホで見た時の体裁とか…。

しかも昔の記事を読むといろいろと『修正しがい』があって、ついつい手間をかけて一つ一つ直し始めちゃうんですよね。
(^^ゞ

達成感は感じられて満足はするのですが、本当に時間がかかる…。

まだ全記事の半分くらいでしょうか…。

ということで、グーグルの基準変更日には全然間に合いませんでしたが、引き続き頑張ってメンテナンス作業を進めていきます。

良かったら過去記事をご覧になって頂けたら嬉しいです。

結構面白い記事、ありますよ!



カテゴリ別記事一覧
〔ブログ運営〕
◆ ブログ運営に関連する情報や私の思いなどをご紹介しています。
ブログ運営_はるのたわごと_カテゴリ別記事一覧_画像
画像をクリックすると関連カテゴリの記事一覧がご覧になれます



スポンサーリンク

記事を最後までお読み下さり
ありがとうございました<(_ _)>

記事が良かったと思われた方は
ご協力のクリックをお願いします
 にほんブログ村 転職キャリアブログ 転職・転職活動へ
〔当ブログのご紹介〕
『はるのたわごと』ってこんなブログです

〔サイトマップ〕
『はるのたわごと』の歩き方

〔記事カテゴリ一覧〕
『はるのたわごと』の記事カテゴリをご紹介

⇒ 最新記事へ

スポンサーリンク

nice!(28)  コメント(0)  トラックバック(0) 
共通テーマ:blog
壁紙_家族の絵001.jpg
Related Posts Plugin for WordPress, Blogger...

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。