もぉ〜ちょっとさぁ〜スマホ版Seesaaブログの画像の取り扱いに関して、軽くおこなんですよねぇ〜。

٩(๑`^´๑)۶ 激おこﾌﾟﾝﾌﾟﾝ丸



こんちわ！ピアノ教室管理人です。


Seesaaブログを使わせてもらっている立場でこんなこと書くのはどうかと思うんですが、スマホ版の画像の取り扱いがちょっと頂けないんですよね。


PCで記事を書いたときに設定した画像のアレコレが、スマホ版では勝手に改変されちゃうんですよ〜これが。

SeesaaブログのPC版とスマホ版での画像の取り扱いの違い

管理人は基本的にPCで記事を書いているんですが、まずそのPC版とスマホ版での画像取り扱いの違いをつらつらと書き出してみます。

1.リンクなしの画像に勝手にリンクが設定されてしまう

たとえば記事冒頭のアイキャッチ画像とか単なるイメージ画像みたいなものは、別にクリックして大きな画像を表示してもらう必要はないので、特にリンクは必要じゃありません。


そういう画像にはブログのシステムで生成されたサムネイルじゃなくて、アップロードした画像本体を直接使っていますし、PC版ではそう設定した通りにちゃんと表示されます。



ところがそれがスマホ版になると、自分で貼り付けた画像は勝手にサムネイル化され、大きい画像へのリンクが勝手に付いちゃってるんですよ、これが！


イヤイヤイヤイヤ、ちょっと待ってって！
そんなリンクいらんし！

（#＾ω＾）ﾋﾟｷﾋﾟｷ

2.画像のサイズそのものが変更されてしまう

しかもですよ、画像のサイズ自体も勝手に変わっちゃってるんです。
ありえな〜い。


たとえば記事冒頭のアイキャッチ画像は「640px：410px」で作っているんですが、スマホ版ではこれがなんと勝手に「280px：179px」にリサイズされ、リンク付きのサムネイルとして表示されてしまうんです。


タグのwidthやheightの表示上の値ではなく、画像そのものの縦横のリサイズなんですよ。



しかもこのサムネイルサイズは、iPhone3GSでもiPhone6でも、いやそれどころかiPadのスマホ表示でも固定。


これでは横幅一杯のアイキャッチ画像などは基本的には不可能で、ホントにただの画像という扱いにしかならないんですが！

(#｀Д´)ｺﾞｺﾞｺﾞｺﾞｺﾞｺﾞ



※スマホ版アメブロの場合は勝手にリサイズしたりせず、元画像に対してwidthやheightの値で見かけ上縮小表示してくれるために何の問題もないのです。これが普通でしょう。

※Seesaaにはスマホ版のサムネイルサイズを設定できる機能はありません。
PC版は設定可能なのにぃ。

3.imgタグに設定したClass属性やID属性が無くなってしまう

ではスマホ版CSSで画像サイズを指定してやればいいじゃん、と考えてimgタグにClass属性やID属性を付けて、スマホ版CSSで制御しようとしたんです。


と こ ろ が！


スマホ版のHTMLを確認してみると・・・消えてました。

imgタグのClass属性やID属性、さらにstyle属性もゴッソリと消されていたんです。


これじゃ画像ごとに細かくサイズを指定できないじゃないすか！

｡ﾟヽ（ﾟ｀Д´ﾟ）ﾉﾟ｡やだーーーー！

4.つーか、完全に別のimgタグに差し替えられてるんじゃね？

つまりimgタグの部分は、スマホ版になると完全に差し替えられているということですね。

もう、無理ゲーじゃね？
(；´Д｀)ﾊｧ…

スマホ版画像の問題点の整理

ちょっと感情的になったので、一旦問題点を整理してみます。

リンクなしの画像の場合

• 横幅280pxに強制リサイズされサムネイル化される


• 元画像へのリンクが付いてしまう


• imgタグのClass属性やID属性は消去される

リンクありの画像の場合

• 横幅280pxに強制リサイズされる


• imgタグのClass属性やID属性は消去される

※リンク先の変更等はありません。

あえて画像にリンクを付ける解決策というか妥協案

ここで一番問題となるのはリンクを付けたくない画像なんですが、Class属性やID属性が消去されるので、画像をimgタグに対するCSSで制御できず、さらに勝手にリンクが付くと...。


であれば、あえてaタグでリンクを付けてしまい、aタグへのCSSで画像を制御することにしました。


注意が必要なのは、

a img{
  width:100%;
  height:auto;
}

といったリンク内画像の一括指定をやってしまうと、Amazonなどの商品紹介リンクに含まれている1pxの透明画像もハイパー化してしまうこと。

実際やってしまって焦りました。
(；´Д｀)

PC側での画像やリンクの記述

aタグにはClass属性をつけた上で、画像をCSSで制御するようにします。

<a class="eye-catch" href="リンク先URL">
<img src="画像URL" width="640" height="410" alt="画像説明">
</a>

ここではeye-catchというClass名をつけました。

画像のサイズはPC版で表示したい画像サイズを指定。

リンク先はその画像の近くにある見出しタグなど、ページ内リンクになるようにした方がSEO的にはいいかもしれません。（たぶん）

PC版CSSの記述

さて実際にはリンクは不要なので、eye-catchに対してPC版CSSでpointer-eventsプロパティを使いリンクを無効化します。

.eye-catch{
  pointer-events:none; /*リンクの無効化*/
  cursor:default; /*標準マウスカーソルの指定*/
}

その上で画像の装飾等を指定します。

.eye-catch img{
  border:0;
  margin:0;
  border-radius:10px;
  box-shadow:3px 3px 10px 0px #CCC;
}

スマホ版CSSの記述

今度はスマホ版CSSでリンクを無効化します。

.eye-catch{
  pointer-events:none; /*リンクの無効化*/
  cursor:default; /*標準マウスカーソルの指定*/
}

※スマホ版ではcursorプロパティは不要かもしれませんが、念のため。


次にスマホ版での画像の指定もします。

.eye-catch img{
  width:100%;
  height:auto;
  border:0;
  margin:0;
  border-radius:10px;
  box-shadow:3px 3px 10px 0px #CCC;
}

ここでwidth:100%; height:auto;を指定して、横幅いっぱいのアイキャッチ画像にしました。



本来はリンク不要な画像にあえてリンクを付けることで、何とか画像を制御できるようになったんですが...。

この方法の最大の弱点：画質劣化とその対処療法

すでに書いたように、スマホ版の画像は自動的に横280pxにリサイズされたものがサムネイルとして表示されています。


おそらくiPhone3GSなど画面サイズの狭い古いスマホを意識して設定されているのかもしれませんが、横幅280pxの画像というのは相当に小さいサイズですよね。


これをCSSでwidth:100%; height:auto;と指定すると、小さな画像が大きく引き伸ばされて表示されますので、当然、画質がドロ〜ッと劣化しちゃいます。
(；´Д｀)


最悪なのはiPadなどタブレットでのスマホ表示で、横に倒したランドスケープモードではもう目も当てられないくらいの画質の悪さ。最悪です。


何とかしたいところなんですが、横280pxのサムネイル画像はブログのシステム上自動生成され、またスマホ版HTMLもカスタマイズ出来ないのでお手上げです。


でも悔しいのでこうしました。

タブレットサイズでの表示幅を制御

まず記事の幅を最大640pxに指定し、画面中央に表示するようにしました。

article{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

その上でタブレットサイズではPC版へのリンクを表示するように工夫を加えました。

PC版を見る

width-device内にPC版へのリンクが書いてあります。


それを画面サイズが768px以上で表示されるようにCSSで設定します。
※768pxはiPad,iPad2の狭い方の幅。

@media screen and (max-width:767px){
.width-device{
  display:none;
}
}

つまりタブレットの人はPC版を見てね、と暗に促そうというわけです。汗

※タブレットでブログのスマホ版が表示されることがあるのか？

通常iPadなどタブレットのブラウザでブログを表示するとPC版が表示されます。

しかしタブレットのfacebookアプリからブログへのリンクを踏むと、スマホ版のブログが表示されます。orz

このブロブではスマホ版のスキンに評判の良い「basic」を使っています。


それとは別に写真を大きくするという、写真が中心のフォトブログに最適のデザイン「photo」があるので、こちらでは上記のような問題はクリアされているのかどうか気になるところです。

試すエネルギーはないけど。^^;




というわけで、いかにもな対処療法しかできませんが、これで何とかやり過ごしたいと思う今日このごろです。

それではまた。
(´∀｀*)ﾉｼ　ﾊﾞｲﾊﾞｲ


【オヌヌメ】

モブログの女王がおしえるiPhoneブログ術

メールの延長で気楽に書ける、パソコンがなくても始められる。iPhoneを使ったブログ更新術。管理人も大好きなブロガーさんです。^^amazon

このブログの目次