さりげなく横1024ピクセルの大きめ画像を配置してみるテストだよ。

長女猫のマイ。

次女猫の野々。

三女猫のNana。

ブログのサイドバー領域に、ブログに関するツイートを表示するようにしてみたよ。

表示イメージはこんな感じ。この例を見るよりも、実際にブログのサイドバーを確認する方が分りやすいかも。

関連ツイート表示には、「TwitStatus」で生成したブログバッジを利用しています。

検索単語を「hide10.com -hideto」と設定することにより、ブログに関連する自分以外の発言を表示するよう工夫してみました。

で、これに伴いサイドバーに表示していた「最近のコメント」を廃止しました。時代の流れなのか、あまりコメント欄が使われなくなってきてるのよね～。

今後はコメント欄やトラックバックの廃止も見据えて、うまいこと時代の流れに乗っていきたいなーと思っています。

黒いところは背景が透けて見えます。実際にブログ最上部にあるロゴを見てもらうと、イメージが良く分ると思います。

ロゴ制作には「Supalogo – create nice logo」というWebサービスを利用しました。

うちのロゴは、こんな感じのパラメータで出来てます。

ついでにブログデザインも微修正。かなり最終イメージに近づいた雰囲気です。

あとは使いながら細部を詰めていく予定ですよ。

当ブログのデザインを変更しました。

青を基調とした色使いにしたことと、サイト全体を2ペインにしたのが大きい変更かな。

あとはトップページで、各記事が個別のブロックに見えるよう配置を工夫してみました。

参考までにスクリーンキャプチャはこんな感じ。

左メインブロックに横640の画像を置けるスペースを確保すること、あとはサイドバーがメインブロックを邪魔しないことを意識してデザインしました。

サイドバーにこっそり広告を増やしたりもしました。もしサイドバーがウザイ用だったら、「最近人気の記事」以外はタイトル部をクリックすると折りたためるようになってます。良い感じに畳んで広告などを非表示にしてください。

デザインはまだ完成形ではなく、しばらくはボチボチ調整していくつもりです。なんぞ表示がおかしいなどありましたら、随時ご指摘頂けると助かります。

さてさて、次はロゴを変更しよっかな？

iPhone/iPadで、「ホーム画面に追加」したときに参照されるアイコン「apple-touch-icon.png」を設置しました。

通常、iPhone/iPadから「ホーム画面に追加」すると、サイトのキャプチャ画像をベースにしたアイコンが表示されます。

しかし、サイトのルートディレクトリに「apple-touch-icon.png」が設置してあると、こちらが優先的に使用されるそうです。

当サイトでは、faviconやfacebookページアイコンに使用している「ひ」マークを、150x150pxのPNG画像に変更し、それを「apple-touch-icon.png」としました。

どんな感じか気になる人は、さっそく「ホーム画面に追加」してみると良いよ！

その他詳細は『iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | Web担当者Forum』に良くまとまっていますので、興味のある方はご参照あれ。

個別記事の上部に、邪魔なぐらいデカデカと表示されているはずです。

「なんだなんだ？」と思いの方は遠慮なくクリックして、募金してくると良いよ。

バナーは「漫画　torrent　download: 東北地震太平洋沖地震　募金　バナーのソース」で配布されているソースを利用させて頂きました。

自分はデザインなど出来ませんので、こう言う形で配布してもらえるととても助かります。ありがとうございます。

ブログに掲載している画像に、フチあり写真のように見せる効果を掛けてみました。

実例はこんな感じ。

IE以外のブラウザなら、画像の周囲に白枠があり、更にその外側に灰色のボカしが掛かって、昔懐かしの「フチあり写真」っぽい感じに見えるはずです。

この効果を実現するため、以下のようなCSSを使用しています。

