iPadだけ表示に不具合

2015.09.09【 ネット・パソコン
このブログのテーマはPC・スマホ・タブレット用の3パターン用意しています。PC用が親テーマでそれ以外が子テーマ。
スマホを持っていないのでブラウザのシミュレータを使って表示確認。タブレットを利用して確認することもあります。

が、iPadだけ表示に不具合が出ることが多いんですよね…。今回も、SNSボタンとカテゴリ・タグ表記に使っているアイコンフォントをiPadのみ読み込まず。フォントのCSSリンク先をどうも認識できない様子。

あれやこれや調べていってたどり着いたのがHeadCleanerというプラグインの機能でした。「複数の CSS を結合する」という項目からチェックを外したら直りました。
ただし、必ずしもこのプラグイン機能のせいで読めないわけでもない(表示できているブログもあり)、というのが不思議なところ。他の機能との兼ね合いとかもあるんでしょう。

iPadは親テーマに設定した背景画像のリンク先も読んでくれなくて、タブレット用子テーマに改めて書き込んでいます。相対パスも苦手みたいなので絶対パス(http~)で指定。

色々あるねぇ…。でもまあ、こうやって解決していくのが楽しいわけだけども。

アーカイブページでタイトル一覧からページ内移動

2015.05.18【 ネット・パソコン
ブログ記事も1000件を超えました。検索で飛んできた人が記事を探しやすいようあれこれ表示に手を加えています。本当はカテゴリも整理したいのだけどちょっと面倒くさいので保留。

タイトル一覧
今回はカテゴリページ(archive.php)の上部にそのページの記事タイトル一覧を表示し(上図参照)、クリックするとその記事のところへページ内でジャンプする方法です。
大したことじゃないのだけど検索したときにそのものズバリな情報が出てこなくて、頭を使ったので覚書も兼ねて。

まずは記事のタイトルにIDを割り付けます。赤太字が追加した記述部分。私はパーマリンクをIDとしました。

<h2 class=”title”><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>” class=”title-link” id=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>


次に、タイトル一覧を表示したい場所へこれを貼り付けます。

<ul>
<?php if ($posts) : foreach ($posts as $post) : ?>
<li><?php the_time(Y年m月d日); ?> <a href=”#<?php the_permalink(); ?>” id=”post-<?php the_ID(); ?>”><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> <?php endif; ?>

元はこちらのコードで、本来はクリックすると個別記事ページが表示されます。赤太字が変更した部分。年も入れたかったのでY年を追加してあります。そして a href のリンク先をIDに変更すれば個別記事ページではなくページ内の該当記事へジャンプできるというわけ。

ただ1点、これをやるとアーカイブページのweb拍手カウントが表示されなくなりました。が、数字が表示されないだけでちゃんと動いているので良しとします。

Akismet によるスパムコメント防止

2013.12.08【 ネット・パソコン
宣伝のための迷惑なコメントは Akismet というプラグインで防いでいるのですが先月まで毎日、1日あたり数十件~多い日は200件近くのスパムコメントが溜まっていました。

とてもじゃないけどスパム判定された中身を全部確認してから削除、なんてできなくて、
「もし判定ミスで普通のコメントが混ざってたらごめんなさい…」
と思いつつ一括削除しておりました。スパムじゃないのに削除されちゃった人がいたらごめんなさい。悪いのは私じゃなくてプラグインです。←人に罪をなすりつけるやつ

参ったなと思っていたら最近はパタリと止みました。1日にせいぜい数件です。何かのリストから外れたとかですかね?なんにしてもありがたいこって。
たまーに誤認はあるものの、Akismet はとても優秀だと思います。

それにしても、ああいうスパムコメントを読んでクリックする人がいるんでしょうか。ましてや買い物なんて。
そういえば同じような内容が時々メール送信フォームからも送られてきます。私は興味ないんでうざったいだけですな。

WordPress親テーマのCSSが部分的に継承されない

