MY CSS DESIGN

最新記事のRSS

FC2ブログのテンプレート配布・作成日誌。

| PAGE-SELECT | NEXT

≫ EDIT

ページの持つ意味と見出しの因果関係を探る。

下記は当ブログのGoogleでのMikuMikuDance検索結果ですが見ての通り要約がメタタグのdescriptionになってます。

MikuMikuDance ヒヨコ君増殖中
FC2ブログのテンプレートを配布しています。基本的に当テンプレートはトップ画像差し替えを前提とした仕様になっているのでブログテンプレート自体に個性を持たす事が可能になっております。
blog-entry-558.html - 32k - キャッシュ - 関連ページ

これではMikuMikuDanceなんて全く関係ないではないか!

ちょっと初心に返ってメタタグのdescriptionとは何かをググってみた。
description=検索結果に表示された時のコメント内容
なるほど・・・。1つ賢くなった(´Д`;)

今回の変更点まとめ

  1. 固定ページの記事タイトルをh1になるように変更。
  2. 固定ページ表示時はメタタグdescription無しにした。
  3. ユーザータグをメタタグキーワードに仕込んだ。

配布テンプレートには2番のみを反映させておきました。

関連記事

| テンプレート日誌 | Permalink | comments:4 | trackbacks:0 | TOP↑

≫ EDIT

ソーシャルブックマーク!?

うちのブログの記事がFC2トップページに載ってるんだけど何これ?って事で少し調べてみたんですが、どうやらFC2ソーシャルブックマークの仕業らしい。当方ソーシャルブックマークサービスなんぞ利用した事が無いので詳細はわかりませんが、簡単に説明するとブックマークを共有する事で信憑性の高い情報源をみんなで作って行こうぜ!みたいな事らしいです。これであってるのか?若干違ったようなので下記リンクを参照くださいw

で、最近ブログなどの記事欄によく見かけるのが下記のようなアイコンであるわけだが、どうやらこいつらがそのソーシャルブックマークへのページ登録を容易にする物らしい。

各ソーシャルブックマーク登録用アイコン

そう言えばFC2ブログにもこんなような物が勝手に付けられてたような気もするが速攻で外した記憶があります。このような物はそのサービスを利用している人にしか理解できないので記事毎に付けるのは今でもどうなんだろう?なんて思ったりもしますが、そんな古い考えだと時代に取り残されそうなので今回その憎いあん畜生(ブックマーク登録アイコン)を付けてみました!。ただ、ソーシャルブックマークサービスみたいなのが地味に多く、どれを付けていいのか全然かわからないので今回はそれらを1つにまとめたようなサービスを利用させて頂きました。

上記サービスは何気に優秀でブログサービス名と画像を選ぶだけでそのブログに対応したタグを吐き出してくれます。後はテンプレートに貼り付けるだけで完了。登録も不要なので僕のようなニワカな人はとりあえず利用してみると良いかも。

■ 余談

それにしてもFC2のアイコンだけ不鮮明と言うかインパクトがたりないと言うか、なんとなくクオリティが低くいように見えるのは気のせいか?もう少しがんばれFC2の中の人!w

■ 関連リンク

| テンプレート日誌 | Permalink | comments:4 | trackbacks:0 | TOP↑

≫ EDIT

なんかいろいろご機嫌なんだぜ。

最近うちのブログがYahoo!検索で徐々にヒットするようになってきたんだけどなんでだろう・・・なんて事を思いながら自己満足的な感じで上位を狙ってるフレーズ『FC2ブログ テンプレート』でYahoo!検索してみた所、なんと4番目に表示されているではありませんか。泣きそうになった。ただ、なぜか旧アドレスヽ(`Д´)ノ

いままでYahooからの検索なんて微々たる物だったので(まあいまでも微々たる物ですがw)単純に評価されてないんだなと思って検索すらした事がなかったのですが、いつの間にこんな事に!?

いっぽうGoogle検索の方はと言えば、若干意識する事で25位前後ぐらいまでは上げる事に成功。だがしかしそれからがまったくと言っていいほど上がらない。なにか見えない壁のようなものが存在します。

そんなこんなを考えながら久しぶりにGoogleでも検索してみたら・・・いつの間にか旧アドレスの方が新アドレスを抜いて上位に・・・と言うか新アドレスの方はコピペしたテンプレート変数のページだけで存在しているような感じになってるし・・・涙目。しかし、それが功を奏して?その見えない固い壁を打ち破り現在13位w。嬉しいのか悲しいのかちょっと複雑である。

