原因はコレか!自分のサイトでWeb Clipperが使えなくなったときの対処法

公開日: : 最終更新日:2014/08/28 EVERNOTE, Wordpress

原因はコレか!自分のサイトでWeb Clipperが使えなくなったときの対処法

今回はサイトを運営されている方向けの記事です。

Evernoteのweb clip、便利ですよね。
気になる記事をみつけたらポチッ。
一度使い始めたら手放せないウェブツールです。

最近ふと「自分のサイトをクリップするとどんな感じになるんだろう」と思って試してみました。
するとなんと!

ボタンがすべて押せない

ウェブクリップができない!!
web clipperを起動してもボタンが押せないんです。
これは困った。

このまま放置しておきたくはなかったので、原因を探ってみました。

Sponsored Link

場所の特定

僕の場合サイトのすべてのwebページでクリップができなくなっていたので、原因はheader.phpとそのCSSにあると予想して探ってみました。

コードを部分的に消しては試す、消しては試すを繰り返して見たところ原因がわかりました。

原因はCSS

結論から言うと原因はCSS内の

#container{
	-webkit-transform: translate3d(0px, 0px, 1px);
}

でした。

このサイトでは、スマホ版サイトでドロワーメニューを表示しています。

ドロワーメニュー

ドロワーメニューの表示には「jSlideMenu」というjQueryプラグインを使っているのですが、このとき読み込んでいるCSS内のコードに問題があったようです。

上述のコードを消去して試したところ、問題なくクリップできました。

対処法

僕の場合原因のコードを使うのがスマホサイトだけだったので、header.php内をif関数で分岐させて問題のCSSをパソコンサイトでは読み込まないようにしました。

スマホとパソコンの表示を分けるコードはこのようになります。

<?php if(is_mobile()) { ?>
     //ここにスマホ版の動作
<?php } else { ?>
   //ここにパソコン版の動作
<?php } ?>

コードを変更してもう一度クリップできるか確認すると、問題なくクリップできました。

押せるようになりました

まとめ

CSSが原因でウェブクリップできなくなることってあるんですね。
同じ状態になった方は確認してみてください。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