たかなblog

のんびりと色んな情報を発信していきます。

*

WordPressのスマホ対応を助けるプラグインWPtouch Mobile Plugin

      2015/02/17

こんにちは、たかなです。

WordPressでサイトをガッツリ作成したあとに、私みたいに「そういえばスマホからの見え方確認してなかった!」
って人は多いのではないでしょうか。

最近ではWordpressのデフォルトテーマが既にレスポンシブウェブデザインだったり、既にSEOが施され、アフィリエイトを簡単に始められる無料テーマまで出回っています。
この「たかなblog」も、初めからモバイル対応されたアフィリエイト用テーマことSTINGER3を使用しています。

今やもう、スマホ対応は必須。
そんな中もしあなたのサイトがスマホ対応していないのであれば、「とりあえず」でいいので「WPtouch Mobile Plugin」などのプラグインを使ってスマホ対応させておくことをおすすめします。
今からレスポンシブウェブデザインにする為にスマホ用のCSSを作成するにしても時間がかかりますからね。
それまでのスマホユーザーを捨てるのではなく、他に(時間のかかる)選択肢があるのだとしても、その準備をしている間は、プラグインに頼ってみるのもありではないでしょうか。

 

WPtouch Mobile Pluginってどんなプラグイン?

長くなりましたが本題です。
WPtouch Mobile Pluginは、訪問者がモバイル端末だった場合、自動でモバイル対応デザインを表示してくれるプラグインです。

メリット

・簡単なこと。デザインやオリジナル性を気にしないのであれば、インストールして有効化するだけで完了です。

・速いこと。WPtouch Mobile Pluginで表示するモバイル向けページは迅速でユーザーフレンドリー。

・見慣れたデザインであること。WPtouch Mobile Pluginはかなり普及しているプラグインで、利用しているサイトが非常に多い。故に、既に有名なあのサイトやそのサイトとほぼ同じデザイン。深く考えなくても慣れ親しんだサイトがつくれます。

 

デメリット

・選べるデザインが少ないこと。もちろんカスタマイズできますが、オリジナルデザインを「簡単に」作りたいのであれば難しいかも。
・子テーマ的な概念がないので、テンプレートを触っちゃうと、バージョンアップの度に都度修正部分を戻してあげる必要があります。めんどくさいね。

 

インストール

インストール方法です。「WPtouch Mobile Plugin」はプラグインディレクトリに登録されているため、メニューバーの「プラグイン」の「新規追加」から、「WPtouch Mobile Plugin」で検索できます。
検索結果に表示されたら、「いますぐインストール」でインストールしてください。

WPtouch Mobile Plugin

 

インストール後、そのまま有効化してしまいます。

WPtouch Mobile Plugin2

有効化した時点でスマホ対応されます。べんりー。

ちなみに当ブログを「WPtouch Mobile Plugin」を使ってスマホ対応した場合、以下のように表示されます。

WPtouch Mobile Plugin3

 

「WPtouch Mobile Plugin」の設定

「WPtouch Mobile Plugin」プラグインを有効化すると、メニューバーに「WPtouch」が追加されます。

WPtouch Mobile Plugin4

メニューバーの「WPtouch」>「Core Settings」を選んで、「WPtouch Mobile Plugin」の設定をしていきましょう。

WPtouch Mobile Plugin5

 

日本語化

まずは日本語化です。
「Core Settings」の画面を開くと、「WPtouch Mobile Plugin」の基本設定が行える画面が開きます。
この中の「Regionalization」を、日本語に変更しましょう。

WPtouch Mobile Plugin6

 

クリックするとプルダウンが表示されます。

WPtouch Mobile Plugin7

変更後、一番下までスクロールし「Save Changes」をクリックしてください。

WPtouch Mobile Plugin8

 

これでおっけ、、、あれ?

WPtouch Mobile Plugin9

変化なし。

 