なぜこんなアクセス数の少ない閉鎖的で自分のテンプレートの事しか書いていないようなブログが上位にしてもらえるのかまったくもって理解できませんが、これからもいろんな情報を盛り込んでよりわかりやすく何かを伝えていければいいなと思ってます。ちょっとカッコいいぞ俺w。

それにしてもなんで旧アドレスなんだよヽ(`Д´)ノ

関連リンク

| テンプレート日誌 | Permalink | comments:5 | trackbacks:0 | TOP↑

≫ EDIT

WindowsXPでメイリオ検証。

メイリオとはWindowsVistaに標準搭載されたClearType対応の日本語フォントです。そのメイリオがWindowsXPでも使えるらしいのでダウンロードしてインストールしてみました。

フォントファミリーにメイリオを追加してIE7でスクリーンショットを撮ってみた。

これが噂のメイリオフォントなわけですが何点か気になる部分があります。

  • 各見出し下の意味不明な余白。
  • カレンダーの字間

※この意味不明な余白はブラウザに依存するようです。余白が大きい順からIE7>FireFox>Operaって感じです。

■ 顔文字・記号を比較してみました。

記号・顔文字検証
記号に関してはやや小さ目。顔文字は不細工になってます。この分で行くとAAも多分駄目でしょう・・・。それよりもなによりも気になるのがメイリオの行間です。

■ 英数字を比較してみました。

英数字検証
メイリオの英数字がVerdanaっぽくていい感じです。こんな感じなら何も考えずにメイリオにシフトしてもいいかも。

■ まとめのようなもの

本家Vistaのメイリオで検証したのではないので確かな事は言えませんが、行間などになにやらいろいろ問題がありそうです。まぁある程度のイメージは掴めたので当テンプレート全てをメイリオに対応していこうと思っています。登録したテンプレートが少ないとこんな感じで修正したりアップデートしていけるから良いんだぜ。ただもう管理出来る数に限界がきてるけど・・・。

そういえばWindowsVistaでのスクリーンショットが撮れるサイトってまだないよね?スクリーンショット.jp のWindows機がVistaになってくれる事を祈ろう。

■ 関連リンク

| テンプレート日誌 | Permalink | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

フォント可変デザインの苦悩

フォント可変デザインは何気に厄介なもので、IEでの見栄えは閲覧者側のフォントサイズ(大中小)設定に依存します。本来は?フォントサイズになるべく依存しないデザインにしフォントを少し大きめにする事で、どのサイズ(大中小)でもそれなりに見えるようにするのだろうけど、フォント中サイズを12pxぐらいの大きさにしようと思うとフォント小サイズの扱いが非常に難しくなってしまいます。ヽ(`Д´)ノ

今回それを打開すべく一ヶ月ぐらい前からフォントサイズやら行間などのバランスを試行錯誤してきたのですが、残念ながら未だに自分の納得するものが出来ず新テンプレート公開までに間に合いそうにありません。と言う事で今回は意表を突いてフォント固定にしてみた。←なんでやねんw。

うっせ。もう疲れたんだよw

とりあえず今回はこれで様子を見てみます。そのうち何とか打開してフォント可変に戻すと思うのでそこんとこよろしく。

余談

