Web製作メモ帳

Web制作で気づいたことをつらつらと

箇条書きのアイコンはCSSを使って指定するのが便利

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

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

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

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

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

<ul style="list-style-image: url('hogehoge.gif')">
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>>
</ul>

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

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

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

要素赤1
要素青1
要素赤2
要素赤3
要素青2


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

<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">要素赤1</div>
<div class="blue">要素青1</div>
<div class="red">要素赤2</div>
<div class="red">要素赤3</div>
<div class="blue">要素青2</div>
:
</body>

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

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

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


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

PukiWikiのSPAM対策:Akismet

 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記事が書き込まれなくなり、動作ログをみるとちゃんとブロックしている様です。

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

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

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

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

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

  • FirerFox等のブラウザ*1を立ち上げて、そのブラウザを一旦規定のブラウザにする。
  • Google Chromeを再起動すると「Google Chrome を規定のブラウザに設定しますか?」と聞いてくるので、そこで「はい」を選ぶ。

これで無事にChromeを規定のブラウザに設定できた。

それにしても自動でバージョンアップしてファイル名が変わってしまうとはね。こういう現象って他にも起きた人は居るのだろうか?

*1:私はFireFoxを使ったがIE等の他のブラウザでもいいと思う。

Google Chrome 拡張あれこれに若干追加

 Google Chrome拡張機能が消えてしまった(T_T)。かなり痛かったが、昨年このブログに書いた記事を元に必要な拡張機能をどうにか再インストールできた。

 その昨年書いた「Google Chrome 拡張あれこれ」という記事だが、その後見つけた便利な拡張機能を若干追記しておいたので、興味のある方はご覧になっていただきたい。今回追加したのは特定のウェブサービスを使用している人向けのものばかり。

Google Chrome でGoogleMaps2を使った地図が表示できない…

Google Chrome でアクセスすると こちらの記事で紹介したPukiwikiプラグインGoogleMaps2を使った地図(Googleマップ)が表示されないのだが、原因は何なのかな?

FireFox等で見ると正常に表示されるのでブラウザに原因があるのだと思うが、ひょっとしてGoogle APIGoogle Crome じゃ無効となるってことはないよね。まさか。同じGoogleだし。

Facebookの「いいね!」ボタンとか

久しぶりにこちらの方の日記を更新。画期的なネタではないのだが、はてなダイアリーの機能が追加になったので紹介してみよう。

はてなダイアリーFacebook「いいね!」ボタンが設置できるようになったそうなので、メインの方のブログである「毎日がエブリデイ!」にFacebookの「いいね!」ボタンを付けてみた。

正確にいうとこちらの日記にもFacebookのボタンを付けた。というかこちらの方ははてブへのリンクも旧式だったしTwitterでつぶやくボタンもなかったので、それらも含めて一新した。

はてなダイアリーでのボタンの設置方法だが、管理画面の[設定]>[記事の設定]をクリックして進むと上から2つ目のエリア「表示設定」の真ん中辺りに「記事共有ボタン」というのがあって、そこで「はてなブックマーク」「Twitterに投稿する」「Facebook『いいね!』」それぞれのボタンの表示、非表示が選べる。

これで主要ソーシャルメディアへの投稿ボタンを各記事に付けることができる。

さて、はてなでは記事にはてなキーワードの本文を引用できる「キーワード紹介ツール」も追加された様なので、「Facebookとは何ぞや?」という方のためにはてなキーワードから紹介してみる(テストも兼ねてね)。

Facebook

Facebookとは編集


今回の記事でははてなダイアリーの新機能を紹介したが、2/28より90日以上更新のないはてなダイアリーに広告を掲載する様になるそうである。まあ、カネも払わず何も書かずに放置されているブログにディスク領域を使用させてやってんだから広告ぐらいタダで載せろという意味だろうが、更新されてないブログに広告を載せても大して効果がなさそうな気がする。塵も積もれば山となるということなのだろうが。
他のレンタルブログスペースは無料コースだと強制的に広告が入るのが常だが、はてなダイアリーは無料でも強制広告が入らないのは良心的だよね。本当に儲かってるのか心配だが、ユーザー数が多いので利益率が低くてもどうにかなってるんだろうな。

というわけで強制広告回避のために記事を書いてみました(半分ぐらい冗談)。

XOOPSでポータルサイト風にしてみた

 独自ドメインの方のページ(http://www.smart-boy.orgポータルサイト風にしてみた。

 XOOPSというCMS(コンテンツマネジメントシステム)を入れたのだが、文系のためのXOOPS入門というサイトを参考にインストールや設定をしてみた。ちなみに私は大学は理系なんだけど。しかもバリバリの理系大学だった様な気が(笑)。まあ、入門ページとしては非常に分かりやすくて重宝した。

 私の使用しているレンタルサーバCentOS 5 を使用しているが、PHPはもともと入っているものの、MySQL が入ってなかったので、そのインストールからはじめた。一番苦労したのが PHPMySQL の連携だった。php-mysql というモジュールがなかなかまともにインストールされてくれない。 yumLinux用のリポジトリ管理ツール)を使っていて、各モジュールのインストールは割と楽なのだが、依存性の問題が出てきて試行錯誤の末ようやくPHPMySQLの連携ができた。php-commonを一旦バージョンアップしないとまともにインストールされないモジュールもあったし。ちなみにMySQLをWeb上からGUIで管理するツールである phpMyAdmin というツールも yum でインストールできるようになったみたいだ。例えばこのページなどを参照。一旦入れたのだが、PHPMySQLの連携がうまくいかない問題の試行錯誤中に設定ファイルを初期化しちゃったらしく、こちらはまだ使えてないのだが(苦笑)。


 それで、肝心のページの方であるが、まだ作ったばかりでかなりショボいです。これは謙遜して言ってるわけではなく、本当にそうだ。元からPHP等のCGIでつくっていたページにはリンクを張ってるが、ポータルサイトの一部というよりは別ページだし。これから色々と試してみる予定。当面は実験的な場所となると思うが、掲示板ぐらいはXOOPS上で作ってみたいな。それよりまずはデザインをどうにかしないと(^^;