2013.11.17【 ネット・パソコン
もしかしたら同じ症状で悩む人がいるかもしれないと思いつつ、記録しておきます。

現在このブログではPC版を親テーマとし、スマホ版とタブレット版は子テーマに記述して作っています。親テーマとは配置が違う部分だけ子テーマCSSに追加する形でほとんどは親テーマCSSを利用しています。ちなみに切り替えは Multi Device Switcher というプラグイン。

作ったものはタブレットと Mobilizer で表示確認しているのですが、不思議な事象がありまして。
それは、子テーマに継承されるはずの親テーマCSSの一部が継承されないこと。でもそれを子テーマCSSに再度記述すれば認識されること。

私が導き出した結論から先に書いておくと、親テーマのCSSが部分的に継承されないのは記述に問題があるか端末の特異性によってCSS解釈のうまくいかない部分があるかのどちらかじゃないかと。もっとも、子テーマに再指定すれば認識されるところはそれだと説明できない気もしますが…。

例えば親テーマで body にこれだけ指定しています。

font-size:1em;
line-height:1.8em;
color:#333;
text-align:center;
background-color:#cff;
background-image:url(画像URL);
background-repeat:repeat;
margin:0;
padding:0;

なのに iPad と Nokia でこのなかの background-image の指定が認識されない。
Nokia では background-color と line-height もダメでした。
両者とも背景の横縞柄が表示されないものの、文字色等はちゃんと継承されておりおかしいのは一部だけなのです。

他にも
サイドバーに指定したクラス属性+li の list-style-image のみ
ソーシャルボタンを並べて表示するために指定したクラス属性+ li 指定
などは iPad、Nokia 共継承されず。いずれも子テーマでスタイルシートに指定しなおせばどれも指示通りに表示します。

一応 W3C CSS検証サービスでCSSの記述についてはチェック済みなのですが、エラーでなくても特定の機種にだけ何か引っかかってしまう記述がある可能性は否めません。一部だけという点に注目するとこれらの機種はCSSの解釈が厳格なのかなとも考え、試行錯誤したところ、少しだけは解決できました。まずは

background-image:url(画像URL); ←URL囲いなし

background-image:url("画像URL"); ←URL囲いあり

ダブルクオテーション(またはシングルクオテーション)で囲ったら iPad では親テーマのCSSから認識されました。が、Nokia はダメ。
同様に

list-style-image:url(画像URL);

list-style-image:url("画像URL");

としたらこれは両者とも認識しました。何で Nokia は body 背景だけダメなの?

次は

line-height:1.8em; ←記述として間違ってはいないが下の方がより好ましいとされる

line-height:1.8; ←好ましいとされる。font-size とセットで指定するといいらしい

単位をつけない指定にしたら Nokia でもトップページとアーカイブページで認識されたけれども、記事タイトルの h2 には適用されない。また個別ページでは全く認識されず。
font-size との絡みかと疑い em 指定から%指定に変えてみても変化なし。
h2 や div タグなどに line-height を指定するも変化なし。どこかもう1ヶ所くらい指定したら個別ページでもいけそうな気がするんですが。

あとは、background-color を基本色にしたら Nokia でも認識されるかと

background-color:#cff; ←Webセーフカラー

background-color:#0ff; ←より安全な16基本色

