び】トイレはHM標準品にし、アクセントクロスで個性的に。ドアはYKKAPの通風ドアを採用。玄関のこもった匂い対策におすすめです。2014年8月20日こんにちはちゅんこ@shufulifeです!WordPressのテーマをSTINGER5に変更してみました。メモ的な意味も込めて、これからカスタマイズした箇所ををブログに書いていこうと思いますのでよろしくお願いします。ヨメレバとカエレバのカスタマイズすっかりおなじみ!わかったブログのかん吉さんが運営なさってるブログパーツ、ヨメレバとカエレバ。みんな使ってるし!私もぜひ使ってみたいと思い(私はゆとり世代ではないですよ)カスタマイズに挑戦しました。ヨメレバとカエレバの具体的な使用方法はサイトで確認してくださいねー。ヨメレバのデフォルトはこんな感じですね。amazlet風-1[ロゴ無し]】です。みんな大好きイケハヤさんアマゾンや楽天などのショップのテキスト部分をCSSでボタン化にしますカスタマイズ後はこうなりますあまり買って!買って!!!と主張しすぎないよう、ボタンの色は控えめにし、ボタンの文字色で差別化しています。ボタンの色はそれぞれのショップのロゴの色を使いました。キンドルは黒だったので、ペーパーホワイトのロゴ色を使ってみました。モバイルにも対応していますので、PCで見ていただいている方はウィンドウの幅を狭くして確認みてください。STINGER5へのコード記述方法STINGER5はレスポンシブになっていますので、2ヶ所に記載する必要があります。場所は【style.css】ですよー。ひとつめのコード記載STINGER5の【style.css】に、下記の記載を探します。0;}この部分より上に記載します。aへdisplay:block;を追加しました。webkit系の記述を削除。その他若干のコードを修正しました。.booklink-footer{clear:left;}これをコピペしてください。{次はこれより下コピペします。780px)は2個ありますが、2番目の(PCサイズ)の方の下の方にコピペです。Yahooショッピングは文字数が多いのでfontサイズを小さくしています。ヨメレバ・カエレバでのデザイン選択PCの画面ではボタンの数を3つにすると横にキレイに並びます。POINT図のようにヨメレバ・カエレバでは【amazlet風-2(cssカスタマイズ用)】を選択してください。上記のコードでは、ヨメレバ、カエレバ、どちらのコードにも使えます。ショップはアマゾン、キンドル、楽天ブックス、楽天市場、Yahooショッピング、価格.comの6種類のみ(楽天市場と楽天ブックスのクラス名は同じ)です。ご自身でいらないのは消したり、必要なものを付け足したり調整してください。ボタンの数を変えたいときは、ボタンを4つ表示する場合、PCで見てみると、ひとつ下の方にはみ出す感じになります。これでボタンが並ぶかと思います。ボタンを自分好みにカスタマイズするにはボタンのカスタマイズはこちらのサイトがおススメです。Libraly】から好きな形状のボタンを選択します。次にボタンの下の所から色を決め、好みのボタンを作ります。作ったボタンをクリックすると右側にコードが出来てきます。これをコピペしていきます。タブレットサイズ780pxより上の部分。ATTENTIONレイアウトが崩れてしまうので、コピーしてきた方のフォントサイズとパディングは削除してください。ここにコピペ}上記の部分はそのまま、パディングとフォントサイズを削除したコードをコピペしてください。ホバー、アクティブ部分はそのままコピペでOKです。class名は当サイトのコードのままです。これでボタン部分も自分好みにすることが出来ます。PCで上手く並ばないときはwidth:30%の所やフォントサイズ、マージンなどで調整してみてくださいね!まとめこんなすごいシステムを無料で提供してくださっているかん吉さん感謝です!それでは、ちゅんこ@shufulifeがお送りしました。こ日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘(小1)と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。23:38ちゅんこさん、こんにちは。このCSSの記述だと、ボタンの端っこをクリックしてもリンク先に飛ばない場合が多々あると思います。「.shoplinkamazon」のdivタグのボックスをボタンのカタチにするのではなく、子要素のaタグをCSSで装飾してボタンのカタチにすれば良いかと思います。ボタンにするセレクタをdivではなく、aタグにするのです。ゆきひーさんのブログが参考になると思います。23:16ちゅんこ様はじめまして、うみにんと申します。カエレバを導入するためにネットをグルグルしているうちにこのサイトへたどり着きました。導入はしていませんが、先んじて感謝の気持ちを伝えたくコメントしました。何か困った際には相談させてください。私もちゅんこ様のサイトのように、人に喜ばれる物を作っていこうと思います!(まだまだ立ち上げ段階のブログですが)お時間ある時にでも遊びに来て下さいね。今後とも宜しくお願い致します。01:59こんにちは!記事参考にさせて頂きました。使ってみて思ったのですがカエレバの際、ヤフオクのボタンが表示が崩れていました。見ると記述がなかったので私は自力で追加できましたがコード修正されれば皆さん助かるかと思います。11:47ライトニング2014様コメントありがとうございます。こちらの記事で紹介していますコードは、記事中にも説明がありますがアマゾン、キンドル、楽天ブックス、楽天市場、Yahooショッピング、価格.comの6種類のみ(楽天市場と楽天ブックスのクラス名は同じ)です。その他のボタンに関してましてはサイトの軽量化と、利用頻度から見ても不要かと思いますので追加の予定はございません。説明がわかりにくくて申し訳ありませんでした。13:53はじめまして。ヨメレバ・カエレバのカスタマイズCSSを使わせていただきました。テーマはStinger5ではないので、少し修正をしました。そのことを記事に書いて、コードも載せています。元のコードはちゅんこさんのものなので、コードをまるまる載せるのは、まずいかも?と思い、ご連絡しました。こさんのものであると明記してはあります。問題でしたら、その旨ご連絡くださいませ。記事はこちらです↓http://wpblog.sara2jp.com/2015/yomereba-kaereba-customcss/お問い合わせから送ろうとしたのですが、文字列が表示されなくて送れませんでした。プラグインをインストールするようメッセージが出てます。16:08さらさらり様コメントありがとうございます!お問い合わせフォームの件、申し訳ございませんでした。お問い合わせいただいた記事の件ですが、とくに問題ありません。記事をご紹介いただきましてありがとうございます!今後ともよろしくお願いいたします。23:12「.shoplinkamazon」をdisplay:inline-block;にし、cursor:pointer;とされていますが、クリックできるように見えて、「Amazon」などのテキスト上にしかリンクがない状態となっています。ボタンの端っこの辺りをクリックすると分かります。a」に対してdisplay:inline-block;やdisplay:block;にすることで解消されると思います。cursor:pointer;の記述は不要になると思いますよ。び】トイレはHM標準品にし、アクセントクロスで個性的に。ドアはYKKAPの通風ドアを採用。玄関のこもった匂い対策におすすめです。ShufuLife-主婦ライフ-本サイト内にある記事や画像などの一切の無断転載を禁じます。