WordPress Archive

Inteternet Explorer 以外のブラウザではルビの表示がなかなか上手くいかないのは、HTML でがりごり書いたことのあるひとなら結構な割合で知っているのではないかと思います。

私もルビを使う――使いたいケースがたまにあったりで、そのたびにいろいろ検索して試行錯誤していたんですが、以下はそんな記録。

CSS で頑張ってみる その1

まずは正攻法(?) の CSS によるマルチプラットフォーム対応の方法。

結構前に、404 Blog Not Found:css - ルビもCSSで の記事で示された CSS を試してみました。こちらの記事の元ネタはルビ表示はユーザスタイルシートで! - 徒書 からのようです。

で、これはこれで複雑怪奇な CSS を使っていなければ、表示結果はそれなりになるのですが、WordPress に移ってからは表示が崩れたりして使ってませんでした。

CSS でいろいろ頑張ってみた比較は ホームページ作成浜松Tips:CSSによるルビ（振り仮名）表示方法 で見ることができますが、Firefox3 だとなかなか満足のいく結果が出ていないように思えて残念無念です。

Firefox のアドオンで自分だけ幸せになる

Firefox を使っているのなら、XHTMLルビサポート (XHTML Ruby Support) を使えば概ね良好な動作をしてくれますね。

閲覧環境を整えるということなら、こちらのアドオンを導入すればルビの表示についてはほぼ解決ではないでしょうか。

CSS で頑張ってみる その2

で、本題。今日、また思い立って検索してみたら、CSSでルビを表示する - mukakenの日記 経由で sim2ruby.css という CSS ファイルを知りました。

結構小さい割に、IE 以外の最近のブラウザでもルビの表示が良い感じになるようです。

ウチのサイトにも追加で sim2ruby.css を読み込むようにしてみましたが、Firefox3 でも

のような感じで、かなり自然に見ることができるようになりました^*1。

導入自体も、追加で CSS ファイルを読み込むようにするだけなので簡単。ブラウザに応じて JavaScript で CSS の振り分けをするとか、面倒な手順を踏まなくても、ルビ表示ができるようになるこの CSS ファイル、かなり便利ではないかと。

1. ルビの部分にマウスカーソルを重ねると、文字を拡大する機能も付いています。〈ただそこに佇立する者〉の部分ですね。 [↩]

• CSS | HTML | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(0 件の評価, 平均: 0 点 / 5 点満点中)

 読み込み中 ...

読書感想カテゴリでは、サイドバー最上段に書影をランダムで10個表示するようにしていたのですが、ところどころ画像が表示されていないということに気付いていつつも放置していました。が、なんだか日が経つにつれてリンク切れ画像が増えていってるような気がして仕方なかったので、とりあえず対処療法を講じてみました。

そもそも、Amazon リンク切れ 画像で検索すると、同様なことに悩んでいる方は少なからずいるようで、そして、結局はひとつひとつ手作業で修正するしかなさそうという事実に愕然としてしまいます。

しかし、何とかす方法はやっぱりあるようで、画像がリンク切れの時は、代替画像を表示するという方法を指定した画像がなければ別のサーバーの画像を読み込むにて知りました。

ってことで、早速テーマを書き換え。WordPress のRandom Imageプラグインの出力を書き換えて、

<?php randomimage(false,
                  10,
                  "height='120' width='90' class='random-image' onerror=\"this.src='http://www.u-1.net/images/noimage_small.png'\"",
                  true,
                  "(\.jpg|\.jpeg|\.png)",
                  "both",
                  "",
                  "9",
                  true,
                  "",
                  "%2"); ?>

のように変更。プラグインの細かいパラメータは配布サイトの説明参照してもらうとして、img タグ内にイベントハンドラ onerror を追加してやって、画像読み込みにエラーが出た場合は、代替イメージ noimage_small.png を表示してやるということですね。

同様に、各エントリの中の書影を表示している img タグにも一括置換で onerror を追加してやって対応完了。

そのうちこつこつと画像の UR Lは書き換えないといけないけれど、ひとまずはこれで不格好なレイアウト崩れは回避できるはず。

• JavaScript | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(0 件の評価, 平均: 0 点 / 5 点満点中)

 読み込み中 ...

現在、マイクロブログは Twitter をメインに呟いていますが、なんだか今日あたり、Wassr への流れができていたので、アカウント作ってみました。

