カエレバとカスタムCSSで実現するBlogger版ポチップ(みたいなやつ)

2025年9月21日日曜日

Blogger ブログ

t f B! P L

 このブログはレンタルサーバ上のWordPressからBloggerに移したわけですが、いかに自分がWordPressの便利さに慣れきっていたかがよくわかる最近です。

というわけで今回は、アフィリエイトリンクを綺麗に見せるリンクをBloggerで実現できないかを試行錯誤したメモとなります。ほんとにメモ。

ポチップは手軽でかっこよかった(遠い目)

WordPressにプラグイン入れて設定するだけで、こんなきれいなリンクが生成できるのは間違いなく神でしたね。悔しいのでこの画像にもリンク貼っときます。

Bloggerにはそもそもプラグインという概念が存在しない

これはもう、そういうサービス方針なので文句を言っても仕方ないし、その分セキュリティ的に狙われる穴が減ったり、管理画面もブログページも軽くなるし、メリットもたくさんあると考えているので良い悪いではないのかなぁと思っています。

HTML直接編集ならできる

それを補うため?なのか、記事編集ページでHTMLを直書きできるモードが一番左上に存在しています。

"カエレバ"さんを使わせていただく

カエレバさんは有名なアフィリエイトリンク作成サイトですよね。いたるところで操作説明はされているので割愛します。
このブログではAmazon、楽天、ヤフーショッピングのアフィリエイトを使っているので、それらをカエレバに保存してリンクを作成しています。情報がブラウザに保存されるんで、登録とかしなくていいのも楽で◎ですね。

HTMLビューで該当箇所に入れ込む

さきほどのHTMLビューで、アフィリエイトリンクを入れたいところに、カエレバで生成されたHTMLを入れ込みます。このHTMLは修正なしでそのまま貼り付けてOKです。

見た目を自分好みに変える

ポチップ風の見た目が気に入ってたので、カエレバで作成されたリンクをCSSでカスタマイズします。
ぴょんなことからさんのこちらのCSSを使わせていただきました。最高ですね。


左にあるメニューの中から「テーマ」を選び、現在選択しているテーマの「カスタマイズ」をクリックします。

左側に「詳細設定」というメニューがあり、その中に「文字の色」というプルダウンメニュー(テーマによって名前が違うかも)をクリックすると「CSSを追加」が出てきます。

CSSを追加をクリックすると、文字を入力できる箇所が出てくるので、ここにCSSをコピペします。

で、忘れないように、右下にある保存アイコン(右のアイコン)をクリックして完了です。
これはわかりづらい、非常にわかりづらいですよBloggerさん!

できあがったリンクがこちら


思ったとおりのリンクができて大変満足しています。

ポチップと違う点

自分の好みでカスタマイズできる

CSSを自力で入れ込んでいるので当然ですが、行間や大きさや色など、好みの形に変えられます。
このサイトのテーマの設定で、リンクの文字色を赤色にしていますが、カエレバ向けのCSSでリンク文字を白に上書きする設定をしているのにうまく効かず、ボタンの濃い色とかぶってめちゃくちゃみづらくなってしまいました。
というわけで、ボタンを白地に枠だけ色つけてみたんですが、これはこれで主張が減っていい感じだなあと自己満足しています。

商品検索が楽天かヤフーショッピングになる

カエレバさんは楽天やヤフーショッピングなど、国内ECサイトの商品をキーにして検索をするため、アマゾンにしかない商品などはリンクを作成することができません。

まとめ

頑張って自分でchromeプラグインとかリンク生成のスプレッドシートとか作らなきゃかな……と思ってましたが、今回はカエレバさんとぴょんなことからさんのおかげでやりたいことが楽に実現できてとてもよかったです。

QooQ