日々あろくろくじ。
通信大卒業生が猫やら旅やら学習やらをつづる雑記帳
--/--/-- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006/03/06 19:13
ようやくブログデザイン変更作業が終わったので衣替え

今回はFC2共有テンプレートにも登録されている有希之武さんのブログ「Glim」で配布中のテンプレート「dark_planet」をカスタマイズ。黒ベースの素敵なテンプレなのですが、我が家のニャンズたちの写真を使いたかったのでそれに合うよう背景色や文字色、リンク色などなどcssの修正祭(謎)。

カスタマイズを始めて数日。
「Glim」さんで新作テンプレート「3cca-s」が配布開始。
・・・あ、これイイ♪と一目ぼれしてしまったので、「dark_planet」をベースに「3cca-s」風なデザインという、なんとも回りくどいカスタマイズにChallenge。

そして完成したのがこれ。

共有テンプレ「dark_planet」をカスタマイズ


表示におかしな部分があったら、ぜひお知らせください


以下、自分用の覚書。
上記テンプレートをカスタマイズしようとされている方の参考に・・・ならんと思います。
必要な方だけドウゾ。
■TOP画像
ゆんフリー写真素材集さんでお借りしたフリー写真(No.1833)と我が家のニャンズ(ルッカとクロノ)をそれぞれ合成。
牛消しはダンナ、合成&色調補正はワタシ。


■記事タイトル一覧を画面上部に移動
”Recent Entries.”などの表示を「3cca-s」風に上部へ。
ソースは「3cca-s」を参考にさせていただきました。
個別記事表示、月別アーカイブ表示、カテゴリ別表示などいかなる表示方法に切り替えたとしても、その条件で絞り込まれた記事一覧が常に表示されるので便利。
以前使っていたルッカ顔のテンプレートも「もくじ。」と表して使っていたので、個人的には欠かせない表示です。


■タイトル用背景画像の変更
A Trial Product's 素材置き場さんでお借りしたアイコンを利用し、記事タイトル一覧と各記事タイトル部分の背景画像を作成。


■月別アーカイブ一覧のスクロール化
月別アーカイブの数が多くなると画面上部の一覧表示が縦長になってしまうので、<div>にscrollbar要素を付けてスクロールで下部項目を表示。


■「Open」「Close」フォルダの追加
開いているフォルダと閉じているフォルダの2種類を作成。
「3cca-s」風にフォルダの画像を左横に追加。


■ラベルの調整
ラベル「#CommentHeader」のジャンプ先が設定されておらず思った場所にジャンプしてくれないので修正。


■プラグインを追加
「dark_planet」はプラグイン対応テンプレートなので、Pick Up!!、BlogPeople、Trackback People、カウンター部分をプラグインに組み込み。
公式プラグインの”フリーエリア”を追加→それぞれソースを貼り付け→プラグインカテゴリーを変更するだけ。編集時もプラグインに追加した必要最小限のソースだけ表示されるから楽だし、表示・非表示の切替えもお手軽。こりゃ便利だわー。
「dark_planet」の場合は、カテゴリー1=メニュー左側+開閉あり、カテゴリー2=メニュー左側+開閉なし、カテゴリー3=メニュー右側+開閉なしになるので注意。


■「ただいまのルッカ」もプラグインに追加
テンプレ変更にあたり、右メニュー上部に居場所(?)を設置し今の状態をドット絵と文字で表示。
またもやjsファイルの保存をShift-JISでしてしまい「なぜスクリプトエラーが出るんだぁーーー!」と前回と同じ過ちを繰り返す(涙)
FC2ブログにupdateするjsファイルは文字コードをEUCで!!


■未解決(;_;)
1.<div id="top_entory_navi"> 部直下にあるコメント「最近の記事一覧タイトル表示(トップページのみ表示)」を付けたままテンプレ保存をすると、IEのみ以下の現象が発生。
1)画面上部のブログ説明文(<h2 class="subtitle">)が途中で表示されなくなる。マウスでドラッグすると表示される。
  →要素にpositionとz-indexを追加、最上部に表示されるよう修正。

