« 2007年6月 | トップページ | 2007年8月 »

MTでカテゴリーごとのナビゲーションバー作成

■現在位置のタブだけ色を変えたい!

MTタグで作る方法を見たが、それだとホームのタブをうまく入れられず、小粋空間の単純にカテゴリーページのURLを手入力する方式を検討。

これまでHTMLで作成したサイトでは、現在いる位置がわかるよう、現在のカテゴリのタブだけ色を変えるようにしていました。
しかし、MTだとどうやればいいのか?

小粋空間に掲載されていた方法は、「クリックしたメニューのロールオーバーを保持する」やりかたです。

検索エンジンなどから来た場合、メニューをクリックしてないと、維持すべきロールオーバーがないので、どうなるのか、一抹不安。

また、さっと読んだだけでは、自分の場合はどこをどういじくればいいのかがよくわからなかったことと、JavaScriptを使うようなので、他の方法を探しました。

●IF 命令プラグイン利用ですっきり指示

そうして見つけた方法が、drk7.jpで紹介されていた方法です。

カテゴリ IF 命令プラグイン - MTIfCategoryが必要ですが、現在いるカテゴリだけ、指示した装飾(強調文字にするとか、色を変えるとか)を施すという、わかりやすい方法です。

●現在位置のタブだけリンクを外すことも!

このプラグインを手に入れた後、調べてみると、このプラグインがあると、あれこれやりたいことができることが判明。

まず他のカテゴリーを開くタブはリンクさせておきたいですが、現在開いているカテゴリーページは見た目を変えるだけでなく、リンクもはずしておきたいですよね。
このプラグインによって、それも実現します。

さらに調べていく内に、いろいろ役立つことがわかったので、ともかく、このプラグインは採用!

さて、まずはカテゴリーアーカイブのテンプレート作成を始めなきゃ…。

背景とレイアウト枠とのデザインに悩む

MTのデザインをしていくにあたり、これまでのサイトデザインの雰囲気を踏襲しつつ、考えていこうと思います。

■背景は白? 色?
背景は目立たない、余計なデザインをつけないほうがいいというのがひとつの考えとしてあります。

しかし、自分があちこちのブログを読んでいて、コンテンツ背景も白、サイドバーも白、全体の背景も白だった場合、自分が読んでいる記事に集中しづらいと感じました。

記事の本文部分と、サイドバーや全体背景が色が異なっているほうが、自分が見たい列がわかりやすくなる気がします。
そう思って、実はこのブログのデザインを既成テンプレートから選ぶときにも、全体背景の濃いこのデザインを選びました。

同様に濃い色を全体背景に敷いて、本文を立たせてみようかと試してみたのですが…見やすい気がする一方で、圧迫感も感じないわけではありません。

■わたしのデザインのフォーマット:壁紙
Dandg わたしのサイトのパターンがあります。
まず1999年に最初のサイトを作ったときから、ずっと背景には微妙に柄のあるクリーム色の壁紙を作っています。

これは「サイトの背景は白が一番歓迎される」ことを知ってはいたものの、自分にとっては真っ白は目にきつくかんじていたため。

ただ、背景が白でないと、アフィリエイトのバナーや商品写真の背景が白の場合には浮いてしまうんですよね。

そこで、先に書いた、自分が読んでいる列を意識しやすく、全体背景とコンテンツを分けるためにも、全体背景にはこれまでどおりのクリーム系の背景を残しつつ、コンテンツの背景は白にするという、妥協案に至りました。

ただ、クリームと白ではいまいち区切りがわかりにくい…。

タイトル周りの要素を整理

タイトル回りを考えるにあたり、まず、入れるべき要素の整理が欠かせませんね。

まずは入れたいものをピックアップ。

1)サイトバナー
内容を伝えるグラフィック要素を持たせつつ、文字もはっきり。小さくてもOK。
MTの一般的なデザインとして、一見、サイトバナーに見えるものでも、2通りあります。

1.背景画像を使って、上に文字を載せる方法
2.1枚の画像にする方法

