候補が2種類あり、どちらにするのか迷いましたが、ベースはhiyoko-calendar750で、hiyoko-menuのメニュー部分のみを移植することになりました。

主な概要

• テンプレート名：hiyoko-calendar750
• CSSの2箇所を変更する事でベースカラーが変えられます。
• トップ画像は差し替えてお使いください。※今回のサイズは750×170です
• 記事中の画像横幅最大460pxまで表示可能です。
• 基本的なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
• プラグインモードのみに対応

主な概要

• テンプレート名：hiyoko-menu
• プラグインモードのみに対応
• トップ画像は差し替えてお使いください。※今回のサイズは710×170です
• 記事中の画像横幅最大440pxです。
• New Entriesの件数は管理画面→環境設定の変更→ブログ設定→最近の記事リストの表示数から変更可能です。
• 基本的なカスタマイズに必要な記述はCSS上部に配置してあります。
• 上部にあるに5メニューのタイトル・リンクはお好きなように変更ください。

これら2種類のテンプレを合体させたわけです。

さらに、以前利用していたmanannanさん作 colorfree の「hタグ自動切り替え機能？」を組み込みました。

colorfreeでは個別記事モードの時に、エントリタイトルが自動的にh1タグに切り替わるのでSEO対策になります。正直、ブログでここまでできるとは感動ものでした。

さて、colorfreeがお気に入りだったにも関わらず、何で今回テンプレを変更したのかというと、 中身をいじり過ぎて全体が見えなくなってきたからです。一旦シンプルな形にしようと思いました。

今回はテンプレの着せ替えをそんなに多くは試していません。100種類くらいでしょうか。 そして出会ったのが、ヒヨコ君増殖中さんのテンプレだったわけです。

作者さんのブログに書き込まれたコメント欄を参照して、テンプレ利用者さんたちのブログをたくさん拝見しました。どれも見た目や使い心地がシンプルで、私が今必要としているものにピッタリだと思いました。「もしかしてヒヨコさんって天才？」とも感じました。ヒヨコさん、シンプルなテンプレを作ってくれてありがとうございました。

今まで「カテゴリのツリー化」にはずいぶん苦労してきました。 いろんな方法を試してみましたが、いつもちょっとしたところで理想の形にならないのです。 それで断念しておりました。

すっかり放棄していましたが、何となく読んだFC2からのメール。普段ならスルーするところですが、やっぱり頭の片隅には課題として残っていたのですね。

さっそく、「標準？」と「カスタマイズ向け」の両方を試してみました。

確かに親子にはなっていますね。でも、ん〜、カスタマイズが必要かな・・・

私の希望は、プラグイン内ではできる限り <ul> <li> などのリストを使いたい。とすると「カスタマイズ向け」になるのですが、子の枝の部分は「標準」に採用されている方を使いたい。つまり、足して2で割ったようなものが使いたいのです。

ぜいたくな希望なので、自分でやるしかないですね。 と思って、ちょっといじってみたのですが、またしてもとんでもなく時間を取られそうなので途中でやめました。

現状は、旧カテゴリを複数並べ、それぞれにa、b、cなどのclass名を付けてグループ分けしています。そして、css内でグループ別に特定のカテゴリを非表示(display: none;)に設定しています。こうすると、グループ別にカテゴリの表示・非表示を切り替えられるわけですね。

カテゴリのツリー化を断念した際は、この方法をどこかで見つけてとっても感動したものです。

今は頭がカスタマイズモードではないので、興味が復活した時や必要に迫られた時にでも、再度チャレンジしてみようと思います。

とりあえず、「親子カテゴリ」を使ってみることにしました。

子カテゴリの枝部分は自作画像で間に合わせて、何とか最低限の形にはなった感じです。

複数のカテゴリを設置していた以前と比べて、管理がやっぱり楽ですね。

FirefoxとIE6の表示の違いに、またしても少々てこずりましたが、 最低限の設定が完了したので使いながら様子を見ようと思います。

やっぱり使うのやめました。何と言うか・・・ん〜、イマイチって感じなんですね。 やっぱり折りたたみにしたいというのがありますので・・・

もうちょっと検討してみます。

カウンターの数字を変更できるのは、他のブログから引っ越してきた方にはありがたいですね。