IE7のインターネットオプションには『拡大中にテキストを中サイズにリセットする 』なる設定がありディフォルトでONになっています。この設定は小サイズにして閲覧している人からするとズームしたとたん勝手に戻ってしまうので不評らしいのですが僕は上記の理由で少し嬉しかったりします。( ´ー`)

他には『新しいウィンドウとタブで、テキストを中サイズにリセットします。 』なる設定も新たに追加されているのですが、こちらはデフォルトでOFFになってます・・・ちっ

■ 関連リンク

| テンプレート日誌 | Permalink | comments:4 | trackbacks:0 | TOP↑

≫ EDIT

印刷用CSS作成

恥かしい話、僕は年齢=Webベージ印刷した事ない暦なので印刷に関する知識は無に等しいのですが、とりあえず見様見真似で印刷用のCSSを当ブログに実装してみました。事の始まりは憎いあん畜生(FC2ブログ公式マニュアル)が『上級者』と言う甘く切ないキーワードを盛り込むもんだから、単純な僕は『そんなエサに釣られないクマーAA略』ってな感じです。意味不明でごめんなさい。印刷CSSがどんな感じなのかは当ブログの個別ページでも開いてブラウザメニューから印刷のプレビューでも見てください。

印刷時に表示される個所

  • ブログタイトル
  • ブログ説明
  • 記事日付
  • 記事本文
  • 記事フッター
  • 著作権部分

基本的に印刷時は上記以外表示されないようになっています。こうする事で求める情報?を効率的に印刷できるようになるそうです。なるほど。ただ、うちのブログの場合、記事よりコメ欄に情報が詰まっているような気もしないでもないのですが・・・ブヒ。

配布中のテンプレートへの実装は散々悩んだのですが『印刷部分を勝手に制御すんなハゲ』なんて言われそうだったので見合わせました。が、欲しいと言う人もいるかもしれないので当テンプレート全てに対応する印刷用のCSSを作りました。利用する場合は下記記述をHTMLのhead内にコピペしてください。挿入場所がイマイチ分からない人は当ブログのソースをコッソリ覗いてみてください。

<link rel="stylesheet" media="print" href="http://hiyokokun.blog2.fc2.com/file/print001.css" type="text/css" />

テンプレートは最新のものをご使用ください。古いテンプレートでは正しく表示されない可能性があります。印刷CSSは当ブログのファイルとしてアップロードされているものなのでカスタマイズ不能です。不具合などあったら教えてください。

余談

生まれて初めて印刷のプレビュー機能なんてのをマジマジと眺めてみたわけですが、ブラウザ側のフォントサイズ変更で文字サイズを大きくして印刷できるようですね。こんな余計な事を知ってしまうとますますフォント固定ができないじゃんヽ(`Д´)ノ。ちなみにIE7は印刷のプレビュー自体に拡大縮小機能があって用紙サイズに合わせた印刷が可能のようです。

■ 関連リンク

| テンプレート日誌 | Permalink | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

IE7&IE6のフォント検証

IE7にすると(・ω・)←のωが変になると言う事で勝手にフォント検証をしてみました。

IE7&IE6フォントの違い
なるほど。単純にアンチエイリアス(ClearType)の問題だと思っていたのですが見比べてみるとどれも微妙に違いますね・・・。

ClearTypeといえばWindowsXpでは通常『フォントを滑らかにする』の設定は画面のプロパティから変更するのですが、IE7にはインターネットオプションに『HTMLで常にClearTypeを使用する』なる設定が存在しデフォルトでONになってます。この設定には何気に強制力があり画面のプロパティ側の設定を無視し問答無用でClearTypeを発動します・・・。ClearType嫌いな人はインターネットオプションから設定を解除しましょう。

さて話は変わりますが(実はこっちが本題だったりする)、画像の赤枠部分をご覧ください。IE6と比べると微妙に形状が違う記号が存在する事がお分かりいただけると思います。Verdana(フォント)には#以降の記号(※■▲◆△♪)はフォントに含まれていません。その場合どのような方法でそれを補いブラウザ上で表示されているのか調べてないので確かな事はわかりませんが、IE7に限ってはIE6・FireFox・Operaとは違うフォントが適用されるようです。♪の形状からするとArial(フォント)に似ているように思えますが・・・(#^ω^)ピキピキ。何かまたバグでもあるのでしょうか?

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

IE7不思議ズーム機能(拡大・縮小)。バグ?仕様?

InternetExplore7(IE7)の新機能ズーム表示(拡大・縮小)の挙動が変なので少し検証してみた。

IE7ズーム(拡大・縮小)機能はどこからどこを基準に拡大・縮小しているのか?
基準と思われる部分を赤くしてみました。

100%表示
上記画像はデフォルト表示(拡大率100%)です。

60%表示
縮小していくと左に寄っていきます・・・(拡大率60%)

110%表示
拡大表示(拡大率110%)です。ブログ全体が表示エリア内に収まっているにもかかわらず横スクロールバーが出現します。ちなみにこの状態でお気に入りを消してブラウザの表示エリアを広げてもスクロールバーは消えません。

これを見る限りIE7のズーム機能はブラウザ表示エリア全体の幅を基準に拡大縮小されているようです・・・なんだか一枚の画像を拡大縮小しているような感じですね。これはバグなのでしょうか?それとも仕様なのでしょうか?

≫ Read More

| テンプレート日誌 | Permalink | comments:7 | trackbacks:0 | TOP↑

≫ EDIT

続 Safari 3.0.2 for Windows beta

XPをインストールして新たにわかったことがある。

WinXPにインストールした場合

  • 日本語表示不能
  • ブラウザのメニューは正常に表示される
  • 動作は安定してるっぽい

Win2000にインストールした場合

  • 日本語表示可能
  • ブラウザのメニューが文字化けする
  • 動作は全体的に不安定

