Topお知らせblog > 2006年5月
2006年5月20日

ブログ開設2周年記念・【TB企画】あなたのサイトのお勧めエントリー

May 20,2006 1:22 AM
Tag:[, ]
Permalink

ブログ開設2周年本日、ブログ開設より丁度2年が経過致しました。こうやって無事にブログを運営することができるのも、皆様の暖かいご支援のおかげです。この場をお借りして心よりお礼申し上げます。

現在のブログ運営状況は下記の通りです。

  • エントリー:903(約1エントリー/日)
  • コメント:6983
  • トラックバック:2520
  • アクセス数:約6500PV/日・約19万PV/月(Google Analytics)

2周年記念ということで、最近めっきりみかけなくなった「TB企画」を行いたいと思います。「TB企画」とは、あるお題でエントリーを書き、それをTB企画者のエントリーへトラックバックするというものです。昨年のTB企画の模様は下記の通りです。

今回のお題は

あなたのサイトのお勧めエントリー

にしてみました。

ブログは記事を書きやすく、外部とのコミュニケーションをとりやすいのですが、時間の経過とともに過去の記事が目に触れる機会が少なくなるように思います。実際、新しい訪問者の方が過去の記事を全て閲覧するというのは現実的に考えにくいです。
ということで、ご自身のブログのエントリーで「もう一度読んで欲しい」という記事があれば、1つでも2つでも結構ですので、あなたのサイトでそのエントリーを紹介する記事を書き、このエントリーにトラックバックしてください。
このブログの記事ではなく、あなたのブログの記事を紹介してください。

頂いたトラックバックと自推記事については、2週間後位を目処に、ブログのキャプチャ画像と共にエントリーにて紹介させて頂く予定です(もしトラックバックがあれば)。多少はアクセス増加に貢献できると思います。

ちなみに私のサイトのお勧め記事は、

プルダウンメニューに表示されたアーカイブリンクの選択状態を保持する

です。
1年以上前に書いたエントリーで結構自信作だったのですが、コメント・トラックバックの反応が全くありません(笑)。ユーザビリティ向上のために、月別アーカイブやカテゴリーアーカイブの切り替えにプルダウンメニューを利用されている方は是非ご利用ください。

それでは今後も引き続きどうぞよろしくお願い致します。

Comments [18] | Trackbacks [15]
2006年5月 7日

ボタン・バナー・アイコン作成・配布サイト一覧

May 7,2006 2:35 AM
Tag:[, , ]
Permalink

クレジットバナー追加の流れで、ブログでよくみかけるボタン(バナー)・アイコンの関連サイトを紹介しておきます。
ここに掲載していないもので「もっと有名なサイトがあるよ」という場合、ご連絡頂ければ幸いです。

