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

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

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

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

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

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;
	}
}

2. 商品説明文を上にした

次は、表示順序です。

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

これも、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;
}

こちらもどうぞ。

note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。 今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。 これもnoteのデザインを参考にしています。 タイトルと本文の位置が近くなるので、読みやすいですよね。 Cocoon設定やPHP編集もいいけれど…… アイキャッチ位置を変更する方法をざっと調べると… Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更す...

chiilabo.com

Amazon商品紹介リンクをショートコードで入れられるようにした

Cocoonには商品紹介のショートコードがあります。 これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。 ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することできることに気づきました。 これまでのやり方は大変だった 見出しやボタンを組み合わせて、作っていました。 画像リンクやテキストリンクなどをコピーしてくるのに、かなり時間がかかります。 それを、こんなふうにしました。 見た目にもコンパクトだし、何...

chiilabo.com

[Criteo]邪魔な全画面動画広告を停止したい【間接的なネット広告】

煩わしい全画面広告は、Google広告に間接的にCriteoから表示されている。Criteoのサイトで「配信停止」を選択すると、Cookieに記録される。

chiilabo.com

WordPressデザインレシピ集

技術評論社

￥5,540（2024/10/06 11:11時点）

あれってどうやるんだっけ？っていう用語が浮かばない疑問をこの書籍でざっと調べる。更に詳細はネットで再検索。

商品レビュー（Amazon.co.jp）

Amazon

楽天市場

Yahoo!ショッピング

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

SBクリエイティブ

￥2,202（2024/10/06 11:11時点）

制作するサイトのデザインはかなり良く、タグがうろ覚えだったりなんとなく知っている程度でも、「とりあえず本に書いてあることをそのまま入力してみよう」で、本に書いてある通りのサイトが出来上がる。

商品レビュー（Amazon.co.jp）

Amazon

楽天市場

Yahoo!ショッピング

QRコードを読み込むと、関連記事を確認できます。