WordPress から Twitter への更新通知のポストは、Twitpress で行えていますが、Wassr も API が公開されているので、これを改造して対応できないかといじってみたらできたみたいなので、パッチを置いておきます。

適当にやったので関数名とかDB名の頭が大文字になっちゃってますが、気持ち悪いようなら適宜小文字に変更するなどして下さい。というか、置換で大文字小文字区別しなかったせいですががが。

ちょっと長くなったので、続きを読むの後に置いておきます。素人が適当にいじったせいで動作保証も何もあったものではないので、書き換えた場所だけチェックして自力で改造するのが良いと思います(^^;

一応、動くことは確認してありますが、ご利用の際は注意してください。

Wassbacker

Wassbacker を使えば、ブログツールから Ping を送信するだけで通知できるので、こちらのサービスにパスワード等を預けることを許容できるなら、こちらを利用するのも良いかもしれません。

Continue reading

• patch | Plugin | Twitter | Wassr | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(1 件の評価, 平均: 5 点 / 5 点満点中)

 読み込み中 ...

当サイトはMobile Eye+を用いて、携帯と思しきアクセスには、携帯用に変換したページを送信しています。

PC向けのページには、Google Adsense を使用した広告バナーを表示していましたが、グーグルの携帯向けコンテンツ連動型広告、画像広告やドコモ対応 という発表もあったので、携帯用のページの方にも Adsense バナーを表示するようにしてみました。

Google Adsense の管理画面から、「AdSense 設定」→「モバイル コンテンツ向け AdSense」へと進み、ウィザードに従って Adsense コードを生成します。PHP が使える環境なので、スクリプト言語は PHP を選択しました。

で、これをMobile Eye+ で使用しているテーマテンプレートの適当な場所に挿入すれば良いと思ったのですが、それだと

PHP Fatal error: Call to undefined function google_set_screen_res()

というエラーが発生して、ページの表示がそこで異常終了してしまいます。

スクリプトの設置方法については Adsense のヘルプを見ても具体的な方法が書いてないのはどうなのかとは思いますが、検索してみると、Adsense コードを適当なファイル名^*1で保存して、それを include してやれば良さげっぽい?

まぁ、ものは試しということで、Mobile Eye+ の defalut テーマ内の entry.php を

<?php the_date('', '<hr><u>', '</u><br>') ?>
[<font color="#008800"><?php the_title() ?></font>]<br>

<?php the_content(__('(more...)')) ?>
<?php wp_link_pages() ?>

//Adsense コードの include
<?php include("adsense.php")?>

<?php _e('Author:') ?><?php the_author() ?><br>
<?php _e('Categories:') ?><?php the_category(',') ?>

のように編集してやったら OK でした。

しかし、この辺の設置方法、もうちょっとわかりやすい解説なかったんですかね……。

1. 例えば adsense.php [↩]

• adsense | google | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(0 件の評価, 平均: 0 点 / 5 点満点中)

 読み込み中 ...

WordPress 2.5 になってから、ヘッダ部分のメタタグに、WordPress のバージョンやら rsd へのリンク、wlwmanifest.xml へのリンクなどが埋め込まれているので、正直要らないなあと思っていました。

以前はテーマファイルで記述していたのですが、どうやら、2.5 では header.php に記述された、

<?php wp_head(); ?>

って部分で出力されているみたいです。はてさて、どうしたものかと探してみると、そのものずばりが見つかりました。

ヘッダからバージョン情報を消す at insomniaque によると、使用するテーマの functions.php に、

<?php
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');
?>

と書いてやれば、それぞれバージョン情報、wlwmanifest.xml へのリンク、rsd へのリンクが削除されます。

remove_filter の動作については、わーどぷれすっ！ » Plugin API の訳 に書かれているように、アクションやフィルターを無効にするための関数みたいですね。上手く使えば余計な情報を、表に出さないで済むかも?

アクションやフィルタの種類については、10coin.com - add_filter, add_actionをすべて表示してみるテスト にリストが掲載されているので、参考になるかと思います。

コアファイルに手を入れないとダメかなあと思っていたので、この情報は大変ありがたかったですね。

• WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(1 件の評価, 平均: 4 点 / 5 点満点中)

 読み込み中 ...