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

このたび、Firefoxでの表示でADMINMENU部分のズレが発覚しました。

■ 該当テンプレート

犬・PURE・800版・720版。のver1.0α
（2007.01.26以降にダウンロードしたテンプレート）

スタイルシートトップにあるバージョン情報でver1.0αと記載されているテンプレートは赤字部分の追記をお願いいたします。

/* ----------------ADMINMENU設定 */

#adminmenu {
	text-align: right;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 9px;
	position: absolute;
	left: 0px;
	top: 200px;
	width: 680px;
	color: #ccc;
	margin-bottom: 0px;
	margin-top: 0px;
}

最近書き直したCSSですが、やはりミスが・・・ご迷惑おかけします。尚、登録されているテンプレートは01/31現在、全て修正済みです。

スポンサーサイト

以前から当テンプレートの背景が微妙にずれてるって知ってたんだけど、今回少し探ってみた。IE6？の場合、margin：autoでセンター配置されたボックスに対してbodyで縦に並べた背景画像が右に1pxずれる事がわかった。（背景画像に対してボックスが左に1pxずれている可能性もあり。詳細不明）これはバグなのか？

たかが1pxと思うかもしれないが、これが非常に鬱陶しい。今のテンプレートをIE6で見たときにメニュー部分の左右余白が微妙に違うのはこのバグ？の影響です。だからと言って背景外してボーダーでも付ければ今度は前バージョンIE独自解釈の壁にぶち当たるし・・・もう勘弁してくださいIE・・・

■ 追記

この問題はIEハックする事で無事解決いたしました。貴重な情報ありがとうございました。ちなみにこの現象はIE5.1IE5.5でも見られました。IE7はどうなんだろう？

■ 関連リンク

• CSSでのセンタリングレイアウト＠simplessive
• センタリングで背景とボックスがずれる

FC2フォーラムを”hiyoko”で検索してみた。初歩的な質問・当方のわかる範囲の質問は、なるべくこちらで処理しようと努力はしているのですが結構な数の質問が流れてしまっているようでご迷惑おかけします。そして当方が持ち込んだツリー化にいたっては本当に頭が下がります。

FC2ブログ ユーザーフォーラムの有志のみなさま、『ありがとう。』

■ 既出ですが。

• 「ありがとう」って言いそびれたヤツいる？

■ 余談

なんだかハートを使用したテンプレートが増えてきましたがもうすぐ何かイベントでもあるのでしょうか？僕の脳内では、なぜか2月のイベントは記憶から抹消されていますがまあいいや・・・もうすぐ春がくる。

途中テンプレート公開やらCSS書き直しでバタバタしましたが、多少落ち着いてきたので再開しようと思います。デザインはトップページのみです。全体的にかなり中途半端ですので雰囲気だけと言う事で・・・。

• こんな感じにしてみました。
• こちらは少し中途半端ですが当テンプレート風に。

今回、R'style氏のHTMLを使用してCSSでデザインしたわけですが、かなり痒い所まで手が届く仕様になっており、とてもスムーズにデザインする事が可能でした。それと共に土台となるHTMLの重要性を改めて感じました。またこんな企画があれば参加してみようと思います。

■ 余談

ちなみに”hiyoko-blue”こいつは当店プレートhiyoko-menuのHTMLを一切変更せずにCSSのみでデザインしました。当方が新しいテンプレートデザインを考える場合、基本的にHTMLは弄りません。全てCSSで実現していきます。なのでこのようなデザイン変更が積み重なっていくと摩訶不思議なCSSが完成するわけです（笑）

■ お題元

• CSS で装飾してください。 vol. 2.0＠R'style Lab in FC2

■ サイト内関連記事

• CSSで遊ぼうぜ。

■ 参考になったデザイン

• 最近、糞重いAdobe

