ヨメレバカエレバスマホ対応とSTORKで表示が崩れる問題を解決!

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

 

保存

保存







保存

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

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

コメントを残す

ABOUTこの記事をかいた人

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

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


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

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