AntiPixel:Steal These Buttons
http://www.antipixel.com/blog/archives/2002/10/22/steal_these_buttons.html
80x15のボタンを(多分)最初に作成したサイト。
AntiPixel
GTMCKNIGHT:Buttons
http://gtmcknight.com/buttons/
上記の記事をきっかけに始まった 80x15 ボタン収集サイト。Upload Form から作成したボタンを登録することができ、このページ左側の Menu をクリックすると膨大な数のボタンが表示されます。
SUICAのバナーもありました(リンク先は作成者のサイトです)。
suica
Adam Kalsey:Button Maker
http://www.kalsey.com/tools/buttonmaker/
Buttons からリンクされているボタン作成サイト。テキストの設定が可能です。
ekstreme.com:Website buttons maker
http://ekstreme.com/buttonmaker/index.php
Buttons からもリンクされているもうひとつのボタン作成サイト。テキストの設定が可能で、Button Maker より詳細な設定ができます。
Luca Zappa Web Corner:Brilliant Button Maker
http://www.lucazappa.com/brilliantMaker/buttonImage.php
今回クレジットバナー作成に利用したサイトで、画像を取り込むことができます。画面の BORDERS は外枠と全体の背景で、Pixels from the left of bar position は右側に表示するテキストまたは画像の開始位置を設定します。LEFT BOX は左側に表示するテキストと配色、RIGHT BOX は右側に表示するテキストと配色で、Text start はテキスト表示開始位置を設定します。下の IMAGES はテキストの代わりに画像を指定する場合に使用します。設定が完了したら 右下の Create をクリックして、その下にボタンが表示されます。OKであれば Save it! をクリックして保存しましょう。
::: 一色政彦 WEB SITE ::::独自のRSSアイコンを作成!(ダウンロードOK)
http://www.masahiko.info/blog/archives/000066.html
ブログでよくみかけるオレンジ色のRSS/XMLアイコンを配布されています。このサイトの右下に表示している「RSS」のアイコンがそうです。
::: 一色政彦 WEB SITE ::::独自のATOMアイコンを作成!(ダウンロードOK)
http://www.masahiko.info/blog/archives/000745.html
ブログでよくみかけるオレンジ色のATOMアイコンを配布されています。
RSSアイコン
http://www.rss-icon.com/
RSS専用のアイコン作成サイトです。
FEED ICONS
http://www.feedicons.com/
最近流行の feed アイコンです。左側の Download をクリックするとサイズや配色のバリエーションが豊富なアーカイブをダウンロードできます。
FEED ICONS
W3C:Markup Validation Service
http://validator.w3.org/
W3Cのマークアップ検証サイト。成功すると下記のようなバナーが表示されます。
Markup Validation Service
W3C:W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/
検証に成功すると下記のようなバナーが表示されます。
W3C CSS 検証サービス
W3C:Feed Validation Service, for ATOM and RSS
http://validator.w3.org/feed/
W3CのRSS/Atomフィード検証サイト。成功すると下記のバナーが表示されます。
Feed Validation Service, for ATOM and RSS
Movable Type のバナー
インストールディレクトリの mt-static/images/powered.gif にあります。
Movable Type
Comments [2] | Trackbacks [5]
2006年5月 6日

クレジットバナー追加

May 6,2006 1:30 AM
Tag:[, , ]
Permalink

本サイトに掲載している公開テンプレート、およびカスタマイズをご利用の方へ、下記のクレジットバナーを追加しました。

button1
button2
button3
button4
button5
button6
button7
button8

現在配布しているクレジットバナーがサイトのデザインに合わないとか、80px × 15px のバナーに統一したいという方はこちらをお使いください。

お使いになる場合は直リンクでなく、ファイルを必ずダウンロードしてお使いください。ファイル名は便宜上、配色が分かる名前になっていますが koikikukan.jpg に変更して頂けると幸いです。

クレジットバナーの表示用タグはテンプレートのページカスタマイズのページに掲載していますが、概ね下記のような設定です。

<a href="http://www.koikikukan.com/"><img src="http://あなたのサイトURL/koikikukan.jpg" alt="小粋空間" /></a>

赤色部分にダウンロードした画像ファイルまでのURLを設定してください。

画像にリンク枠が表示されてしまう場合は、リンク画像の枠線を消すを参考にCSSを適宜設定してください。

Comments [0] | Trackbacks [0]
2006年5月 2日

テンプレートをカスタマイズする場合のポイント(HTMLマークアップ編)

May 2,2006 1:32 AM
Tag:[, ]
Permalink

テンプレートをカスタマイズされるユーザの方から「表示がくずれるのですが」という質問を頂くことがあります。その方々のページを Another HTML-lint gateway で検証すると、HTMLマークアップの誤り、つまりタグの過不足から表示が崩れるケースが少なくありません。おそらくテンプレートをカスタマイズされた時に、タグを書きすぎたり、あるいは書き足りなかったりするのではないでしょうか。

ちなみにその時の Aother HTML-lint gateway のエラーは

7: line xx: </tagA> は xx行目の <tagB> と重なり合っているようです。 → 解説 70

または

7: line xx: </tagA> に対応する開始タグ <tagB> が見つかりません。 → 解説 69

となります(他のエラーも同時に出る可能性があります)。

以下、HTMLマークアップの基本と、上記のエラーが発生した場合の解析方法、およびテンプレートのカスタマイズでHTMLマークアップを失敗しない方法について説明します。なおHTMLエディタを利用されていれば上記のようなエラーは発生しないと思いますので、ここでは手書きでテンプレートをカスタマイズされる場合を想定しています。

1.HTMLマークアップの基本

