ブログ

いまさらだけど Make Link の便利さに気づく。

Make Link :: Firefox Add-ons

単純にリンクとタイトルを取得してリンクを作るのもそれなりに便利だけど、すごい便利というほどでもなかった。このブログは CSS で色々と見た目を指定しているので XHTML のタグもそれなりに修正する必要があったから。

でも、Make Link の設定にリンク形式を設定できるのでその手間を省くことができることに気づく。それでそこそこ便利になった。

そして、リンクにこだわる必要もなくて、引用するときの <blockquote> や Amazon アソシエイト用のタグなども簡単に作れることに気づいた。

自分としては画期的な発見だと思ったけど、元々そういうのを想定して作っているみたいで、みなさんそのように利用している様子。

新、ブロガー御用達貼り付けツール Make Link – えむもじら
[月] FirefoxアドオンでAmazonアソシエイト画像リンク作成

『Firefox アドオン Make Link はブログ書くのに便利』の続きを読む »

通常の場合

ol タグで、算用数字が振られるリストを表示すると、1. 2. 3. ・・・ となっていく。

以下が、ol タグで算用数字が振られるソースとその表示例。

■参考ソース

<ol style="list-style-type:decimal">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ol>

■表示結果

width を指定した場合

これが、li の style に width を指定して、IEでみるとなぜか 1. 1. 1. ・・・ となっている。

以下が、挙動がおかしくなるソースとその表示例。

■参考ソース

<ol style="list-style-type:decimal">
<li style="width:90%">リスト１</li>
<li style="width:90%">リスト２</li>
<li style="width:90%">リスト３</li>
</ol>

■表示結果

これはどうすれば対処できるんだ？

コナミコマンドって？という人に

ちょっと前に、Webサイトにコナミコマンドを実装するというのが話題になったことがありましたが、その時は面白いことを考える人がいるもんだと思い、自分も乗っかろうかと考えたのですが面倒だったので流してしまったことがありました。

以下が、話題の元になったと思われるブログ記事です。
[NS] お知らせ:「コナミコマンド」を実装しました

そうだ！コナミコマンドだ！

このコナミコマンドを有効活用するべく閃いたのが以下のブログ記事です。

ブログサイトで「ログイン」やら「編集」やらのアンカー付きで管理画面にリンクを貼っているケースがあるけども、Wikiでもない限り、極力こうしたリンクは出すべきではないんじゃないかな（編集できるのかなと思ってクリックする人がいるのかもしれないので）

＜中略＞

この備忘録でも管理者がアクセスしている思われる場合は、編集リンクや記事毎の人気度などいろんなリンクを追加している。つまり逆に言うと、管理者の場合はユーザに見せられない（見せる必要のない）いろんな内部データを載せるのも、いいんじゃないかなということです。

Liner Note：ちょっとしたアイデア(11)：一般ユーザが触っても仕方のない項目は隠すべき

『コナミコマンドの有効な活用方法を思いついた』の続きを読む »

ブログを立ち上げて間もない状態なので、ブログのレイアウトやデザインの微調整のためにスタイルシートを頻繁にいじっている状態になっています。

で、このスタイルシートがブラウザにキャッシュされていて、内容を変更しても閲覧している側がページの再読み込みをしてくれなければ、古いキャッシュファイルのスタイルシートのまま閲覧されておかしなレイアウトになっていることってあると思います。

正確には、自分が使っているFirefox2.0はスタイルシートが変更されたら、自動的にスタイルシートを再読み込みしてくれているのかこの現象は出ないのですが、IE6.0だと、スタイルシートを変更しても古いスタイルシートを使ってレイアウトがおかしくなります。

これを回避する為にちょっとした小技メモ。

ファイル名が同じでもHTMLで読み込む際のファイル名の後に、?v=xxx をつければ、別ファイルとしてキャッシュされるようです。これが、HTMLの文法的にありかなしなのかは調べていないから分かりませんが、割と使われている方法みたいだし、この際その辺の細かいことは気にせずコレを利用します。

?v=xxxを使った例

<style type="text/css" media="screen">
@import url(style.css?v=1.0.0);
</style>

この ?v=xxx の xxx 部分を更新時間が表示されるようにして、スタイルシートを修正すると自動で xxx が変更されるようにします。

WordPress の場合は、スタイルシートを読み込んでいる処理をしているところは、以下のファイルがほとんどだと思うのでここを修正すればOKです。

/wp-content/themes/テーマ名/header.php

スタイルシートのパスを出力する関数は、

<?php bloginfo('stylesheet_url'); ?>

でこの後に、ファイルの更新時間を取得する関数 filemtime('ファイルのパス') を使って

?v=<?php filemtime('ファイルのパス') ?>

を追加します。

WordPressでのカスタマイズ例

難しいことは分からないという人のために WordPress で使えるサンプルコードを以下に書いておきますが、この小技は、WordPressだけじゃなく、スタイルシートのパスさえ変更すれば、いろいろなところで使えます。

<style type="text/css" media="screen">
@import url(<?php bloginfo("stylesheet_url"); ?>?v=<?php echo filemtime(get_stylesheet_directory() . '/style.css'); ?>);
</style>