Amazonアソシエイトリンク作成ツール「Amakuri」のレスポンシブデザインCSS(はてなブログ)
こんにちは、あるはです。
今回はAmazonアソシエイトリンク作成ツール「Amakuri」を使用し始めて、レスポンシブデザインのCSSを初心者なりに頑張って作ったので公開してみようと思います。
この記事のカエレバ・ヨメレバに似せたテンプレートをレスポンシブデザインにしてみました。この記事では使い方もわかりやすく解説されているのでおすすめです。
Amakuriはこちら↓
見た目はこんな感じ
PC
スマホ
スマホの方は画像サイズを小さくしてフォントサイズも少し小さくしています。
あとAmazonのボタンの色をオレンジに変更、角を丸くしました。
そのままテンプレートを使用すると画面いっぱいにリンクが表示されてしまうので見にくかったのですが、だいぶ見やすくなりました。
改良したCSSコード(コピペOK)
デザイン設定→カスタマイズ→デザインCSSのところに貼り付けてください。
/*Amakuriデザイン*/ .nfx-amkr-box { border: 1px solid #ddd; box-sizing: border-box; display: -webkit-flex; display: flex; margin: 2em 0; padding: 1em; } @media screen and (max-width: 2000px){ .nfx-amkr-image img { max-width: none; } .nfx-amkr-content { margin-left: 1em; } .nfx-amkr-title { font-weight: bold; } .nfx-amkr-credit { color: #666; font-size: .8em; text-align: right; } .nfx-amkr-desc { list-style: none; } .nfx-amkr-desc li { display: inline; margin-right: .8em; } .nfx-amkr-comment { color: #666; font-size: .9em; } .nfx-amkr-amzlink a { background-color: #ffa500; box-shadow: none; color: #fff; display: block; padding: 1em; text-align: center; text-decoration: none; font-weight: bold; border-radius : 10px; } } @media screen and (max-width: 500px){ .nfx-amkr-image img { max-width: 100px; height: auto; } .nfx-amkr-content { margin-left: 1em; font-size: .8em; } .nfx-amkr-title { font-weight: bold; } .nfx-amkr-credit { color: #666; font-size: .5em; text-align: right; } .nfx-amkr-desc { list-style: none; } .nfx-amkr-desc li { display: inline; margin-right: .8em; } .nfx-amkr-comment { color: #666; font-size: .8em; } .nfx-amkr-amzlink a { background-color: #ffa500; box-shadow: none; color: #fff; display: block; padding: 13px; text-align: center; text-decoration: none; font-weight: bold; font-size: 1.2em; border-radius : 10px; } }
(どうやって背景黒にするんだこれ...誰か教えていただけると助かります。)
簡単に解説すると@media screenと書いて、画面の大きさによって条件分岐で適用するCSSコードを変えています。はてなブログでレスポンシブデザインを使うとなるとこれが主流な気がします。
数日前にCSSの仕組みを知った初心者なので間違えてるところがいっぱいありそうなんですけど、実際に僕のブログ記事を見ていただければわかるように、一応ちゃんと適用されているので、このままいきたいと思います。
ご質問にはお答えできないので、申し訳ないですがトラブルがあった場合は自己解決していただくしかありませんので、ご了承いただけると助かります。
参考になれば幸いです。
今回はここまで!