Tags:CSS
サイトを色々と修正してみた
今日は、サイトの設定で後回しにしていたことを色々と修正してみました。
WordPress バージョンアップ後の不具合?
このブログで使用しているWordPress
がバージョンアップしてから、サイト上部に謎の空白が出来ていました。いつも現れるわけではなく、ログイン中のページでのみ発生。ソースを見てみると、ページナビらしき機能が新たに追加されているようだった。
以前、ページナビのプラグインを使っていたことがあるのですが、デフォルト機能として使えるようになったんですね。どこで設定するか分かりづらかったけど、管理画面のユーザーの設定より変更できるようです。
しかし、僕の環境では何故か上手く表示できずに、以下のような非表示設定のスタイルシートが記述されていました。
<style type="text/css" media="print">/*<![CDATA[ */
#wpadminbar { display:none; }
/* ]]>*/</style>
mediaが何も表示されていないのは不自然だよな……と思って使用中のプラグインを見てみると、『Head Cleaner』プラグインが原因のようでした。ソースが読みやすかったので原因追求してみると、
$inline_css .= $this->_css_tag($val, $media, true);
の部分がおかしいっぽかったので、以下のように修正。
$inline_css .= $this->_css_tag($val, $key, true);
これで、styleタグにmediaが正しく記述されるようになってめでたしめでたし。今まではmediaにデフォルト値が入っていたようでした。
実は、『Simple Tags』プラグインをバージョンアップしたことによって、関連記事が表示されなくなったという問題も残っているのですが、こちらの方はまた今度ということで。
Facebookページを作成
まだFacebook
の使い方が全然分かっていないのですが、Facebookは自分のページ以外にファンページのようなものも作成できるみたいですね。ということで、このサイトのファンページを作ってみた。
まぁ、需要も使い道もなさそうなんですが実験ということで(笑)周りにFacebookやっている人がいなくてよく分からないので、詳しい人がいたら活用方法や魅力を教えてくださーい。
iPhoneやIPad用のアイコンを作成
去年あたりから、存在しない画像ファイルへのアクセスをちょくちょく見かけるようになりました。よく見かけるファイルは以下の2つ。
- apple-touch-icon.png
- apple-touch-icon-precomposed.png
何かなと思って調べてみると、iPhoneやIPadがブックマーク時に使用するアイコンのようでした。要するに、Favicon
のような役割ですね。作ってはみたものの動作確認できないので、もし持っている方がいらっしゃったら動作状況を報告して頂けると嬉しいです。
Ktai Style でテーマをつくっていて気が付いたこと
現在、Ktai Style 1.61-beta1でテーマを作成・修正しているところですが、気が付いたことを箇条書きしておきます。
- テーマの作成途中で、バージョン1.61にはインラインスタイルへ自動的に変換してくれる機能があることを知った(汗)
- まぁ、別に良いか……と思っていたけど、互換性当を考えて font タグ等を使って記述した方が良さそう
- hr タグにインラインスタイルを記述していても、自動変換で消されてしまう(コメントにて報告済み)
- redir.php に記述されたコードは、インラインスタイルに自動変換してくれないっぽい
- font タグが入れ子になっていると、変換がおかしくなる
- Softbank 3G は、『display:-wap-marquee』が使えないらしいので、機種判別して maequee タグを使うしかないのかな……
- ページ分割時の文言は、翻訳ファイルを修正しないと変更できない。また、<hr />タグが出力されるのは固定っぽいので、プログラム部分を直接しなければレイアウト修正できない
- 普段のページ遷移に『#』『*』の accesskey を使用していると、ページ分割時に accesskey が重複してしまう
- body タグの link は『a,a:link {color:~』のスタイルシートに置き換えられるので、<a id="">や<a name="">で囲われた文字の色も変わる場合がありそう(これが良いのか悪いのかは不明)
- 個人的に、function.php で変数を色々とつくっておいて、必要なときに各テンプレートファイルから global で呼び出すとテーマを修正しやすい気がした
- 『<!--start paging-->』と『<!--end paging-->』は、ちゃんと意味があるコメントだったのか……間違えて削除していたぞ(汗)
- function.php に以下のコードを記述して、MIMEタイプが『application/xhtml+xml』ではないときに、スタイルシート関連の記述を削除してみた
function ks_karuta_replace($buffer) {
if (! ks_applied_appl_xhtml()){
$buffer = preg_replace('!<([a-z]+?[^>]*?) style="[^>]*?"([^>]*?)>!', '<$1$2>', $buffer);
$buffer = preg_replace('!</?span( [^>]*?)?>!', '', $buffer);
}
return $buffer;
}
add_filter('raw_content/ktai_style.php', 'ks_karuta_replace');
最もCSS、XHTMLに融通が利かないdocomoで実機確認してはいるけど、XHTML非対応端末や他の機種でちゃんと表示されているかが不安です。まぁ、今のところ特にクレーム等は来ていないので、それなりにちゃんと表示されている……と願っておきます(笑)
Ktai Style のテーマを修正してみた
『Ktai Style 1.61-beta1 配布』ということで、さっそくダウンロードして、ついでに久々にテーマを色々といじってみた。
今までは、HTMLでテーマファイルを書いていたんですが、今回はXHTMLとCSSを使って作成したので、もしかしたら表示が変になっているところがあるかもしれません。実機はdocomoでしか確認しておらず、auとsoftbankはエミュレーターでの確認となっているので、おかしいところがあったらご連絡いただけると嬉しいです。
WindowsでSafariっすか?
こんばんは、携帯電話の電話帳には、全員フルネームで登録しているHaRDです。
SafariはWindowsで動作不可能ブラウザということで、僕がサイトをつくるときにはいつも動作確認していなかったブラウザなんですが……ついにWindowsでも動くようになったみたいです。ただ、ベータ版ということで、日本語のページは上手く表示されませんね……
だけど、文字以外のレイアウトなどは日本語のページでも正しく表示されるっぽいので、スタイルシートが思った通りに適用されているかの確認には使えると思います。
IE7が一般公開
と、いうわけでIE7のベータ版が一般公開されましたが……評判があまりよろしくないご様子。WinXP SP2でしか動かないらしいし、IE6との共存不可能、スタイルシートのバグも残されたまま。あまり魅力的なものは感じられなかった。
そういや先日初めて知ったのだが、IEには『Ctrl + F5』というショートカットがある。これを使用するとキャッシュを使用せずにページを再描写できる。個人的にかなり便利だ。キャッシュがおかしくなってIEでソースを表示できないときはキャッシュファイルをすべて消していたのだが、これを使えば簡単に対処することが出来る。
昔のサイトを見てみよう
archive.orgのサイトのキャッシュを利用して、なんとなく昔の全日本かるた協会のサイトを見てみた。このデザインの頃に実際にサイトを見たことがないのだが、僕はこっちのデザインのほうが好きだなぁ……ソースもDOCTYPE宣言とかちゃんとしてあるし(何故今のサイトで削除されているかは謎)
ついでに、昔の僕のサイト。外部CSSや画像まではキャッシュしないのか、実際の当時のサイトとは結構違うなぁ……結構サイトを更新しているつもりだったけど、メインコンテンツはほとんど変わってませんね(汗)