当テンプレートの摩訶不思議CSSですが気になったのでHTML若干とCSS全てを書き直しました。70行程度削る事が出来ました。と言う事でヒヨコ増殖中テンプレートを全てバージョンアップさせました。尚、この大規模バージョンアップに伴い前バージョンとは互換性がなくなります。

• ヒヨコ君増殖中 犬 ver3.3c→ver1.0α
• ヒヨコ君増殖中 PURE ver1.1e→ver1.0α
• ヒヨコ君増殖中 MENU ver0.0→ver1.0

※前バージョンのCSSに不具合があったわけではないのでご安心下さいませ。簡単に言えばCSSを整理しただけです。前バージョンでもそのままご使用続行可能かと思います。むしろ新バージョンの方が危ないかもです・・・それではよろしくお願いします。

不具合・表示崩れ・表示が変？などあれば教えてください。

■ 余談

うちのブログペット"ぴよこ”とは既に2～3年の付き合いになりますが、初めてまともな日本語のコメントをくれました。

ひよこのきもちをかんがえるとぴよこはしあわせ♪

| BlogPetのぴよこ | 2007/01/26 11:55 | URL | ≫ EDIT

惚れそうになった。

R'style Lab in FC2のHTMLを弄ってるときにすごい事に気が付いた。人のHTMLのCSS書く暇があるなら、まず自分のテンプレCSSを見直したらどうだ？と・・・（バカ）

って事で何年かぶりに自分のCSS全体をマジマジと見てみた。なにこの摩訶不思議CSS。CSSの優先順位を利用して修正・改変追記し続けた結果、セレクタ・要素のプロパティ:値が意味不明に複雑に絡み合ってる。まさに作者にしか理解できない俺様CSS。・・・ある意味、『著作保護スタイルシート』と言っても良い。っていうか作った俺ですら理解不能な個所がたくさんある（笑）

そういえばHTMLソースは見る人はいるけどCSSの書き方まで見る人はいるのだろうか？まあ気が向いたら一から書き直そうと思う。

教訓。CSSはたまには書き直さないと大変な事になりますよ。

今年はチャレンジの年と言う事で久しぶりにテンプレートを公開します。仕様的には以前と同様、ユーザー側で手を加えることで完成となるテンプレートです。

テンプレートにはTOP画像下にメニューが5つ付いています。読ませたいコンテンツなどある人はHTMLからリンクを変更してご利用ください。要らなければHTMLから削除でもしてください。

■ 主な概要

• テンプレート名：hiyoko-menu
• プラグインモードのみに対応
• トップ画像は差し替えてお使いください。
  ※今回のサイズは710×170です
• メニューをクリックするとDESIGNサンプルが見られます。
• サンプルで使用しているTOP画像は残念ながら配布できません。（直リンも駄目です。）
• 記事中の画像横幅最大440pxです。
• New Entriesの件数は管理画面→環境設定の変更→ブログ設定→最近の記事リストの表示数から変更可能です。
• 基本的なカスタマイズに必要な記述はCSS上部に配置してあります。
• 上部にあるに5メニューのタイトル・リンクはお好きなように変更ください
• MENUボーダーカラー変更方法
• 色見本/カラーチャート
• よく見かけるカスタマイズミス例
• 不具合報告お願いします。

■ テンプレート利用規定

• ヒヨコ君増殖中テンプレートについて

■ 素材

素材辞典 Vol.100 大空と彩雲編 Array (2001/10/26) データクラフト この商品の詳細を見る

素材辞典 Vol.124 子犬と子猫編 Array (2003/05/06) データクラフト この商品の詳細を見る

基本的な作りは以前のテンプレートとほぼ同じなのでヒヨコ君増殖中テンプレを使用した事ある人なら簡単にお好みのデザインに変更できると思います。いろいろな画像を張り替えたりして自分だけの素敵なテンプレートを作ってみてください。

■ カスタマイズ情報（応用してください）

• よくある質問Ｑ＆Ａ・カスタマイズ

当テンプレートはまだまだ承認まち状態です。

