AFFINGER3

【AFFINGER3】サイドバーウィジェットのカスタマイズをやってみた!RSSボタンの移動やAmazonリンクの横並べ!

投稿日:

スクリーンショット 2016-03-07 22.08.48

AFFINGER3にしてからサイドバーはそのままだったので、ちょっといじってみました。

今回の記事で参考になりそうな項目は

・RSS購読ボタンの位置を変更する。
・Amazonアフィリエイトの商品リンクを横並びに表示させる。

ぐらいでしょうか。

基本はウィジェットページでテキストにコード打ち込んで挿入してます。

 

RSS購読ボタンの位置を変更してみた

スクリーンショット 2016-03-07 22.20.40

RSSボタンがちょっと中途半端な位置にあったので、移動しました。

今回説明するのは、RSSボタンをサイドバーの最上部にもってくる方法です。

他の場所に移動したい場合も参考になると思います。

まず【AFFINGER3】子テーマを使って、トップの記事一覧に広告(Adsense)を入れてみる。設定方法を画像で解説!を参考に、
sidebar.phpのファイルをaffinger3childにコピーします。

 

スクリーンショット 2016-03-07 21.31.13

真ん中らへんにRSSボタンですの注記がありまして、これがRSSボタンのコードです。

 

上の範囲がRSSボタンのコードなので、これを選択⇒切り取ります。
※他の場所に挿入したい場合は、このコードを任意の箇所に貼り付ければオッケーです。

 

スクリーンショット 2016-03-07 21.34.00

次に少し上にいってもらって、上図の位置に先ほど切り取ったRSSボタンのコードを貼り付けます。

 

こんな感じになると思います。

RSSボタンの移動はこれで完了です。

 

Amazonアフィリエイトの商品リンクを横並びに表示させる方法

スクリーンショット 2016-03-07 22.39.21

普通にコードだけ順番に貼り付けていくと縦並びになっちゃうので、そこで頭を悩ませている方が多いかもしれません。

これに関してはカンタンで

今回つかったのはこのコード。

横方向に並べ、かつ商品リンクの間を10px空けるように指示してあります。

ちなみに

このコードを追加すれば、どんどん右側に追加できるのでいくつも横に並べていけます

ただし、AFFINGER3のサイドバーではサイズオーバーになるので2つまでですね。

コードの10pxの部分の数字を変更すれば、商品リンクの間の広さも自由に変更できます。

これはAmazonに限らずどんなコードでも応用ききますので、様々な場面で使えるコードですね。

 

なおろぐのサイドバー

スクリーンショット 2016-03-07 22.18.47

このように並べてみました。

SNSの項目については

[STINGER5]サイドメニューにウィジェットでツイートを表示させてみよう!

この記事を参考にできると思います。

そうそう、先日記事にしたカテゴリー整理は一応完了しましたが、案の定Batch Catで一括整理しちゃいました・・・

336px

スポンサーリンク

336px

スポンサーリンク

-AFFINGER3

Copyright© なおろぐ , 2016 AllRights Reserved.