Snow Monkey でAmazonアソシエイトの商品紹介パーツ4つを横に並べるスタイルシート

WordPressブログの外観を当ブログは、Snow Monkeyをカスタマイズして利用しています。

記事の下に、Amazonアソシエイツの商品紹介パーツを4つ横に並べての配置できるようにしました。(下のような配置です。)

Snow Monkeyの場合でのスタイルシート設定のメモです。(この記事は、Snow Monkey アドベントカレンダー10日目の記事です。)

CSS3 Flexbox

iframeタグが、ブログカードやYoutubeなどの埋め込みする前提のスタイルシート設定になっています。なので、そこと競合しないように配慮しています。

プラグインにしてショートコードにすることもできるのですが、煩雑になる点と、Snow Monkeyを開発されている北島さんの考え方に共感したので、HTMLで一つDIVのクラスを追加するだけで、スタイルシートが適応されます。

スタイルシートでは、floatでなく、Flexboxを使っています。今回、flexを使って「floatクリア問題」が無縁になり、とても扱いやすいことを、今回、学べました。flex-wrapを設定して、スマートフォンの時は、はみ出でないようにしています。(未対応ブラウザのことは考えなくてもいいですよね。多分)

HTMLコード

Amazonアソシエイトのパーツ全体を、下のようにDIVの「ads-amazon」クラスで囲みます。

スタイルシート

こちらのスタイルシートを、子テーマか管理画面の外観カスタマイズにある追加CSSに追記します。

追伸

もっとスマートやり方があるよ!は、ご指摘ください。嬉しいです。

こちらは、文章が苦手だった私でも毎日書けるようになるために読んだ書籍の中から、オススメな4冊です。

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-11-11 20:00 – 21:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-11-19 11:00 – 13:00
オンライン【あみだす発酵アカデミー】白菜キムチ(キムジャン)作りクラス
詳細・お申し込みはこちら

2022-11-19 15:00 – 17:00
【あみだす発酵アカデミー】本格「王様のコチュジャン」作りクラス/オンライン・リアルどちらもOK
詳細・お申し込みはこちら

2022-11-20 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-11-25 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 11月25日
詳細・お申し込みはこちら

2022-12-08 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 12月8日
詳細・お申し込みはこちら

2022-12-09 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-12-10 11:00 – 13:30
【あみだす発酵アカデミー】本場香港の味 XO醤作りクラス
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-15 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-16 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 12月16日※12月のみ第3週目となります
詳細・お申し込みはこちら

2022-12-17 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-18 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-15 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。