IT系女子ログ

4年目Webデザイナーが気になる、デザインやコーディング中心の話。

【はてなブログ】スマホ表示での、Amazon商品紹介の見た目を整えました

f:id:tosssaurus:20160207194534p:plain

 

ここのところ、色んな方のはてなブログをよくスマホで見ているのですが、

「あれ? Amazonの商品紹介のデザインが崩れてる…?」

自分のブログや、たくさんのはてなブログの記事を確認したのですが、やっぱり同じ見ためです。これってデフォルト?

どんなところが崩れてると思ったのか、詳しく見ていきます。

気になるところと、調整後の見ため

before

f:id:tosssaurus:20160207194216p:plain

① 商品情報リストの "○"(まる)が商品名のラインより左に飛び出ている。

"○"(まる)が、商品画像にくっついている。

③ 商品画像の高さを超えたテキストが、画像の下に回り込んでいる。

 

この3点がとっても気になるんです。崩れてると感じてしまう。
それを調整するとこんな感じです。

after

f:id:tosssaurus:20160207200324p:plain

いかがでしょう? スッキリしましたね。
テキストの頭をそろえる、商品画像とテキストの間にスキマをとることで見やすくなったと思います。何より見ためが整って見えます。

調整ついでに、商品画像の横幅も統一しました。
デフォルトでは商品画像の横幅がバラバラに表示されていて、テキストの折り返し(改行)が多くなってしまうものもあります。
あまり折り返しが多くても読みづらいですもんね。

続いて、実際に編集した箇所をご説明します。

 

コピペするだけ、私が編集した箇所(無料会員もOK)

スマホCSS(デザインを調整する箇所)を編集するには、有料会員でないとできないのですが、無料会員でも編集できる奥の手があります。

headに記述を追加できるので、そこに直接CSSを記述してしまいます。
ちょっと荒技ですね。

 

【注意点】

・PC表示にも影響する箇所です。

・非推奨の方法なので、編集は自己責任ということをご了承願います。
 (といっても大した編集ではないですよ。)

・心配な方は、編集箇所にある記述をメモ帳などにコピペしてバックアップをとっておいてください。すぐ元の状態に戻せるので安心です。

・商品画像が表示されない場合、テキストの右側が開いたように見えます。

 

それでは以下、詳しく説明しています。
記述場所が分かる方は、一番最後に記載しているCSSをコピぺ頂ければ早いと思います。

 

① ダッシュボードを表示

まずは、ご自身のブログのダッシュボードを表示しましょう。

② 設定ページの「詳細設定」画面へ

左にあるメニューから「設定」ボタンをクリックします。

f:id:tosssaurus:20160207202837p:plain

 

設定ページに移りますので、「詳細設定」のタブをクリックしてください。

f:id:tosssaurus:20160207203101p:plain

 

③ 「headに要素を追加」を編集する

下の方にある「headに要素を追加」という項目までスクロールしてください。

f:id:tosssaurus:20160207203819p:plain

ここにCSSを追加します。
といっても以下の記述をコピー・ペーストするだけです。

<style>
.hatena-asin-detail-info {
float: left;
width: 60%;
}
.hatena-asin-detail .hatena-asin-detail-image {
margin-right: 5%;
max-width: 35%;
}
.hatena-asin-detail-info ul {
list-style-type: none;
margin: 0;
}
</style>

 

f:id:tosssaurus:20160207213256p:plain

 

ペーストする場所は一番最後でOKです。

上記のように<style>から</style>までをコピペして頂いたら、一番下にある「更新」ボタンをクリックして保存しましょう。

 

f:id:tosssaurus:20160207204837p:plain

 

更新しましたとメッセージが表示されれば編集完了です!

スマホで実際にご確認くださいね。うまくいきましたでしょうか?

 

なぜデフォルトであの見ためだったの?

少し専門的な話なのですが、なぜデフォルトでこのような見ためなのか考えてみました。

f:id:tosssaurus:20160207194216p:plain

よく見ると、リストの前にある "○"は、デフォルト(初期設定)のCSSのスタイルです。(list-style-type: circleですね。)
デフォルトのリストスタイルはこのように、ブラウザによって意図しない表示になるのでコントロールしづらい。
リセットCSSなんかでリストのスタイルを消しちゃうのが普通なんですが、はてなはリセットCSS使っていないんでしょうか。

今回は既にタイトルのフォントと色やサイズに変化があるので、特に必要ないと判断し、消しただけにしています。

 

また、商品画像の下にテキストが回り込んでいたのは、商品画像だけにfloat:leftをかけていたからです。
おそらく、商品画像が表示されないときにでも見ためが崩れないようにするためでしょう。今回私が追加したスタイルですと、画像が表示されない場合、テキスト領域を60%に指定しているので、テキストが左により、右の40%の領域にスキマができます。
デフォルトのままだと、スキマはできません。

リンク切れだったり、画像が用意されていない場合のことを考慮していた訳ですね。

 

ただ、私はAmazon商品紹介を使う時は、商品画像とテキストを見せたい時です。
ですので、画像がある前提の見ためを重視しました。
Amazonはてなの使用が変わったりしたら…なんて考えても杞憂ですしね。

 

もっと勉強したい方へ

自分でカスタマイズするのって、楽しいですよね。

CSSやHTMLを少し把握しておくだけでできるので、ご興味のある方は是非勉強されてみてはいかがでしょうか。

 

おすすめの学習サイト

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

ドットインストールを見ながら、実際に自分でコードを書く。
これを定着するまで繰り返せば、新人コーダーレベルになっているくらい効率的だし、分かりやすいですよ。何より、無料で視聴可能!
約3分と1本1本が短い動画なので、スマホで空き時間にこまめに見れば、あっという間に終わらせてしまえます。

おすすめの勉強法です。

 

HTML & CSS 基礎編 | プログラミングの入門なら基礎から学べるProgate (プロゲート)

こちらも無料!のオンライン学習サイトです。Progateはスライドを見たあとに、実際に記述して次に進むというゲームっぽい進行です。
もちろん分からなくてもヒントや答えを見れます。進行度合いなどによりレベルが上がっていくので楽しく学べます。

初心者に嬉しいのは、ブラウザさえあればOKなところ。コードを記述するメモ帳やソフトは使わず、Prograteが用意してくれている画面に直接書けばいいのです。気軽に勉強できます。

 

おすすめ書籍

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

  • 作者: 狩野祐東
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2013/05/28
  • メディア: 大型本
 

書籍で初心者向けなのはこちら。とても丁寧に説明があり、内容も多すぎず挫折しづらいと思います。どの本から読んだらいいか分からないと言う方にはまず読んで頂きたいです。

 

最後に、コピペするCSS

<style>
.hatena-asin-detail-info {
float: left;
width: 60%;
}
.hatena-asin-detail .hatena-asin-detail-image {
margin-right: 5%;
max-width: 35%;
}
.hatena-asin-detail-info ul {
list-style-type: none;
margin: 0;
}
</style>