ちなみに、使用しているのは「WPtouch 3.3.1」
さくっと検索してみたところ、以下のサイトに解決方法が記載されていました。

wptouch3.2.2 をカスタマイズする | BKCのBの方

wp-content/plugins/wptouch/lang
内にあるファイル

wptouch-pro-ja_JP.mo
wptouch-pro-ja_JP.pot

を、
wp-content/wptouch-data/lang

に貼り付けてください。

※ネットワーク設定をしていて、ひとつのWordpressで複数のサイトを運営している場合、
wp-content/wptouch-data/の中に「1」や「2」といったフォルダが作成されます。
その場合、wp-content/wptouch-data/1/lang の中に上記ファイルを貼り付けることで、対応するWebサイトで使用しているプラグインを日本語化できるようです。

その後管理画面を開くと日本語化されているのが確認できます。

WPtouch Mobile Plugin10

言語選択の「日本語」が、ja_JPになってしまっていますが、これはもう仕方ないのでしょうね。

サムネイル(アイキャッチ表示)の設定変更

デフォルトの設定だと、記事上部にアイキャッチで登録した画像が表示されます。

WPtouch Mobile Plugin15

広告を挿入しちゃうとほとんどがアイキャッチ画像になっちゃいますね。
横長の画像とかであればもう少し表示サイズは小さくなるのでしょうが、逆に縦長の画像をアイキャッチに設定していると、画面いっぱいに画像が表示され記事本文がスクロールしないと見えない!なんてことも。

アイキャッチとして設定している画像のサムネイル表示については、WPtouch>Theme Settings(テーマ設定)で変更できます。

WPtouch Mobile Plugin16

デフォルトではブログの記事リスト、投稿ページ、固定ページにそれぞれアイキャッチを表示する設定になっています。
アイキャッチを使っていない場合は「サムネイルなし」に、トップページである記事リストの記事横に表示されているサムネイルはそのままにしたい場合は「ブログリストのみ」に設定を変更してください。

WPtouch Mobile Plugin17

だいぶいい感じになったんじゃないでしょうか。

 

スライダーを無効にする

Webサイトのトップにアクセスすると、サイトタイトルの下にスライダーが表示されているのが確認できると思います。

WPtouch Mobile Plugin18

新着5記事を、サムネイル画像付きで表示してくれるスライダーです。横にスライドさせることで別記事のサムネイルに移動します。
ぶっちゃけいらないです。 画像で画面が専有されちゃうし、新着記事はちゃんと一覧で下に表示されています。

スライダー機能をOFFにするには、サムネイルOFFと同じくWPtouch>Theme Settings(テーマ設定)の中で設定します。

WPtouch Mobile Plugin20

テーマ設定の下部に機能スライダーの項目がありますので(日本語化しています)、こちらの「機能スライダーを有効にする」のチェックを外すだけです。

WPtouch Mobile Plugin21

新着タイトルがリスト表示される、非常にシンプルなトップ画面になりました。

 

配色の変更

デフォルトだとタイトルの背景は黒。記事の背景は白に近い灰色になっています。
リンクは水色。ここまではいいのですが、、

WPtouch Mobile Plugin22

タイトルの黄緑が気持ちわるい
なんだろう。黒のタイトル、水色のリンク、灰色の背景色に黄緑の記事タイトルだけが浮いてる。とにかく気持ちわるい。

そんなあなたに朗報です。配色は設定画面で簡単に変更できます。
先程から設定変更でアクセスしているWPtouch>Theme Settings(テーマ設定)の、一番上、「ブランド設定」を選択。

WPtouch Mobile Plugin23

テーマカラーを好みの色に変更し、

WPtouch Mobile Plugin24

ついでにトップ画像なんかも設定しちゃいます。これを設定するとトップのタイトルテキストが表示されなくなるようなので注意。

WPtouch Mobile Plugin25

ついでにブックマークアイコンも設定します。
一番上の「ブックマークアイコン」から、96×96、120×120の画像をアップロード

