Tweet

Pocket

スマホ対応のひつようさ

ブログの記事作成でSeesaaを何年も利用させてもらってます。スマホの普及に合わせてスマホ用テンプレートが自動で表示されるようになってしばらく経ちました。無料ブログということでいろいろな広告が記事の周りに表示されます。パソコン用のテンプレートの場合は広告を表示させない設定ができるので、そのようにさせてもらってます。

ところが、スマホ用の場合はその設定ができません。スマホで自分のブログを見ると、どれが自分の記事なのか判断が付かない状況になりました。テンプレートに手を入れて対応することもやってみましたが、これはアカウント停止になるかもしれないという怯えと、しばらく経つと別な広告が追加されてしまうようで、広告があふれるという元の状態に戻ってしまいます。

で、ワードプレスに記事全部を移植しようかとも考えましたが、ブログの記事を移行する作業はネットで調べてもかなり大変で自分の手には負えそうにありません。

コンテンツの幅をレスポンシブ対応にする

結局、seesaaのPC用のテンプレートをレスポンシブ対応にする。これが合理的だということがわかりました。
レスポンシブ対応にするというのは、わたしなりに簡単に言うと、ディスプレイの表示幅に合わせて、ウェブページの表示を変える。
たとえば２コラムのホームページでも画面の表示幅が狭い場合は、右のコラムの内容を左コラム（本体ページ）の下に続けて表示するように移動させる。といった感じですが、こういった表現で伝わるでしょうか。

お世話になったのは、”とある秘密ブログの更新うぇぶろぐ”というサイト”Seesaaブログレシポンシブ計画始動”
http://www.myweblogblog.net/article/398289658.html

このページの解説の通りに設定すると、見事にレスポンシブ対応になりました。

ただ、ページにも書いてありますが、レスポンシブとはこんな感じですよ。というのがわかりますが、細かなところの修正をどうしたらよいのか？ちょっと路頭に迷った気分。

でも、このページを最初に参考にできたのは、とてもラッキーでした。seesaaブログ管理のどこに手を加えるのか、具体的にはヘッダーとかCSSに何を書き加えればいいのかがあまり悩まずに実感できましたから。

つぎにやったのが、このページの中に記載されていた”少し分りやすくアップデートしたこちらの記事もご参照ください。»Seesaaブログスマホ広告を消す悩みを消す方法”にいきました。

”とある秘密ブログの更新うぇぶろぐ”の別のページ
http://www.myweblogblog.net/article/399456918.html

このページも見てはいたのですが、その時は何のことかわかりませんでしたが、先のページをやってみてから読むと、よく理解できます。

このページの通りにコピペするんですけど、用心のために次の手順でやらせてもらいました。

• まず、seesaaブログでアクセスのほとんどないブログで試す。
• CSSの編集をやる。
• メディアクエリを少し拡張する。
  ここでseesaaブログのプレビューを開いて、ブラウザの幅を狭くしてみて、右コラムが消える（左コラムの下に移動する）のを確認します。
• HTMLの編集をやる
  Viewportの追加と、先のページのIE８の対応も一緒にやりました。

CSSの編集では、
/* Ver.20150607 */ #wrapper{position:absolute!important; margin:2em auto;
・・・・
padding:0 2%}.blog{width:100%}.blogbody{font-size 16px}}
をCSSソースコードの最後に貼り付け。

”それにメディアクエリを少し拡張”の赤字部分を追加で貼付け。

(追記2016.11.23)
iPhoneで記事を見たときに記事全体が右側に偏ってしまい不自然でした。そこで、参考ページ”レシポンシブ計画始動”の4行目を参考にして
.blog {width: 100%;}を
.blog {width: 100%; margin-left:auto; margin-right:auto; overflow:hidden}
のように追記したところ、記事全体が中央に収まりました。

スマホからのアクセスもＰＣサイトに飛ばす処理

そのあとで

• スマートフォン版にコンテンツを追加をやります

これは、スマートフォンからアクセスしても、強制的にさきほど手を入れたＰＣ用のサイトに飛ばすための処理が行われます。

以上、すべてコピペするだけで実現できました。大助かりです！！スマホで閲覧してもすっきりと表示されるようになりました。感謝です。

参考に作業したブログのアドレスを載せておきます。

⇒　目的に向かって

画像もレスポンシブ対応に変える

以上で終わりではありませんでした。”おおきな画像の場合は、右側が切れてしまうという”ということに気が付いて対処。

CSSソースコードに1行追加。どこに張り付けていいかわからなかったけど、body の下のaクラスの下にしました。

p.resizeimage img { width: 100%; }

各画像ファイルの指定に、resizeimageクラスを指定します。
(p.class=”resizeimage ・・という部分です)

これで終わりではなくて、私のブログの場合、画像ファイルに縦横のサイズ指定がされていたので、画像が横にはみ出してうまくいきませんでした。

そこで、たとえば
width=”520″ height=”465″

という指定を、以下のように変えると画像の縦横が縮小して表示されました。
width=”auto”

ところが幅は画面幅にぴったしなんですが縦が縮まってしまう画像が見つかりました。
つぎに試しで、
width=”auto” height=”auto”
にすると、縦が異様に長くなって失敗。

そこで、例えば、
width=”100%” height=”60%”
という設定に変えると画像の縦横のバランスが取れて、スマホでもまあまあな表示になりました。

いまのところは「適当に設定してみてまあいいか」という状態です＾＾；

“auto”と”%”のどちらがいいのか、私には試行錯誤状態です。いずれにしても、画像の一枚一枚に設定するか修正をしなければなりませんが、やるしかなさそうです。

参考にさせてもらった記事は、
ウインドウ幅に合わせて画像サイズを変化させる方法
https://allabout.co.jp/gm/gc/400630/

ありがとうございます。以上です。

Tweet

Pocket