動画素材.com/ブログ

動画素材ダウンロード配布・VJ 4K2K CG・書籍「動画素材123」、PV・MV、映像制作関連、Mac・iPhone・iPad。動画素材.com/ブログ

WordPress WPtouch

動画素材.com/ブログ のモバイル対応(WPtouch・WordPress)

投稿日:2015年4月4日 更新日:


長らくモバイル対応していませんでしたが「動画素材.com/ブログ」をモバイル対応させました。

2017年現在 動画素材.com/ブログ はWordPressのテーマをレスポンシブ対応のものにしているので今は「WPtouch」は使用していません。

一時期「WPtouch」はなんとなく使っていたのですがなんか違うかなと思いオフにしておりました。
オフにしているのになんでモバイル表示のままになっているんだろ?と思ったらJetpackのモバイル用テーマが意図せず動作していました。のでオフにしたり。

という所でしばらく過ごしていたのですが、どうもモバイル用の表示は用意しといた方が良いとの事なので急ごしらえですがなんとかモバイル対応させてみました。

なので今回は

「動画素材.com/ブログ のモバイル対応 WPtouch」と題しましてつらつらと書いてみます。

動画素材.com/ブログ のモバイル対応 WPtouch1

まず以前は「WPtouch」はインストールしていましたがこれは削除していました。

見落としがちなのですが「Jetpack」のモバイル用テーマもオフにしています。これオフにしないと「Jetpack」のモバイル用テーマが優先して使われる事になります。



プラグインから新規インストールで「WPtouch」を検索してインストール→有効にします。

動画素材.com/ブログ のモバイル対応1

これだけでモバイル対応にはなります。ではiPhoneで見てみます。

動画素材.com/ブログ のモバイル対応 WPtouch2

はい、これだけでモバイル表示にはなりました。これだけで良いという方はこれで良いかと思います。
なのですが、僕の方では少しカスタマイズしてみました。



まず「WPtouch」の「Core Settings」で「Regionalization」を日本語にします。下の「SAVE」なんちゃらを押してください。

動画素材.com/ブログ のモバイル対応 WPtouch3

これで「WPtouch」の設定が日本語表示になります。

動画素材.com/ブログ のモバイル対応 WPtouch4

次にですね、自分の場合は各記事のアイキャッチ画像にアニメーションGIFを使っているのが多いせいか表示が重いのでこれをオフにします。

「WPtouch」の「テーマ設定」で「サムネイルなし」にします。

動画素材.com/ブログ のモバイル対応 WPtouch5

そうするとこの記事一覧での左にあったサムネイルがなくなります。

動画素材.com/ブログ のモバイル対応 WPtouch6

サムネイルは無くなりましたが上にあるでかでかとしたのもいらないですねぇ。これも重いんですよ。まともにスライドして動かせた事がほとんど無いです。

これ日本語では「機能スライダー」という表記になっています。これもオフにします。
「WPtouch」の「テーマ設定」の下の方に「機能スライダーを有効にする」というのがあります。ここのチェックを外します。

動画素材.com/ブログ のモバイル対応 WPtouch7
動画素材.com/ブログ のモバイル対応 WPtouch8

チェックを外したら下の「変更を保存」を押します。



そうするとこういう表示になりますね。

動画素材.com/ブログ のモバイル対応 WPtouch9

はいすっきりしました。自分のブログの場合だとあまりトップページを見られる事は無いのですがすっきりして軽い方が良いですね。



あともうひとつ、それはこのままだとピンチアウトして拡大表示ができないんですね。

画像を多く使っていますが、その画像を拡大表示ができないとものすごく不便です。
なのでピンチアウトして拡大表示ができるように設定します。



「WPtouch」の「コア設定」から「カスタムコード」の空欄に

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes" />
と入力します。「変更を保存」でこれでピンチアウトができます。4倍まで大きくできますね。


ここで注意するところはlightbox系のプラグインを使っているとモバイルの表示でもそれが動作して画像が大きく表示できなかったり邪魔になったりする事があります。
自分の場合は現状「slimbox2」というものを暫定的に使っています。これはモバイルでの表示ではオフにできるんで。

でもPC上だとちょっと問題もありまして、解像度の大きい画像を表示させるとそのまんま100パーセント表示にしてくれちゃうんでぱっとみよくわからない表示になっちゃうんですよね。
右下に閉じるボタンあるんですけど解像度大きい場合スクロールさせないと出てこなくなっちゃうんです。ここらへんはどうしたら良いのかわかりません。とりあえず暫定的に使っています。


これで自分の場合の設定はほぼ完了です。
あとはぼちぼち色を変えていったりとかそんな事をしていこうかなと。



あーあとですね、Googleアドセンス使っている場合、とある漫画系の広告が非常にうっとおしいので
Googleアドセンスのページで「広告の許可とブロック」で漫画系のアドレスを登録してブロックしています。
「booklive.jp」「ebookjapan.jp」「k-manga.jp」「papy.co.jp」
とりあえずここらへんの登録で出なくはなっているようなのでしばらく様子を見てみます。



参考になりましたら幸いです。

-WordPress, WPtouch

CLOSE
CLOSE

Copyright© 動画素材.com/ブログ , 2024 All Rights Reserved.