div.textBody a img{-webkit-box-shadow: gray 0px 0px 5px 2px;border: 7px solid white;}
div.textBody a:hover img{border: 7px solid #850844}

と、誇らしげに書いていますが、該当コードは「blog::941」から丸パクリしました。お陰で最先端のスクロールブログ風味が醸し出せたのではないかと思います。

コード借用に関し、この場を借りてお詫び／お礼致します。

ついでと言っては何ですが、またまた文字サイズを大きくしました。加えて文字の色を少しだけ白っぽくしました。フィーリングのハナシなので調整が難しいけど、前より読みやすくなってると嬉しいな。

なにか問題があるようでしたら、コメント欄などでご指摘頂けると幸いです。

自分のブログ記事に、色々な関連情報を表示するブログパーツ「zenback」を使いはじめました。

既にお気づきの方もいらっしゃると思いますが、個別記事本文のちょっと下にあるブロックの「関連記事」「関連リンク」「Twitter」「はてなブックマーク」がzenbackによる表示です。

記事に関連したツイートを表示する「Twitter」ブロックのデザインが、とても「それっぽい」のが気に入っています。

2週間ほど前からテスト運用していたのですが、ようやくブログにマッチする感じに仕上がったので、この度の使用宣言と相成った次第。

現在パブリックベータと言うことで申し込めば誰でも使えるようですし、簡単に自分のブログの「まとめ」が欲しいと思っていらっしゃる方は試してみてはいかがでしょうか？

新しい「はてなブックマークボタン」がリリースされたようなので、さっそくウチのブログでも対応してみました。

遠慮なくお試してくださって結構ですので、光の速さで「はてブ」すると良いよ。

設置方法メモ

新はてなブックマークボタンの設置方法をメモっておきます。

詳細な使い方は「使いやすくなりました! はてなブックマークボタン」を参照して貰うとして、WordPressの個別記事に貼り付けるなら、以下のようなコードを書けばいいと思います。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title_attribute() ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

facebookやTwitterの公式コードと比べると、はてブボタンが一番「美しい」と思いました。こういうトコロはサスガだな～。

ボタン形状の変更

「data-hatena-bookmark-layout=”standard”」の”standard”部分を書き換えると、ボタン形状を変更することが出来ます。

はてブボタン形状例

ボタンタイプ	表示例
standard
vertical
simple

WordPress3.0リリースに合わせて！と言うわけではないのですが、久々にブログの見栄えを調整したよ。

一番大きな変更は、「LinkWithin」の導入かな？このスクリプトを導入したことにより、記事の下部にサムネイル付きの関連記事が表示されるようになりました。

ついでにブログのロゴも変えました。いくつかのロゴ作成サイトをテストした結果、「Cool Text: ロゴ及び画像ジェネレーター」でGlowing-Steelタイプのロゴを採用することにしました。

それから、これまで以上に文字のサイズを大きくし、行間も広くしました。加えて折り返し文字列幅を縮めています。一般的なブログに比べると、二回りぐらい大きな文字を採用してると思うよ。

あとは上部日付周りにあった雑多な情報を削除したりとか、下部のソーシャルボタンに「コメント」を追加したりとか、コメント欄を少しでも入力しやすく改良したりとか、細々と手を入れています。

もし以前より使いにくいなどのクレームがありましたら、遠慮なさらずドシドシ指摘して頂けると有り難く思います。

ブログ本文中のリンクテキスト部分に、画像による下線を付けてみたよ。

これまではデザイン的な面を考慮して「下線無し」でやってたんだけど、やっぱりリンク表示が判別しにくいなーと思ってたんだよね。

そんな中、「しらさかブログ」を読んでたら、リンクテキストに「鉛筆っぽい下線」が引いてある。

オレが欲しいのはこれだ！と思って、やり方をパクって見ました。パクってスイマセン！

リンクに画像の下線を引く方法

上記ブログのソースを見たり、Googleさんに尋ねてみた結果、リンクに「鉛筆っぽい下線」を引くには、画像で下線を引けば「ソレっぽい」と言うことが分かりました。

「鉛筆っぽい線の画像」の作り方

まずは「鉛筆っぽい線の画像」を用意します。

とは言っても、さすがに画像までパクって来るのは罪の意識があったので、「ペイント」を使って自分で鉛筆っぽい下線画像を作ってみました。

ウマイやり方が分からなかったので、完全我流の作り方だけど、200×10のキャンパスを作って、フリーハンドで太めの横線を引いて、ソレを200×3に縮小して「鉛筆っぽい下線」を演出してみました。なんか一応ソレっぽくない？

出来た画像は「underline.gif」みたいな名前で保存して、サーバの見えるところにアップしてください。

作成した画像をリンクテキストに付与

作成した画像を使って、リンクテキストに下線を付与します。

ウチのブログでは下記のようなCSS定義を行いました。

.textBody a{
	background-image:url(http://www.hide10.com/images/underline.gif);
	background-position:bottom;
    background-repeat:repeat-x;
}

これでtextBody中のaタグに、underline.gif を使った任意長の下線が引かれます。やったね！

真似したかったら画像ファイルも持ってって良いので、ドンドン真似すると良いと思うよ！

そのうちRGBも出してくれるんじゃないかと思うんだけど、その前に勝手に近似値を洗い出してRGB値を算出して見たよ。RGBは色範囲がせまくて厳密な「同じ色」ではないんだけど、1つの目安にはなるんじゃないかな？

近似値は「カラーユニバーサルデザイン推奨配色セット」に掲載されている色を拾い出した値（ピッカー）と、色出し名人でマンセル値をRGB化した2種類を載せています。

自分で作っておいて何だけど、ちょっと色の組み合わせが微妙かも。本職推奨のRGBを待った方が得策かも知れません。

アクセントカラー

ベースカラー

無彩色

実はFirefoxには代替テキストを表示する機能はない。

Firefoxでも代替テキストを表示する機能はあるよ。画像を非表示にすると、画像が表示されるべき位置に代替テキストが表示されます :-)

もしくは、ちょっと代替テキストを確認したいだけなら、画像のプロパティを見れば「代替テキスト」欄に書いてあるね。まぁでも普通はそんなの面倒だろうし、もしどうしてもalt属性を見たいなら、Popup ALT Attributesのようなプラグインを導入するのが無難だろうね。

ただね。そもそも論として、もし本当に「画像の説明」を入れたいなら、altではなくtitle属性に記入すべきです。内容を考えるのが面倒なら、altとtitleが同一でも良い。title属性なら画像に限らず色々な要素に説明を入れられるし、その説明は大半のブラウザでツールチップ表示される。みんなもっと積極的にtitle属性を使うべきです。

ファイルの命名規則

“main.css”や”style.css”などの安易なファイル名を使用することを避け、ファイルの命名規則は以下のルールに従ってください。

style_all.css

すべてのブラウザとプラットホームに適用されるスタイルシートファイル

style_screen.css

全体レイアウトを定義するメインのスタイルシートファイル

style_screen_IE7.css

インターネット・エクスプローラー7専用のレイアウトスタイルシート。実際にIE7専用のスタイルシートが必須であると言うわけではなく、ファイル命名規則の例であることに注意してください。

style_screen_lt-IE7.css

IE7以前のIE用レイアウトスタイルシート。

style_print.css

印刷用のスタイルシート

上記は一例に過ぎず、必要なら該当するブラウザ、該当する環境用のファイルを作成します。例えばIE6用ならstyle_screen_IE6.cssを作成し、モバイルブラウザ用にはstyle_handheld.cssを作成してください。

章を分ける

メインデザインを受け持つ style_screen.css は機能によって章を分けてください。例えば「表示位置定義」、「文字装飾定義」、「レイアウト定義」、「フォーム」などに分けます。

加えてスタイルシートファイルの先頭に目次を作成します。目次を見て修正位置の目処が付けば、検索（Ctr+F、もしくはMac+F）機能を使って目的の章に移動できるはずです。

/* The stylesheet is divided into sections :
 * 1. Positioning
 * 2. Typography
 * 3. Layout Styles
 * 4. Forms
 *
*/

/**  = POSITIONING  **/
body {
	font-family: Arial, Helverica, Verdana, sans-self;
	font-size:62.5% ;
	}

章立ての一例を以下に示します。

表示位置定義

ヘッダー、メインコンテンツ、サイドバー、およびフッターの基本的なレイアウトを決定します。最初は大まかな定義で構いません。

文字装飾定義

ヘッダー(h1/h2など)、Pタグ(パラグラフ)のスタイル、リスト構造、引用（blockquotes）、および文章の装飾を定義します。

レイアウト定義

表示位置や文字装飾は定義済みなので、ここではサイトレイアウトの詳細を定義します。

長くなりやすいセクションなので、必要によって定義を小分けしてください。適切な階層構造を保てば、レイアウト定義を行いやすくなるはずです。

その他のセクション

例えばCMS特定のコードなど、必要ならどんどんセクションを増やします。これにより、後日CSSのデバッグが必要になったときにラクができます。

インデントと階層構造

最上位のエレメントはインデントせずに記述し、そのエレメントの子要素はインデントして記述します。

#sideber .subscribe {
	margin: 20px 0 0 0;
	display: block;
	overflow: hidden;
	height: 1%; }

	#sideber .subscribe ul { }

		#sideber .subscribe ul li {
			float: left;
			padding: 0 0 0 10px ; }

			#sideber .subscribe ul li a {
				padding: 4px 0 4px 30px
				display: block;
				width: 120px; }

