クリック率上昇!ヨメレバカエレバカスタマイズで超カッコいいボタン

スマホで見ると表示が崩れる!変な画像マークやホテルの写真画像が表示されない!!|ヨメレバカエレバトマレバスマホ対応とSTORKで表示が崩れる問題を解決!

WordPressで頑張るぼっちブロガーのリクです、こんばんは。

ヨメレバカエレバトマレバ、もっとカッコいいボタンにカスタマイズしたい!

スマホで見ると変な画像マークが出たり、表示が崩れるのを直したい!

STORK使ってるけど、何故かヨメレバカエレバのスマホ対応ができない!

この記事はそんなあなたに向けて「ヨメレバカエレバトマレバのスマホ対応済み、かつ押したときのカッコいいエフェクト付きなカスタマイズCSSコード」と「STORKでスマホ対応カスタマイズをする際の注意点」について書いています!

PCから見てカッコよくカスタマイズできていても、スマホで見ると残念な表示になっているようでは、せっかくの収益を取りこぼしますよ!

実際にこのブログでPC.スマホともに動作確認が取れているコードを公開しますので、あなたはただCSSファイルに貼り付けるだけで、簡単にカッコいいカスタマイズ(+スマホ対応)が出来ます!

何せボタンが目立つし、押したときのエフェクト付きで超カッコいいです!

見た目もきれいだし、ブロガー必見のおすすめコードですよ!




ヨメレバカエレバ、スマホで表示が崩れる問題

複数ショップのアフィリエイトリンクを生成してくれるヨメレバカエレバトマレバ、本当に便利ですよね。

作者のかん吉さんに深く感謝です。

ただ、バリューコマースやもしもアフィリエイト等、トラッキング用imgタグが含まれるASPを使っていると、スマートフォンで見た時に変な画像マークが表示されたり、表示が崩れてしまうことがあるんです!

ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ

どういうことかって、こういうことです!

これはホテル紹介用の「トマレバ」リンクをスマートフォンで見た結果です。

スマホで見ると表示が崩れる!変な画像マークやホテルの写真画像が表示されない!!|ヨメレバカエレバトマレバスマホ対応とSTORKで表示が崩れる問題を解決!

PCで見ると何も問題ないのに、スマホで見ると何故かこんなふうに表示が崩れるんですね。

ホテルの写真や地図が表示されなかったり、変な画像マークは出てくる始末。

STORKブロガーのリク
ぐおおおおーーーっ!!なんじゃこりゃああああ!!!これじゃ怪しい、変なサイトだと思われちゃうじゃん!!

 

こんな変なリンクじゃ、敬遠されちゃいますよね!困ります!!

この表示崩れの直し方、ヨメレバカエレバのオシャレなカスタマイズコード、STORKでのカスタマイズ時の注意点がわかったので共有します!

 

スマホ対応コードを先頭に追加

上記画像のような感じで崩れてしまう方は、ヨメレバ.カエレバのカスタマイズCSSコードの先頭にこれを追加してください!

一発で直ります!

ヨメレバ.カエレバのみ使う方

ヨメレバ.カエレバ.トマレバを使う方

 

STORKの場合はダッシュボードの【外観】 > 【カスタマイズ】 > 【追加CSS】からCSSを編集できます。

必ずこのコードを先に追加してから、ヨメレバ.カエレバのカスタマイズCSSを貼り付けてください。

ほらね、直った!変なマークは消えたし、ちゃんとホテルの写真も表示されるようになりました!!

カスタマイズCSSコードに一行追加すると直るよ!|ヨメレバカエレバトマレバスマホ対応とSTORKで表示が崩れる問題を解決!
STORKブロガーのリク
直ってよかったーー!!うちはスマホアクセスが82%だから、スマホ表示が変だと死活問題だぜ…

 

STORKでは「あの設定」をやめろ!CSSが効かなくなるぞ!

しかし、ここまでしてもSTORKでは油断ができません!

ダッシュボードから【外観】 > 【カスタマイズ】 > 【グローバル設定】 で、[ヘッダー背景設定]フルサイズ(横幅いっぱい)にしてしまうと…

せっかく先ほど追加したスマホ対応のCSSが無効になってしまうのです!

これはSTORKの仕様みたいです。

そうなると、またこのわけの分からない表示に戻ってしまいます!

スマホで見ると表示が崩れる!変な画像マークやホテルの写真画像が表示されない!!|ヨメレバカエレバトマレバスマホ対応とSTORKで表示が崩れる問題を解決!

だから、【外観】 > 【カスタマイズ】 > 【グローバル設定】 で、[ヘッダー背景設定]コンテンツ幅に設定しましょうね!

コンテンツ幅にすると、ヘッダーはこのようになります。(PCのみ)

STORKではヘッダーをコンテンツ幅に設定しないと追加CSSが効かなくなるので注意!| ヨメレバカエレバスマホ対応とSTORKで表示が崩れる問題を解決!