2)カレンダーと記事タイトル一覧の間に30pxほどのスペースができる。画面をスクロールするとそのスペースが白い空白行になり、タイトルの背景写真が部分的に白くなる。
  →Shift_JISの文字コード表で1バイト目が8Eになっている漢字が文字化けするという現象と関係あるのかと思い、「事」や「示」の字にエスケープ処理(¥)をするものの無関係の様子。仕方がないので、該当コメント文をまるごと削除。


2.Openフォルダで追記を表示した後、Closeフォルダで記事を閉じたときのジャンプ先がまちまち。追記が短い場合はいいのだが、長い場合は見ていた記事がどこにいったのか一瞬分からなくなってしまう。。。
各記事のタイトル部分にアンカーをつけておいて、Closeクリック時にそこへジャンプさせればいいのだろうけど、Javascriptで制御されているのでうかつに編集して動かなくなるのがコワイ。。。




デザイン変更お疲れ様です♪
そっか、あの写真は合成なんですね~。
原っぱに佇むにゃんずも可愛いです♪

ブログのデザインって、どうも普通のhtmlと勝手が違うんで
未だにサッパリです。(>_<)
そろそろ新しいテンプレ試してみたいんですけどね。
(前のテンプレの修復は投げたらしい・・・^^;)
【2006/03/07 10:09】 URL | チカ #HfMzn2gY[ 編集]
楽しい反面ムズイ・・・
ルッカは芝生が嫌いなようで、キャリーバックから一歩も出てきてくれないので苦肉の策ですわ(笑)

>ブログのデザインって、どうも普通のhtmlと勝手が違うんで

ホントにそうですねー。
このブログで使っているFC2はブロック変数というもので表示・非表示が切り替わるんですが、間違って消してしまうこともあって結構頭を悩ませます(^^;
【2006/03/07 15:28】 URL | なち #ihMNMLjo[ 編集]
Closeの解決法
どうもトラックバックありがとうです。
え~と、未解決に付いてh2の文字消えに付いてはIEのバグと判明しているのですが、私自身も修正が出来なかった部分です。(^^;

カレンダーと記事タイトル一覧の間にスクロールすると画像が白い帯に成る現象ですが、やはりIEの画像レンダリングに問題が有りそうですね。
#container に z-index: 1;を追加する事で現象が減るようです。

Closeのリンクですが、これは完全に設定ミスでした。
id="a<%topentry_no>" と言うIDを上の<div class="date">に移動させ
<div class="date" id="a<%topentry_no>">に修正。
Closeのリンク部分を以下の様に編集する事で記事タイトルへ移動出来ます。

<a href="#a<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;" class="img_close">Close.↑</a>

自分では注意深く見ていなかった部分でした。
すいません(^^;

でもこのように使い勝手などをご報告頂けると今後の参考にも成りますし、オリジナルなデザインで使われている事はとても嬉しいと思っております。(^ー^)
【2006/03/08 00:34】 URL | 有希之武 #V/g6puX6[ 編集]
解決しました!
有希之武さん、コメントありがとうございます。
それだけでも嬉しいのにソース修正のアドバイスまでいただけるとは光栄です(^^)

Closeリンクの件、修正し動作確認したところ問題なく望み通りの動きにすることができました。本当にありがとうございました!

h2の文字消えや白い帯表示の件は、IEのバグだったとは。。。タグの間に全角スペースが挿入していると表示が崩れることがあるので、ソースレベルの問題かなーと思って四苦八苦していました(^^;

元テンプレの面影がないほど手を加えてしまっていますが、そう言っていただけてこちらこそ有難く思っています。
改めまして、本当にありがとうございました♪
【2006/03/08 22:21】 URL | なち #ihMNMLjo[ 編集]














管理者にだけ表示を許可する

 ※コメントは管理人承認後に表示されます。詳細はこちら。



Design by mi104c. Edit by nachi.
Copyright © 2017 日々あろくろくじ。, All rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。