書影をヨメレバに変更して、ちょっとだけカスタマイズしました：このブログのこと

　「2016年後期のNHKラジオまいにちロシア語講座」の記事から、本の書影の引用につかうサービスをG-toolsからヨメレバに変更しました。
　変更した理由としては、G-toolsがレスポンシブルに対応しておらず、スマホで見た時にちょっと間抜けかなぁと感じたから。それに割と苦労してブログをレスポンシブルにしたのだから、書影も可能ならしたいなと思ったのです。
　ヨメレバも実はレスポンシブル対応はしていないのですが、こちらはユーザーたちにより数多のカスタマイズ版が出ているので、それを使えばスキル0な私でも簡単でレスポンシブルに出来ますし。


　と言う訳で、以下は完全に自己満足なカスタマイズ履歴。大したことはしていないから、ガッカリしないでね！

 　まずは、ヨメレバから引っ張った書影その他をペタッと貼って記事を作成。ヨメレバには複数のデザインが用意されているけれど、cssカスタマイズ用の「Amazlet風-2」を選択するのを忘れずに。
　リンク先はAmazon筆頭に有名どころは全部抑えられている感じ。お好きなのを選択し（複数可）、生成されるhtmlをコピーしてペタッとな。

　そして今度は、「ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ」から#4のYukihy Lifeさんのを選択。シンプルでオシャレ。
　上記のリンク先のcssをコピーして自分のブログに貼り付ければ完成……のハズだったのですが、このcssはヨメレバではなくその兄弟サービスのカエレバ用らしく、色々と足りない。
　そんな訳で書き足しました。
　ヨメレバで用意されている購入先の内、私が使うのは、Amazon（言わずと知れた大手）、Kindle（配送すら待てない時や、Kindle版しかない書籍も）、楽天ブックス（たまにポイントが美味しい）、7net（ゲームの攻略本が早い気がする）、e-hon（たまに他所で在庫切れの本が見付かる）、紀伊國屋書店（マイルが美味しい）。

　Yukihy Lifeさんのcssは親切で、「/*ボタンを変えるときはここから*/」のコメントが記載されているので、簡単簡単。
　この部分を、

.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkseven a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkbk1 a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
.shoplinkehon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkkino a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}

と書き換えるだけ。上からAmazon、Kindle、楽天ブックス、7net、bk1、e-hon、紀伊國屋書店。下2つはヨメレバには関係ないが、元からあるのでカエレバでは使うのかも？と思いそのままに。
　ヨメレバには「図書館」という選択肢もあるものの、上手く動かなかったので省略。同じく「楽天kobo」の選択肢もあるが、私は使わないので省略。
　使う方は

.shoplinktoshokan a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakukobo a{color:#c20004 !important;border: 1px solid #c20004 !important;}

を追加してくださいな。上が図書館、下が楽天kobo用。

　なお、上記にずらっと並べたcssのカラーコード（#から始まる6桁の数字＆アルファベット、例：#FF9901）部分はテキトーなので、お好きな色のコードに変換してくださいな。
　前半のカラーコードは文字部分、後半のは縁に対応しているようです。同じ色で使うことを想定されているようですが、センスさえあれば違う色でもオシャレに出来そう。


　私はセンスがないので、全部同じ赤色にしようかなとも思ったが、それはそれで鬱陶しそうなので考えた末に、ボタンが7つあるので虹の色にすることに。
　虹色のカラーチャートはこちらのページからコピペ。

　結果出来上がったのは、こんな感じ。PCで見た場合。

　スマホで見るとこんな感じ。

　私のPCのモニターは安物なので、色味は下のスマホ版の方が本来に近いと思われます。ちなみに使用スマホはiPhone6plusです。



　こんなささやかな変更ながら、疲れた。
　cssをそれなりの時間弄っていたので、その途中にこのブログにアクセスした人には悪いことをしました。
　いつかはロシア語の本をOZONサイトから書影を引っ張って紹介したいなと思っているのだが、どうやれば上記みたいに綺麗に出来るのかなぁ。


今回お世話になったサイト一覧：
・G-Tools
・ヨメレバ
・ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ（「わかったブログ」より）
・ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！（「Yukihy Life」より）


関連記事：
・ガイ・ドイッチャー『言語が違えば、世界も違って見えるわけ』