フルサイズとは、こういうことです。

STORKではヘッダーをフルサイズにすると、追加CSSが効かなくなるので注意!| ヨメレバカエレバスマホ対応とSTORKで表示が崩れる問題を解決!

本当はフルサイズのほうが見栄えがイイ気がするんですが…

ヨメレバカエレバのスマホ対応が台無しになってしまうのなら仕方ありません。

僕はヘッダーのフルサイズを諦めて、コンテンツ幅に設定しました。

別に、ヘッダーがフルサイズじゃなくたって困りませんのでね。

 

エフェクト付きのCSSコード紹介

どうせカスタマイズするなら、ボタンが目立ったり、カッコいいものにしたいですよね。

僕はコチラのブログ記事のコードを参考にさせて頂きました!えむしてっくさん、本当に有難うございます!

【CSS】コピペするだけ!押した事がわかるエフェクト付きのヨメレバ・カエレバ・トマレバ

実際にマウスをオンしてみるとピクピク動くのでカッコいいし、押した実感がちゃんとあってユーザビリティも良いです!

 

僕はえむしてっくさんのコードを参考に、トマレバで使う「るるぶ」と「一休」のボタンも追加しています!

ヨメレバ.カエレバ.トマレバのボタンの追加の仕方はまた別の記事に書きます。




超孤独なWordPressと、クソ記事でもはてブがつくはてなブログ

まとめ

  • スマホ対応用、画像が崩れる対策のヨメレバカエレバトマレバCSSを紹介!
  • ヨメレバカエレバのボタンが目立つ上にエフェクト付きなカッコいいカスタマイズCSSを紹介!
  • スマホ対応するなら、STORKのヘッダーはフルサイズじゃなくコンテンツ幅にすべし!

カスタマイズ大好きなリクでした。

孤独なWordpressと、クソ記事でもはてブがつくはてなブログ

2017.05.25

STORK(ストーク)でTwitterシェアされた時に通知させる

2017.04.09

Wordpressテーマは無料?有料?超おすすめのXeoryとSTORK徹底比較!

2017.02.16

自分を売り込みたいブロガーならWordpressテーマ「STORK(ストーク)」がおすすめ!当サイトでも使用のSTORK購入はコチラ!



「ストーク」WordPressテーマ

 

保存

保存

保存

保存

保存









面白かったらシェアして貰えると嬉しいです♪




恋愛相談のるよ~!
おトクな割引料金&先行案内も!
リクと友だちになってやってね♪

リクのLINE@の友だちになってやってください!

◆3つのLINE@友だち特典!

1.最速イベント先行案内と常時500円割引!

2.みんなが読みたいブログを書くため、アンケート配信!

→例えば…
「男性100人に聞いた!初デートでテンションがあがる女性の服装4パターン」
とか…
「女性100人に聞いた!連絡先交換後に男性からもらって嬉しいLINE、引くLINE」
とか!!

3.1:1トークでリクへの恋愛.人生相談OK!

→おかげさまで、毎週のように恋愛相談を頂いていますっ!
僕はイベンター歴7年半、1000人以上の適齢期男女と知り合って人間関係を紡いできました。
その経験を活かして真剣にあなたのお悩みに向きあい、一緒に考えます!!

返信には少し時間がかかりますが、気長に待ってください。100%、全力でお答えします!

回答内容の満足度も今のところ100%!(リク調べ)

友だち追加



2 件のコメント

  • めっちゃさがしまわってやっとできるようになりました…

    CSS貼る場所がわからなかったのですが…本当助かりました。

    STORKの場合はダッシュボードの【外観】 > 【カスタマイズ】 > 【追加CSS】からCSSを編集できます。

    ↑これを完璧に忘れてましたw

    一方的に感謝させていただきます!

    ありがとうございましたぁ

    • サニーさん

      ブログ訪問ありがとうございます!

      お役に立てて何よりです!
      困った方の助けになれることが、ブログをやっていてとても嬉しい瞬間です(^^)

      そうなんですよね~、WordPressってみんなテーマもバラバラだから
      自分の環境に応じたやり方を調べないといけないんですよね。

      当ブログを見つけてくださり、コメントまで頂けて嬉しいです!
      有難うございました!

  • コメントを残す

    メールアドレスが公開されることはありません。

    ABOUTこの記事をかいた人

    横浜市在住、ひとりで過ごすことが大好きなぼっちイベンターのリクです!

    「ぼっちだからこそ出来る、誰も置いていかず、全員を楽しませる10名前後の少人数イベントで、あとにつながる質の高い出会いの提供」がモットーです!


    名前:リク
    属性:アラサー男子
    居住地:神奈川県横浜市
    趣味:旅、食べ歩き、カラオケ、ウクレレ、動物観賞、ラフティング、ゲーム、読書

    詳細プロフィールはこちら!