HTMLは、あるタグの開始・終了と他のタグの開始・終了が重なってはいけないというルールになっています(終了タグは省略可能な場合がありますがここでは終了タグの記述を前提にしています)。XHTMLでは終了タグを省略することができません(空要素のタグは />で閉じます)。
下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。

正しい例

<head>
</head>
<body>
</html>

正しくない例

<head>
<body>
</head>
</body>

お分かりの通り、head 終了タグの前に body タグが挿入されているのが誤りです。これがいわゆる「タグが重複している」という状態です。

上記はタグが兄弟関係の場合ですが、親子関係、いわゆる入れ子にする場合も同様です。
下記に html 要素を加えた例を示します。

正しい例

<html>
    <head>
    </head>
    <body>
    </body>
</html>

正しくない例

<html>
    <head>
    </head>
    <body>
</html>
</body>

body 終了タグは html 終了タグの前に書かなければいけません。

2.エラーが発生した場合の解析方法

実際にはテンプレート上は複数のタグが記述されているので、一旦エラーが発生すると解析が困難な場合があります。Aother HTML-lint gateway のエラーから被疑箇所をすぐに発見できればよいのですが、そうでない場合、HTMLの構造を簡単にすることをお勧めします。

その方法のひとつとして、正常にマークアップされているタグを取り除いていきます。入れ子(インデント)になっている場合はインデントの一番深いところに書かれたタグから取り除くと良いでしょう。

ということで、デフォルトテンプレートのエントリー部分を例に「インデントの一番深いところに書かれたタグから取り除く」の意味について説明します。
下記のようにマークアップされている場合、最初に取り除くタグは赤色の投稿者情報部分です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div> 

この2つの span タグと a タグが「インデントの一番深いところ(自分のタグの中に別のタグが書かれていない)」となります。重なりあっていないことも確認してから削除します(ここでは赤色→青色で示します)。

次に取り除くのはエントリー本文と投稿者情報を括っている p タグ(赤色)です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div> 

次に取り除くのはエントリー本文を括っている div タグ(赤色)です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div> 

このようにして開始タグと終了タグをみつけて、その中に他のタグが紛れ込んでいなければ削除していきます。そしてこの作業を繰り返していけばどこかでタグの過不足がみつかる、という訳です。
この作業を行う場合、必ず現在使用されているテンプレートのバックアップをどこかに保存しておいてください。

なおエントリーの本文に誤りがあるとテンプレート自体を修正してもエラーは解消されません。その場合はエントリーのタグをチェックするか、エラーとなったページを別のファイル名で保存し、それをダウンロードして上記の方法で正常なタグを削除していきます。

またタグの過不足で表示が崩れないケースもありますので、上記の作業を行う前に Aother HTML-lint gateway でチェックしましょう。

3.マークアップを間違えない方法

一言で申し上げると「いかにわかりやすく書くか」に尽きます。この方法はプログラムを書く時のお作法に非常に似ています。

タグにインデントをつける

2項の例でもお分かりの通り、タグの中に別のタグを書く場合、インデントをつけて右寄り(2?4カラム程度)に書きます。これを行うことでタグの親子関係と開始・終了タグの関係が明確になります。タグが兄弟関係(head と body 等)の場合は同一のインデントします。

開始タグと終了タグをペアで書く

上から順番に書くという方法は、終了タグを書き忘れる結果を招きます。あるタグの開始タグを書いたら必ず終了タグを同時に書き、それからその中に新たなタグを書くようにしましょう。HTMLでは前述の通り終了タグが省略可能な要素がありますが、XHTMLの仕様にもとづいて記述することを推奨します。

タグにコメントをつける

簡単な構造であれば不要ですが、例えば div タグが何重にもインデントになってしまうとタグの対応が分かりにくくなります。こういう場合は終了タグに開始タグの id 属性や class 属性をコメントとして記します。
2項のリストの場合であれば下記の青色のようなコメントをつけると分かりやすくなるでしょう。

   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
         | <a href="http://.../hogehoge.html#comments">コメント (0)</a> 
         | <a href="http://.../hogehoge.html#trackback">トラックバック (0)</a> 
      </p> 
      </div> 
      <!-- /entry-body -->
   </div> 
   <!-- /entry-content -->
</div> 
<!-- /entry -->

ただしインデントを付与したりコメントを書くと、ファイルサイズをその分増大させることになります。書きすぎないようご注意ください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3