佐渡の洋食屋店長のブログ

佐渡の洋食屋店長のマニアックなブログです。 グルメネタは少なく、マニアックなネットTEC的なネタ、佐渡ネタが豊富なブログです。


テーマ:
佐渡の洋食屋店長のブログ-レスポンシブウェブデザイン

■アメブロでレスポンシブウェブデザイン
SEO業界でも、レスポンシブウェブデザインが推奨されているのはご存知だと思います。同じサイト表示するのに、スマートフォン、携帯、パソコンとそれぞれURLを違えてソースを書くよりも、同じURLでそれぞれソースを吐いてくれた方がいいからですね。

アメブロはデフォルトで、携帯用サイト等にURLが切り替わってしまいますが、一応レスポンシブウェブデザインも出来ます。


■ブラウザ幅によるCSS指定

アメブロのCSSの編集画面で、以下のような追記をします。

@media screen and (min-width: 1300px) {
.banner{
position:fixed; _position:absolute; right:5px; top:50px;
}
}

フリースペースやフリープラグインやブログ記事等に以下のように記載。
<div class="banner">
<a href="http://itouyaryokan.com/blog/wp-content/uploads/2013/10/%E6%96%B0%E7%B1%B31.jpg" target="_blank"><img src="http://itouyaryokan.com/blog/wp-content/uploads/2013/10/%E6%96%B0%E7%B1%B31.jpg" border="0" /></a>
</div>

min-widthの数値で画面が1300px以上の場合、右側に固定でバナーを貼り付けます。
iPadやスマートフォンのサイズの場合、記事にかぶってしまうので、この場合は右側ではなく、フリースペースやフリープラグイン等に記載した場所に表示されます。

同じような感じで、WordPressやホームページ等にも活用出来ますよね。
スクロールしても、固定で表示されていれば、アクセシビリティも向上しますよね。
ぜひ活用してみてください。


この記事が参考になったらシェアしてください。
↓↓


このブログの更新情報をFacebookで購読できます。
↓↓


ブログ読者登録はこちらです。
↓↓
読者になる
いいね!した人  |  コメント(0)  |  リブログ(0)