WPtouch Mobile Plugin26

設定すると、スマホでサイトをブックマークし、ショートカットアイコンを作成した時にアップロードした画像が表示されるようになります。

が。

ネットワーク化(ひとつのWordpressで複数のWebサイトを運営できる設定のこと)していると、上手く反映してくれないようです。
時間があれば今度記事にしよう。

これで一通りの設定は完了です。

こんな感じ。

WPtouch Mobile Plugin31

 

色を変えただけでだいぶ雰囲気が変わりますね。オリジナリティは色だけでも十分出せるのではないでしょうか。

ちなみに、ソーシャルボタンの色を変更することもできます。
カラースキームを「ソーシャルネットワークカラー」にすると、

WPtouch Mobile Plugin30

 

こんな感じ。ソーシャルに力を入れているサイトは、こうして目立たせてみるのもいいかもしれませんね。
共有してください!の文言を持ってきたり、位置を記事下に変更してもいいかも。

Google Analytics トラッキングコードの挿入

モバイル版を「WPtouch Mobile Plugin」で用意した場合、Googleのアナリティクスを使用している方は、モバイル表示になった時も情報を拾ってくるよう、設定をする必要があります。

GoogleAnalytics?なにそれおいしいの?という方はこの機会に是非導入してください。かなり美味しいです。
GoogleAnalyticsの導入方法

既に登録をしている方は、トラッキングコードをWPtouch>コア設定>カスタムコード内にぺたっと貼り付けるだけでOKです。

WPtouch Mobile Plugin29

簡単なので是非導入初日に済ませておいてください。

 

GoogleAdSenceの挿入(記事ページ)

「WPtouch Mobile Plugin」を使用してスマホ用デザインにGoogleアドセンスを表示したい場合、プラグインのファイルを直接編集する必要があります。
前述しましたがWPtouchには子テーマという概念が存在しないので、広告表示のためにテーマファイルを編集しても、バージョンアップしたら消えちゃいます。
なので、以下の設定を行った場合は、ローカルにかならず編集したファイルのバックアップを残しておいてくださいね。
バージョンアップで編集対象ファイルが大幅に修正されることはまずないと思うので、プラグイン更新後に毎回ローカルに置いてある編集後のファイルをアップしてあげてください。

心配性の方は、編集前のファイルも残しておいて、プラグイン更新後に更新前後の対象ファイルをWinMage等で比較してあげるといいかもしれません。

 

編集対象ファイル

/wp-content/plugins/wptouch/themes/bauhaus/default/single.php

を編集していきます。FTPツール等でファイルを取得し、さくらエディタなどのエディタで開いて編集してください。
Windowsに付属しているメモ帳で編集すると文字コードがおかしくなってしまうので、できれば専用のエディタか、レンタルサーバーが提供しているFTPツール内で編集を済ませてくださいね。

 

編集位置

Googleアドセンスは1ページに3つまで広告を挿入することができます。
逆に言えば3つ以上の挿入は規約違反です。アカウント削除の対象となりますので、編集後はかならずサイト全体を確認しましょう。

PCからスマホの表示を確かめる方法は以前紹介していますので、スマホをお持ちでない方、PCから確認したい方は参考にされてください。
スマホ表示をPCから確認する方法

それでは編集位置です。

 

例1 ブログタイトル下

※例2と併用すると、「メインコンテンツを広告で押し下げる行為」としてアドセンスの規約に引っかかる可能性があります。
 この位置に300×250サイズの広告ユニットを使用することは規約違反です。320×50、もしくは320×100の広告ユニットを利用ください。

アドセンスコード挿入位置

[php firstline=”4″ highlight=”12″]
<div class=”crumb-path bauhaus”>
<p>
<a href=”<?php wptouch_bloginfo( ‘url’ ); ?>”><?php wptouch_bloginfo( ‘site_title’ ); ?></a>
<i class=”icon-angle-right”></i>
<span><?php wptouch_the_title(); ?></span>
</p>
</div>
–>
//ここにアドセンスコード
<div id=”content”>[/php]

