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

スマホで見ると表示が崩れる!変な画像マークやホテルの写真画像が表示されない!!|ヨメレバカエレバトマレバスマホ対応と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がサクサク動く!290円~の新世代サーバ

WordPressブロガーに絶大な人気を誇るエックスサーバー。老舗の安定感はさすがです!

しかし、時代の変化は早い!レンタルサーバー業界でNo.1を争うほど安くて爆速で高スペックのサーバが出てきました!
WordPressに最適な高速SSDサーバーJetboyです。

Jetboyはディスク容量が少なめなのが気になりますが、WordPressを動かす速さはエックスサーバーよりも格段に上なのでは?と思うほど豪華なスペックです!

Webサイトの表示に3秒以上経つと多くのユーザは離脱すると言われていますから、サイト表示の速さはSEOにも影響を与えます!

新しいもの好きのあなた、レンタルサーバ業界最安で爆速の「Jetboy」は要チェックです!


月額290円から使える超高速SSDレンタルサーバー

保存

保存

保存

保存

保存









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

2 件のコメント

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

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

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

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

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

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

  • サニーさん

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

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

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

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

  • コメントを残す

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

    ABOUTこの記事をかいた人

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

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


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

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