Amazonリンク

[CSS]Amazonリンクをnote風に画像を大きくした

[CSS]Amazonリンクをnote風に画像を大きくした

Amazonリンクをnoteのデザインを参考に、画像を大きくして説明文を省略しました。CSSを更新して、デスクトップとモバイル両方での表示を変更し、商品名、画像、ボタンのレイアウトを調整しました。Amazonリンクのスタイルを変更Amazonリンクのスタイルを変更しました。今回は noteを参考にして、画像を大きくし、説明文を省略するようにしました。Amazonリンクの例↓更新後のCSS/** amazon リンク * ブログカードに寄せた * * 2024-08-31 no...

とりあえずのメモプログラミングホームページ運用

[Cocoon] Amazonリンクに個別にPR表記をつける[CSS]

[Cocoon] Amazonリンクに個別にPR表記をつける[CSS]

ちょっと商品紹介をしたいとき記事の中にちょっとAmazonの商品紹介を入れたいときがあります。記事全体がPRでもないので、記事先頭にPR表記を入れるのにも抵抗があります。そういうときのために、Amazonリンクに個別にPR表記をつけるようにCSSを変更しました。テーマのstyle.cssに以下のコードを追加しました。/** Amazonリンクに個別にPR表記をつける 2024-05-01*/.product-item-title::before { content: "[PR...

2024.05.02 2024.09.05

とりあえずのメモプログラミングホームページ運用

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

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

スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。CSSで少し微調整していきます。リンクボタンを一列にまとめるまずは、縦に並んで画面を占有しているボタンを、一列にまとめます。flex-wrapをnowrapにして、一列にしwidthをautoにして、左揃えにしました。/** amazonリンクのモバイル表示を整理 */@media screen and (max-width: 834px) { .bookli...

2022.06.21 2024.09.05

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

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

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

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

2020.09.24 2024.08.31

#PR含むニッチな話題ホームページ運用