toggle
2017-07-07

ヨメレバのデザインを改造してみよう。

スポンサードリンク

yomerebacustom

本を紹介する時にヨメレバという便利なリンク作成ツールがあるのですが、それはとても便利で僕も使っています。

ただ現状はデフォルトのまま仕様しております。

 

ヨメレバは意外とカスタマイズ性が高くって、CSSを改造することにより、とてもオシャレにカッコよくデザインすることが可能。

ただ初めて設置する時からいきなりデザインを変えて設置は骨が折れますよね?

 

ヨメレバリンク設定>ヨメレバデザイン設定>ブログ記事執筆>ヨメレバ設置

これは疲れます、やることが多いから結局やらないでしょう。

 

しかし、今回は先延ばししてきたデザインカスタマイズ。

手を付けてみることにしましょう。

 

今の知識ならばできる自信があります。

 

1からカスタマイズは難しいので、公開されているCSSカスタマイズを真似る

 

僕が得意なゲームや読書方法ならば、思いつくままの自己流でOK。(でも興味あることって結構調べるけどねw)

ですが、CSSデザインはまだまだ下手くそなので、まずは公開カスタマイズデザインを参考にすることにしましょう。

 

それで色々見た結果、ボタンの数を結構絞っているところが多いんですね。

SEO的なものかと思ったんですが、思うにこれは、リンクの数が増えてそこから収益が発生したとしても、管理するのが面倒だからという理由が大きい気がします。

 

ユーザビリティ(使いやすさ)の観点から見てたら、ボタンリンクの数は多いほうがいい。

マイナーなショップのポイントを溜めている人もいる、そのためにヨメレバというものができたはずですからね。

というわけでボタンの数を増やしたら、グーグルからの評価が下がる。っていう話はないと思います。

 

僕は結構本を読むし、ヨメレバのボタンは多くして通をアピールしていきたい。(珍しく見栄っ張り)

 

というわけでボタンの数が多いカスタマイズを探したのですが、これが良さそう。

 

ボタン数が多いカスタマイズがあった

 

【カエレバ/ヨメレバ専用】レスポンシブな紹介リンクにするためのCSS

 

かなり拡散されている記事で、バリバリにカスタマイズされていますね。

作者のホシナカズキさんの実力の高さが伺えるというもの。

 

というわけで早速スタイルシートにコピペ。

そうしたら、楽天Koboには対応していないみたいです。

 

楽天Koboはサービスがかなり新しく、調べてみると2015年4月30日からってことなので、仕方ないでしょう。

 

ただ、ここまでテンプレートがしっかり出来ているので、ボタンに色を追加するCSSの1つくらいは僕でも追加できます。

 

楽天Koboのボタンを追加。

 

まずは本家ヨメレバから楽天Koboのコードの名前を見てきましょう。

shoplinkrakukoboとなっていますね。

 

コピペしたコードを検索するとshoplink○○○(○の部分にはamazonとかrakutenとか)となっている箇所がありました。

同じ名前のコードは2箇所だったので、shoplinkrakukoboを含むコードを2箇所に追加すれば良いってわけだね。

 

というわけでコードの一部をコピペして、さらに名前を変える。

 

custom1

これと

custom2

 

これでボタンが追加されました。

shoplinkrakukoboをコピペで追加しているってわけです。

 

色は楽天と同じコピペまんまにしているけど、流石に手間もかからないので、本のリンクを貼り付けた時に実物を見て色を変えていきたいです。

 

そもそも全部のサービスに登録してなかった……

 

ヨメレバを最初に利用した時にリンク登録があるんですが、ちょっと面倒でhontoとか登録しませんでしたね。

hontoっていうのはTwitterで、よく500万円分が当たるっていうキャンペーンやっている本屋さんです。

全部登録してこないとなー。

 

とりあえずこれでしばらくは、ヨメレバのリンクを貼り付けるのが楽しくなるでしょう。

 

追記

 

全部登録して貼り付けたら、なぜか楽天Koboと7netの間が空くんですよね。

しばらく色々試しながら考えたり調べたりしたんですが、ソース的には全く問題がない。

そこで、もしもアフィリエイトのリンクコードに1ピクセルの画像があるという話をチラっと聞いたのを思い出したんですよ。

 

なので、もしも経由ではなく直接楽天と提携するリンクにしたら、直りました。

原因が分かってしまえば、もしも経由でも直せそうなんですが、こういうのってまだ貼り付けたばかりだしこのままでいいかな。

 

スポンサードリンク
関連記事