スマホ表示の困った問題

WordPressで制作されたこのブログのテーマ「Twenty Fourteen」はレスポンシブデザインなのでスマートフォンに表示した場合も見やすく表示されます。

しかし、記事に少し大きめの表を掲載した場合に表だけが横にはみ出てしまい、みっともない表示になってしまいました。

はみ出した分だけ記事幅も小さくなってしまうので文字が小さくて読みにくい。
これはなんとかしなくては。

色々調査し試してみてたどり着いた対処方法がこちら

対処方法

CSSに以下の定義を追加

[css]
div.scroll {
width:100%;
overflow:auto;
}
[/css]

記事のtableにdivを設定

[html]
<div class="scroll">
<table>
</table>
</div>
[/html]

この対処実施後のスマホ表示がこちら

このとおりはみ出した部分は表示されなくなり、記事が適正なサイズで表示されています。

このはみ出した部分は指でスライドすることにより見ることが可能ですが、閲覧者はただ切れているのかスライド可能なのかわかりづらいという問題点は残ってしまいます。

元のはみ出した状態よりは見た目が良いので今のところはこれで良しとしましょう。

WordPressである時急に記事の内容どころかブラウザがまっしろになって何も表示されなくなった経験ありませんか？

私もこれが発生して途方に暮れたことがあります。

原因

この事象の前に.phpファイルを編集しませんでしたか？
原因はそのせいかもしれません。

phpの閉じタグの後に空白文字や改行コードが入っているとこの事象が発生するようです。
私は編集後の.phpファイルが以下のようになっていて真っ白になる事象が発生しました。

[php]
<?php // 開始タグ
～コード～
?> // 閉じタグ
←ここに改行コード
[/php]

phpの閉じタグは省略しても良い使用になっているので以下のように書かないのが得策かもしれませんね。

[php]
<?php //開始タグ
～コード～
[/php]

本ブログはWordPressのtwentyfourteenというテーマで作成されています。

twentyfourteenはレスポンシブデザインのテーマであり、スマートフォンでも非常に見やすく、デザインも非常に気に入っているのですが１点不満な点があります。

それは記事欄が狭いことです。

私は記事内に表を用いることがあるのですが、表の列数や文字数をあまり増やすことができずに苦労していました。

そこで今回はtwentyfourteenの記事幅の変更方法を取り上げます。

まずは変更前の画面キャプチャです。

変更前

赤枠で囲まれた部分が記事欄となります。

ここのサイズを広くするにはstyle.cssの以下の部分を変更します。

[css]
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 474px;
}
[/css]

上記のmax-widthを474pxから600pxへ変更します。

変更後の画面キャプチャは以下となります。

赤枠で囲まれた部分のサイズが大きくなっていますね。
このように記事欄のサイズを変更することができました。

サイズを大きくすることのデメリットは今のところ感じていませんのでぜひ試して見てください。

WordPressのテーマ「twentyfourteen」はデフォルトでは投稿者が表示される。
しかし、この投稿者の表示が不要な人も多いだろう。

投稿者はstyle.cssに以下を追加することで非表示にすることができた。

[css]
.single .byline{
display: none;
}
[/css]

今まで気づいていなかったのですが、ビジュアルエディタで追加したリンクをクリックすると現在のタブに表示されてしまっていました。

せっかく見に来てくれたのでそのページのタブは残しつつ、別のタブでリンク先を表示してくれるのが理想だと考えています。（リンク先に移動されてしまうと戻るボタンを押さないと元のページに戻ってこれないので）

アンカータグ(aタグ)のtarget属性に「_blank」を設定できればよいのですが、WordPressの設定でできないだろうかと調べてみたところビジュアルエディタのリンク設定画面にある「リンクを新ウィンドウまたはタブで開く」のチェックボックスにチェックを入れれば良いだけでした。

全く特別な設定でもなんでもなく、単純に見落としていただけでした。
今までも何回も見ているのにこのチェックボックスに全く気付かなかったのはお恥ずかしい限りです。

今までは発生しなかったのにある時から突然、記事を編集し保存するとpタグ