それに、二重カウントをするかしないかも設定できます。

ですが、これは基準が一定していないということですから、数字は実際より大きくなる傾向があるということになりますね。

このブログではどのように設定したかと言うと・・・

一番厳しい設定にしました。アクセス解析の数字をそのまま入力し、二重カウントもしていません。

ただ今のところ、自分からのアクセスがカウントされてしまいますね。IPアドレスとかで除外できないものでしょうか？ご存知の方がおりましたら教えてください。

エアパームは事業者ですから、本当はカウンターの設定をゆる〜くする方が有利な気がします。

でも、私はかなりの正直者ということもあり、これくらいのことでも嘘がつけませんね。

もうちょっと不真面目な人間に変身できたら、カウンターの数字をとんでもなく大きくしてみようかと思います。

さて、今イジっている素材ですが、レインボーカラー(虹色)の画像です。

• 素材提供 ： 風と樹と空とフリー素材
• サイト様ご紹介記事

昔から虹色って好きでした。何かこう惹きこまれるっていうんですかね。
車で高速道路を走行中に目の前に虹が現れると、

「よ〜し、追いつくぞ！」「くぐってみた〜い！」

なんて思ったものです。いきなり波動が上がってしまうんですよね。アクセルを踏み込む原因になりますので、みなさんもご注意ください。

虹色はチャクラカラーでもありますので、癒しのサイトとしてはぜひともどこかに配置したいものです。 ですが、色が多いって案外扱いが難しいですね。

それに、よく悩まされるのが、FirefoxとIE6の表示の違いです。画像の扱いに限ったことではありませんが、近い表示を実現するのに非常に苦労します。

「やりたいことがすぐに実現できない」というのは何とももどかしいですが、 これも課題の一つと考えて、ボチボチやっていこうと思います。

それでは、これから実験を開始します。ここに書かれている内容は、"ただの実験記録" です。 私が困っているのを発見したら、ぜひお手を差しのべて頂けたらうれしいです。

まずは、確認という感じですが、表示領域を250pxに固定し、背景画像を左・中央・右に配置してみます。

背景画像を左寄せ

背景画像を中央寄せ

背景画像を右寄せ

うん、これだけでも雰囲気が変わりますね。

画像を繰り返し表示して、いろいろ試してみます。

背景画像を繰り返し

背景画像を繰り返し + 枠

背景画像を繰り返し + 枠(二重線)

ここでFirefoxとIE6の違いを発見しました。二重線の外側と内側の間にある "空間の表示" が違います。ちなみにこれを確認するために、枠線の太さを10pxと大きめに設定してあります。

Firefoxでは、文字の背景と同様に画像が繰り返されています。途切れたような部分があるのでちょっとキレイとは言えません。

IE6では、画像は表示されず真っ白けです。枠の太さを調整すれば、使えそうな感じはします。

親要素の背景色「background-color: #ffffff;」が影響しているのか、あるいは、枠線「border-style: double;」の解釈が違うのか、確認はしていません。

borderも研究の余地ありですが、今はさほど必要に迫られていないこともあり、このままスルーさせて頂きます。

ここでは上下2つの画像を使用することになるので、背景設定ではなく、
「上の画像」→「文字」→「下の画像」
と単純に要素を並べてみました。

文字サイズを変更しても、画像が自動的に上下してくれますので、けっこう便利な方法です。

上下の画像で文字をはさむ

おっ、なかなかいい感じです。
上の画像を左に寄せ、下の画像を右に寄せてみました。

上下の画像で文字をはさむ + 文字背景色

はい、ここでFirefoxとIE6の違いを見つけました。

Firefoxでは、上の虹と下の虹の間に背景色がキレイに表示されています。

IE6では、変な隙間ができます。上の虹と背景色の間に3pxくらいの空間があります。同様に下の虹と背景色の間にも空間があります。

ちなみに、上の虹・文字・下の虹には、「margin: 0;」「paddin: 0;」を、虹の画像には「height: 3px;」を設定してあります。後はどこを確認すればいいのか・・・

と思って虹の画像の設定を確認してみたら、どちらの虹も上下の配置が「center」になっていました。とりあえず、上の虹には「bottom」を、下の虹には「top」を指定してみたら、IE6での変な隙間がなくなりました。