#sideber .search {
	overflow: hidden;
	margin: 10px 0 35px 0;
	display: block;
	height: 1%; }

インデントにより見た目が美しくなるだけでなく、問題がある場合に修正箇所を発見するのが容易になります。例えば検索ボックスに問題がある場合、関連するコードは「レイアウト定義」の「サイドバー階層」にあります。適切な階層構造を保てば、あなたが探したい場所を見つけ出すの簡単になります。

空白やタブによりファイルサイズが肥大化しますが、実際に使用するCSSファイルを圧縮してしまえば問題になりません。

アルファベット順にせずカテゴリで分ける

メンテナンスを容易にするために、CSSプロパティをアルファベット順にすることを提唱する人もいますが、私はお勧めできません。

例えばこれを見てください。

selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;

padding: 10px;
margin: 5px;

background: #000;
border: 1px solid #222;
}

上記では文字装飾定義、マージン定義、カラーリングがブロック分けして定義されています。

でもこれがアルファベット順だとどうなるでしょう？

selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}

お分かりのように、CSSの読みやすさが格段に低下します。私は普段、最初にポジションプロパティを定義し、次に文字列装飾を定義し、最後にスペーシングやその他の定義を行っています。

まとめ

ここまでを読んでお分かりになると思いますが、そんなに複雑なことは行っていません。こんな簡単なことでも、最前線に立つ開発者達にとっては大きな助けになることでしょう。美しいスタイルシートを保つことが、コード最適化への第一歩です。