※SEO的に考えた場合、わたしのサイトの場合、ビッグキーワードで狙うのではなく、ロングテール的に細かいワードで狙うタイプなので、トップページ以外は、サイトの名前より、記事のタイトルやカテゴリーのタイトルが立ったほうがいい。
そうすると、サイトバナーは1枚の画像にして、サイトタイトルは、不要な場合にはHTMLソースの中で目立たせない方法も取れるほうが便利そうです。

2)検索窓
わたしの作っているサイトの多くは、キーワードで検索して来た訪問者が、同種の記事や自分が探している商品などの記事を見つけて、何ページもめぐることが少なくありません。ひとつのサイトの記事数も数百が一般的。
従って、検索窓が目立つ場所に必要です。

3)パン屑リスト
細かいサイトがたくさんあっても、同種のサイトをまとめる親サイトがあり、そこへはパン屑リストでつなげています。これも上部のタイトル回りに必要です。

4)サイトマップ
対検索エンジンでいえば、上部に越したことはありません。
また対訪問者を考えた場合、サイト内で導くために重要なサイドバーのトップにサイトマップを置くのはもったいない。
ということで、上部に見ればわかるけど、さりげなく置くのがベスト。ということで、これもタイトル回りに必要。

5)サイト説明
サイトのタイトルや説明はどこまで立たせるか悩むところですが、一瞬で「ここはなんのサイト?」を知ってもらう一助として、やはり入れておいたほうがよさそうです。

その他、自己紹介や関連サイトへのリンクなどは、サイドバーやフッターで済むと思うので、この5つを納めるタイトル回りデザインを考慮中。

サイトバナー考

MTで新たにブログを作っていくにあたり、あるていどフォーマットを作っていこうと考えています。

■わたしのデザインのフォーマット:タイトル回り

これまでTypePadで作ったサイトはバナーにだけ画像を使った、シンプルなデザインです。

わたしのブログの使い方は、日記的なブログをひとつ持ちながら、その周囲に関連する商品紹介サイトを配するというもの。

つまり、日記的ブログこそ、いわゆるブログですが、その周囲のサイトはブログをCMS(コンテンツマネージメントシステム。要はホームページの作成、管理を楽におしてくれる道具)として利用しています。

ですので商品紹介記事も多く、主役の商品を食ってしまうようなブログデザインは困る。あくまで主役の商品や、わたしの撮影した写真を引き立てるブログデザインが必須です。

■サイトバナーは写真やイラストを使いつつ、それらが目立たないように

でもサイトバナーを文字だけにもしていません。
それは一瞬見ただけで、なんのサイトかを理解してもらうには、文字だけでは弱いから。

Banner_kitchen Banner_diary Banner_choco2

TypePadで作った料理のサイトは、フリー素材の枠に、文字を大きくして、イラストは小さなものを添えています。

Banner_g_tool_2 Banner_gaichu G_dic_bannar

園芸関係は、自分の撮った写真を背景にぼんやりと使い、上に文字を載せています。

今回は、フリーの写真のいいものを見つけたので、写真のコラージュでタイトルを作りました。

Sanchoku300

拡張子htmlのままPHP化(さくらインターネットの場合)2:フォルダ移動で成功!

小粋空間の「Movable Type の PHP化(その2:.html のままPHPを有効にする) 」を参考に拡張子をHTMLのままPHP化することにチャレンジしたものの、エラーが出てストップ。
仕事が忙しくて、触れるひまがなくて、何週間も立ってしまいましたが、ようやく時間ができて、情報を検索、試ししたら、解決しました!

小粋空間Movable Type の PHP化(その1) の記事につけられたコメントで、やはりうまくいかなかった方が「MTフォルダの下に、PHP化したいブログのフォルダを移動したところ成功」した旨、書かれていたので、わたしもフォルダを移動してみたところ、無事、成功!

test.htmlにアクセスして、以下の画面が無事見られたときのうれしさ!

20070709_01_1 

« 2007年6月 | トップページ | 2007年8月 »

便利ツール

  • キャリアアップ.biz >ブロガーズブログ

カテゴリー

広告

  • ソフマップ・ドットコム

マイチャンネル