Nefert : Archives [ 2008年12月 ]
FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
07:01
風と雷の音であまり眠れなかった
超天気悪いよ－。
Certapaxの最適化を済ませ、共有の方も更新させておきました。長い間サブカラム内リンクのマウスオーバー時の色指定が間違っていたっぽい。なんてこった…。
Certapaxをお使いのかたは、是非テンプレートの更新をしてみてください。
カスタマイズ項目なども追加されているので、格段に使いやすくなっているかと思います。
あと、「IE6用max-width・min-width」をちょっと更新しました。
かなり充実した記事になってきた感じです（｀・ω・´）
ブログ拍手を久しぶりに確認したところ、拍手コメントがありました
追記にてお返事させていただきます。（遅れてしまいました。すみません）
超天気悪いよ－。
Certapaxの最適化を済ませ、共有の方も更新させておきました。長い間サブカラム内リンクのマウスオーバー時の色指定が間違っていたっぽい。なんてこった…。
Certapaxをお使いのかたは、是非テンプレートの更新をしてみてください。
カスタマイズ項目なども追加されているので、格段に使いやすくなっているかと思います。
あと、「IE6用max-width・min-width」をちょっと更新しました。
かなり充実した記事になってきた感じです（｀・ω・´）
ブログ拍手を久しぶりに確認したところ、拍手コメントがありました
追記にてお返事させていただきます。（遅れてしまいました。すみません）
スポンサーサイト
01:59
01:33
一気に寒くなってきました。冬到来といった感じです。
02:05
実は今日でブログ開設から一年経ちました。
飽きっぽい＋何かとリセットしたがってしまう自分が一年以上続けられたなんて珍しい！
この一年間で、共有テンプレート数は16、総ダウンロード数はいつのまにやら30000を超えていました。
皆さん、本当にありがとうございます。
色々な方に使ってもらえたからこそ今までテンプレート制作を続けられました。感謝の気持ちでいっぱいです
これからものんびりとテンプレートを作り続けていけたらと思っておりますので、今後ともNefertをよろしくお願いいたします！
飽きっぽい＋何かとリセットしたがってしまう自分が一年以上続けられたなんて珍しい！
この一年間で、共有テンプレート数は16、総ダウンロード数はいつのまにやら30000を超えていました。
皆さん、本当にありがとうございます。
色々な方に使ってもらえたからこそ今までテンプレート制作を続けられました。感謝の気持ちでいっぱいです
これからものんびりとテンプレートを作り続けていけたらと思っておりますので、今後ともNefertをよろしくお願いいたします！
00:14
http://fc2support.blog85.fc2.com/blog-entry-319.html
障害の内容については↑こちらをご覧くださいませ。
Nefertのテンプレートで使用している画像の多くは「img41」サーバーに置かれているのですが、ちょうどサーバーの不調に巻き込まれてしまったようです。
テンプレートをお使いの方々にはご迷惑おかけしました。とはいえ、私が謝っても仕方ないのでどうしたらいいのやら
一応大丈夫だと思いますが、もし今までのテンプレートと表示が違ったりしていたらご連絡いただけるとありがたいです。
障害の内容については↑こちらをご覧くださいませ。
Nefertのテンプレートで使用している画像の多くは「img41」サーバーに置かれているのですが、ちょうどサーバーの不調に巻き込まれてしまったようです。
テンプレートをお使いの方々にはご迷惑おかけしました。とはいえ、私が謝っても仕方ないのでどうしたらいいのやら
一応大丈夫だと思いますが、もし今までのテンプレートと表示が違ったりしていたらご連絡いただけるとありがたいです。
02:44
対象テンプレート
・ Snowdance
・ Amaris
・ Certapax
HTMLの編集を行います。
HTMLの編集から、以下の部分を探してください。（上の方にあります）
この直前に、次の記述を追加してください。
画像のurl@1、画像のurl@2という部分には使用したい画像のurlを入れます。使用したい画像が3個以上ある場合は、画像のurl@1の方の行をコピー・ペーストで増やしてください。このスクリプトでは画像は100個まで使用可能です。
なお、javascriptを使わないように設定されている環境で閲覧した場合は、ランダムで表示させることはできません。
そういった環境で閲覧した際にはスタイルシートで設定されている画像が表示されます。
※スタイルシートで設定できる画像は一枚のみです。
・ Snowdance
・ Amaris
・ Certapax
HTMLの編集を行います。
HTMLの編集から、以下の部分を探してください。（上の方にあります）
</head>
この直前に、次の記述を追加してください。
<script type="text/javascript">
var imglist = new Array(
"画像のurl@1",
"画像のurl@2" );
var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
var output = '<style>#header { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
document.write(output);
</script>
画像のurl@1、画像のurl@2という部分には使用したい画像のurlを入れます。使用したい画像が3個以上ある場合は、画像のurl@1の方の行をコピー・ペーストで増やしてください。このスクリプトでは画像は100個まで使用可能です。
なお、javascriptを使わないように設定されている環境で閲覧した場合は、ランダムで表示させることはできません。
そういった環境で閲覧した際にはスタイルシートで設定されている画像が表示されます。
※スタイルシートで設定できる画像は一枚のみです。
00:58
ちょっとずついじっていたテンプレートを一気に更新しました。
更新したのはBirdcall・Herba・Amaris・Exnihiloの四つです。
大きく変更されたのはAmarisとExnihilo。
Amarisは以前からやっていた最適化を共有テンプレートにも適用させました。
以前より簡易カスタマイズ項目が充実しています。Amarisをお使いの方は是非更新してみてください。
Exnihiloは、幅可変／固定の切り替えに対応しました。Exnihiloは記事を表示するスペースがちいさめなので、写真や画像を載せる方は幅を固定して使った方がいいかもしれません。
また、一般的な2カラムの場合では左右カラムのいれかえ機能をつけてきたのですが、今回このExnihiloには、2カラム／1カラムの切り替え機能をつけてみました。何でもありな感じになってきましたね。
1カラムでの表示はこんな感じです。
そのほかの変更点は以下の通り。
[ 共通 ]
・ コメント投稿部分の色変更・絵文字などのパレット位置を、テキストボックスの上部に変更。今後すべてのテンプレートに適用させていきます。
・ 簡易カスタマイズ項目の追加。フォントサイズ・カラム幅の割合・文字色などが変更しやすいようになっています。
・ IE6用の可変幅の設定を更新。
・ 公式プラグインでのカレンダー表示を更新
[ Birdcall ]
・ 可変幅の最大値を変更
・ タイトル部分の背景色変更。画像非表示でも見やすくなっています。
[ Herba ]
・ ライセンスをCCライセンス［表示］に変更
更新したのはBirdcall・Herba・Amaris・Exnihiloの四つです。
大きく変更されたのはAmarisとExnihilo。
Amarisは以前からやっていた最適化を共有テンプレートにも適用させました。
以前より簡易カスタマイズ項目が充実しています。Amarisをお使いの方は是非更新してみてください。
Exnihiloは、幅可変／固定の切り替えに対応しました。Exnihiloは記事を表示するスペースがちいさめなので、写真や画像を載せる方は幅を固定して使った方がいいかもしれません。
また、一般的な2カラムの場合では左右カラムのいれかえ機能をつけてきたのですが、今回このExnihiloには、2カラム／1カラムの切り替え機能をつけてみました。何でもありな感じになってきましたね。
1カラムでの表示はこんな感じです。
そのほかの変更点は以下の通り。
[ 共通 ]
・ コメント投稿部分の色変更・絵文字などのパレット位置を、テキストボックスの上部に変更。今後すべてのテンプレートに適用させていきます。
・ 簡易カスタマイズ項目の追加。フォントサイズ・カラム幅の割合・文字色などが変更しやすいようになっています。
・ IE6用の可変幅の設定を更新。
・ 公式プラグインでのカレンダー表示を更新
[ Birdcall ]
・ 可変幅の最大値を変更
・ タイトル部分の背景色変更。画像非表示でも見やすくなっています。
[ Herba ]
・ ライセンスをCCライセンス［表示］に変更
14:28
「Amaris」の最適化をすませてみました。今回は最適化の他に表示に関して色々と修正を加えたので、ちょっとだけテストをしてから共有の方を更新させたいと思います。
テスト中は↑の画像をクリックすればAmarisのデザインでブログを閲覧できます。おためしください。
主な変更点をあげると、
・サブタイトルを改行して表示するように
→今まではタイトルに続けて表示させていたので、タイトルが長かったりサブタイトルが長かったりしたときにちょっと見映えが悪くなってました。
・タグリスト・スレッドの表示を変更
→バトンの表示をちょっと応用してみました。
といった感じです。
そのほか、バトンへの対応、幅可変／固定切り替え機能・カラム配置変更機能の導入、簡易カスタマイズ項目の作成なども行ったので、以前より扱いやすくなっているかと思います。
02:28
snowdanceのカラム配置は特殊なため、カラムの幅を編集する時には編集箇所がちょっと多くなってしまいます。構造を把握していないと大変かと思うので、編集方法について紹介させていただきます。
※snowdance2.2以降は、簡易カスタマイズ項目内に記述をまとめてあります。
なお、記事側のカラムを「メインカラム」、タイトルとサブメニュー側のカラムを「サブカラム」と表記します。
ここでは例として、メインカラムとサブカラムを6:4の割合で表示するようにしてみます。つまり、メインカラムが60%、サブカラムが40%。
■サブカラム
まず、サブカラム側のサイズを変更します。編集箇所は、以下の下線が引かれている部分になります。ナンバリングを参考にすると編集箇所が探しやすいかと思います。
アスタリスク（*←これ）がついていないwidthの値を、50%から40%に変更します。
アスタリスクがついているwidthの値は、(上の値-0.5)%にします。つまり、今回の例では39.5%です。
サブカラムは変更箇所が「/*[3.1]*/ #header」と「/*[15.1]*/ #sub」の2ヵ所ありますので、どちらも同じように変更してください。
■メインカラム
次に、メインカラム側のサイズを変更します。
アスタリスクがついていないwidthの値を、50%から60%に変更します。
アスタリスクがついているwidthの値は、(上の値+0.4)%にします。つまり、ここでは60.4%になります。
アスタリスクのついていないwidthの値は、メインカラム側とサブカラム側でぴったり100%になるようにしてください。こちらのwidthの値を指定するときは、小数点以下の数値を使わない方が良いかと思います。
■プラグインの横並び解除
なお、初期の設定ではプラグイン1とプラグイン2・3が横並びになっているため、サブカラムの幅を狭くするとプラグインの表示領域はより狭くなってしまいます。
サブカラムの幅を狭くする場合は、プラグインとプラグイン2・3の横並びを解除すると良いでしょう。
解除するには、以下の記述をスタイルシートの最後尾に追加してください。
■ローディングアニメーションの位置変更
また、このままだとタイトル画像を読み込んでいる際に表示されるアニメーションの表示位置がちょっとずれている（変更後の幅によってはいつまでも表示され続けることもあります）ので、見栄えにこだわる方はコレに関しても編集してみましょう。
編集箇所は以下の下線が引かれている部分になります。（ナンバリングはされていません。スタイルシートの上部あたりに記述されています。）
カスタマイズ非推奨と書いてありますが、ガンガン変更しちゃいます。
下線が2カ所に引いてありますが、カラムを初期状態で使用している場合は上側を、逆にして使っている場合には下側を編集します。
初期状態で使用している場合は、上側の下線部中の「75%」という値を編集することになります。
変更後の値は、｛[メインカラムの幅]+（[サブカラム幅]/2）｝% です。
今回の例ではメインカラムを60%、サブカラムを40%に変更しているので、[60 + （40 / 2）]% = 80% ということになります。
カラムを逆にしている場合は、「25%」という値を、（[サブカラム幅]/2）%にします。ということで、今回の例では20%になります。
■ 以下、技術的情報
アスタリスクがついたプロパティはIE7以下用のCSSハック（通称アスタリスクハック）です。IE6以下に使えるアンダースコアハックは結構有名ですが、アスタリスクハックはIE7でも修正されなかったため、IE7以下につかえるハックの一つとなっています。なお、アンダースコアハック同様、仕様上は存在しないプロパティを使うのでCSS Validatorは通りません。Validじゃなきゃ嫌だという方はごめんなさい。ここでは管理の容易さを考えてハックを使う方をえらびました。
IE7以下には、二つのボックスをfloatで並べるときに二つのボックスのwidthが足して100%になる場合、表示幅によっては片方のボックスが下に落ちてしまうという不具合があります。今回はその対策として、アスタリスクハックを用いたwidthプロパティと、小数点以下のパーセンテージを使いました。
※snowdance2.2以降は、簡易カスタマイズ項目内に記述をまとめてあります。
なお、記事側のカラムを「メインカラム」、タイトルとサブメニュー側のカラムを「サブカラム」と表記します。
ここでは例として、メインカラムとサブカラムを6:4の割合で表示するようにしてみます。つまり、メインカラムが60%、サブカラムが40%。
■サブカラム
まず、サブカラム側のサイズを変更します。編集箇所は、以下の下線が引かれている部分になります。ナンバリングを参考にすると編集箇所が探しやすいかと思います。
/*[3.1]*/
#header {
width : 50%;
*width : 49.5%;
background-position : 50% 50%;
background-repeat : no-repeat;
text-align : center;
}
/*[15.1]*/
#sub {
padding-top : 1.5em;
width : 50%;
*width : 49.5%;
color : #fff;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/snowdance_title_border-y.gif");
background-repeat : repeat-y;
background-color : #000;
}
アスタリスク（*←これ）がついていないwidthの値を、50%から40%に変更します。
アスタリスクがついているwidthの値は、(上の値-0.5)%にします。つまり、今回の例では39.5%です。
サブカラムは変更箇所が「/*[3.1]*/ #header」と「/*[15.1]*/ #sub」の2ヵ所ありますので、どちらも同じように変更してください。
■メインカラム
次に、メインカラム側のサイズを変更します。
/*[4.1]*/
#main {
width : 50%;
*width : 50.4%;
overflow : hidden;
}
アスタリスクがついていないwidthの値を、50%から60%に変更します。
アスタリスクがついているwidthの値は、(上の値+0.4)%にします。つまり、ここでは60.4%になります。
アスタリスクのついていないwidthの値は、メインカラム側とサブカラム側でぴったり100%になるようにしてください。こちらのwidthの値を指定するときは、小数点以下の数値を使わない方が良いかと思います。
■プラグインの横並び解除
なお、初期の設定ではプラグイン1とプラグイン2・3が横並びになっているため、サブカラムの幅を狭くするとプラグインの表示領域はより狭くなってしまいます。
サブカラムの幅を狭くする場合は、プラグインとプラグイン2・3の横並びを解除すると良いでしょう。
解除するには、以下の記述をスタイルシートの最後尾に追加してください。
#plugin1 ,
#plugin23 {
width : 100%; float : none;
}
■ローディングアニメーションの位置変更
また、このままだとタイトル画像を読み込んでいる際に表示されるアニメーションの表示位置がちょっとずれている（変更後の幅によってはいつまでも表示され続けることもあります）ので、見栄えにこだわる方はコレに関しても編集してみましょう。
編集箇所は以下の下線が引かれている部分になります。（ナンバリングはされていません。スタイルシートの上部あたりに記述されています。）
/* ■■ カラムシフト設定 ■■
───────────────────────────────────────
カラムの配置を逆にしたい場合は、HTMLの編集から【 ▼カラム配置の設定 】という
箇所を検索し、クラス名（「class="～"」 の～部分）を変更してください。*/
/* この部分はカスタマイズ非推奨 */
.shift-off { background-position : 75% 300px;}
.shift-off div#header {float:right;}
.shift-off div.header-container {background-position:left bottom;padding:0 0 0 1px;}
.shift-off div#main {float:left;}
.shift-off div#sub {float:right;background-position:left top;}
.shift-on {background-position : 25% 300px;}
.shift-on div#header { float:left; }
.shift-on div.header-container {background-position:right bottom;padding:0 1px 0 0;}
.shift-on div#main {float:right;}
.shift-on div#sub {float:left;background-position:right top;}
/* この部分はカスタマイズ非推奨 */
カスタマイズ非推奨と書いてありますが、ガンガン変更しちゃいます。
下線が2カ所に引いてありますが、カラムを初期状態で使用している場合は上側を、逆にして使っている場合には下側を編集します。
初期状態で使用している場合は、上側の下線部中の「75%」という値を編集することになります。
変更後の値は、｛[メインカラムの幅]+（[サブカラム幅]/2）｝% です。
今回の例ではメインカラムを60%、サブカラムを40%に変更しているので、[60 + （40 / 2）]% = 80% ということになります。
カラムを逆にしている場合は、「25%」という値を、（[サブカラム幅]/2）%にします。ということで、今回の例では20%になります。
■ 以下、技術的情報
アスタリスクがついたプロパティはIE7以下用のCSSハック（通称アスタリスクハック）です。IE6以下に使えるアンダースコアハックは結構有名ですが、アスタリスクハックはIE7でも修正されなかったため、IE7以下につかえるハックの一つとなっています。なお、アンダースコアハック同様、仕様上は存在しないプロパティを使うのでCSS Validatorは通りません。Validじゃなきゃ嫌だという方はごめんなさい。ここでは管理の容易さを考えてハックを使う方をえらびました。
IE7以下には、二つのボックスをfloatで並べるときに二つのボックスのwidthが足して100%になる場合、表示幅によっては片方のボックスが下に落ちてしまうという不具合があります。今回はその対策として、アスタリスクハックを用いたwidthプロパティと、小数点以下のパーセンテージを使いました。
00:27
…ということが多々ありました。
1．ベースHTMLで微妙にミスがあったのを発見
サブタイトル表示部分にちょっとしたミスがありました。一応、表示には殆ど影響はありません。そのせいでずーっと気づいていなかったんですけど。
ミスというのは、個別ページなどにいくとサブタイトルが表示されるようにいくつかのテンプレートにはしてあるのですが、そこで</span>が1個余計に生成されてしまうというもの。</div>じゃなくてホントに良かった（どっちにしろ良くないけど）。
早めに修正していきたいと思いますー。
2．テスト中のExnihiloで表示のくずれ
一部ページを現在テストしているExnihiloで見るとレイアウトが崩れていました。で、調べてみたところIE・Opera・Chromeではちゃんと表示されてFirefoxで見たときだけ表示が崩れるという謎の挙動。イミフ。
OperaやChromeで大丈夫なのにFirefoxではダメっていうのが初めての経験だったので、かなり原因究明に苦戦しました。HTMLを見直しスタイルを見直し…という感じでよーく調べてみたところ、HTMLの処理が関係しているらしく、記事のほうを修正してみたら改善されました（HTML自体は問題ないというのがクセモノでした）。
が、テンプレという立場上、記事の方を修正しなければいけないというのは本末転倒なので、もう一度構造を見直し、いろんな部分で妥協したバージョンを作成してみました。
つかれたー。
3．「IE6用max-width・min-width」で色々発見
ってことで、改訂してみました。まだいくつか不安な点があります。いんたーねっとってむずかしいな。
1．ベースHTMLで微妙にミスがあったのを発見
サブタイトル表示部分にちょっとしたミスがありました。一応、表示には殆ど影響はありません。そのせいでずーっと気づいていなかったんですけど。
ミスというのは、個別ページなどにいくとサブタイトルが表示されるようにいくつかのテンプレートにはしてあるのですが、そこで</span>が1個余計に生成されてしまうというもの。</div>じゃなくてホントに良かった（どっちにしろ良くないけど）。
早めに修正していきたいと思いますー。
2．テスト中のExnihiloで表示のくずれ
一部ページを現在テストしているExnihiloで見るとレイアウトが崩れていました。で、調べてみたところIE・Opera・Chromeではちゃんと表示されてFirefoxで見たときだけ表示が崩れるという謎の挙動。イミフ。
OperaやChromeで大丈夫なのにFirefoxではダメっていうのが初めての経験だったので、かなり原因究明に苦戦しました。HTMLを見直しスタイルを見直し…という感じでよーく調べてみたところ、HTMLの処理が関係しているらしく、記事のほうを修正してみたら改善されました（HTML自体は問題ないというのがクセモノでした）。
が、テンプレという立場上、記事の方を修正しなければいけないというのは本末転倒なので、もう一度構造を見直し、いろんな部分で妥協したバージョンを作成してみました。
つかれたー。
3．「IE6用max-width・min-width」で色々発見
ってことで、改訂してみました。まだいくつか不安な点があります。いんたーねっとってむずかしいな。
11:35
[！注意！]
この記事の情報は「やってみたらできた」というメモ程度の内容＋古い情報です。Javascriptについての知識もあまり持ち合わせていないため、深い考察などもできていません。ご了承ください。
2010/02/10
さすがにメモ程度の内容で検索の上位に表示されてしまう（なぜ……）のはどうなの、ということで記事の改訂をしようと思ったのですが、既にかなり詳しく解説されているページがありましたのでそちらを紹介させていただきます。
ずっと工事中【IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]】
2010/02/10
さすがにメモ程度の内容で検索の上位に表示されてしまう（なぜ……）のはどうなの、ということで記事の改訂をしようと思ったのですが、既にかなり詳しく解説されているページがありましたのでそちらを紹介させていただきます。
ずっと工事中【IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]】
古い情報です。取り扱いにご注意ください。
このエントリーでは、ページ全体の幅を下限・上限有りのリキッドレイアウトとすることを目的としたTipsの紹介をしていきます。
01:52
いろいろなテンプレートに幅可変／固定切り替えを導入しようとしたのですが、Exnihiloはちょっと特殊な構造で作っていたのでそのままだとうまくいきませんでした。
ということで、構造をかなり大幅に変更して現在テストを行っています。
もし表示が崩れていたり、おかしいなぁと言うのがありましたら遠慮無く教えてくださいませー！
いろんな部分で多分私にしかわからないであろうこだわりを貫いたところ大がかりな作業に…orz 超疲れた。
Snowdance、Day-out、Blancが登録されましたが、blancがダウンロードされなさ過ぎで笑えました。
さすがにシンプルにしすぎたかもです。自分としてはあれくらいでちょうど良いんですけど。手抜きと思われちゃったかな。「シンプル」って難しいなぁ。
こんなにダウンロードされていないと表示崩れてるのかなとか不安になったりします…。
ということで、構造をかなり大幅に変更して現在テストを行っています。
もし表示が崩れていたり、おかしいなぁと言うのがありましたら遠慮無く教えてくださいませー！
いろんな部分で多分私にしかわからないであろうこだわりを貫いたところ大がかりな作業に…orz 超疲れた。
Snowdance、Day-out、Blancが登録されましたが、blancがダウンロードされなさ過ぎで笑えました。
さすがにシンプルにしすぎたかもです。自分としてはあれくらいでちょうど良いんですけど。手抜きと思われちゃったかな。「シンプル」って難しいなぁ。
こんなにダウンロードされていないと表示崩れてるのかなとか不安になったりします…。
01:30
クリックでテンプレートのプレビューができます。
★ 基本情報
テンプレート名 : snowdance
最新バージョン : 2.4
更新履歴 - Update history
- 09/10/08 : 2.3→2.4
- [Modify] 全記事一覧表示に対応
- [Modify] 「前後の記事へのリンク部分」のスタイル変更
- [Modify] プラグイン3の出力方法を変更
- [Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
- [Modify] 簡易カスタマイズ一部改良
- [Modify] pre、hrなどのデフォルトスタイル変更
- 09/08/01 : 2.23→2.3
- [Bug Fix] カラム幅調整用カスタマイズのミス修正
- 09/07/20 : 2.22→2.23
- [Bug Fix] 簡易カスタマイズ項目内のコメントミス修正
（軽微な更新のため、更新通知はしておりません） - 09/07/05 : 2.21→2.22
- [Modify] 簡易カスタマイズ項目に「プラグインカラムの横並び解除」を追加
（軽微な更新のため、更新通知はしておりません） - 09/07/04 : 2.2→2.21
- [Bug Fix] 独自クラスのスタイル指定を修正
（軽微な更新のため、更新通知はしておりません） - 09/07/02 : 2.1.0→2.2
- [Bug Fix] 追記スクリプト仕様変更など。
- [Modify] IE8用の微調整
- [Modify] 独自クラス追加
- 09/03/30 : 2.0.0→2.1.0
- [Bug Fix] HTMLの記述ミス修正
白の季節へ。
画像差し替えでインパクトの強いオリジナルテンプレートになります。
左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（snowdance 2.2以降）。ご了承ください。
更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。
01:03
「ミュンヘン・クリスマス市 in Sapporo」に行ってきました。
これは札幌駅にある「T38」から。札幌市を一望できます。
わかったこと：
・夜景は手持ちだと超難しい。三脚欲しい。
・ニコン・キャノンユーザーばっかりでなんか寂しい。（自分はソニーのα300）
これは札幌駅にある「T38」から。札幌市を一望できます。
わかったこと：
・夜景は手持ちだと超難しい。三脚欲しい。
・ニコン・キャノンユーザーばっかりでなんか寂しい。（自分はソニーのα300）
02:16
クリックでテンプレートのプレビューができます。
★ 基本情報
テンプレート名 : blanc
最新バージョン : 2.0
更新履歴 - Update history
- 09/10/08 : バージョン表記無し→2.0
- [Modify] 追記開閉スクリプト実装
- [Modify] 全記事一覧表示に対応
- [Modify] 「前後の記事へのリンク部分」のスタイル変更
- [Modify] プラグイン3の出力方法を変更
- [Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
- [Modify] 簡易カスタマイズ改良
- [Modify] IE8用の微調整
- [Modify] MacIEへのスタイル適用を除外
- [Modify] pre、hrなどのデフォルトスタイル変更
- [Modify] その他色々大幅更新
飾らないデザイン、真っ白なカタチ。記事が映えるシンプルテンプレート。
タイトル画像の変更、左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（blanc 2.0以降）。ご了承ください。
02:17
昨日メモしておいた「幅可変／固定切り替え機能」ですが、結構うまくいったのでAd-astraに適用させてみました。
幅可変の弱点の一つに「画像差し替えの際に用意する画像サイズが大きくなってしまう」というものがあったのですが、この機能を使って幅を固定することで、カスタマイズの完成度をあげることが出来るようになったんじゃないかなと思います。
コレで少しは「カスタマイズしやすいテンプレート」になったかな？
…と思ったけど、スタイルシートが1000行近くなっちゃってるので大差ないや(-ω-；)
「body」のスタイルを記述し始めるのが200行あたりっていう時点で詰め込みすぎ。
幅可変／固定切り替え機能についてはこれから登録されるblanc・Day-out・Snowdanceにも適用させていきますね。
さらに、もう一回昔のにも手を加えなきゃ-、ということでBirdcallも更新です。
ライセンスをCCライセンス［表示］に変更したほか、カラム配置の変更機能、幅可変／固定切り替え機能の追加、バトンへの対応を行いました。
今見たらBirdcallのスタイルシートがすんごい汚い、というかもうよくわかんないことになっていました…。
Birdcallは一番最初に公開したテンプレで、色々と試行錯誤した結果の一つです。どうかつかってやってくださいませ。
こんな感じで、テンプレートの最適化作業も含めて昔のテンプレートにもちょこちょこ修正を加えていこうと思います。昔のカオスなソースコードも頑張ってなおしていきますよー。最初からコーディングルールとか作っておけば良かったなとつくづく感じます('A｀)
あ、なにやらテンプレート編集中にちょっとミスがあって、しばらくこのページが表示されてなかったみたいです。ご心配おかけしてすみません。このように元気にやっておりますm(_ _)m ぺこぺこ
幅可変の弱点の一つに「画像差し替えの際に用意する画像サイズが大きくなってしまう」というものがあったのですが、この機能を使って幅を固定することで、カスタマイズの完成度をあげることが出来るようになったんじゃないかなと思います。
コレで少しは「カスタマイズしやすいテンプレート」になったかな？
…と思ったけど、スタイルシートが1000行近くなっちゃってるので大差ないや(-ω-；)
「body」のスタイルを記述し始めるのが200行あたりっていう時点で詰め込みすぎ。
幅可変／固定切り替え機能についてはこれから登録されるblanc・Day-out・Snowdanceにも適用させていきますね。
さらに、もう一回昔のにも手を加えなきゃ-、ということでBirdcallも更新です。
ライセンスをCCライセンス［表示］に変更したほか、カラム配置の変更機能、幅可変／固定切り替え機能の追加、バトンへの対応を行いました。
今見たらBirdcallのスタイルシートがすんごい汚い、というかもうよくわかんないことになっていました…。
Birdcallは一番最初に公開したテンプレで、色々と試行錯誤した結果の一つです。どうかつかってやってくださいませ。
こんな感じで、テンプレートの最適化作業も含めて昔のテンプレートにもちょこちょこ修正を加えていこうと思います。昔のカオスなソースコードも頑張ってなおしていきますよー。最初からコーディングルールとか作っておけば良かったなとつくづく感じます('A｀)
あ、なにやらテンプレート編集中にちょっとミスがあって、しばらくこのページが表示されてなかったみたいです。ご心配おかけしてすみません。このように元気にやっておりますm(_ _)m ぺこぺこ
01:20
テンプレに関して、ちょっとしたアイディア＋いつも忘れちゃってることがあったので寝る前にメモしておきます。
・幅の可変・固定を切り替えられるようにする
カラム配置を変更するのと同じ方法で幅の可変・固定を切り替えられるようにしたら面白いかも。いつも幅可変で作ってるけど、幅を固定したいというカスタマイズの需要は結構あると思うので、最初からテンプレートに組み込んでおけば失敗することも少なくなるはず！
あとメインカラム・サブカラムの幅を修正しやすいようにCSSの記述を修正したほうがいいかも？
・多言語変数を導入する
めんどくさいけど、一応やっとかないとだめなのかな…。めんどくさいなぁ。
・最適化作業を進める
忘れがちな最適化作業。次はAmarisだったはず。
最適化が終わっている昔のテンプレート（Birdcall・Herbaとか）でも、ライセンスについて一貫性がなかったりしたのでそれも修正しておかなきゃ。
・幅の可変・固定を切り替えられるようにする
カラム配置を変更するのと同じ方法で幅の可変・固定を切り替えられるようにしたら面白いかも。いつも幅可変で作ってるけど、幅を固定したいというカスタマイズの需要は結構あると思うので、最初からテンプレートに組み込んでおけば失敗することも少なくなるはず！
あとメインカラム・サブカラムの幅を修正しやすいようにCSSの記述を修正したほうがいいかも？
・多言語変数を導入する
めんどくさいけど、一応やっとかないとだめなのかな…。めんどくさいなぁ。
・最適化作業を進める
忘れがちな最適化作業。次はAmarisだったはず。
最適化が終わっている昔のテンプレート（Birdcall・Herbaとか）でも、ライセンスについて一貫性がなかったりしたのでそれも修正しておかなきゃ。
16:57
Windowsの外見が嫌で、Mac風のデスクトップにしようとした人は一度は興味を持ったことがあるであろう「Osakaフォント」。Macでは標準搭載されているフォントで、可読性・デザイン性に優れている魅力的なフォントです。
このOsakaフォントをWindowsでも使えるようにしたものがネット上で配布されていて、色々なブログやウェブサイトがそのページを紹介し、 Osakaフォントでの閲覧を推奨していたりしています。それだけOsakaフォントは魅力的なんですねー。みんなにOsakaフォントを使ってもらいたい、自分のページをOsakaフォントで見てもらいたい、って気持ちもわかります。
が、ちょっとまった。
いくらOSに標準搭載されているからといって、OSの価格の中にフォントの価格が含まれているだけで無料というわけじゃないし、ライセンス的にもかなり怪しいところ。Windowsと比べ、読みやすくてきれいなフォントが使える、というのがMacのウリの一つにもなっているはずなんで、それを勝手に Windowsで使えるようにしているってのは色々引っ掛かる気がします。
ということで、調べてみました。
一番詳しく乗っているのはこちらでしょうか。
書体関係 Wiki - FreeButNotFreeFont
こちらによると、
また、私と同様、Osakaフォントのライセンスについて調べてくれた方もいらっしゃいました。
days of speed(2007-08-01) 「ネット上に流れているOsakaフォントはクロ」
何より問題なのは、このようにWindows用Osakaフォントはライセンス的に「黒」に近く（著作権者による訴えがない限り一応「灰色」であるとしておきます）、利用の際には「自己責任、何があっても泣かない」という点を理解しておかなければならないのに、それについて触れないで、とりあえず「きれいだから」「見やすいから」「好きだから」といった理由でWindows用Osakaフォントを推奨している人が多すぎるという点だと思います。
ライセンスに抵触するリスクを負っているということに言及したくないのであれば、安易にWindows用Osakaフォントを推奨するのはやめておいた方がいいのではないでしょうか。
ただ、参考にした二つのページではライセンスについて、「スタンダードシングルユースライセンス契約」から引用していますが、元のページが消えてしまっているので参照できないのが残念。原文を読みたいけど、どっかにないかな…。
このOsakaフォントをWindowsでも使えるようにしたものがネット上で配布されていて、色々なブログやウェブサイトがそのページを紹介し、 Osakaフォントでの閲覧を推奨していたりしています。それだけOsakaフォントは魅力的なんですねー。みんなにOsakaフォントを使ってもらいたい、自分のページをOsakaフォントで見てもらいたい、って気持ちもわかります。
が、ちょっとまった。
いくらOSに標準搭載されているからといって、OSの価格の中にフォントの価格が含まれているだけで無料というわけじゃないし、ライセンス的にもかなり怪しいところ。Windowsと比べ、読みやすくてきれいなフォントが使える、というのがMacのウリの一つにもなっているはずなんで、それを勝手に Windowsで使えるようにしているってのは色々引っ掛かる気がします。
ということで、調べてみました。
一番詳しく乗っているのはこちらでしょうか。
書体関係 Wiki - FreeButNotFreeFont
こちらによると、
アップルジャパンより無償配布されている「漢字Talk 7.5 バージョン7.5.3」から Osaka フォントを抜き出し改変、再配付している。Osaka フォントはアップルソフトウェアの一部として配布されており、一部を抜き出しての配布、改変は認められていないので、使用するとライセンス違反になります。
（引用：2008年12月2日）
また、私と同様、Osakaフォントのライセンスについて調べてくれた方もいらっしゃいました。
days of speed(2007-08-01) 「ネット上に流れているOsakaフォントはクロ」
何より問題なのは、このようにWindows用Osakaフォントはライセンス的に「黒」に近く（著作権者による訴えがない限り一応「灰色」であるとしておきます）、利用の際には「自己責任、何があっても泣かない」という点を理解しておかなければならないのに、それについて触れないで、とりあえず「きれいだから」「見やすいから」「好きだから」といった理由でWindows用Osakaフォントを推奨している人が多すぎるという点だと思います。
ライセンスに抵触するリスクを負っているということに言及したくないのであれば、安易にWindows用Osakaフォントを推奨するのはやめておいた方がいいのではないでしょうか。
ただ、参考にした二つのページではライセンスについて、「スタンダードシングルユースライセンス契約」から引用していますが、元のページが消えてしまっているので参照できないのが残念。原文を読みたいけど、どっかにないかな…。
Profile
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Archives
- 2016年07月 (1)
- 2015年12月 (2)
- 2015年07月 (1)
- 2015年03月 (1)
- 2014年09月 (1)
- 2014年08月 (5)
- 2014年01月 (1)
- 2013年09月 (1)
- 2012年08月 (4)
- 2012年04月 (1)
- 2012年02月 (1)
- 2011年03月 (4)
- 2011年02月 (2)
- 2011年01月 (2)
- 2010年12月 (2)
- 2010年11月 (1)
- 2010年10月 (4)
- 2010年09月 (1)
- 2010年08月 (4)
- 2010年05月 (1)
- 2010年04月 (1)
- 2010年02月 (2)
- 2010年01月 (4)
- 2009年12月 (6)
- 2009年10月 (12)
- 2009年09月 (4)
- 2009年08月 (12)
- 2009年07月 (6)
- 2009年06月 (1)
- 2009年05月 (4)
- 2009年04月 (6)
- 2009年03月 (7)
- 2009年02月 (5)
- 2009年01月 (15)
- 2008年12月 (18)
- 2008年11月 (15)
- 2008年10月 (5)
- 2008年09月 (3)
- 2008年08月 (1)
- 2008年07月 (3)
- 2008年06月 (2)
- 2008年05月 (6)
- 2008年04月 (1)
- 2007年12月 (1)
Categories
Calender
RSSフィード
Search
Credit
- スタイル切り替えスクリプト
- [stylechange.js] Re:move!
- Aquaria
- [photo] "Blue Water" / fox_kiyo (Flickr)
- Fiore
- [photo] "Good night dahlia 2"/tanakawho (flickr)
- Silence
- [photo] "Noche de luna llena"/*L*u*z*a* (flickr)
- Snowdance
- [photo] "Snow Magic"/katmere (Flickr)
- Fragment
- [photo] "In the Streets"/Rodrigo Cayo (I LOVE ANALOG) (Flickr)
- Day-out
- [photo] "Antarctica: Penguin Hunting"/elisfanclub (Flickr)
- Ad-Astra
- [photo] "Kilimanjaro"/Stig Nygaard (Flickr)
- Fall-time
- [photo] "against the white sky"/Ozyman (Flickr)
- [icon] "Fugue Icons"/pinvoke
- Exnihilo
- [icon] "Fugue Icons"/pinvoke
- Manicstar
- [photo] "Elements of Light"/Fort Photo
- Lostsky
- [photo] "Lost to the Sky"/Drown
- Daylight
- [photo] "the grass is greener here"/hufse
- [photo] "Seeing the Forest for the Trees"/synapse
- Suspire
- [photo] "Lying Cat"/d'n'c
- Amaris
- [photo] "Bev & Ryan"/aprillynn77
- Herba
- [photo] Encyclorecorder
- Birdcall
- CertaPax
- Rera
- [photo] ShippoShappo
Recent Comments