広告位置イメージ(320×100の場合)

WPtouch Mobile Plugin14

例2 記事タイトル下

※例1と併用すると、「メインコンテンツを広告で押し下げる行為」としてアドセンスの規約に引っかかる可能性があります。
 この位置に300×250サイズの広告ユニットを使用することは規約違反です。320×50、もしくは320×100の広告ユニットを利用ください。

アドセンスコード挿入位置

[php firstline=”29″ highlight=”34″]
<h2 class=”post-title heading-font”><?php wptouch_the_title(); ?></h2>
<?php if ( bauhaus_should_show_author() ) { ?>
<span class=”post-author”><?php the_author(); ?></span>
<?php } ?>
</div>
//ここにアドセンスコード
<div class=”post-page-content”>[/php]

広告位置イメージ(320×50の場合)

WPtouch Mobile Plugin13

例3 記事下

ページ送りの上、記事の下にアドセンスを挿入します。

アドセンスコード挿入位置

[php firstline=”61″ highlight=”62″]
</div> <!– content –>
//ここにアドセンス
<?php get_template_part( ‘nav-bar’ ); ?>

<?php get_template_part( ‘related-posts’ ); ?>
[/php]

広告位置イメージ

WPtouch Mobile Plugin33

 

例4 ページ送り下

ページ送りの下、コメントの上にアドセンスを挿入します。

アドセンスコード挿入位置

[php firstline=”63″ highlight=”64″]
</div> <!– content –>

<?php get_template_part( ‘nav-bar’ ); ?>
//ここにアドセンスコード
<?php get_template_part( ‘related-posts’ ); ?>
[/php]

※3.3.4から、’nav-bar'(ページ送り)と’related-posts'(カテゴリーとか)が逆になっているようです。気に入らない人は戻してもいいと思うし、大きくデザインが変わるわけではないですがいろいろ試してみてください。

広告位置イメージ

WPtouch Mobile Plugin32

 

例4 ページ送り下

ページ最下部

アドセンスコード挿入位置

広告位置イメージ

WPtouch Mobile Plugin34

 

GoogleAdSenceの挿入(INDEXページ)

サイトのトップであるINDEXページ広告を挿入したい場合、記事ページとは違うファイルを編集してあげる必要があります。

例外として、上で紹介したテーマ編集のフッターにアドセンスコードを登録した方は、INDEXページにも固定ページにも表示されています。
アドセンスは1ページ3つまでなので、フッターに登録した方は注意してくださいねー。

編集対象ファイル

/wp-content/plugins/wptouch/themes/foundation/default/index.php

を編集していきます。FTPツール等でファイルを取得し、さくらエディタなどのエディタで開いて編集してください。
Windowsに付属しているメモ帳で編集すると文字コードがおかしくなってしまうので、できれば専用のエディタか、レンタルサーバーが提供しているFTPツール内で編集を済ませてくださいね。

それでは編集位置です。

例1 ブログタイトル下

アドセンスコード挿入位置

[php firstline=”1″ highlight=”2″]
<?php get_header(); ?>
//ここにアドセンスコード
<div id=”content”>[/php]

広告位置イメージ(320×50の場合)

WPtouch Mobile Plugin35

 

INDEX(トップページ)については、ページ最下部のフッター部分にも既に設定しているので、例1の箇所に小さめの広告を入れてあげれば充分な気がしますが、3つどうしても入れたい!という人は以下の場所も検討してみてください。

例2 他のエントリーを読み込む…の上

アドセンスコード挿入位置