どうやら未対応であるWin2000にインストールするとディフォルト状態で日本語表示が可能なようです。クスクス (^m^)

それにしても最近Win2000に対応しないアプリケーションをよく見るようになって来た・・・そろそろWin2000も終わりなのか。

関連リンク

| テンプレート日誌 | Permalink | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

最新ブラウザのフォント関連事情

昔からフォントサイズの絶対指定は賛否両論ありますが、その諸悪の根源?でもある各ブラウザのフォント拡大・縮小機能。最近のブラウザではどのように扱われているのか表にしてみました。

ブラウザ フォント絶対指定した場合 ショートカットキー
IE7 変更可能(ズーム仕様) Ctrl+マウスホイール
Ctrl+プラス・マイナス
IE4〜6 変更不能 Ctrl+マウスホイール
FireFox 変更可能 Ctrl+マウスホイール
Ctrl+プラス・マイナス
Opera 変更可能(ズーム仕様) Ctrl+マウスホイール
Ctrl+プラス・マイナス
Win版Safariβ 変更可能

※IE7はフォントの大きさを変更する機能も以前と同様に備わっていますが残念ながら仕様は変わってません。
※Windows以外のブラウザはどうなのかわかりません。

とりあえず見ていただきたいのが憎いあん畜生(IE4〜6)の変更不能です。IE4〜6ではpx等でフォントサイズを固定してしまうとブラウザで簡単にフォントサイズが変更できなくなってしまいます。そんな理由で俺も基本的にはフォント固定しない派(一部してるじゃんって言うな)なのですが、ついにIE7で待望の絶対指定無視ズーム機能搭載ですよ。変なバグも付いてきますが・・・。

しかしIE7はXp以降のOSにしか対応していないのと以前のフォント拡大縮小機能がそのまま付いている為に、この先もまだまだフォント固定問題は消えそうにありませんね・・・まあ、あと10年もしたらどうでもよくなる時代がくるかもしれません。それまで生きていたいと思います。

■ 余談

IEのフォントサイズがCtrl+マウスホイールで変更できる事をつい最近知ったのは内緒です。

■ 関連リンク

| テンプレート日誌 | Permalink | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートバージョンアップver1.4

IE7使用者が増えてきたということで表示確認のためにIE7をダウンロードしようと思ったんだけど、Win2000にはインストールできないことが判明。おいおいマジですか・・・と言う事で久しぶりにWindowsXPをインストールしてみました。インストールからUpdateをすべて終えるまでに3時間ぐらいかかった。うちの糞PCだとXPはWin2000より少し重い感じがするな・・・。

さて、肝心のIE7での当テンプレートの表示ですが基本的な表示は問題ありませんでした。しかしIE7の新機能である拡大・縮小表示に新たなバグ?が・・・「兄ちゃん。どうしてMicrosoftはブラウザの表示に関するバグを改善しようとしないん?」ってことで当テンプレートのバージョンアップです。先日バージョンアップしたばかりなのに何度も申し訳ありません。

詳細

  • bodyに指定された背景画像が拡大縮小されないバグ?に対応
  • 拡大表示した場合にcontainer(ブログ全体)にposition:relativeが指定してあるとブログ最下層に意味不明な空間ができるバグ?に対応。
  • 行間の調節
  • その他もろもろ
  • 新たなバグなどあれば報告お願いします

基本的な表示はとりあえず問題ないので気が向いたときにでもバージョンアップしてください。尚、今回のバージョンアップで壁紙などのbody背景に関するカスタマイズ方法が変わります。

今後ともひよこ君増殖中テンプレートをよろしくお願いします。

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

カラー変更支援ツール

javascriptで動作する高機能な色選択ツールのようなものを見つけたので試行錯誤して当テンプレート用のカラー変更支援ツールを作ってみた。JavaScriptの知識が無に等しいのでちょっと不細工な作りになってますが我慢してください。

テンプレート管理画面でも、こんな感じにテンプレートの色変更できるようになんねーかな。さすがにちょっと無理か・・・・。ちなみに次に配布するテンプレートは上記のようなデザインになると思います。

■ 余談

忍者ブログには簡易?テンプレートEditorなるものが付いててテンプレートをダウンロードしたユーザーが背景色やTOP画像をそこから設定できるようになってるんだけど、あの機能(ちょっとゴツイけど)はカスタマイズ用テンプレートを作ってる俺からすると心惹かれるものがある。機会があれば忍者でもうちのテンプレートを公開してみたいなんて思ってます。

| テンプレート日誌 | Permalink | comments:3 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートバージョンアップver1.3

