simplicityでカエレバ・ヨメレバのリンクをボタン化する方法(仮)

友達とシェアする

こんにちは♪

ユーザビリティの向上のため、カエレバヨメレバのリンクをカスタマイズして、ボタン化しました。

今回ボタン化するにあたっていろいろ調べましたが、WordPressのテーマ「Simplicity」で「Yahoo!」「セブンネット」「kindle」まで網羅したボタン化のカスタマイズ方法が見つからなかった(どこかにはあったかもしれませんが)のでここに書き留めておこうと思いました。

カエレバとヨメレバ両方に対応していて、コピペで簡単にボタン化できます

なお、僕はCSSにおいては知識がほとんどありません。今回公開するものはどこかダブっていたり、間違いや、もっと簡単に表記できる方法もあるかもしれません。そのためタイトルを「(仮)」としています。

スポンサーリンク

目指すデザイン

何もしない場合、このようなデザイン表示になります(amazlet風(改)-3 アイコン:kazwoo215の場合)

カエレバ縦

これだとスマホの場合リンクをタップしづらいです。間違えることもあるかもしれません。そのため、各ショップのリンクをボタン化して見やすく、かつタップしやすいように改善します。

下記のようなデザインになるようにCSSを構築します。

パソコン表示(スマホの方は小さく見えると思いますが、実際は記事欄の80%程の幅です。また、実際は二重線ではなく下のスマホ表示と同じくシャドーになります。)

カエレバPC

スマホ表示

wpid-20151103_144309.jpg

これをコピペで簡単カスタマイズ!

ボタン化にするにあたり、以下のサイトを参考にさせていただきました。ありがとうございます。

・主婦ライフ:ちゅんこさん
コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ

・ピスログ:シゲさん
カエレバの使い方とCSSをいじる前の基礎知識。初心者がカエレバCSSカスタマイズに挑戦。

・ヨッ!センス:ヨスさん
カエレバのAmazonや楽天へのリンクを一括で簡単に「ボタン化」する方法

「主婦ライフ」のちゅんこさんのCSSを基本にしています。僕は価格.comは利用しないのでセブンネットに置き換えました。

このボタン化では以下のサイトに対応しています。
・Amazon
・楽天市場
・Yahoo!ショッピング
・Kindle
・7netショッピング

ちゅんこさんのCSSだけではスマホで表示崩れを起こしたので、シゲさん、ヨスさんの記事も参考にいろいろ試行錯誤してなんとか形になりました。

冒頭に書いたとおり素人なので間違いやおかしな点があるかもしれません。とりあえず今のところは問題は発生していないのでよしとしています。

以下のコードをコピーし【Style.css】の一番最後、あるいは子テーマ(推奨)、プラグイン「Jetpack」のカスタムCSS(有効化しておいてください)にペーストすればボタン化できるはずです。

Jetpack カスタムCSSはここ【外観⇒CSS編集】
CSS編集

子テーマの場合はその下の【テーマの編集】から入り「スタイルシート(Stile.css)」へ書き込みます。

Amazon・楽天・Yahoo!・セブンネットに対応しています。ヨメレバではKindleにも対応しています。

いちばん良いのはテーマのバージョンアップに左右されない子テーマの利用だと思います。子テーマ以外の方法では、テーマをバージョンアップするとクリアされてしまいます。

とは言うものの、僕はJetpackのCSS編集に書き込んでいます。というのも、子テーマを導入したら、なぜかテーマのデザインが崩れてしまってできなかったので。なのでバージョンアップの度に書き込む方法をとりました。パソコンにコードをメモしてあります。

【追記】2016年現在はsimplicity2の子テーマを使用しています。問題なく使えています。

[追記]もうひとつのカスタマイズ

2017年2月になり、上記のカスタマイズとは違うものを使い始めました。

というのもスマホ表示ではどうしても縦長になりすぎて、スマホユーザーに見づらいのではないかと思ったからです。それに途中でスクロールをやめて退出する可能性も否定できません。

ゆきひーさんの記事を参考にさせていただきました。ありがとうございます。

Yukihy Life:ゆきひーさん
ヨメレバ・カエレバのデザインをCSSでカスタマイズ!

レスポンシブ用CSSを参考にして、少しアレンジしました。

変更したのは、外枠の二重線をシャドーに。そして「価格.com」の部分を「7net」に変更しました。

PC表示

スマホ表示

スマホ表示では縦の長さが当初に紹介したのより短くなり、コンパクトになります。

ただお気づきのように、PC表示では右側のボタンだけなぜかガクンと下がっています。Yahoo!ショッピングと7netが三列目にきたときになります。

どうにか解決しようと思ったのですが、僕の知識では解決できませんでした。案外簡単なことかもしれませんがもしどなたか解決法が分かる方は教えていただけると助かります

※解決しました。以下のCSSにも変更対応済みです。コメントくださったさくはるさん、ありがとうございます!

とりあえずコピペ用CSSを(レスポンシブ)。

原本にはいくつかの場所に「!important」要素がありましたが、なくても大丈夫そうだったので外してみました。

実際に適用するとこのようになります(リンクは生きています)。

カエレバ

ヨメレバ

注意点

このCSSを適用するにあたって、カエレバ・ヨメレバでのブログパーツ生成時にはデザインを「amazlet風-2(CSSカスタマイズ用)」、アイコンは「なし」を選択してください。

CSSカエレバ

この設定で生成しないと表示崩れを起こします!

これ以外の方法ですでにブログに貼り付けている場合は以前のはあきらめるか、すべて貼り替えてください。はい、面倒です。

