ezorisu-web

このページの一番下にフッターエリアがあります。最近のフッターは、いろいろ情報を詰め込んでいるものも多くなりましたが、このサイトではシンプルにコピーライトだけ。
スッキリ見せたいので、フッターは少し色を変えて、真ん中に簡潔なコピーライト。

この真ん中に文字を表示するというのを考えてみました。文字を特定のエリアで縦方向の中央寄せにする。

左右の中央に合わせるのは、簡単。次は上下の中央合わせ。ここで、ハテ？と行き詰まってしまった。
今まで、自分のサイトならコピーライトの文字数も行数も自分で決められるから、それに合わせて調整するのは比較的簡単でしたが、
一応フリーテーマで公開するものを作ろうと思ったら、これがなかなか難しい。
使う人によって一行なのか複数行なのかまちまちだろうから、どちらでも対応できるようにしておきたい。
さて、どうしたものか。

調べてみると、ヨモツネットというサイトの「CSS で簡単に上下中央揃えを実現する」という記事の方法が使えそうです。
要は、コピーライトを入れる要素にdisplay:table-cell;を指定することによってテーブルセルと見なす。そうするとそのセル内ではインライン要素である文章もvertical-alignを使って中央合わせが出来るようになる。なるほど、簡単。

とにかく、フッター用の標準のパターンとして考えてみた。

一行の場合

二行の場合

HTML<div class="footer-sample">
<div class="copyright-sample">コピーライトの例です。コピーライトの記号と年数、著作者名を入れます。</div>
</div>

“footer-sample”というクラス名のdivのなかに”copyright-sample”というクラス名を付けたdivを入れて、その中に実際のコピーライトを書きます。