実はこの隙間の件で壁に当たっていたのですが、自己解決してしまったようです。やっぱりこうして記録しておくといいものですね。

確かFC2ユーザーフォーラムの中でも、このタイプのナビを欲しがっている方が何人かいたように思います。私も「そんなのがあったらいいよなあ」と思いつつ、すぐに設置できそうなものが見当たらなかったのであきらめていました。

今回は別件でhassakuさんとご縁を持てたことでご紹介頂けましたが、普通はこうはいきませんよね。何だかタナボタっぽいですが、私はこういうご縁を必然と信じて大切にしています。

さて、このナビについてですが・・・「とりあえず設置させて頂いた」という状況ですので詳しいことはまだよくわかりません。

設置すること自体はそんなに難しくはありません。htmlとcssの知識はほどほど必要になりますが、私みたいな初級者でも短時間で設置できました。ダウンロードしてから30分くらいで設置完了という感じです。

何をどうすればいいのかはかなり丁寧に説明されていますので、書かれている通りに作業を進めていけば問題はほとんど起こらないと思います。

設置後に私が行ったことは、文字色・文字サイズ・枠の色を変更したくらいです。

使っていきながら、設置する位置などを考えていこうと思います。気が付いたことがありましたら、またこの記事に追加していく予定です。

数日間使ってみました。簡単なレポートをさせて頂きます。

とてもいい感じです。動作が安定していて、今のところ「あれ？」っと思うことがありません。おそらく、かなり細かい部分まで動作確認をされたのでしょう。

Flickr風ページナビには、始めから4種類のスタイルが備わっています。見栄えが4種類の中から選べるということです。

どうやって選ぶのかというと、下記の★の部分を、右に書かれている "flickr" "flickr2" "digg" "clean" のどれかに置き換えるだけです。右の単語をコピーして、★の部分に貼り付けるだけですから超簡単です。この一文が書かれている場所は、htmlのhead内に貼り付けたソースの中です。

var naviStyle='★';　// スタイルを flickr,flickr2,digg,clean から選んでください。

私も4種類すべてを試してみました。見た目はかなり違いますから、季節ごとに着せ替えを楽しむなんていうこともできそうです。

ここで見栄えの違いを表現するのは私の技量からして難しいので、作者のhassakuさんのブログをご覧頂けたらと思います。

テンプレートの変更に伴い、現在このページナビゲーションは使用しておりません。 一旦設置してみたのですが、個別記事表示との兼ね合いで外すことにしました。気に入っているプラグインですので、また復活する可能性は大いにあります。

Salad Days Rider さんが示されているサンプルをちょっとアレンジして説明します。 下記のように、記事が日付の古い順に並んでいて、今は記事No.3を読んでいるとします。

• 1月1日　カテゴリＡ内　記事No.1
• 1月2日　カテゴリＢ内　記事No.2
• 1月3日　カテゴリＢ内　記事No.3 ←現在位置
• 1月4日　カテゴリＡ内　記事No.4
• 1月5日　カテゴリＢ内　記事No.5

記事No.3を読み終えて、次の記事に移動しようとナビボタン(Next)をクリックします。

すると、予想していた記事No.5ではなく、記事No.4が表示されてしまうのです。

カテゴリBの物語を読んでいたら、いきなりカテゴリAの日記が表示されるようなものです。これはちょっとした問題、いやいやけっこう重大な問題です。

実は、これはシステムの不具合ではなく正常な動作です。
と言うのも、

記事は日付順に並んでいるので、"次の記事" というのは "次の日付の記事"

を意味しているからです。

これを知らない方にはちょっとした混乱が起こるかもしれません。いや知っていたとしても、「あれ？」っと思うことでしょう。

実は私自身がこのサイトで「あれ？」っと思ったので、今この記事を書いてます。

幸いにもFC2ブログでは、過去や未来の日付を設定することができますので、

"表示させたい順番に日付と時刻を設定する"

という安易な方法で今までは対処してきました。

ですが、そろそろ限界です。根本的な対処法を探そうと思っています。

課題は、「記事表示モードの時に、ナビボタンで別のカテゴリには移動できないようにしたい」ということです。

現状を単純に表現すると下のようになります。