当ブログで使用しているWordPressテーマ『wp.Vicuna』は、デザイン性が高く且つXHTML1.0 Strict DT準拠やSEOにも考慮した素晴らしいテーマなんだけど、残念ながらサイドバーウィジェット（widget）に対応していないんだよね。

ウィジェット対応などカスタマイズ性を向上させた別テーマ『wp.Vicuna Ext.』なんてのもあるんだけど、これからExtに乗り換えるのはちょっと大変。そんなワケでwp.Vicunaのサイドバーをウィジェット (widget)追加に対応させてみたので、手順をメモっておきます。

やること

サイドバーのウィジェット対応については「Widgetizing Themes – WordPress Codex 日本語版」に書いてあるんだけど、英語を日本語訳したまどろっこしい文章で理解するのに時間が掛かりました。

で、ガッとまとめるとやることは2つだけです。

1. sidebar.phpでdynamic_sidebar関数を呼び出し、ウィジェットを表示させる。
2. functions.phpでregister_sidebar関数を呼び出し、ウィジェットの表示形式を定義する。

以降、詳しい手順について説明していきます。

sidebar.phpの編集作業

ウィジェットを表示させたい場所に以下の行を挿入します。ウチのサイトでは「<dl class="navi">」の直後に追加しています。

< ?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar(); ?>

この内容を日本語で言うと「もしdynamic_sidebar関数が用意されていたら、dynamic_sidebar関数を実行してね」になります。

WordPress Codexでは「既存のサイドバー」と「サイドバーウィジェット群」のどちらかしか表示しないようにしていますが、ウィジェットって突っ込んだカスタマイズが出来なくて使いにくいんだよね。用意されたモノを使うだけならお手軽で良いんだけど、おいらは基本的に自分でコードを書いて細部までカスタマイズしたい。

だからウィジットを表示させつつ、自前のサイドバーも表示するようにしました。この方法だと自前サイドバーとウィジェットで表示内容が被ることがあるけど、その場合はsidebar.phpの該当箇所を増減させて対応してください。

functions.phpの編集作業

functions.phpの良い感じの場所に以下の内容を記述して、ウィジェットの表示形式を定義します。うちでは「load_textdomain云々」書いてある下あたりに書きました。

if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'before_widget' => "",
		'after_widget' => "\n\t\t</dd>\n",
		'before_title' => "\t\t<dt>",
		'after_title' => "</dt>\n\t\t<dd>\n\t\t\t",
    ));