CSSdiv.footer-sample {
    background-color:#333;
    height:70px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

div.copyright-sample {
    color: #ccc;
    font-size: 12px;
    line-height: 1.2em;
}

フッターエリアを黒っぽく塗りつぶして、とりあえず高さは70px、幅は500px。
display:table-cell;を指定をしてフッターをテーブルセルとみなしてしまう。あとはテーブルセルとして中央寄せを設定してあげる。

一般的なブラウザーだとこれだけでOK。シンプルでスッキリ。
ところがいつものように、IEだけは、display:table-cell;に対応していない、と。
いいかげん、IEなんか使うのやめようよと言いたいのをぐっとこらえて、IE用も。

HTML<div class="footer-sample">
<!--[if IE ]>
    <span class="dummy-h"></span>
<![endif]-->
<div class="copyright-sample">コピーライトの例です。コピーライトの記号と年数、著作者名を入れます。</div>
</div>

IEで開いたときだけ、”dummy-h”というクラス名を付けたspanを読み込むようにして、IEの場合はここで行数の違いを調整できるようにする。

CSSdiv.footer-sample {
    background-color:#333;
    height:70px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

div.copyright-sample {
    color: #ccc;
    font-size: 12px;
    line-height: 1.2em;
}

*:first-child+html div.copyright-sample {
    display:inline;
    zoom:1;
    vertical-align:middle;
}

*:first-child+html div.footer span.dummy-h {
    display:inline;
    zoom:1;
    height:100%;
    vertical-align:middle;
}

* html div.copyright-sample {
    display:inline;
    zoom:1;
    vertical-align:middle;
}

* html div.footer span.dummy-h {
    display:inline;
    zoom:1;
    height:100%;
    vertical-align:middle;
}

*:first-child+html はIE 7用のハック。* html はIE 6用のハック。
IEには、display:table-cell; が効かないので、別の方法で同等の効果を与えています。
（これに関しては、上記のヨモツネットさんの記事がたいへん参考になります）
同時にダミー要素の span に height:100%; 高さを与えて、複数行でも対応できるように。この辺のことはネットをあっちこっちあさっていて、どこかで見た方法ですが、いろいろ試しながらやっているうちに、どこで見たのかわからなくなってしまいました。

一行の場合（IE対応版）

二行の場合（IE対応版）

IEの人もちゃんと表示されてるかな？

WordPress（2.7）の投稿作成画面は、「ビジュアル」と「HTML」の２種類あります。
ごくごく普通の写真と文章で構成されたブログだと「ビジュアル」を使えばほぼ見た目通りに出来上がると思います。ところが、ちょっと複雑な構成にしたいなと思って、「HTML」で書き込んでから確認するために「ビジュアル」画面に移り、もう一度「HTML」に戻ったりしていると、段落やら改行が思わぬところで入って、とんでもないことになってしまいます。
そもそも「HTML」とうたいながらも画面上で改行したり１行あけて書いたりすると、ご親切にも<p>や<br>を自動的に入れてくれる。
せっかく「HTML」といってるんだから、そこまでしてくれなくてもいいのに。特にcodeタグなんか書いていると、全然思ったように表示してくれなくて、</code>の位置が勝手に動いてしまったり、どうしたもんだろうと思ってました。

で、わからないときは即Google。
やっぱり同じように不便を感じていて、しかも対策まで考えてくれてる人がいました。
Masaさんという方が「WordPressのエディタとの付き合い方」という記事を書いています。
WordPressのソースの改造など、この辺になると私にはちんぷんかんぷんですが、wp-includesのdefault-filters.phpをちょいといじるとpタグやbrタグの挿入を完全に停止できるみたいです。書いてあるとおりにやってみました。

具体的には、wp-includesのdefault-filters.phpを開いて、

PHPadd_filter('the_content', 'wpautop');
add_filter('the_excerpt', 'wpautop');

という2箇所を検索して探し出し、頭に「 // 」を書き込んでコメントとして無効化してやる。
こんな感じ ↓

PHP// add_filter('the_content', 'wpautop');
// add_filter('the_excerpt', 'wpautop');

もともとエディタでpタグやbrタグを書込みながら記事を作成して、それを投稿作成画面に貼り付けていたので、この方がやりやすい。感謝、感謝です。

あ、それから管理画面の「ユーザー」タグでユーザー名をクリックし、プロフィールと個人設定画面でビジュアルエディタを使用する、しないを選べます。最初からビジュアルエディタがいらない人は、チェックを外しておけばいいです。

ブラウザのアドレスバーとかタブの頭に付く小さいアイコンです。
←アドレスバーに表示されてるかな。対応していないブラウザもあるみたいだけど。
作り方をメモしておきます。

まずは、16×16 サイズの画像を作ります。小さいから複雑なものを作ろうとしてもきれいに見えません。大きめの画像を作ってから縮小する方法もありますが、あまりおすすめしません。どうしてもつぶれてしまって何の絵なのかわからなくなったりします。それならいっそ、最初から16×16 サイズで作っちゃった方がいいと。
ブックマークなどで他のサイトと一緒にたくさん並んだときに、一目で見分けられるようにシンプルで特徴的なデザインにします。
画像が出来たら GIF か JPG 、あるいは PNG で一旦保存します。

次にこのファイルを favicon に変換します。今は大抵のブラウザが GIF でも PNG でもファビコンとして認識してくれるようですが、IE は、favicon 形式の ICO フォーマットじゃないと認識しないので、ICO に変換しておきます。
変換方法については、ソフトやネットサービスなどいろいろあるようですが、私は Favicon Japan というサイトの「Favicon自動生成」を利用させていただきました。非常に簡単で便利です。
アップロードして作成するボタンを押すだけ。ファイル名.ico の拡張子付きでダウンロードできます。

今度は、この favicon を自分のサイトにアップしてから、HTML の head 部分に

HTML<link rel="shortcut icon" href="アップした場所/ファイル名.ico" />

を書き込んだら終わり。

と、ここまで来ていまさら気が付いたんだけど、Firefox の Google ツールバーからブックマークを開いてみると、favicon が表示されていない。
ブラウザに入っているブックマークでは、Firefox も Safari も Opera もみんなちゃんと表示されてるのに、Google のブックマークだけ出てこない。
よく見ると、他のサイトでもGoogle ブックマークで表示されているところと、されていないところがあるみたいだ。なんでだろ？
また謎が増えた。