宮崎ロッド・Prime Time バンブーロッド≫Piggy's Tail

Page 1 of 20: 1 2 3 4 5 6 7 8 9 10 11 »

2009-10-09

アーカイブスを折りたたみ表示に

ドメイン取得を期に日記アプリをblosxomに変更してから半年経ちました。痒いところに手を入れる時間がナカナカ作れなかったのですが今回、サイドバーに表示するアーカイブスをシンプルな見栄えに変更しました。画像下・右が新しいアーカーブ表示で左が以前の状態です。

西暦年の左にある フォルダー・アイコン をクリックするとツリーを開閉することができます。また、2009年分についてはあらかじめツリーが開いた状態にしてあります。

アーカイブス・メニューの変更
左が旧、右が新しいアーカイブス表示です。

以下、変更箇所のメモ…

(1) Blosxom Plugin: archives

[40行目]
    $results .= qq{$indent<li><span class="archives_year"><img src="〜アーカイブス用アイコン画像へのリンク〜" alt="Archives" title="Archives-$year" height="11" width="13" /></span> <a href="$blosxom::url/$year/">$year</a> ($archive{$year}{'count'})\n$indent$indent<ul id="archives-$year">\n};
    delete $archive{$year}{'count'};

#40行目の<li>に<span class="archives_year"></span> と <span class="archives_year"><img src="〜アーカイブス用アイコン画像へのリンク〜" alt="Archives" title="Archives-$year" height="11" width="13" /></span>を追加

(2) CSS(追加分)

/* archives icon */
.archives_year
{
	vertical-align      : middle;
	cursor              : crosshair;
}

/* open tree */
#archives-2009
{
	display             : block !important;
}

(3) JavaScript

折りたたみ制御用の外部ファイルを追加

…大体がこんなところです。

blosxom の Plugin: archives で各年度に当たる<li></li>に <a id=""> なリンクが追加されて JavaScript外部ファイルで制御するのですが他にもっとスマートなやり方で同様な表示方法を実現しているウェブサイトがあります。たぶんPerlで Plugin を作っていらっしゃるんだろうなぁ〜、羨ましい。

CSS の display : block !important;(力業w)とかツリーのトグルでアイコンの切替が出来ないとか個人的にも心苦しい箇所がありますがまた時間が出来たら他の方法に変えてみようと思います。

追記:

現時点の SafariGoogle Chromeは開閉アイコンが表示されません。

2009-10-10 FIXED:これ、気が付くのにちょっと時間がかかりました。新しく挿入される<span>から見て元からある<span class="archives_year">を display : none; にすればよかったということです。

、Internet Explorer 6 と 7 においてアイコンが表示されません。

2009-10-11 FIXED:アイコンのトグルを諦めました。カラの<span>も無くなって少し気分的に楽になった(謎)……[完!]

Posted by TM* at 2009-10-09 06:37 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as: , ,

2009-01-26

blosxomをアレコレ

現在、この「子豚のしっぽ」はBloggerのFTP投稿機能を使ってアップロードされています。将来的にドメインを取った時に新しいサーバで大きな容量になるであろうと仮定すると柔軟なブログアプリケーションが必ず欲しくなるのが人情でしょう。そこでイロイロと探し回ったところblosxom(ブロッサム)が目に止まりました。尊敬する某ウェブサイト(何処)もお使いになっていらっしゃるようで好感度高いです。

何はともあれ研究用にローカルにサーバをAN HTTPDで立ち上げてActivePerlとBlosxomを設置してみました。そして環境設定をしてから新しいエントリのテキストファイルを適当なディレクトリにおいてFirefoxからblosxom.cgiを呼び出すと見事に表示に成功です。キターwww…と織田さんみたいにやってしまいました。

それぞれのエントリーをvalidなHTMLで書いてテキストファイルで所定のディレクトリにアップロードするというのが個人的にとても合っているなぁ〜というのがblosxomを動かしてみての第一印象です。まぁ、今も日記をBloggerでポストする時はそれに近いことをやっていますがいかんせんBloggerでは痒いところに手が届かない、時々檄重になったり再構築に30分かかったりというのがあって、そこのところをbloxsomは直撃ピンスポットにアレコレ出来そうです。また、過去の日記もblosxomに移行出来るわけですね。工夫すればそれほど手間は掛からないだろうと思います(が如何に>ちょっと楽観的か)。

ワクワクw

blosxom方面:

追記(2009-01-27):