このあたりがウィジェット対応のキモかな。register_sidebar関数の詳細は『WordPress Widgets Api/register sidebar « WordPress Codex』に英語で書いてある。これを超訳すると各ウィジェットの前後に入れるHTMLコード類を定義しろってこと。

で、Vicunaのサイドバーは「dl,dt,dd」を使った定義リスト表示を行っているので、ウィジェットの表示もそれに併せています。register_sidebar関数に渡してる値は、変数名を見ればなんとなく想像付くでしょ？要は「タイトルの前後に何て書く？」とか「ウィジェットの前後に何て書く？」ってのを渡して上げれば良いだけね。

ちなみにfunctions.phpってのはプラグイン用の関数群みたいなモンで、WordPressのロード時に呼び出されるらしいよ。

実際にウィジェットを表示させてみる

管理画面→外観→ウィジェットを開いて、使いたいウィジェットを追加してください。必要なウィジェットを追加しおわったら「変更を保存」ボタンを押すことを忘れずに。

最後に実際にサイドバーを表示させて、思ったように表示されているか確認してください。なんかダブったり表示が崩れたりするかも知れないけど、sidebar.phpやCSSを調整すればきっとうまく行くと思うよ！

当サイトで使用しているHTML色の一覧を『Hinemosu Color Pattern』で公開したよ。現在も更新中なので見る度に少しずつ変わってるかも。

CSSで定義している色属性をgrepしてsortしてuniqして、それをHTMLのテーブルで一覧形式にしてからDropboxのshare フォルダーに配置しただけなんだけどさ。こんな感じでまとめておくと、全体の印象から外れている色が分かってちょっと便利だった。

それとDropboxの新しい使いを覚えたのが収穫。エディタで開いているローカルファイルをセーブすると、数秒でDropboxの公開ファイルが最新に置き換わる。その公開ファイルをブラウザで開きオートリロードをセットしておくと、色変更が直ぐに反映されて便利だったよ、という体験談を書きたかっただけのエントリです。

320を超えるミニアイコンが自由に使える！「Mini Pixel Icons」を使ってみたよ。

アイコンは全て14×14ピクセルで、どれも可愛くカラフルです。うちのサイトにもチョコチョコッと配置してみましたが、少しは見た目が良くなったかな？

「Mini Pixel Icons」を利用する場合、10個を超えない場合はフリー、10個を超える場合はN.Design Studio.にリンクを張る、リンクが張れないなら$30払う、という三段階の利用規程になっているようです。

このアイコンも良い感じなのですが、少し大きいアイコンも欲しいので、もうちょっと探してみようと思います。

うわ、タイトルバカなげぇ。

そんなことはさておきAnother HTML-lint gatewayで『<SCRIPT>～</SCRIPT> 内にコメントを書くと、本当にコメントとして扱われます。』と怒られるので、この問題に対処してみたよ。

対処と言っても難しいことはなく、指摘の通りコメント定義を外しただけ。対応前と対応後のソースを並べるとこんな感じです。

対応前：
<script type="text/javascript">
<!--
FoldNavigation('AccessTop','on',false);
-->
</script>

対応後：
<script type="text/javascript">
FoldNavigation('AccessTop','on',false);
</script>

「なんだそんなの、さっさと直せば良かったじゃない」と言われると、いやまぁその通りなんだけど。一応なんでこうなってたのかをメモ書き。

元来はHTML4のスクリプトをサポートしないブラウザで、スクリプトコードがテキスト表示されるのを防ぐテクニックとしてコメントアウトしてたのね。スクリプトに対応していればコメント開始、終了のコードが無視されてスクリプトが動くし、スクリプトに対応していなければコメントとして非表示になるというウラワザ。これ考えたヤツは頭が良い。

でも今はXHTMLで記述しているので、スクリプトタグ内でも「コメントはコメント」として扱われる。だから厳密にXHTMLを解釈するブラウザだとスクリプトが動作しないワケよ。WindowsのIEやFirefoxなら良い感じに動いてくれるけど、そろそろ厳密派のブラウザが出てきそうな気配も感じる。

そんな世の情勢を機敏に感じ取り、今回思い切って対応してみたワケです。当ブログオーナーの時勢を読み取ろうとする不断の努力を分かってもらえましたか？分かってもらえれば良いんですけどね！