[php firstline=”11″ highlight=”13″]
<!– no posts –>
<?php } ?>
//ここにアドセンスコード
<?php if ( foundation_is_theme_using_module( ‘infinite-scroll’ ) ) { ?>

<?php if ( get_next_posts_link() ) { ?>[/php]

広告位置イメージ

WPtouch Mobile Plugin36

 

 

GoogleAdSenceの挿入(固定ページ)

固定ページにも広告を挿入したい方は、page.phpも編集する必要があります。

編集対象ファイル

/wp-content/plugins/wptouch/themes/bauhaus/default/page.php

例1 ブログタイトルの下

アドセンスコード挿入位置

[php firstline=”4″ highlight=”9″]
<?php get_template_part( ‘index’ ); ?>
<?php } else { ?>

<?php get_header(); ?>
//ここにアドセンスコード
<div id=”content”>[/php]

広告位置イメージ

WPtouch Mobile Plugin37

 

 

以上になります!

WPtouchネタは需要があれば更新していきたいと思いますので、「こういうカスタマイズがしたいんだけどどうしたらいいか」とか、「こんなことしたいけど可能か?」とか、「例には上がっていなかったけど、○○のページの○○に広告を挿入したいけどどうやればいいのか」などなど、疑問があればコメントいただければと思います。

こんな長い記事にお付き合い頂きありがとうございました!

 - プラグイン , ,

Comment

  1. […] ンを検討して今回は「WPtouch」を導入しました。 WordPressのスマホ対応を助けるプラグインWPtouch Mobile Plugin | たかなblog […]

  2. ゴリラ より:

    いつも大変素晴らしい記事ありがとうございます。

    WPtouchを導入して、ある程度自身で
    デザイン変更をしていたのですが、

    「WPtouchの他のエントリー読み込み」をという所を
    [前へ] 1 2 3 [4] 5 … [後へ]
    という様な感じへやりたいのですが
    知識不足な為まったくわからなく、
    たなか様の知識をお借りしたくコメントいたしました。

    お忙しいとは思いますがなにかいい方法はないでしょうか?
    よろしくお願いいたします。

  3. marurun より:

    お返事ありがとうございます!初心者なのにすごいですね!
    ず~とにらめっこしてあることに気が付きました!
    私のはブログではなくホームページの固定ページにのせるのでした(^^:) 対象のサイトではなかった・・・。すいません。
    いろんな方のみましたが全員ブログだったので全然気が付きませんでした。ブログの方が多いのかな?
    なので具体的にどこに入れるか乗ってませんでしたが、こちらを参考にさせていただきながら予想して入れてみたらできました(^^)! ブログはsingle.phpで固定ページはpage-content.phpの中に入れるようでした!
    サイトを三つ作っているうちの一つにwordpressを作っての体験談を載せてます。
    ブログに乗せる方法は書いてないので、分かりやすいこちらを紹介させてください(^^)
    買って良かった物を載せて趣味のサイトも作ってるのでよかったらのぞいてくださいね♪
    FC2ブログの時は1日50人くらいは来てくれていたのですが移転してからは一人も来てません(;O;) http://iroiro7.com/iroiro7.com/

  4. marurun より:

    はじめまして。
    参考にさせていただいてます。
    説明はとても分かりやすくてスムーズにできたのですが、
    先日初めてFTPをインストールしたような初心者なのでFFFTPの使い方が悪いのかアドセンスコードの設定が間違ってるのかのかテンプレートが合わないのか
    『例2 記事タイトル下』を試しても表示させることができませんでした(><)
    急に質問しても分からないかも知れませんが、初心者のミスしがちことがありましたら教えていただけますでしょうか?
    アドセンスは同期も非同期も試してみました。
    よかったらアドバイスよろしくお願いいたします!

    • 高菜 高菜 より:

      初めまして!私もまだまだ初心者ですが、そういっていただけると嬉しいです。

      載せていただいているサイトURLが今回の対象サイトなのであれば、iPhoneから見たときは問題なく記事タイトル下に表示されていましたよ!
      GoogleAdSenceの広告配信は、広告タグを設置してから実際に広告が表示されるまでに時間がかかるので、きちんと貼り付けできていないように見えたのかもしれません。
      Wordpressを始めてくださる方が増えてうれしいです!
      素敵なサイトにしてくださいね~!!

  5. imar より:

    こんにちは。
    wptouchプラグインを使用しているのですが、
    PCではカテゴリ指定した新着記事一覧として正常に表示されるのですが
    wptouchで表示するとカテゴリ指定しているものが無効になり全て表示されてしまいます。
    何か良い解決策があればご教授お願い致します。

    • 高菜 高菜 より:

      こんにちは。
      >PCではカテゴリ指定した新着記事一覧として正常に表示されるのですが

      ええと、PC版はサイトのトップページに、特定のカテゴリの新着記事のみが表示さる、ということでしょうか。
      Wordpressのデフォルトテーマでは(設定だけでは)おそらくそんなことはできないので、何かしらカスタマイズされているか、カスタマイズされているテーマをお使いだと思います。

      PC版で表示されているデザインと、wptouchで表示されるデザインは、そもそも読みこまれるテーマが違うので、いくら今PC表示でお使いのテーマをカスタマイズしてもwptouchの画面には一切反映されません。

      PC版でどのように表示されているのかあまりイメージがわかないのですが、、一応対策としては、
      「wptouchも同じようにカスタマイズしてあげる」

      のが手っ取り早いのかなぁと思います。

      wptouchのトップページのデザインは、
      wp-content/plugins/wptouch/themes/foundation/default/index.php
      が持っていますので、そちらを修正してあげてください。

  6. にけ より:

    こんにちは。
    初めまして。アドセンスを使用してサイト運営で生計を立てているニケと申します。
    初めまして。

    以前、賢威のテンプレートを使用していて「WPtouch Mobile Plugin」でスマホ対応させていました。

    ある機会があり、賢威からSTINGER3にテーマを変更したところフロントページにトップが来なくなりました。

    原因を探るべくしたことは
    ・WPtouch Mobile Pluginの再インストール
    ・すべてのプラグインを停止
    ・設定<表示<フロントページを最新の投稿に

    以上のことを行いましたが、固定ページがフロントページになったままでした。

    現在、WPSmart Mobileを使用して問題なく使用できていますが出来ればWPtouch Mobile Pluginを使用したいと考えています。

    何が悪くどこに問題点があるのかもサッパリでお手上げ状態になっています。
    現在、テンプレート階層に問題点が無いか見ています。

    このような質問はご迷惑かとおもいますが少しでもいいのでアドバイスなど頂けたら嬉しいです。

    情報の開示は可能なのでどこを開示すればいいのか教えて頂ければ開示します。

    どうぞ、よろしくお願いします。

    • 高菜 高菜 より:

      お返事が遅くなってしまってすみません…!
      そしてコメントありがとうございます。迷惑なんてとんでもないです。

      私の環境
      親テーマ:stinger3ver20140327
      表示設定:最新の投稿

      で、WPtouch Mobile Pluginを使用したところ、トップページは新着の記事一覧表示になります。
      20141108時点での最新バージョンを使用していますが、この記事を書いた2014年6月時点でも問題なかったので、
      プラグインのバージョンで大きく動作が変わったということはなさそうです。

      >フロントページにトップが来なくなりました。
      の、「トップ」がどのようなページのことなのかにもよりますが、新着記事一覧をサイトのフロント(トップ)ページに
      持ってきたい、ということであれば、子テーマで「home.php」および「front-page.php」を作成していないか確認してみてください。

      この2ファイルは記事一覧を出力する「index.php」よりも優先度が高いので、存在するとindex.phpが使用されないんです。

      http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

      もしテーマファイルでも特に上記ファイルを作成されていなければ、お手数ですが
      takanablog@gmail.com
      まで、ニケさんのサイトURLを送っていただけますか?
      よろしければ、現在使用ているテーマファイルを一緒に送っていただけると検証もできるので助かります。

      早く解決できるといいですね。

  7. […] これは簡単だった。たかなblogさんの通りやれば超簡単。スタイルシートいじれなくても、TOP画、背景色、スマホのブックマークアイコンくらいはいじれる。 […]

  8. ナゴ より:

    高菜 様
    ナゴです。
    お忙しい中、早々のご返事をどうも有難うございました。
    とても勉強になりました。
    プラグインは便利ですが、なかなか奥が深いですね。
    使ってるテンプレートとの相性もあるみたいで、
    あまりCSSなどが詳しくないものですから、
    壁にぶつかると一歩も進めません^^;。
    でも実践しながら知っていくしかないと思い、
    悪戦苦闘しております。
    とても参考になりました。
    またお伺いすることがあるかもしれませんが
    どうぞ宜しくお願いいたします。

  9. ナゴ より:

    はじめまして。
    「WPtouch Mobile Plugin」の解説を拝見しました。今はWPtouchではなくWPtouch Mobile Pluginに変わっているんですね。ネットで調べてもWPtouchの説明が殆どで、WPtouch Mobile Pluginのテンプレートと違うので、どうやって設定、カスタマイズして良いのか分かりませんでした。やっと貴サイト様にたどり着き、ヘッダーの変更など解決致しました。
    有難うございます。

    それでお尋ね致します。

    ①GoogleAnalytics とアドセンス広告ですが、ブログ内で設定しているのでは駄目でしょうか?アドセンス広告もスマホの方で問題なく表示されています。

    ②自分のブログタイトルですが、
    「トレンド虫めがねNEWS」の文字の最後の方が欠けてしまいます。
    修正はできますでしょうか。タイトルの文字数の問題もあると思いますが。

    ③「WPtouch Mobile Plugin」はモバイルと
    デスクトップとに切り替えできるようになっていますが、WPtouchを使っている人のはスマホサイトしか出ないようですが、切り替える必要性は何でしょうか。

    ④記事の文字配列が、ブログの表示と同じではなく多々ずれたり、行間が変わってしまったりと、きちんとした表示に収まっていません。
    きれいでなく読む方の印象が悪くなるので、
    きちんと表示するにはどのように対策をすれば
    宜しいでしょうか。

    お忙しい中、申し訳ありませんが、
    機会がありましたらご教示いただけますと
    幸いです。
    どうぞ宜しくお願い致します。

    • 高菜 高菜 より:

      初めまして!こんな辺境のサイトへようこそ。
      コメントもありがとうございます。
      回答の前に、サイト見させていただいたのですが、プラグインを使用しなくても十分レスポンシブなデザインになっていました。とても素敵なデザインですね。わざわざ「WPtouch Mobile Plugin」のカスタマイズをするよりは、今のレスポンシブなテーマで、小さい画面サイズでもきれいに表示できるような広告選びなどを行うのではダメなのかな?とも思います。

      どうしても「WPtouch Mobile Plugin」を使いたいのであれば、私なりにでよければ回答させていただきますね。
      >①GoogleAnalytics とアドセンス広告ですが、ブログ内で設定しているのでは駄目でしょうか?
      アドセンス広告については挿入位置などは自由ですので、ブログ本文中に毎回広告を入れていて、それが手間でないのであればむしろその方がいいです。

      記事を読んでいる間に広告があるほうが目に入りやすいと思いますし、なによりプラグインのアップデートで消えてしまうことがないですからね。

      GoogleAnalyticsについては、トラッキングコードをどこに記載しているかにもよります。例えば、テーマファイルのheader.phpの中に直接トラッキングコードを記載されているのであれば、スマホでアクセスしたときは「WPtouch Mobile Plugin」内のheader.phpが読み込まれるので、別途設定必須です。

      >②自分のブログタイトルですが、
      >「トレンド虫めがねNEWS」の文字の最後の方が欠けてしまいます。
      [css]header h1 {
      white-space: pre-line;
      line-height: 1;
      }
      header {
      height: auto;
      }[/css]
      とかで、、どうでしょう?
      勿論、「WPtouch Mobile Plugin」側のCSSを変更してくださいね。

      プラグイン更新の手間を考えると、トップ画像を指定していただいたほうがやはい気もします。

    • 高菜 高菜 より:

      ③「WPtouch Mobile Plugin」はモバイルと
      デスクトップとに切り替えできるようになっていますが、WPtouchを使っている人のはスマホサイトしか出ないようですが、切り替える必要性は何でしょうか。

      見る人に選択肢を与えることができる必要性、ですか。うーん。。
      大きい画面のスマホやタブレットを使用されている方は、PCデザイン版でサイトを閲覧したいかもしれませんし、できるだけPC版で見てほしいと思っているサイト管理者であれば、うれしい機能だと思いますよ^^

      ④記事の文字配列が、ブログの表示と同じではなく多々ずれたり、行間が変わってしまったりと、きちんとした表示に収まっていません。
      文字配列や行間、というのが具体的にどこを指すのかはわかりませんが、表示する画面の大きさが変われば一行に表示できる文字数も変わりますし、そうなると印象が大きく変わるのは仕方のないことだと思っています。

      それでも美しい表示になっているかどうかは、記事を書く際にどれくらい「小さい画面での表示」を意識して書かれているかによると思うのですが、、
      ブラウザの開発ツールなどを使って、モバイル版とPC版のCSSを見比べることもできますし、本当はどういう風に表示したかったのかがはっきりわかっていれば、CSSでデザインを整えてあげるのはさほど難しくないのではないでしょうか。

      明らかに「WPtouch Mobile Plugin」を使った時だけ表示が崩れる部分があるのであれば、それはそれで原因を突き止めて修正してあげないといけないのですけれどねー;;

      すみません後半は回答になってないかもしれません;;

  10. […] WordPressのスマホ対応を助けるプラグインWPtouch Mobile Plugin | たかなblog【WPtouch】新バージョン(3.1)でAdsense広告を挿入する方法 | 「ネットビジネスで稼ぐ」を考えるハヤトのブログ […]

  11. 【WPtouch Mobile Plugin】 スマホでみたときのフロントページがサンプル通りにいかない | 嫁と在宅シゴトと私 より:

    […] テーマが「アイキャッチ画像」を設定できるので、検索しているときに見つけたサイト【たかなblog】をみながら、サムネイルのみ表示したい設定にして、スライダーを無効にして終了! […]

Message

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

  関連記事

wordpress-logo-notext-rgb
「Custom Post Type UI」を利用して、カスタム投稿タイプを作成しよう。

こんにちは、高菜です。 今回は「カスタム投稿タイプ」を利用するなら必ずお世話にな …

wordpress-logo-notext-rgb
画像圧縮でWP高速化!EWWW Image Optimizerプラグインの設定と使い方

今回紹介する画像圧縮プラグイン「EWWW Image Optimizer」は、W …

wordpress-logo-notext-rgb
WordPressプラグイン、DB Cache Reloaded Fixの設定方法

WordPressを使用しているWebサイトを高速化しようとしたとき、多くの方が …

wordpress-logo-notext-rgb
xdomainからさくらサーバーへの引っ越しメモ

こんにちは、高菜です。 本日は、無料でWordpressサイトが運営できる優良サ …

wordpress-logo-notext-rgb
WP-DBManagerでWordPressのデータベースを簡単にバックアップ/復元しよう!

WordPressに限らず、Webサイトなどを運営するのであれば突然のデータ破損 …

wordpress-logo-notext-rgb
WPtouch Mobile Pluginにページネーションを導入したい

こんにちは、高菜です。 「WPtouch」関連の記事にコメントをいただくことが多 …