なーんか以前にblosxomのことを調べたような気がして子豚ページを見回してみるとちょっと気になるBlosxom - Piggys Tailがありました。「思い切ってハズして」いますね。たぶんISP提供Blogのテンプレートをローカルで弄ぶためにローカルサーバとCGIプログラムをインスコして(ryだったと思います。当時はサイト開設5年目でWindows 98、MEを使っていたと思います。メモリー不足でしょっちゅうハングアップしていたのを思い出します。すでに(X)HTML+CSSなホームページを構築していたと思いますがCGI方面は上記のように推して知るべしです。

先日、某クンに「そういうスキルは何処で習得しているの?不思議〜」とか言われてちょっとアレでしたが実際はこんなところです。

Posted by TM* at 2009-01-26 14:14 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2008-12-02

2008年11月の子豚のしっぽ、アクセス・ベスト10

朝の「子豚のしっぽ」です。雨は降り止みましたが気温は8℃、銀杏の葉が一気に黄色になって綺麗ですね。そして本格的に寒いです。

朝のコーヒーを飲みながら11月の子豚ページのアクセス状況チェックしてみました。以下、アクセス上位を見ますと…

  1. 自分のアドレスで送られてくる迷惑メール
  2. メモ:美味しいとんかつの揚げ方
  3. Lightbox V2.0 のバグ修正
  4. メモ:牛スジの煮方
  5. メモ:ツリーをCSSと画像で
  6. [Prototype Rod]6フィート9インチ・2ピース・3番ライン
  7. 岡山の娘
  8. ATH Remco用のリールシート
  9. 昭島産業まつり
  10. 大豆のトマト煮

1.は堂々の一位です。皆さん悩みの種である迷惑メールについてのエントリです。このエントリは時々ですが急にアクセスが多くなります。たぶんその日に大量の迷惑メールが、それも受信者自身が差出人を詐称されて届いていると思われます。この12月より特定電子メールの送信の適正化等に関する法律が強化されましたのでこのような迷惑メールなどが減ることを期待したいですね。

2.4.10は料理ねたです。中でもとんかつの揚げ方は安定的にアクセスがあります。自宅でのとんかつ作りはパン粉、小麦粉を大きめのタッパーに入れておくとスムースに作れて後かたづけのラクチンですね。そして揚げたてのトンカツはおかずに良し!ビールよし!そして日本酒にも意外に合うのですよ。ちなみにとんかつのお肉ですが私はロース派(実は隠れバラ肉派)です。むははは

3.4はウェッブねたですね。Lightbox 2には現在、Operaブラウザでポップアップ表示位置のバグがあるようです。どうやらその方面(何処)からの検索にヒットしている模様ですね。OperaでのLightbox 2のズレ?Green’s Blog|Green’s Projectのブログで解決方法が紹介されています。lightbox.jsをハックしますのでちょっと敷居が高いかもしれません。バージョンアップを待った方がいいかも。

そして6.8がフライねたです。当ウェブサイトのメインテーマであるフライフィッシング関連のエントリでありますので当然のランクインですね。

9は昭島市で年に一回開催される産業まつりのレポートで2001年展示の時のものです。1996年・第29回から展示参加していますので通算12回出たんですね。ログの方に第32回昭島市産業まつりのレポートもあります。

7.は映画のエントリでした。「娘」などと謎めいたタイトルに釣られてアクセスされた方がいらっしゃったかも知れません。かく言う私、某SNS方面でタイトルに釣られて足あと付けてバトン書かされたりします。

Posted by TM* at 2008-12-02 20:11 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2007-12-03

印刷用スタイルシートを追加

主要なコンテンツに印刷用スタイルシートを追加しました。ボタンやロゴなどがない状態でプリントアウトができます。以下のスクリーンショットは印刷プレビュー画面をFirefox 2 で表示した時のものです。

印刷プレビュー画面
印刷プレビュー画面

印刷のために表示した元ページ
印刷のために表示した元ページ

また、以下が印刷用スタイルシートの内容です。

/* print common
--------------------------------------------*/
@media print {
a                      /* テキストリンクの色 */
{
color              : #000000 !important;
}

#main-pane             /* ページ枠の表示 */
{
border             : none !important;
}

h1#page-title          /* タイトル位置の調整 */
{
margin-left        : 0px !important;
}

#headline-idx,         /* 主要コンテンツへのリンク */
#guide,                /* 各コンテンツのリンク */
#details-button,       /* ボタン */
#hooter,               /* フッター */
.return-top,           /* ページ先頭へのボタン */
.content-attn          /* 赤字→黒字へ */
{
display            : none !important;
}
}
Posted by TM* at 2007-12-03 16:19 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2007-11-07

スタイルシートを微調整

夜の「子豚のしっぽ」です。ラジオを聴きながら子豚ページのスタイルシートを調整中です。フォント(文字)サイズを相対サイズ「em」から相対サイズ「%」に変更して全体的なバランスをアレコレしています。Internet Explorer 6 でご覧になる時、今までよりは見やすくなったのではないかと思います。また、画面を横幅固定(780px)から可変へと変更しました。様々な閲覧環境にフィットするといいなと思います。

参考:

Posted by TM* at 2007-11-07 20:35 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

Page 1 of 20: 1 2 3 4 5 6 7 8 9 10 11 »