そんな感じで軽く一人ギレしてしまいましたが、お暇ならトップページのサイドバー区切りをクリックして、パッタンパッタン遊んでみてください。

Greasemonkeyで色んなScriptを試してたら、AutoPagerizeが便利すぎて鼻水吹いた。

AutoPagerizeは検索結果の表示で「次へ」がある場合、自動的に「次のページ」を継ぎ足して表示してくれる。だから見る側は下にスクロールするだけで、次々と検索結果を見ていけるわけ。

さらにスゴイのは継ぎ足しできるのが検索結果だけじゃなく、mixiやら各種ブログやらニュースサイトやら、もう色んなページがスクロールするだけで「次のページ」が表示されちゃうコト。これはwedataにAutoPagerize用の公開データベースが設置してあって、ここに色々なページの書式が登録されてるお陰で、あちこちのページが「スクロール可能」になってるみたいなのね。

で、まぁデータベースが公開されているので、ウチのページの書式も追加して自動スクロールに対応してみました。既にAutoPagerizeをお使いの皆さまは、下の方にスクロールして「おっ」と言ってやっておくんなさいまし。FirefoxもGreasemonkeyも使ってるのに、まだAutoPagerizeを使ってないなら、ちょっと試してみて「おおっ」っと言ってみてください。おいらはこのスクリプトのお陰で、完全にFirefoxに乗り換える決心が付いたぐらいで、とても便利なものですよ。

参考リンク：AutoPagerize Wiki: Home [公式]

参考リンク：AutoPagerize – Userscripts.org （”Install this script”でダウンロード）

一般ピーポーには意味不明なタイトルで申し訳ないが、CSSデザインを修正してmax-widthを960pxにしました。いままでは70em指定だったので、画面サイズが十分に広ければ、少し横に広がって見えているはずです。加えてpタグにmax-widthを60emにする制限を追加。これにより文字を小さく表示している人でも、ある程度のところで折り返して表示されているはずですよ。

横幅を広げたのは、世の中の画面サイズが拡大している気配だから。もうちょっとだけ広げても、罰は当たらないんじゃないかな～と。pタグにmax-widthを追加したのは、文章が横に広がりすぎて、折り返し行で文を見失いそうな気がしたから。なんとなーくでやってみたので、もしかすると悪い方向に行っているのかも？

書き添えると、max-widthの指定はIE6には効果がないようなので、デザインが変わってみるのはIE7やFirefoxを使ってる人だけですよ。あしからずご了承下さい。

JavaScriptがオフだと検索結果が表示されないと指摘され、AdSense検索を調べ直してみたけど、サイト内に結果画面を表示するためにはJavaScriptが切り離せないみたい。

仕方がないので、結果画面にコメント付きでWordPressの検索機能を追加することで緊急回避を発動。しばらくはこれでお茶を濁す予定です。

どうも文字が小さすぎる気がしたので、CSS定義を変更して文字サイズを大きくしてみた。本当はもう一回り大きくしたいんだけど、とりあえずはこれぐらいで勘弁してやるか。どこか表示が崩れていたら、教えて貰えるとありがたく思います。

ついでにトラックバックの説明文で、言及リンクを要求しておいた。意見が分かれるところだろうけど、トラックバック先に言及のないトラックバックは、単なるトラフィック泥棒に思えて仕方がない。日記出身者としては、言及リンクが普通の行為だと思うワケよ。

その他にも細々と。まず検索窓を枠外に追いやってみた。まだこの配置で納得出来ていないので、また思いついたら直すかも。

それとサイドバーの開閉初期値は、開いた状態を基本にしてみた。このままだとサイドバーが長すぎるので、月別アーカイブを最近12ヶ月に制限。それより古いのは「過去日記のアーカイブ一覧」に追いやってみたよ。

右上に「Googleカスタム検索」の検索ボックスを設置してみたよ。

以前はカッコイイ使い方が分からなくて挫折したんだけど、久々にチャレンジしたら自ドメイン内の特定ページで検索結果を表示することに成功。予想以上にサクサク風味だし、思い切って常設することにしました。お暇な方は何ぞ適当に検索してみて、どんな風に動くのか確認してみてくださいませ。ま、何のかんの言って健作君からAdsenseを巻き上げたいだけなんだけどな！