に変えてみるも読み込まず。aqua(#cffの別名) でも同じでした。同じ #cff に指定した記事タイトルの背景色は読んでいるのに body 背景色はダメってことはやはり、body の指定に何か問題があるんじゃないかな。

クラス属性+li については、指定の最後の項目

display: block

の後に ; が抜けていたのが原因でした。初歩的なミスですね。全角文字が混じっていたとかもよくある話。

多分、PC用のブラウザの方がCSS解釈が寛大で問題にならないのでしょう。携帯端末は機種依存の設定とか解釈のシビアな部分で引っかかってしまうのだろうと思うので、正しいCSSを書けばいいのかなと思います。いや、そこが難しいわけだけども。あるいは、子テーマCSSにも最初から全部記述するとか。

実機ではなくシミュレーターですから実際とは違うのかもしれません。Nokia なんて日本じゃ流通してないんだから無視すればいいのに、とも思います。が、それとは別の話として、より正しいCSS記述をする方が問題は起きにくいだろうと予想されるので、もう少しCSSは勉強しようと思いました。

それにしても、親テーマCSSからは認識できない記述でもそれを子テーマに指定すれば認識するところが不思議。そういうもんなの?WP純正のテーマを使ってないからとか?
こういうのに詳しい方が一気に謎を解いてくれたらいいなぁ。←こそっと他力本願

スマホ・タブレット用のページ

2013.10.05【 ネット・パソコン
今まで WPtouch というプラグインを使ってきましたがちょっとレイアウトをいじって(といってもサイドバーを取っただけ)、PC用ページと同じデザインをスマホとタブレットで表示するようにしてみました。

サイドバーがなくなった分、メニューページを別途作ってあります。ページ下部左側あたりにリンクが表示されているはず。モバイル表示とPC表示の切り替えもできるようになっていると思います。
末尾のクレジット表記がずれちゃってるけどこれはよく分からん…。読むのには支障ないので放置、と(^^;

スマホを持っていないので、1ページに表示される件数がどのくらいなら通信費の負担にならないのか、実際表示がどうなっているのか分からないですが、もし不具合があったら教えていただけると助かります。

忍者おまとめボタンのスクロールボタンが邪魔

2013.09.25【 ネット・パソコン
タブレットでブログの表示チェックしていたらうっとうしいものがあることに気付きました。左側に黒い矢印が出て、スクロールしてもついてくるんです。でかくて字にかぶってるし見た目も気に入らないし何より動くのがうざったい。
screenshot
今までスマホで見ていた皆さん、ごめんなさい。お邪魔でしたでしょ。

提供元で忍者おまとめボタンのスマホ設定を解除する方法を掲載しています。これをやっておけば消えます。
最初はリロード(ページ再読み込み)をしても消えなくて「何で!?」と思ったのですが、一旦ブラウザを終了させて再起動したら消えてました。cookie か何かの具合でしょうか?

これとは別に、今まではスマホ対策という時に小さい画面で解像度もPCより低いものを念頭に置いていたのですが、7インチタブレットのような小さい画面で高解像度(1280pxとか)だとまた違う問題が出てくることに気付きました。
実物で表示してみないと分からないことがいろいろあるものですな…。

Android4.2のドルフィンブラウザで WPtouch のCSSが無効になる

2013.09.21【 ネット・パソコン
地道に7インチタブレットを使っております。
せっかくなので自分の作ったHPやブログを表示確認しておりました。

このブログでは WordPress のプラグイン WPtouch を利用して携帯端末用に表示させております 表示させておりました(現在は使っていません)。
アンドロイド標準のブラウザや chrome、firefox では問題なく表示されたのですがドルフィンというブラウザにしたらスタイルシートが全く効かない状態で表示崩れまくり、cssファイルをいじってみてもだめでした。
更に検索したらPCあれこれ探索さんの情報にたどり着き、WPtouch for JB をインストールして無事CSS有効となりました。

android の問題なのかブラウザの問題なのかわかんないけど、WPtouch を使っている方はやっといた方がいいと思います。

余談ですがPCでは Firefox ユーザーの私。でも Android 版火狐はイマイチで、ドルフィンというのが一番使いやすく感じました。ちょうど、使い始めたころの Firefox とよく似た感覚です。カタカナのドルフィンと英語の Dolphin は仕様が違うらしいです…。入れるならカタカナの方ね。

ところで、買ったのは ASUS MeMOPad HD7 ME173 ってやつ。今一番売れてる7インチタブレットだとか。自分、ひそかに流行に乗っちゃってますね(^^;
メモパッドかと思っていたらミーモパッドなんだとか。ミーモ…可愛いかも。作業とかしないで見るだけならこれで十分かなと思います。
, ,