リンクがまとめられていて便利な一方で、デフォルトで使うには少しデザイン的に物足りない部分があったので、カスタマイズをしてみました。
まずは、基本的なデザインCSSを取得。
今回、参考にしたのはこちらのサイトです。
素敵なデザインのCSSを公開していただいてありがとうございます。
CSSを取得したところで、実際にデザイン設定をしていきましょう。
「Blogger」の場合のCSSの設定方法。
ここでは「 Blogger」の場合の設定方法を解説します。
左側のリンクより、テーマ＞カスタマイズ＞上級者向け＞CSSを追加、と進んでください。
「CSSを追加」の編集画面上で、上のリンクで取得したCSSをコピペして、保存をしてください。
※Amazon、Kindle、楽天ブックスのリンクだけを使う方であればこれで設定完了です。hontoやセブンネットなどのリンクも使用したいという方は、追加のを利用される際は、もうひと段階設定が必要です。
honto、セブンネットなどがうまく表示されない問題を解決するには
取得したCSSのままコピペをすると、セブンネットやhontoのリンクを設定した際に、表示が崩れてしまうことがあります。
セブンネットやhontoのリンクもうまく表示されるように下記のCSSを追加しましょう。
.shoplinkseven a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
.shoplinkbk1 a{color:#007dcd !important;border: 1px solid #007dcd !important;}
追加する場所は「.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}」の下で良いと思います。
お好みに合わせて色も調節してみてください。
これで、全てのリンクにデザインが適応された状態になったと思います。
0 件のコメント :
コメントを投稿