久しぶりのテンプレートバージョンアップです。バグ修正したわけではないので必要と感じた人のみバージョンアップしてください。

■ 主な改変

  • カテゴリー用のINDEXを実装
  • ABCKさんの追記展開Scriptをデフォルトで挿入してみた。
  • その他もろもろ(ユーザータグリンクカラー変更など)
  • 不具合などあればご報告ください。

現在、FC2ブログでは同ネームのテンプレートがダウンロード不能になっております。同じテンプレートをダウンロードする場合は既存のテンプレート名を変更してからダウンロードくださいませ。

■ 余談

hiyoko-menu750使用者で色を変更しているブログをあまり見かけないので簡単なカスタマイズ方法を書いてみました。暇な時にでも挑戦してみてください。

今後ともヒヨコ君増殖中テンプレートをよろしくお願いします。

■ 追記

カテゴリ用のINDEXについてですが、カテゴリは新管理画面に移行すると表示件数を個別で指定可能になります。ただ新管理画面の移行はあまりお勧めできません。と言う事でまだ要らないと思った人は下記を参考に削除くださいませ。

| テンプレート日誌 | Permalink | comments:6 | trackbacks:0 | TOP↑

≫ EDIT

Safari 3.0.2 for Windows beta

Windows版のsafariをインストールしてみた。

CSSの解釈自体は不明ですが表示(フォント)に関しては本家safariに似てるかも。。機能に関してはメニューが文字化け状態でなにがなんだか・・・。そもそも閲覧にはIEしか使わないので機能なんてのはどうでもいいのですがね。

まぁまだベータ版ということで、いろいろな面で普通に使えるレベルに達していない感じ(うちのPCが糞なだけかもしれません。)なのですがMacっぽいフォントで表示確認できるのが嬉しい。ああそれだけさ。

ちなみに当テンプレートをsafariで表示させると多少フォントが小さく表示されます(11pxぐらいのフォントサイズ)。これは前々から気付いていたのですが目の当たりにすると多少気になります。とりあえず自分のテンプレートを利用して試験的に記事部分のみフォントを大きくしてみました。同様に『おまえのテンプレートはフォントがちっちぇーんだよハゲ』なんて思ってた人はbody(全体)かentry-body(記事部分)のフォントサイズを5%アップしてください。配布中のテンプレートに反映させるかは検討中です。

