smartboyのWeb製作メモ帳

Webサイトの構築時に気づいたことのメモ帳です。
サイト構築に関するTIPSだけではなく、ブラウザのこと等ウェブ全般について書いていきます。

箇条書きをする時に文字の左にアイコンを置きたい時に最も楽な書き方は、

 <img src="hogehoge.gif" height=11 width=11> テキスト

みたいにIMGタグを使って書く方法です。（height、width属性は省略可能だが付けないと表示が遅くなるので付けたほうがいい。）

１個だけならこれで十分ですが、これを何個も書きたい時はすべての要素にいちいちIMGタグを付けていると面倒だし、ソースの可読性も良くありません。

そこでリスト形式(UL)にして、リストの各要素の先頭の画像を指定する方法があります。

<ul style="list-style-image: url('hogehoge.gif')">
<li>要素１</li>
<li>要素２</li>
<li>要素３</li>>
</ul>

これで画像ファイルを指定するのは１箇所ですがリストの全ての要素の左側にアイコンを表示することができます。

しかし、これでは画像は１種類しか使えません。「要素のタイプごとに違うアイコンを使いたい。」こんな場合にはこの方法では実現できません。

たとえば、次の様に要素のタイプごとにアイコンを変えたい時はどうすればいいのでしょうか？

要素赤１

要素青１

要素赤２

要素赤３

要素青２

上の例みたいに要素のタイプごとにアイコンを変えたい場合はスタイルシートを使うのが便利です。以下にその方法を記述します。

<head>
<style type="text/css">
<!--

/* この例では画像ファイル以外の属性は全てまとめて指定 */
.red,.blue {background-repeat: no-repeat;background-position:2px center;padding-left:24px;}
/* 画像ファイルはクラス毎に指定 */
.red{background-image: url('red.gif');}
.blue{background-image: url('blue.gif');}
 -->
</style>
</head>
<body>
：
<div class="red">要素赤１</div>
<div class="blue">要素青１</div>
<div class="red">要素赤２</div>
<div class="red">要素赤３</div>
<div class="blue">要素青２</div>
：
</body>

つまりスタイルシートで背景画像としてアイコンを使用するのです。CSSの"background-repeat"属性を"no-repeat"に設定してアイコンが１つの要素につき１つしか表示されない様にしています。"background-position"では画像の表示位置を指定しています。上の例ではブロックの左から2pxのところ、縦位置は中央になるように指定しています（左側をインデントする必要がなかったら１つ目の値は"left"で構いません）。それだけだと画像とテキストが重なってしまうため"padding-left"を使用してテキスト要素の開始位置をずらしています。この値はアイコンの大きさによって適宜変えて下さい。

上記のサンプルではHEADタグの中にCSSを記述しましたが、もちろん外部スタイルシートファイルを使用してもOKです。

この方法を使うと要素ごとにIMGタグを使用する必要がなく、またある要素のタイプが変更になった場合もクラス名を変えるだけで済むのでメンテナンス性という意味でも便利です。

私の運営している一口馬主のページ我が一口馬主人生でもこの方法でテーブル内の左側の項目に付けているアイコンを指定して見ました。そのページでは上記の例のようにDIVタグではなくTABLEタグの子要素のTDタグでその方法を使用しています。今まではIMGタグを使って一つ一つアイコンを設定していたのですが、数が増えてくるとソースが長くなり、また、見づらくなってきたのでこの方法を試して見ました。

Permalink | コメント(0) | トラックバック(0)

2011-11-13

PukiWikiのSPAM対策:Akismet

PukiWiki

　PukiWikiで運営しているページにSPAM書き込みが多くなってきたのでSPAM対策を施しました。今回導入したのがAkismetというもの。WordPress用のSPAM対策サービスだが、APIが公開されていて登録をすればWordPress以外のページでも使用できるものだ。そのAkismetをpukiwikiで使用するプラグイン akismet.inc.phpというものがあり、今回はそれを使用してみました。以下で使用方法を紹介します。

PukiWiki用プラグインAkismet導入方法

Akismet API key を取得する

　こちらのサイトでで取得できます。なお、"Personal"を選ぶと無料で利用できます。まずは無料で使ってみて様子を見ながら有料版に切り替えるのがおすすめ。ここで登録したメールアドレスに Akismet API key が送られてきます。

　なお、AkismetプラグインのマニュアルにはWordPressのユーザ登録が必要と書いてありますが、現在は上記で紹介したように akismet.com で Akismet API key のみ取得可能となっています。

reCAPTCHA API Key を取得する

reCAPTCHAのページからAPI Keyを取得します。ここで、使用するドメインのドメイン名を入力する必要がありますが、「a.hoge.com」と「www.hoge.com」の両方で使いたい場合は「hoge.com」だけを入力すればサブドメインを含めて利用可能です。

　なお、この記事を書いている時点でAkismetプラグインのマニュアルに書いてあるreCAPTCHAのページは無効（デッドリンク）となっているので、上で紹介したページで取得しましょう。

akismet.inc.php のダウンロードと設定

　akismet.inc.phpのページからダウンロードします。ダウンロードしたファイルをマニュアルの「プラグイン設定」に従って書き換えます。「必須」と書かれてある各Keyの設定は必ず行なって下さい。

PukiWiki本体の修正

　PukiWikiインストールフォルダの配下の lib/pukiwiki.php を書き換えます。書き換える内容はマニュアルを参照して下さい。

ファイルのアップロード

　先ほどの「akismet.inc.php」をPukiWikiインストールディレクトリ配下の「plugin」ディレクトリ内にアップロード、さらに「pukiwiki.php」を「lib」ディレクトリ内にアップロードして上書きします。これで完了。

　なお、動作させているPukiWikiのアドレスに「index.php?cmd=akismet」を付け足してアクセスすると確認画面にアクセスでき、実際に動作しているかどうかが確認できます。最初のうちは「ログファイルが見つからない」という内容が表示されると思いますが、SPAMをブロックすると自動的にログファイルが作成され、確認画面からブロックした内容を確認できます。

　先日PukiWikiにて運用しているWikiKeibaにインストールしてみましたが、連日書きこまれていたSPAM記事が書き込まれなくなり、動作ログをみるとちゃんとブロックしている様です。

Permalink | コメント(0) | トラックバック(0)

2011-10-16

Chromeのファイル名が変わってしまったため規定のブラウザにできなくなった時の対処

Google Chrome

先日 Google Chrome をバージョンアップしたら、Chromeの実行ファイル名が chrome.exe から new_chrome.exe に変わってしまった。私はGoogle Cromeで特定のページを立ち上げるショートカットを作っているのだが、そのショートカットが無効になってしまって実行ファイルのパスを書き換えるのに手間取ったが、それ以上に困ったことが起きた。

その困ったこととは、もともと規定のブラウザとして設定していた Google Chrome が規定のブラウザではなくなってしまったのである。Chromeの設定画面で設定しようにも、既定のブラウザに「規定のブラウザを判別できません」と表示されて規定のブラウザの変更できなくなってしまった。規定のブラウザといて設定されているパスの場所に実行ファイルが存在していないからである。

この場合の対処方法が分かったのでここにメモをしておこう。おそらくレジストリを書き換えれば規定のブラウザは指定できると思うが、それよりも安全な方法である。

実行体のパスが変わってしまったGoogle Chromeを規定のブラウザに設定し直すには次の様にすれば良い。