ここからは検索君向けの簡単なアドバイス。と言っても難しいことはほとんど無く、Google AdSenseの「AdSense 設定」から「検索向け AdSense 」を選んで、自分の好みに設定していくだけ。「選択するサイトのみ」で「http://www.hide10.com/」を指定、オプションキーワード無し、サイト言語は日本語、ドメイン地域は日本、サイトコードはUTF-８、チャンネルはsearchBoxって名前にした。デザインはウォーターマークの20文字。「検索結果ページ」に自分のサイトを選び「http://www.hide10.com/google_search/」と指定。検索結果幅は800px、広告位置は右、パレットはseasideを選択。検索エンジンの名前は「hide10.com 検索エンジン」とそのまんま。

ここまでダダーッと入力すると「検索ボックスのコード」と「検索結果のコード」ってのがもらえます。ボックスコードは検索窓を表示したいページに貼り付けるものでアチコチに好きなだけ貼り付けてください。

「検索結果のコード」は結果を表示するHTMLファイルに貼り付けます。 さっき指定した「検索結果ページ」で表示されるファイルにペタッと貼り付ければOKだよ。うちだと「http://www.hide10.com/google_search/index.html」を作成して、それっぽくHTMLを書き上げたあと、body部分にペタッと貼り付けてあります。設置した検索ボックスで検索して、検索結果ページに結果が表示されれば成功さ！そんなに難しくないから、ちょっとチャレンジしてみると良いよ。

ブログタイトルをロゴ画像に差し替えたよ。ついでにインデックスやらシングルページのデザインを変更してみました。何かおかしなところがあったら、教えてくださると助かります。

変更ついでにvalidatorやらhtmllintで文法を見直し、大きなエラーをつぶしておきました。文法的に正しいって気持ちいいな！

目玉は「日付は一度だけ表示」と「長年表示機能」の追加。これはCSSじゃ実現できないので、テーマを大改造。phpなんて知らないので、ソース見ながらコピペで実装。何度もエラーに悩まされたよ。ひとまず完成を見たけど、コードが正しいのか不安だ…

< ?php if ($get_data = the_date('Y年m月d日 (D)','','',false)) : ?>
			<div class="date">< ?php echo $get_data; ?>[<a href="http://www.hide10.com/?year=0000&monthnum=<?php the_time('m') ?>&day=< ?php the_time('d') ?>">長年機能</a>]</div>
< ?php	endif; ?>

画像やらテーブルやら、そろそろホームページに画像を表示させても誰も文句言わないんじゃないか？テーブル使ってレイアウト組んでも良いんじゃないか？と思い始めたので、これ見よがしに画像を使いまくっている今日この頃。使いどころや配分のお試し中なので、しばらくは画像乱舞が続くと思います。

もうひとつ、考えていることを文章にするのは意味があるんじゃないかと思い始めた。おいらの頭の中で考えていることは、十中八九他人に役立たないことばかり。だけど他人の役に立つかどうかは他人にしか判断できないんだよね。検索エンジン経由で見つけてもらうには、まずは書かないと始まらない。

そして伝説へ。この日記は「もうちっとだけ続くんじゃ」の精神で細く長く続けていきたい。そのためのモチベーションを保つため、なるべく多くの人に読んでいただきたい。そんな中、昨今のインターネット情勢を鑑みるに、RSSに対応しないことには話しにならないと思う。今年中にはRSSを配布するようにしたいな。

Sleipnirのバージョンを2.55に上げたら、おいらの日記もFaviconが表示されるようになった！

調べてみたら2.49からlinkのFaviconを見てくれるようになったらしい。何だかちょっと嬉しいな^^

ついでに日記のデザインも軽く修正。表示が崩れるようなことがあれば、コメントで報告お願いしま～す。

ホントは画像自体にリンクを持たせたかったんだけど、そうするとリンクの色で縁取りされてかっこわるかったのよね…どうにかすると、縁取りされないように変更できるのかなぁ…

こういうときは、まともに HTML を勉強していないことを後悔しちゃうね。

再びスタイル変更。アドバイスに従ってなおしてみたよ。ちなみに Public Beta なのです。正式版が出たら、正式版ボタン に入れ替えよう（笑）

for MAC IE

うわ、確かに字が小さいかも。うーん、やっぱりfont-sizeはいじらない方が賢明かなぁ？