Get a network qualification

資格取得でネットワークエンジニアへの道が開けます。
資格取得に役立つ勉強法を自身の体験を交えて紹介します。
現在、過去数百に及ぶ記事を只管修正中(ちょwww)。

資格を手に入れてネットワークエンジニアになろう

スポンサーリンク


12
2016  13:31:57

【レスポンシブwebデザイン】元ネットワークエンジニアのブログカスタマイズ(画像サイズ自動調整編)

レスポンシブwebデザイン
レスポンシブwebデザイン画像設定編
©SEGA
©2015 KADOKAWA アスキー・メディアワークス
©KADOKAWA CORPORATION 2016
今回は、ブログにスマホ対応を施すためのカスタマイズの一手法について取り上げたいと思います。
その前にまずは、スマホ対応の現状と課題について述べたいと思います。
それらを踏まえた上で、紹介するカスタマイズ手法を参照頂ければと存じます。

レスポンシブwebデザインの現状と課題


スマホ、タブレットが広く普及したことで、スマホ等によるブログ閲覧がなされることが多くなり、レスポンシブwebデザインと呼ばれる技術を用いて、ブログをスマホに対応させるためのカスタマイズを行う必要が出てきました。

なぜなら、従来のパソコンに合わせたブログ設定では、スマホ等で閲覧した際、表示できるサイズの違い等によってデザインが崩れる等の弊害が生じるからです。

また、検索エンジン大手のグーグルもそのようなスマホ対応をしっかりと施しているモバイルフレンドリーなサイトを評価する傾向にあり、SEOやアクセスアップを行う上でも、今やレスポンシブwebデザインは欠かせなくなってきています。

尚、検索結果にも反映されるため、しっかりと対策を施す必要があります。

以下でレスポンシブwebデザインに適合しているかどうか判定できます。
気になった方は一度確認してみましょう。

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

問題ありません。 このページはモバイル フレンドリーです。」と出れば一応は合格と言えるでしょう。
ただ、完全には診断は出来ないので、目視で確認しておかしな点があれば、都度直すようにしましょう。

あくまでグーグルのクローラーから見て合格というだけで、人の目から見ればおかしなところがある可能性はあります^^;。
また、何らかの改善を求められた場合は、レスポンシブwebデザイン設定を行う必要があります。

このような動きを受けて、最近ではレスポンシブwebデザインを施したテンプレートが登場し、それらを使うことで始めからスマホに対応させることができるようになってきています。

例えば、ワードプレス等のブログツールはそのようなテンプレートを予め用意し、ブロガーの手を煩わせることなくスマホ対応を行うことができます。

しかし、一方でスマホ対応はまだまだ追いついておらず、現実には一部の無料ブログや有料テンプレートのみで配布され、大半はレスポンシブ化されていないのが現状です><。

また、時代がレスポンシブ化を推進しているにも関わらず、カスタマイズ方法等を記載した書籍等が殆どなく、現状web上の知識をかき集めてようやく対応できると言った有様ですorz。

ブログをデザインするためのCSSを解説した書籍は数あれど、スマホ対応に焦点を合わせた書籍は殆ど見られません><。

あるとすれば、スマホでブログ設計を行うような専門書くらいのものですが、素人には難しくて読みこなせませんし、元よりそのような知識を必要としていないので、ピンポイントで知識を得ることができず非常に効率が悪いと言えます><。

しかも、web上の情報は錯綜しており、人によって設定している内容に差異があるため、どの情報が正しいのかよくわからないのが実情ですorz。

はっきり言ってしまえば、確たる方法のないまま、自己流でそれぞれ対応していることが多いと言えます^^;。
取り敢えず、それぞれの方法を試してみて、うまくいったものを採用しているといった塩梅です^^;。

更に、スマホに合わせたレスポンシブ化を行う必要があることを認識している人の割合が低く、周知という意味でもまだまだ足りていないのが実情です><。

現に、わたしを含め、レスポンシブ対応が不十分であったり、何も手を付けずにそのままブログを運営されている方が大半です。

実際に対応したいと思っても、そのための情報が殆どなく、半ば泣き寝入りしている方もおられることと思います><。

このようにまだまだ解決しなければならない問題が残っており、今後の課題と言えそうです。

このまま対応せずに放置していると、グーグルから検索の際のペナルティを受けることも考えられるため、一刻も早く完全対応したいとは考えておりますが、スキルが足りず継ぎ接ぎ状態で少しずつ対応させるのがやっとの状況です^^;。

何とか少しでもモバイルフレンドリーに近づけるため日夜奮闘している次第です^^;。

迫りくるレスポンシブ化の波に飲まれないよう、レスポンシブwebデザインの知識を身に付け、グーグルさんに怒られないよう努めていきたいと存じます。

正直、カスタマイズで嵌るとマジ辛いんだけどねorz。
経験のある方もおられると思いますが、一度カスタマイズで詰まると、記事更新そっちのけで解決方法を探すことに終始しがちだからね^^;。

そのような中、少しでもモバイルフレンドリーに近づけるための手法を紹介出来ればと考えております。

レスポンシブwebデザインにおける画像の自動調整方法


ブログに画像を用いる場合、スマホで閲覧すると、画像が記事スペースからはみ出て表示されることがあります。
実際にそのようなサイトを見た方もおられるかもしれません。

これは、画像サイズがパソコンサイズに設定されているために起きる現象です。
具体的には、画像のサイズがスマホの表示限界を越えている場合に記事からはみ出してしまうということです。

この状態を回避するためには、以下の設定をブログテンプレートのCSS(スタイルシート)に追記します。

img{
  max-width: 100%;
  height: auto;
}

上記の設定をブログテンプレートに施すことで、スマホで閲覧した際、記事スペースからはみ出した画像が記事スペース内に収まるようになります。

また、上記のソースは一例なので、場合によってはimgコードの表記が異なっている場合もあるかと存じます。
参考までにわたしの場合、「.entry-content img{}」となっておりました^^;。

テンプレート環境によって多少コードに差異はあるかと思いますが、概ね画像に関してはimgタグで設定されているので、imgタグで検索を掛ければ該当コードを見つけることができると思います。
コード内容を確認し、上記のようになっていなければ設定を追記しましょう。

ポイントは画像の最大幅(max-width)を100%に設定する事で、表示領域に対して最大値で表示されるようにすることです。

つまり、画像サイズに関係なく、表示領域に合わせて調整されるようになるわけです。
また、高さ(height)をautoとする事で幅に合わせて高さも自動調整されるようになります。

スマホで閲覧時に画像が記事からはみ出して困っておられる方は、是非ご対応頂ければと存じます。
おそらくスマホ閲覧時に画像が画面からはみ出て困っている方は殊の外多いことでしょう^^;。

その他、レスポンシブ対応を行う上で必要な設定を随時紹介していきたいと存じます。

WEBデザイン講座をお探しならこちらがおすすめ♪

↓ ↓ ↓

WEBデザイン講座をお探しならこちら

ブログカスタマイズの関連書籍はこちらになります

↓ ↓ ↓

ブログカスタマイズの関連書籍はこちら

CSSの関連書籍はこちらになります

↓ ↓ ↓

CSSの関連書籍はこちら

関連記事

スポンサーリンク


 ブログカスタマイズ

0 Comments

Leave a comment