<!--nextentry-->
	<a href="<%nextentry_url>">次の記事へ</a>
<!--/nextentry-->

<%nextentry_url> と <%topentry_category> を足したような単変数ってないかな？と淡い期待をしつつテンプレート機能一覧を見てみましたが、そのような単変数はないようです。

FC2の独自タグや変数について私の知識が乏しいこともあり、本当は超簡単なことなのか、あるいは、難題に直面しているのかすらわかりません。

困った時はFC2のユーザーフォーラム内を検索すると、たいていは "答えそのもの" か "ヒント" を見つけることができます。ですが、今回の件に関してはまだ解決策を見つけられない状態です。

どなたか対処法をご存知の方はいらっしゃいませんか？

とりあえず、問題提起だけさせて頂いて、解決策が見つかり次第この記事内でご報告できればと思います。

解決しました！
hassakuさんのご意見を参考に、問題が解決しましたのでご報告します。

まず、私が提起した下記の課題ですが、

「記事表示モードの時に、ナビボタンで別のカテゴリには移動できないようにしたい」

勉強すれば何とかなるというレベルではなく、システム上不可能なことがわかりました。

ということで、可能なことだけを実行しました。修正個所は下記の通りです。

• 個別記事表示モードの時に、前後の記事へ移動するナビボタンを付けていましたが、これを削除しました。その結果、次の記事へ移動するには、もくじ経由になってしまいましたが、少なくとも「あれ？」っという混乱は避けられます。この修正だけで、問題自体は一旦解決です。
• 次に、More(続きを読む)を開閉式に修正しました。今まではMoreをクリックすると個別記事にモードチェンジしていましたが、その場で「続き」が読めるようになりました。この方法ですと、次の記事がすぐ下に表示されますので、下に向かってどんどん読み進めていくことができます。
• さらに、もくじをクリックした時のリンク先を修正しました。今までは個別記事に移動していたのですが、もくじと同じページ内で移動するように修正しました。

他にもちょこちょこと修正したところがありますが、目立った修正個所は以上です。

hassakuさんのブログのコメント欄でも、このネタの解決法がいくつか記されています。そちらもかなり参考にさせて頂きました。

今回はhassakuさんに登場して頂いたおかげで、とんでもなく早く解決に至ることができました。貴重なご意見ありがとうございました。

さらにラッキーなことに、hassakuさんが作った「Flickr風ページナビ」という優れものをご紹介頂きました。サンプルを拝見しましたが、前後のページに移動できるのは当然として、数字をクリックするだけで行きたいページへ移動できます。

「Flickr風ページナビ」は共有プラグインに登録されているとのことですので、近いうちに試させて頂こうと思います。設置の状況については、別の記事でご報告させて頂く予定です。

私の主観ですが、colorfreeの特徴は以下のような感じです。

• 透過PNG画像を使用することで、サイト全体の配色を簡単に変更できる。透過PNGに未対応のIE6でもキレイに表示されるような対策がなされている。
• 3カラムを表現するのにcssで「float」を使用していないので、悩みの種となる「カラム落ち」の心配がない。
• 3つのカラムそれぞれの幅を変更するのがとても簡単。
• <html>の基本構造に<table>を使用していないので表示が軽い。
• モードによって<h1>と<h2>が自動的に入れ替わるのでSEO対策上有利。
• 記事表示モードの時に、ユーザータグの情報が<head>内のキーワードに自動的に反映されるのでSEO対策上有利。

当サイトの見た目は元のテンプレとかなり違います。これは、私の好みで削ったり付け加えた部分もあるからです。「id名」や「class名」も私が理解できる名前に変更しました。ですが、元の「htmlの骨組みの良さ」はしっかりと受け継がせて頂いています。

サイトの作成・編集に関して私は初級レベルですが、テンプレの着せ替えを1000種類以上試した上で「これだ！」と感じたのがcolorfreeでした。作者のManannanさんにはとても感謝しております。

• テンプレ提供 ： Manannan Mac Lir
• テンプレ詳細 ： colorfree(共有テンプレート)

テンプレートを変更しました。今現在のテンプレはcolorfreeではありません。

新テンプレの詳細は、 FC2共有テンプレート・・・hiyoko-calendar＆menu をご覧ください。