成果物:BabyLinkをカスタマイズしてリンク部分を大きくしました

SNSやってます。

シンプルなアマゾンのアフィリエイトリンクを貼りたいと先日導入し使い始めたBabylink。

導入と同時に枠線のみをBabyLinkのCSSに追加しましたが、少し変更したいところが出てきたので早速カスタマイズしてみました。

ブログにシンプルなアフィリエイトリンクを貼りたい。
2017年1月6日(木)。今日はアフィリエイトリンクのHTMLとCSSの見直しをすることにしました。 メインで描いているブログ...

また、このブログへのプログラムソースコードの掲載の方法も解決した事ですし、

プログラムのソースコードをブログで表示する設定が10秒で終わった件
一体先日の苦労はなんだったのか、よくよく調べると、私の使っているワードプレステーマSimplicity2にはソースコードを簡単にのせることが...

カスタマイズしたCSSを勉強の成果物としてこのブログに掲載する事にしました。

良かったら使って下さい。

ちなみに私が使っているWord PressのテーマはBabylinkの作者でもある、ワイヒラさんのSimplycity2です。とりあえずこのテーマではきちんと動作しています。

理想の姿

実際に使って見て下記のように変更したいなと思うに至りました。

  1. 商品名、作者名、紹介文のサイズが小さくなっているので通常に戻す。
  2. 商品名には下線を残し、その他の文章の下線を消す。
  3. 外枠に枠線追加
  4. 商品名及び画像の上だけでなく枠線内をクリックする事でリンク先に飛ぶようにする。
  5. 枠線内にマウスが乗ったら枠線内の色を変更して、クリックできる場所だとユーザーに分かってもらうようにする。

positionと、擬似要素hoverを使えばなんとなかりそうだと思いました。

変更前と変更後の比較

下記にカスタマイズをする前のBabylinkで作ったシンプルバージョンのアフィリエイトリンクと私が上記で述べた理想の姿になる様にカスタマイズしたアフィリエイトリンクを貼っておきます。

また、下記のリンクですが、アフィリエイトコードは入れていません。

変更前のアフィリエイトリンク

変更後のアフィリエイトリンク

カスタマイズ後のコード

これまで勉強してきた事やネット内の情報を参考に試行錯誤した結果、なんとか完成しました。

また、カスタマイズにはこちらのサイトも参考にさせていただきました。

.link_box{position:relative;width:30%;padding:5%;border:solid 1px #CCC;margin:0px auto 20px;} .link_box a{position:absolute;top:0;left:0;width:100%;height:100%...

CSS

変更箇所にはすべてコメントを付けていますので、下記をそのまますべてコピーしてお使いのワードプレスの子テーマ(style.css)に貼り付けて使うこともできます。

但し下記をコピーして貼り付ける場合はそのままコピー&ペーストではなく、一度お使いのプログラミング用エディタに貼り付けてから子テーマのCSSに貼り付けてください。

そのまま貼り付けたりメモ帳などを経由して貼り付けた場合は、文字コードが違うことから正常に作動せず、しかもそれを消しても元に戻らない、という事があります。

「UTF-8(BOM無し)」または同じ意味の「UTF-8N」に対応しているテキストエディタ、私の場合はATOMを使っていますが、そういうエディタに一度貼り付けてから使ってください。

下記、コードになります。

.babylink-box{
position:relative;/*staticの場合の位置を基準としてブロックを相対配置。後続のブロックの配置はそのまま*/
overflow: hidden !important;
font-size: medium !important;/*文字サイズを中に*/
zoom: 1 !important;
margin: 15px 0 !important;
text-align: left !important;
border: solid 1px #CCC;/*ボーダー*/
}
.babylink-image{
float: left !important;
margin: 0px 15px 0px 0px !important;/*3つ目を0にしてイメージしたのマージンを消す*/
width: 75px !important;
height: 75px !important;
text-align: left !important;/*イメージを左寄せ*/
background-color: rgba(255,255,255,0);/*イメージのマージンを透明にする*/
}
/*リンク(aタグ)をブロック要素(div)全体に、ここから*/
.babylink-image a{
position:absolute;/*親要素またはbody要素(ページ全体)を基準にブロックを絶対配置。後続のブロックは詰めて配置*/
top:0;
left:0;
width:100%;
height:100%;
}
/*追加ここまで*/
/*マウスオーバー時にリンクエリアの色変えと透明化、ここから*/
.babylink-image a:hover{
background-color: rgb(255,248,220);
opacity: 0.5;
}
/*追加ここまで*/
.babylink-image img{
border-top: medium none !important;
border-right: medium none !important;
border-bottom: medium none !important;
border-left: medium none !important;
}
.babylink-info{
margin-top: 5px !important;
overflow: hidden !important;
zoom: 1 !important;
line-height: 120% !important;
}
.babylink-title{
margin-bottom: 2px !important;
line-height: 120% !important;
}
.babylink-manufacturer{
margin-bottom: 5px;
}
.babylink-description{
margin-top: 7px;
}

こちらのコードを子テーマのstyle.cssに貼り付けた後は、「Babylink」のサイトで生成されるコードの一番上の「シンプル」というものを貼り付けるだけです。

後は適当に著者の名前をコメントに書き換えるなり、適当にいじって下さい。

感想

Babylinkで取り込まれる画像はデフォルトでHTTPSにも対応しており非常に使い勝手が良いです。

ケータイで見る際に、カーソルをリンクの上に持っていくと色がつく(ホバー疑似要素)という動作はまったく意味はないのですが、それでもタップする場所が純粋に広くなるという事ですので、よりクリックしやすくなるはずです。

もしお役にこのカスタマイズがお役に立てた様でしたら、コメントでも残していっていただけると勉強の励みになります。

では、バンコク在住、プログラミング初心者のダイ(@daijirok_jp)でした。←ツイッターのフォローも嬉しいです。