言い忘れましたが僕は一応ハゲてません(><;

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

当テンプレート新管理画面への先行移行に関して。

テンプレートをご使用の方でそろそろ新管理画面に完全に移行したいという人もいると思います。しかし現状では管理画面へのリンクが新と旧で違う為に面倒な事になっており完全に移行するにはテンプレートの管理画面へのリンクの書き替えが必要となります。と言う事で先行移行への手引きを書いておきました。(不安な方はテンプレートのバックアップをお忘れなく)

※後に管理画面のアドレスは統合されるようなので配布中テンプレートのリンクを書き換える事は致しません。

尚、この記事は移行を推奨するものではありませんのでお間違えの無いように。ただ多少まともになってきたので新管理画面を覗いてみたり自ブログがまともに表示されるか確認しておいても良いかも。しかし保証はできませんので自己責任でお願いします。(基本的なデータ自体が壊れる事は、まず無いと思いますが念のためバックアップをお忘れなく)

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ささのは さらさら〜

今日は七夕ですね。何かお願いしましたか?

まあそんな事はさておきコメントでNewEntries近辺のカスタマイズ質問があったので変数一覧を見ていたのですがNewEntriesリストをアンカーで飛ばすことが可能な事に気付きました。通常、当テンプレートのNewEntriesはクリックすると固定ページに飛ぶようになっています。それをアンカーを使用してページを移動せず飛ばそうってこった。

HTML編集より下記のように赤字部分を変更ください。

<h2 id="newentryname" class="navi-title">New Entries</h2>
<div id="newentrylist" class="navi-contents" >
<ul>
<!--recent-->
<li><a href="#no<%recent_no>" title="<%recent_title>"><%recent_title></a> (<%recent_month>/<%recent_day>)</li>
<!--/recent-->
</ul>
</div>

この仕様にした場合には少し注意しなければいけないことがあります。たとえばNewEntriesのリストが5件あるとしてトップページに表示される記事数が3件だった場合、NewEntriesのリンクも3件しか反応しません。そこんとこ注意してください。

そんなこんなでこの方法は当テンプレートの仕様として組み込む事はしません。ついでにカスタマイズ情報にも載せないので七夕の日のこの記事を見れたラッキーな人だけのカスタマイズになります。そんなたいしたものではありませんがw

テンプレートは最新の物をご使用ください。古いテンプレートでは動作しません。FC2の現在の仕様は同ネームのテンプレートはダウンロードできなくなっているので古いテンプレートをリネームしてからダウンロードしてください。

| テンプレート日誌 | Permalink | comments:8 | trackbacks:0 | TOP↑

≫ EDIT

まっくろくろすけ

ブラックなデザインにしてみた。ブルーとかオレンジをそのまま入れてるから少し子供っぽく見えるかな?以前と比べれば読み難い部分がたくさんあるかと思いますがしばらくこれでお願いいたします。

ちなみにテンプレート自体に使用した画像は2個(TOPと背景のみ)。そう考えればなかなかな出来ではないでしょうか。まあ当テンプレートシリーズ自体が元々そういう作りになっているんですが、画像の使用を極力控えてでどこまでアピールできるかが当テンプレートの裏テーマだったりするんです。

テンプレートって需要あるのだろうか?何気に目が疲れるような・・・

| テンプレート日誌 | Permalink | comments:7 | trackbacks:0 | TOP↑

≫ EDIT

追記の展開してみる?

少し前にコメントでページを移動せずに追記の展開をしたい。という質問がありました。今回はその追記の展開をしてみようと思う。スクリプトは共有テンプレート一覧の管理者でお馴染みのビスコさんのを使用する事にしました。

さて、まず上記リンク先に飛んで指示通りにスクリプトを挿入してください。挿入した時点で動作するようになるので動かなければ適切な場所に挿入されていない事になります。動作確認が済んだら当テンプレート用に少し改造します。<!--more_link-->と<!--/more_link-->の間に挿入するスクリプトを下記のように変更くださいませ。

<!--BisEntryIfExtended-->
<p class="entry_more" id="varP<%topentry_no>">
<a href="<%topentry_link>#no<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#no<%topentry_no>');return false;">≫ Read More</a>
</p>

<div id="varXYZ<%topentry_no>" style="display: none">

<div class="entry_body"><%topentry_more></div>

<p class="entry_more"><a href="#no<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">▲ Close</a></p>
</div>
<!--/BisEntryIfExtended-->

これでページを移動せずに続きを読むを展開可能になります。スクリプトの挿入場所さえ間違わなければ普通に動作するので焦らずゆっくりがんばってみてください。当テンプレート全てに対応していると思いますが不具合などあれば報告お願いします。

テンプレートは最新のを使用してください。古いテンプレートの動作は不明です。
※作者であるビスコさんに質問を持ち込む行為はできるだけ控えてください。

■ 関連リンク

≫ Read More

| テンプレート日誌 | Permalink | comments:19 | trackbacks:0 | TOP↑

≫ EDIT

GWだしヒヨコ君増殖中テンプレートを少し解剖してやんよ

やっぱやめ。『何々の為に』って考えて作るとどうしてもなんらかの見返りを求めてしまう。そんな邪念が入るともうだめ。なので終了(笑)

| テンプレート日誌 | Permalink | comments:8 | trackbacks:1 | TOP↑

≫ EDIT

画像の使用を極・・・ってタイトルなげーよヽ(`Д´)ノ

またまたCSSのみでデザインする企画。

ちょっと楽しそうだったので参加はせず勝手に遊んでみた。ちなみに普通にデザインしただけなので、なんのひねりも見所もありません。でもシンプル好きなのでこれでいいのです。表示確認はIE6とFirefoxのみ。製作時間はなんやかんやで3〜4時間といった所でしょうか。

ある程度作ってから大会Galleryを見たんだけど・・・みんな凄すぎ。そのなかでも特に気になったのがWWW WATCH style@yoshiさんのデザイン。フォントサイズを変えると・・・なにこれどうなってんの?エラスティック・レイアウトって何?

自分のアイデア&センスの無さを改めて思い知った一日でした・・・完

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

W3C仕様書を読む。

何事も基本が肝心。ということで中途半端なHTMLCSS知識をまともな知識として軌道修正するべく仕様書を読んでみた。

長文UZEEEE!!!! 3行で飽きた・・・

だから1日3行ずつ読む事にした。

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ping送信先を増やす

pingってなんぞ?更新情報を通知・紹介してもらえるのかな?よくわかりませんがとりあえず増やしてみた。一応参考にしたサイトを載せておくよ。

ping送信先の設定が面倒な方は、自動に国内有数のPingサーバーにpingを飛ばすサービスがあるようだから利用してみましょう。

■ Google検索

| テンプレート日誌 | Permalink | comments:5 | trackbacks:0 | TOP↑

≫ EDIT

大見出し=ブログタイトルという概念を捨て去る

ブログ見出しに革命をおこしてやんよ。

なんてのは一回言ってみたかっただけですが、単に大見出し(H1要素)に検索ワードを仕込みたいのだが、タイトルがタイトルでなくなってしまいそうなのでH1要素自体をタイトルではないものにしてしまおうって発想になっただけです><;

そのためにHTMLの構造を大幅に変更するのはかったるいので簡単にできるものはないのかと考えた結果ブログの説明を大見出しにしてみる事にした。これなら好きなようにワードを仕込む事が可能なんだぜ。

  • CSSを解除するとこんな感じ。(要javascript設定ON)

大見出し(H1要素)がSEO的にどれだけの影響力があるのか全然知りませんが、とりあえず地味に観察していこうと思う。

■ 追記

そうそう。大見出し(H1要素)がページによって変化すると言えばてんぽ@みりばーるさんテンプレート。外観はシンプルながら中身は凝った作りになっているのでみてみると勉強になると思う。

| テンプレート日誌 | Permalink | comments:10 | trackbacks:0 | TOP↑

≫ EDIT

素人による素人のためのSEO対策

SEO対策なんてのはよくわかんないので、とりあえず誰にでもできるような事を試してみた。(10日ほど前に)

  • タイトル変更 (ヒヨコ君増殖中 想 FC2版 → ヒヨコ君増殖中 FC2ブログ版)
  • H1変更 (ヒヨコ君増殖中 → MY CSS DESIGN)
  • metaタグ(keywords・description)の挿入

今回挿入したワードを組み合わせて検索してみました。

検索ワード
(ウェブ全体から)
2007年4月3日 2007年4月12日
FC2 テンプレート 66位 46位
FC2ブログ テンプレート

171位

29位
FC2blog テンプレート 30位 23位
CSS テンプレート 156位 173位
CSS デザイン 500位以内無 500位以内無
CSS design 500位以内無 121位

微妙ですが全体的に上昇しているようです。ただ一部のワード上昇は先日書いた記事(テンプレート変数一覧を抽出してみた。 )の影響のようにも思えなくもない。今後はもう少しH1要素を上手く利用して地味に観察していこうと思います。こんな意味のなさそうな素人SEO対策ですが反応があるようならまた記事にしますね。

■ 関連リンク

■ 追記

ぴよこ秘密日記

あなたしか反応ないんですが・゚・(つД`)・゚・

こうゆう自己満足は孤独にひっそりやる事にしたよ。

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ちょっとテンプレートバージョンアップした。

テンプレートは表示上ではあまり変化は無いですが地味にバージョンアップを重ねております。きっと良い方向に変化しているはずなので半年に1度ぐらいは思い出してあげてください。

■ バージョンアップ詳細

  • PAGE-SELECT進行方向を戻した(´Д`;)
    右(NEXT)が過去の記事へ。左(PREV)が新しい記事へ。
  • メタタグ(description)の挿入。

| テンプレート日誌 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ピンポイントにリンクカラー変更するよ

さて今回は当テンプレート用の記事本文中のリンクカラーのみをピンポイントで変更する方法を書いておきます。下記記述をCSSの適当な場所に挿入してお好きな色に変更くださいませ。(当テンプレート全てに対応しています。)


/* ----------------記事本文links */

/* 通常時リンクカラー */
.entry_body a:link {
	color: #999999;
}
/* 訪問済みリンクカラー */
.entry_body a:visited {
	color: #999999;
}
/* マウスを上に重ねた時リンクカラー */
.entry_body a:hover {
	color: #FF9900;
}
/* クリックした時リンクカラー */
.entry_body a:active {
	color: #FFCC00;
}

ちなみにサイドメニューだけリンクカラーを変えた場合は#text-body.entry_bodyを#naviに変更するだけです。

■ 追記

素で間違えてました^^;
#text-bodyじゃなく.entry_bodyです。全然違うじゃん!って言うな。自分でも#text-bodyがどこから出てきたのか不思議でなりません・・・何回も試した人がいたらごめんなさい。

| テンプレート日誌 | Permalink | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

IE5.01の事もたまには思い出してあげてください><

テンプレート配布に向けて久しぶりに当ブログを各ブラウザで表示確認してみたんだけどwin版InternetExplorer5.01での表示でカレンダー部分の不具合発見。詳細は調べてないのでわかりませんが表示を見る限りwin版InternetExplorer5.01ではインライン要素のパディングが効かない?

カレンダー部分

で回避方法のヒントを得る為にIE 5.01でABCKさんのところの共有テンプレート一覧を適当に見てみたのですが・・・なんかもうWin版のIE 5.01は表示確認対象から外れているのかな?

まあ検索してみます。

■ 検索結果(追記)

やっぱりWin版 MSIE 4〜5 ではインライン要素非置換インライン要素にパディングは効かないらしい。ついでにマージン・ボーダーも効果なしのようです。こ、これは困った。インラインをやめてwidth付けてfloatで回り込みならいけるのか・・・?

■ 続追記

普通にfloatでいけた。IE5.01でもバッチリ。でも今度はセンター表示できない・・・親ボックスのパディングleftでなんとなく中央にあわせることは可能だがスマートな方法ではないのでもう少し考えてみる。

今回登録するテンプレート名はhiyoko-calendarにしようと思っているので、この表示の乱れはどうしても回避したいのである。

■ 続追記

以前コメントで頂いたIEのバージョン別に違うCSSを読み込ませる方法でIE5.0だけにfloatさせるように試みた。結果はIE5.0には効果があったがIE5.01には効果がなかった。IE5.0とIE5.01は別物なのか?ヽ(`Д´)ノ

もうアレなので登録する。応急処置は一応したのでまた良いスマートな方法が思い浮かんだら修正をいれようと思う。ついでに横型カレンダー挿入の手引きにも修正を入れておいたので気になる人は変更してください。

■ 古いバージョンのIEで表示確認

| テンプレート日誌 | Permalink | comments:6 | trackbacks:0 | TOP↑

≫ EDIT

ページナビの誘導方向変更

テンプレートPAGE-SELECT・ARCHIVE-SELECTの誘導方向を変えました。

  • 左(PREV)は古い記事へ
  • 右(NEXT)は新しい記事へ

このような変更をいまさら加えると以前のテンプレートと混同してしまい混乱を招く恐れがありますが今後はこの形式を浸透させていきたいと思っています。ご迷惑おかけします。

■ 余談

テンプレートは公開して1年半ぐらい経つのかな?未だにグダグダ弄ってる俺ってなんなのって感じですね。一般の人が求めるものとそうでないものを理解して妥協する事を覚えろよばーかヽ(`Д´)ノ

■ 追記

2007年4月10日に以前の進行方向に戻しました(´Д`;)

| テンプレート日誌 | Permalink | comments:6 | trackbacks:0 | TOP↑

≫ EDIT

横型カレンダーにしてみる?

心がなんだか寂しいのは季節の変わり目だからだろうか・・・まあいつもの事だ。

さて今回は横型カレンダーの挿入ですよ。以前に遊びで横型カレンダーを挿入してみたんだけどそれほどおかしくなかったので当テンプレート用のカスタマイズとして書いてみました。当テンプレート全てに適応可能かと思われます。

※デザイン的にADMINMENUが邪魔になるようなら取っ払ってください。
※700px版だと横幅がギリギリかも。改行されてしまうようならご報告ください。

calendarが中央に寄って不細工って思った人は下記を赤字部分の数値を1とか2にしてみてください。


#calender2 li {
	display: inline;
	padding: 0px 0px 0px 0px;
}

■ 余談

横型カレンダーを挿入していて思ったんだけど、当テンプレートPAGESELECTの進行方向って逆?当テンプレートは右側(NEXT)をクリックすると過去の記事に飛ぶようになっているのですが通常のカレンダーを見ると右側は新しい記事(新しい年)へとなっているよね。一般的にはどうなんだろう?今度一回調べてみます。

それとこれは以前メールで報告を受けたのですがトップページから見るNEXTは(過去)という意味にとれますが、各ページから見るNEXT(次ぎ)と言うのは新しいページへの誘導にもとれてしまう何気に厄介な問題。こちらはまだ検討中なのですが表記を"古い" "新しい" にすればわかりやすいかもしれませんね。

| テンプレート日誌 | Permalink | comments:34 | trackbacks:0 | TOP↑

≫ EDIT

複雑なワンポイント画像は難しいんだぜ。

トップ背景を桜にしたもんだからワンポイントも桜にしようと思って作ってみた。
俺もやればできる子なのかも。

桜(大)

ワンポイント用に小さくしてみた。

桜(小)

だめじゃん・゚・(つД`)・゚・

| テンプレート日誌 | Permalink | comments:6 | trackbacks:0 | TOP↑

≫ EDIT