でだ、テンプレートが承認されるまでテンプレート記事をトップに置いておきたかったのですが、なかなか承認されないようなのでちょっとCSSで遊んでみようと思う。R'style Lab in FC2のR'style氏がこんな記事を上げている。

• CSS で装飾してください。 vol. 2.0＠R'style Lab in FC2

はじめから決められたHTMLをCSSのみで弄ると言えばDoblogを思い出すんだけど、これがなかなか楽しいんですよ。って事で途中経過を公開しながら完成に近づけていこうと思います。

• TOPだけなら85％ぐらいできたかも＠R'style Lab HTML
• 影響を受けそうなので他のデザインは完成するまでみない。
• とりあえず当ブログのテンプレートのようにしてみる
• おまえはこの形しか作れないのか？とか言わないように
• 一旦この形にする事で後からいろんな形に変更が可能になるんだぜ。フヒヒ
• パーマリンクページまでやると面倒なのでTOPページだけにしたよ。
• TOP画像ブロックは少し強引に確保してみました。
• 見出しの効果的なデザインが思いつかない・・・

余談ですが、自作テンプレートの宣伝に一番効果的な場所はFC2管理画面上であって、あそこに長く載る事で飛躍的にダウンロード数があがるのですが、経験上あそこの1ページ目に表示されるのは1～2日程度。埋もれてしまえば、後は自分で宣伝するか、利用者が莫大な共有テンプレートの中から掘り出すか、他の人が使っているテンプレートを著作表示から追うかしかダウンロードされる見込みがなくなってしまうんだよね。

センスの良いテンプレートも結構埋もれてしまってるし、あれはどうにかならないものか・・・。もったいないんだぜ。どうせなら3～5日に1度ぐらいのペースでの更新にならねーかな。でも、そうなると承認待ちテンプレートだらけになってしまうか・・・

ただいま、共有テンプレート登録に向けての最終チェックを行なっております。ご迷惑おかけします。きっと近日中に公開できると思います。

• 各ブラウザ表示結果＠Browsershots
• Safari 2.0.4のSSはこんな感じ。各見出しが黒々としてます（笑）
• MacIEでの表示確認はしておりません。Mac持ってません＞＜；
• 記事中に使用されると思われるタグの見栄えはこんな感じ。
• 中途半端なHTMLはこのままで＾＾；
• 今回のTOPサンプル画像は一般受けの良い空にしてみた。
• TOP画像はいろいろなデザインも見たいので差し替え仕様で。
• メニューににサンプルDESIGNを仕込ませていただきました。
• Fc2ブックマークボタンのマージン調節完了。
• よっ、ユーザータグ用リンク見栄えはこんな感じ。
• 後のチェック項目はなにがある？・・・
• 明日へ続く
• ソースに残っていた某ブログの変数をFC2変数に直してみた。大丈夫か？
• 大丈夫そうだ。登録するべ。

■ SPECIAL THANKS

• Onefineday

いまさらながら原作コミックDEATH NOTE全巻を読んだ。後編は無理やり書かされたのか？と思うほどグダグダでいまいちだった。って事で画像を少しお借りさせていただき当ブログにはめてみた。

Death note (1) 大場 つぐみ、小畑 健 他 (2004/04/02) 集英社 この商品の詳細を見る

ついでにDEATH NOTEとはまったく関係ありませんが、当テンプレートのカスタマイズ情報を充実させておきました。よろしくです。

■ 関連リンク

• DEATH NOTE　-POP WEB JUMP-（原作コミック）
• DEATH NOTE -デスノート-（実写版）
• DEATH NOTE　デスノート（アニメ版）

明けましておめでとう。今年は想い想われ振り振られで行こうと思います。新年早々、意味不明ですが結局なにが言いたいのかといいますと、去年の反省も含めいろいろな事に行動・挑戦し実のある一年にしたいと思います。失敗したっていいじゃないか。

って事で本年もどうぞよろしくお願いします。