僕は「今日は8月、明日は9月」などと決めて、地道にすべて貼り替えました。

まとめ

さてどうでしょうか?

CSSの知識のある方はボタンの色や、ショップ名の色、ショップの追加、外枠の幅やデザインの変更など自分流にカスタマイズできるかと思います。

また、コードにおかしな点があれば調整してみてください。

  • いいね (9)
  • 読んだよ (9)
スポンサーリンク
読んでくださりありがとうございます♪

ブログランキングに参加しています♪
にほんブログ村 観賞魚ブログ メダカへ

友達とシェアする

フォローすると更新情報が届きます♪

この記事をお届けした
下町メダカ日のFacebookページを
いいねしてチェック!
スポンサーリンク

コメント

  1. さくはる より:

    初めまして。「さくはる」と申します。
    カエレバのボタンのカスタマイズ(2つ目のものです)、コピペで利用させて頂きました。
    私の方でも表示のずれが起こったのですが、どうしても使わせて頂きたいデザインでしたので、自分なりに直してみました。
    初心者ですので、これが正解とは言い切れませんが・・・一応、この方法でずれは無くなりました。

    /*ここまでを変更*/と.shoplinkyahoo img{display:none;}の間に、以下を足しました。
    .shoplinkamazon img{display:none;}
    .shoplinkrakuten img{display:none;}
    .shoplinkkindle img{display:none;}
    .shoplinkseven img{display:none;}

    素敵なデザインでしたので、利用させて頂けてとても嬉しいです。どうもありがとうございました。

  2. ゆき後輩 より:

    >さくはるさん
    さっそくCSSを書き変えてみました。
    ボタンの位置が全体的に下がりましたが、とりあえずは段差の違和感がなくなり良い感じです。
    ありがとうございます!
    記事も書き変えておきました。

  3. スマイル より:

    こんにちは。
    カエレバ・ヨメレバのCSSで・・・ボタン・外枠を使用させていただいています。
    とても綺麗で感謝しています。
    当方、初心者でcssもほぼ無知に近いです(^_^;)
    WordpressのテーマはTCDのMAGを使用、
    [追記]もうひとつのカスタマイズをコピペしています。
    一つ気になっているので教えてください。
    46行目 using width with padding can sometimes make elements larger than you
    48行目 float cannot be used with display inline-block
    の!マークでエラー表示されています。
    そのまま使用しても今のとこと表示が問題なくされているのですが、
    このまま使っても良いのかどうか・・・。
    盆休みで一日使って、自分で色々調べたのですが、解決できませんでした。
    エラー解消法あれば教えてくださいm(_ _)m
    よろしくおねがいしますm(_ _)m

  4. ゆき後輩 より:

    >スマイルさま
    こんにちは。
    ご指摘ありがとうございます。

    CSSのエラーですが、僕も以前気になっていて色々調べましたが分からなくて放置してしまっていました。

    しかし今回改めて調べ直してみましたら、一部解決できました。

    エラーはどうやらカエレバのボタン部分の指定みたいです。

    まず、46行目のエラーですが、「画面からはみ出るかもしれないよ」ということみたいですね。
    具体的な解決策は見つかりませんでしたが、僕が使用しているWordPressテーマsimplicityの開発者わいひらさんは、表示崩れがなかったらそのままにしているそうです。

    参考:https://goo.gl/TRuodR

    表示崩れが特になければ、そのままで良いのではと思います。

    もうひとつ48行目のエラーは、floatタグは使えませんということみたいですね。
    改めてCSSをよくみると

    display: inline-block;

    の要素の指定で

    text-align: center;

    が48行目の直前で指定されています。
    これはボタン内の〔amazon〕などの文字の位置を中央指定しているようです。

    そもそも「display: inline-block;」内では「float」は使えないようです。
    なので次の行で「float」は不適切であり、さらに、すでに直前で中央に指定されているので、左寄り(left)もいらないのでは?と思い削除してみたら、カエレバの表示としては
    特に崩れなどはでませんでした。
    ですので、この48行目の

    float:left;

    は不要なのだと思います。削除して確認してみてください。

    僕もCSSはほぼ素人で、ネットで調べまくらないと解らないことだらけですが、僕なりに調べてみました。

    これでスマイルさんの環境でも解決されれば良いのですが。

  5. スマイル より:

    お返事ありがとうございますm(_ _)m
    48行目のエラーは削除して解消できました。
    46行目は僕も放置します(^_^;)
    親戚にプログラム系のプロが居るのでいつか聞いてみます(^_^;)
    忙しくて年に1回合うか合わないか・・・(^_^;)
    勿論、自分でも調べてみることは継続し、
    解消できそうな方法あれば報告しますね(^o^)
    では、では、ありがとうございましたm(_ _)m

  6. ゆき後輩 より:

    >スマイルさん
    1か所ですが、エラーが解消して良かったです。
    確かにエラーが残っているのは気持ち悪いですよね。
    お知り合いにプロがいらっしゃるのは心強いですね!

  7. ゆき後輩 より:

    >スマイルさん
    あれから改めてパソコンで表示を確認したところ、

    float:left;

    を削除すると、パソコンではボタンが縦並びになってしまっていました。表示崩れです。
    スマホでしか確認してしか確認していなかったので気づきませんでした。

    それでも良いのなら構いませんが、僕は再び(float:left;)を復活させました。
    エラーは気持ち悪いですが、今のところおかしなことにはなっていないので、僕は元のコードのままでいこうと思います。