が自動的に挿入されるようになってしまった。
この事象の解決は一筋縄ではいかなかったので以下に記載しておく。

remove_filterでは直らない

まずググって見つけた対処方法はfunctions.phpを作成し、以下のコードを追加する方法である。
[php]
<?php
// disable default wpautop filter
remove_filter( ‘the_content’, ‘wpautop’ );
remove_filter( ‘the_excerpt’, ‘wpautop’ );
?>
[/php]
実際この対処方法はたくさん検索に表示される。
しかし、私の事象はこの方法では解決しなかった。

プラグインが原因だった

突然発生したので何か設定を変更したところはないかと調べて見たところ原因を見つけた。

TinyMCE Advancedプラグイン導入時に上記の赤枠箇所「Stop removing ～」のチェックを入れてしまったことにより発生していたというものである。
改めて英語の記載を見るとこのような動作をして当たり前だ。
導入時に参考にしたサイトの設定を理解せずにそのまま設定してしまったことからこのような事態を招いてしまったという恥ずかしい経験だった。

twentyfourteenでブログのタイトルのアルファベットが大文字になってしまうことに気づいた。

「64bit」が「64BIT」となってしまうのはいやだったので調べてみた。

http://blog.ironsand.net/2010/wordpressのタイトルが大文字になってしまう時の対処法

に記載があるとおり

h1{text-transform:none;}

としてみたが変わらない。

style.cssを見てみるとtwentyfourteenは

.entry-title{text-transform:uppaercase;}

となっていることが原因なので

.entry-title{text-transform:none;}

として解決。

「新規投稿を追加」画面で「リンクを追加」ボタンを押し、URLを入力して「リンクを追加」ボタンを押すと投稿一覧画面に遷移してしまい、今までの入力内容が全て失われてしまうという問題に直面しました。

調べてみると以下に不具合についての記載がありました。

http://ja.forums.wordpress.org/topic/23388

その不具合の内容とは

・AddQuicktag
・WP Multibyte Patch

の併用による不具合のようです。

解決方法は

http://eastcoder.com/code/wp-multibyte-patch/

に記載してある手順に従い、

/wp-content/plugins/wp-multibyte-patch

配下にあるwpmp-config-sample-ja.phpをコピーし、名前を変えて以下に格納します。

/wp-content/wpmp-config.php

その後

wpmp_conf[‘patch_wplink_js’] = true;

を探し、trueからfalseに変更して保存します。

これで問題なくリンクの追加ができるようになりました。

iPadからブログを更新したいと考え、WordPressのiPadアプリをダウンロードした。

http://itunes.apple.com/jp/app/wordpress/id335703880?mt=8

早速試してみようと思ったら以下のエラーメッセージ。

ログインできませんでした。

このサイトではXML-RPCが無効になっています。管理者ユーザは〜で有効化できます。

 
WordPressのインストール時にデフォルトでXML-RPCが無効になっていることが原因か。

ダイアログにOKボタンの他に「ヘルプが…すか？」というボタンがあり、中間の省略された部分が非常に気になる。。。

以下のとおり「設定」−「投稿設定」より「WordPress、Movable Type、MetaWeblog および Blogger XML-RPC 投稿プロトコルを有効にする。」のチェックボックスをチェックするだけでした。

http://www.ideaxidea.com/archives/2009/11/admob_on_iphone_blog.html

上記を参考にさせていただきながら進めていたのですが、ひとつ躓いてしまいました。

/plugins/wptouch/themes/default/header.php

上記ファイルにAdMobコード挿入の該当の箇所が見当たらない。。

pluginのバージョン違いとかでしょうか。。。

ちなみに自分が使用しているプラグインのバージョンは1.9.35

とりあえず適当に

<!– #start The Search Overlay –>

の上に挿入してみるもののタイトルより上に広告が表示されてしまう。

結局header.phpファイル最下段の210行目

<?php wptouch_core_header_check_use(); ?>

の下にコード挿入したところ自分の表示したい位置に広告を表示することができました。