スポンサーリンク

[cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】

とりあえずのメモインターネット小話プログラミングホームページ運用

スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。

CSSで少し微調整していきます。

スポンサーリンク

リンクボタンを一列にまとめる

まずは、縦に並んで画面を占有しているボタンを、一列にまとめます。

flex-wrapをnowrapにして、一列にし
widthをautoにして、左揃えにしました。

/** amazonリンクのモバイル表示を整理 */
@media screen and (max-width: 834px) {
  .booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  flex-wrap: nowrap;
  justify-content: flex-start;
  }
  .booklink-link2 > * > a, .kaerebalink-link1 > * > a, .tomarebalink-link1 > * > a, .product-item-buttons > .shoplinkyahoo > a {
font-size: 9px;
  }	
	.booklink-link2 > *, .kaerebalink-link1 > *, .tomarebalink-link1 > *, .product-item-buttons > * {
		width: auto;
	}
}

商品説明文を上にした

次は、表示順序です。

商品タイトルから商品説明へと、スムーズに視線を移動できるようにしました。

これも、display:flexで表示順序を変更しました。あとは、細かい余白で区切りをわかりやすく微調整しています。

/**amazonリンクの表示順序を変更*/

.product-item-snippet {
	display :flex;
	flex-direction:column;
}

.product-item-description{
  order: 1;
	margin-bottom: 6px;
}
.product-item-maker{
  order: 2;
	font-weight:700;
	margin-right:10px;
}
.product-item-price{
  order: 3;
}
.item-price{
	font-weight:700;
}
.product-item-review{
  order: 4;
	margin-top: 6px;
}
WordPressデザインレシピ集
技術評論社
¥6,116(2022/06/21 11:19時点)
あれってどうやるんだっけ?っていう用語が浮かばない疑問をこの書籍でざっと調べる。更に詳細はネットで再検索。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
SBクリエイティブ
¥2,486(2022/06/21 11:20時点)
制作するサイトのデザインはかなり良く、タグがうろ覚えだったりなんとなく知っている程度でも、「とりあえず本に書いてあることをそのまま入力してみよう」で、本に書いてある通りのサイトが出来上がる。
QRコードを読み込むと、関連記事を確認できます。
[cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】
タイトルとURLをコピーしました