MY CSS DESIGN

最新記事のRSS

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

| PAGE-SELECT | NEXT

≫ EDIT

色変更カスタマイズ支援ツール

うちにも簡易的なカラー変更支援ツールなるものがありますが、もう少し高機能なツールがあるようです。デザインもなんとなくうちのテンプレートチックなのでイメージがつかみやすいかと思われます。

ウェブ配色ツール Ver2.0

配色などでお悩みのそこの貴方は下記URLよりどうぞ。

関連リンク

| カスタマイズ | Permalink | comments:4 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートMENU BLACK 750px版

季節の変わり目。なにやら無性になにかしたくなるんです。という事で黒いテンプレートを作ってみました。昔に遊びで作った土台があったので余裕だろうと思いきや予想を大きく下回る完成度で修正に4~5時間かかってしまいました。トホホ。

今回のテンプレートはhiyoko-menu750黒バージョンです。しかし黒といっても真っ黒ではなく渋い感じになるように微妙にトーンを変えてあります。そしてリンクスタイルなどを少しスタイリッシュ(中二病的)に仕上げてみました。見た目は大人。中身は中二みたいな感じです。

ヒヨコ君増殖中テンプレートmenu-black-750px版

カスタマイズに関しては基本は他のテンプレートと同じです。記事の幅やその他もろもろも750px版や3カラム版と大体同じなので当テンプレート使用者ならスムーズに移行できると思います。そしていつもの事ながら作者の癖などをできるだけ排除した配色になっているのでお好きなようにカスタマイズして素敵なテンプレートに仕上げてあげてください。

■ 主な概要

  • テンプレート名:hiyoko-menu-black
  • トップ画像は差し替えてお使いください。※今回のサイズは750×200です
  • 記事中の画像横幅最大470px程度までは表示可能です。
  • 基本的なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
  • メニューや各インデックスが邪魔な場合はHTMLより削除ください。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

■ テンプレート利用規定

修正履歴

  • 11月26日AM6:00頃発見。コメントのタイトルが見難くなるミスを修正。

■ 余談

当初の計画ではhiyoko-calendarとhiyoko-menuの黒バージョンを作る予定でしたが、calendarの方は需要がそれほど無いだろうと考え除外しました。ただこのスタイルで3カラムに挑戦してみようかと思っています。上手くバランスが取れるようであれば登録するかもしれません。気まぐれなのでいつになるかわからないしバランスも取れるかわからないのであまり期待しないように願います。

| FC2ブログテンプレート | Permalink | comments:18 | trackbacks:0 | TOP↑

≫ EDIT

メニューリンクの変更・削除の仕方

この質問がポツポツあったので説明しておこうと思う。

メニューの削除の仕方

削除方法はテンプレートのHTMLにある<!-- ▼menu -->~<!-- ▲menu END -->間を削除するだけです。

メニューのリンク文字・リンク先変更方法

基本的に記事に書くリンクと同じ要領なのですが、変更する部分はHTMLの<!-- ▼menu -->~<!-- ▲menu END -->の間にあるリスト部分です。

<li><a href="リンクアドレス">表示文字</a></li>

上記赤字部分をお好きなものに変更するだけです。

デフォルトではtarget="_blank"と言う記述もリンクタグの中に入っている場合もありますが、これが付いるリンク文字をクリックすると別窓が立ち上がります。別窓を立ち上げたくない場合はtarget="_blank"削除すればいいです。

メニュー付きの当テンプレートをデフォルト状態で公開してしまうと、メニュー部分に当ブログへのリンクが貼られているので訪問者が混乱しかねません。なのでとりあえずリンクアドレスに#を挿入し、表示文字は×なんかにしておくとよいでしょう。

<li><a href="#">×</a></li>

こんな感じ。

ではでは。楽しくカスタマイズをしていってくださいませ。

| カスタマイズ | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ブログテンプレートのレイアウトが崩れてお困りの貴方へ

レイアウト崩れの多くの原因は人為的なミスによるものかと思われます。しかし初心者さんがレイアウト崩れの原因となる部分を見つけるのはとても大変な事です。なので初心者さんにもできる確認方法を書いておこうと思う。

■はじめにすること

まずデフォルト状態の当テンプレートを当てはめてください。それで直る場合はテンプレートのカスタマイズミスだと思われます。この場合、原因を探すより面倒ですがカスタマイズしなおしたほうが早いと思います。バックアップを取りながらこまめに表示確認を行い慎重にカスタマイズしていきましょう。

■以下デフォルト状態のテンプレートが崩れてしまっている場合

表示が崩れるページとそうでないページが混在する

レイアウトが崩れるページにある記事を一つずつ個別表示して行ってください。個別表示したときにレイアウトが崩れなければその記事は白です。崩れれば黒。発見できたのなら記事内のタグを見直す、コピーしないで書き直すなどしてください。

全てのページでレイアウトが崩れている(1)

記事毎に同じようなタグ(ランキングバナーなど)をコピーして貼り付けていないか確認してください。貼っている場合はそのタグを貼り付けない記事を書き個別表示にして表示確認します。その個別ページのレイアウトが崩れなかったら各記事に貼ってあるタグ(ランキングバナーなど)が原因です。この場合、全ての記事のタグを書き換える作業が必要になります。

全てのページでレイアウトが崩れている(2)

プラグインを一度全て非表示にしてください。そして1つずつ表示していきブラウザ上の表示を確認していきます。こうすることでレイアウト崩れの原因となるプラグインを発見することが可能です。

■まとめ

上記全ての確認作業を行えばそれなりに原因は発見できると思います。がんばってみてください。これらの確認方法はFC2ブログに限らず応用可能だと思うので、ブログのレイアウト崩れでお困りの貴方は試してみてください。

| カスタマイズ | Permalink | comments:4 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートMENU 530px 3カラム版

今年も残りわずかになりましたが皆様いかがお過ごしでしょう?俺はと言えばインフルから回復してかなり元気になっているのですが行くところがなくて毎日ムラムラムズムズしていている状態です。そんなこんなで、あまりにも暇なもんだから年内中にもうひとつテンプレートを登録しておきました。

今回のテンプレートはhiyoko-menu530の3カラム版です。ええ、先日出した3カラム版が予想を大幅に超える需要だったので調子こいてみました。トップ画像の横幅は530pxなので950px版に比べてかなり作りやすいと思いますので950px版のトップ画像作成で挫折した貴方、950版だといまいち垢抜けないとお困りの貴方は是非使用してみてください。

ヒヨコ君増殖中テンプレートmenu530px3カラム版

■ 主な概要

  • テンプレート名:hiyoko-menu530-3
  • トップ画像は差し替えてお使いください。※今回のサイズは530×200です
  • 記事中の画像横幅最大470px程度までは表示可能です。
  • 基本的なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

メニューや各インデックスが邪魔な場合はHTMLより削除ください。メニューを削除した場合にデザイン的になんか寂しく感じてしまうようならタイトル下ボーダーカラーと同じ色の5pxラインを画像下部に直で挿入すればいいと思うよ。

■ カラー変更支援ツール(menu-530用)

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

■ テンプレート利用規定

| FC2ブログテンプレート | Permalink | comments:21 | trackbacks:1 | TOP↑

≫ EDIT

とりあえずやっとけ的なお勧めカスタマイズ

当テンプレートご利用ありがとうございます。3カラムも公開されたと言うことで簡単お勧めなカスタマイズ方法を書いておきます。デフォルト状態でのクオリティの低い部分を改造しクオリティうpする狙いです。まあ自分が気になるだけなんですけどねw

1.カテゴリをリストマーク付きにする。

現在のFC2ブログサイドに表示されるカテゴリはリストマークがありません。以前のカテゴリはデフォルトでリストになっていたのですがFC2ブログが親子カテゴリを導入してから仕様が変わりました。しかし当テンプレートのサイド(プラグイン)部分は基本的にリストで作られておりリストマークが出るようになっています。カテゴリだけリストマークがないとバランスが非常に悪い。なので改造します。改造方法は簡単。下記リンク先に書かれているプラグインを利用してください。親子カテゴリにも対応してますがしない時は普通にリスト表示される優れもの?ですw

2.コメント・トラックバックをツリー化しましょう。

デフォルト状態では読みにくいサイドのコメント・トラックバック欄。こいつを読みやすくします。改造方法は簡単。下記リンク先に書かれているプラグインを利用してください。

とりあえずこの2つをやっておけば地味なクオリティうpまちがいありません。後はトップ画像やベースの色を試行錯誤するだけです。あとあと記事タイトル横の画像も忘れちゃいけません。素材屋さんやら何やらからお借りするなり、最悪、記事を書く時に付いてる絵文字機能の絵文字をパクッ・・・お借りして付けてもよいかもしれません。(そのような使用方法が良いのか駄目なのか確認してくださいね。)

どうぞ自分だけの素敵なテンプレートを作ってみてください。

| カスタマイズ | Permalink | comments:14 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートMENU 950px 3カラム版

今回は初の3カラム業界参入です。なんとか2日で仕上がりました。2日といってもテンプレート自体は簡単に作れるんですが、登録するための下準備の方に時間がとられる。まんどくせぇ。

横幅はYahoo!と同じ950pxにしてみました。基本的な作り、記事の幅、サイドの幅なんかは2カラム版とほぼ同じなので当テンプレートを使っていた人なら違和感なく移行できると思います。がしかし!横幅950pxと言うトップ画像を作るのが凄い大変だと思います。バランス的な意味で。どうぞがんばって素敵なテンプレートにしてください。

公開されました!。皆さんダウンロードありがとう。

■ 主な概要

  • テンプレート名:hiyoko-menu950
  • ベースカラーは簡単に変更可能です。
  • トップ画像は差し替えてお使いください。※今回のサイズは950×200です
  • 基本的なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

デザインサンプル

■ カラー変更支援ツール

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

■ テンプレート利用規定

| FC2ブログテンプレート | Permalink | comments:122 | trackbacks:0 | TOP↑

≫ EDIT

コメント・トラックバックのツリー化プラグインを登録してみた。

いまさらですがtakkyun仕様のツリー化を容易にするプラグインを登録しておきました。

当テンプレートはtakkyunスクリプト導入済みなのでこのプラグインを追加するだけでツリー化が完了します。そうでないテンプレートでも関連リンク先のページを参照しスクリプトを挿入すればツリー化できます。お試しあれ。

プラグイン名:ツリーコメント

コメントをツリー化するプラグインです。

プラグイン名:ツリートラックバック

トラックバックをツリー化するプラグインです。

↓こんな感じになります。(見栄えは使用するテンプレートによって異なります。)
コメント・トラックバックツリー化サンプル画像

追加方法は管理画面→プラグイン設定→共有プラグイン追加→プラグイン名に上記プラグイン名を書き込んで検索してください。ツリーなんかのキーワードでも出てくると思います。

関連リンク

| FC2ブログプラグイン | Permalink | comments:6 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレート改!

ヒヨコ君増殖中テンプレート改造版

みるく・きゃんでぃさん家のゆみさんがうちのテンプレートを利用して改造版を作ってくれました。カスタマイズ不要でお手軽に可愛いテンプレートを使いたい!可愛いテンプレートが作りたいけど、どんな風にしていいのかわかんないぞバーカなんて思ってる人は使ってみたり見にいったりしてみればいいじゃん。

みるくきゃんでぃテンプレート一覧

今現在、当テンプレートは再配布禁止としておりますが、これをきっかけに許可を得ることで再配布可能にしていこうと思っています。もし僕も!私も!なんて考えている人がいたら相談しに来てくださいませ。ただ全てに許可を出すわけにはいかないと思うのであらかじめご了承くださいませ。

関連リンク

| 当テンプレート改造版 | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ブログタイトル画像化計画

うちのブログでやってる事なんだけどブログタイトルに透過GIFを利用して簡単にクオリティアップしてしまおうと言う計画です。英語タイトル仕様のブログならフォント次第で結構な見栄えアップすると思うので挑戦してみてください。
当ブログタイトル部分

まずはじめにブログタイトルを含んだ透過GIFを作成してください(透過GIFとは?=画像の一部分が透明になっているGIFの事です。)

透過を使ったタイトル画像
わかりやすく透過部分をオレンジにしてみました。このようにギリギリに切り出すと無用な余白が出来ずバランスが保てると思います。フォントはあまり大きくしたり小さくしないで下に表示されるブログ説明とのバランスを考えながら作ると良いでしょう。

完成したのならTOP画像差し替えと同じ要領でサーバーにアップロードします。アドレスは控えておいてください。次にHTMLソースに手を加えます。HTMLから下記記述を探し出してください。

<h1><a href="<%url>"><%blog_name></a></h1>

上記記述を下記のように書き替えます。

<h1><a href="<%url>"><img src="控えておいた画像のアドレス" alt="<%blog_name>" /></a></h1>

次にスタイルシートに下記記述を付け足してください。

#blogtitle img { border:none; }

更新を押せば完成です。ね、簡単でしょ?自分のブログに合った素敵なフォントを探し出してカスタマイズしてください。

※注:今回のカスタマイズの対象になるテンプレートは「menuシリーズ」「calendarシリーズ」です。dogやpureは「ブログタイトル文字画像化の手引き 」を参考にしてください。

| カスタマイズ | Permalink | comments:17 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートMENU 530px版

久しぶりのテンプレート登録になるのかな?。今回は過去に遊びで作った物を配布用に改造してみたよ。あいかわらずのシンプルモノトーンなテンプレートですが、白と黒のその間に、無限の色が広がってる、君に似合う色探して、トップ画像をつけたなら、ほら素敵なテンプレート。今、君に贈るよ。←ミスチルのGIFTぱくってみた。(。・_・。)

さて、今回も極一部の間で何気に好評なカラー変更支援ツールを作ったのでご利用ください。なんかテンプレートを作るよりこんな物やあんな物を作ってる時間の方が長いような気もしないでもない。

ヒヨコ君増殖中テンプレートmenu530px版

■ 主な概要

  • テンプレート名:hiyoko-menu530
  • トップ画像は差し替えてお使いください。※今回のサイズは530×200です
  • 記事中の画像横幅最大470px程度までは表示可能です。
  • 基本的なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

メニューや各インデックスが邪魔な場合はHTMLより削除ください。メニューを削除した場合にデザイン的になんか寂しく感じてしまうようならタイトル下ボーダーカラーと同じ色の5pxラインを画像下部に直で挿入すればいいと思うよ。

重要告知として今回のテンプレートは構造上、カラムの左右変更・幅の変更・背景色の変更は画像などが絡んでいるので簡単には出来ない仕様になっております。メニューの変わりに横型カレンダーの挿入も幅的に多分無理です。なのでその手のカスタマイズは諦めてください><;

■ カラー変更支援ツール(menu-530用)

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

■ テンプレート利用規定

| FC2ブログテンプレート | Permalink | comments:40 | trackbacks:1 | TOP↑

≫ EDIT

オリジナルファビコン作った!

当ブログもついにオリジナルファビコンと言う物を作ってみたよ。デフォルトで表示される馬野郎(画像参照)みてたらオリジナルっちゅうもんを作ってみたくなったのだ。馬は馬で結構クオリティ高くて良いんだけどね。馬だけに・・・意味不明。

FC2ブログデフォルトファビコン

で、完成したのが下記画像なのだ!よくあるパターンじゃんって絶対言うな。

ヒヨコ君増殖中スペシャルファビコン

一見単純に見えるこんな物にもファビコン作りのプロとしての意地&テクニックが詰まってます。ああ詰まりまくりんぐです。今回は特別にその秘められた全容を大公開。さあプロの技をとくとご覧あれ!

≫ 続きを読む?

| カスタマイズ | Permalink | comments:16 | trackbacks:0 | TOP↑

≫ EDIT

親子カテゴリ用プラグインを登録してみた。

駄目だこいつ・・・はやくなんとかしないと・・・
ってことで親子カテゴリ用のプラグインを登録してみた。

プラグイン名:ツリー親子カテゴリ

ツリー親子カテゴリ画像

ツリー親子カテゴリ タイプA

システムデフォルトタイプです。

ツリー親子カテゴリ タイプB

こちらは親カテゴリのリンクと記事件数は外してあります。よって親カテゴリ自体に分類されている記事へのカテゴリリンクは消えてしまいますので使用する場合は全てを子カテゴリに移動するなりしてください。

あるていどのテンプレートではそれなりに表示されるように作ったつもりですが、予想を超えるような指定がサイドリストになされているテンプレートではまともに表示できないかもしれません。そんなときは諦めてくださいw

いちおう柔軟性を重視し子カテゴリのフォントサイズはデフォルトで10pxにしてあります。子カテゴリのフォントサイズが小さいと思われる方は、class="sub_list"とclass="sub_list_end"のfont-sizeで調整くださいませ。

不具合報告お願いします。こんな風にしてはどう?なんてアドバイスもあればお願いします。個別テンプレートへの対応については基本しないつもりでいます。

■ 親子カテゴリについては下記リンクを参照ください

| FC2ブログプラグイン | Permalink | comments:12 | trackbacks:1 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレート。ラメ入り紅茶バージョン第2弾

コラボ作品第二弾です。素材をお借りしたのはラメ入り紅茶さん。今回は男女兼用のつもりです。INDEX類は外してみた。また同じようなテンプレートですがよろしくおながいします。

ヒヨコ君増殖中テンプレート ラメ入り紅茶バージョン2

■ 主な概要

  • テンプレート名:hiyoko-lametea02
  • 画像を差し替えるようなカスタマイズは不可
  • 画像を差し替えたい人はhiyoko-calendar750をご利用ください。
  • 印刷用CSS有り。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

■ テンプレート利用規定

公開されました。またも撃沈臭い。もう俺の時代は終わったのか・・・そもそも始まってねーだろって話だけど自分のテンプレートに足りていない物を探す旅に出ようと思う。探さないで下さい。

| FC2ブログテンプレート | Permalink | comments:2 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレート。ラメ入り紅茶バージョン

当テンプレート初コラボ作品です。素材をお借りしたのはラメ入り紅茶さん。カスタマイズは敷居が高いなぁなんて思ってた人は使ってみてください。

ヒヨコ君増殖中テンプレート ラメ入り紅茶バージョン

こんどこそ女心を掴んでやんよ!。嘘です。言ってみたかっただけですw

■ 主な概要

  • テンプレート名:hiyoko-lametea01
  • 画像を差し替えるようなカスタマイズは不可
  • 画像を差し替えたい人はhiyoko-calendar750をご利用ください。
  • NewEntriesの件数は環境設定→記事の設定→最新記事一覧の表示件数で調節できます。 要らなければHTMLから削除ください。
  • 印刷用CSS有り。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

■ テンプレート利用規定

公開されました。今回いろんなタイミングが悪かったような・・・。そんなことよりまた女心を掴み損ねた予感がする(TωT)

またいつか女心にリベンジしてやる!!!

| FC2ブログテンプレート | Permalink | comments:4 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートNEWS

はてさて今回のテンプレートはニュース系のサイトを意識して作ってみました。一見完成されているようにみえますが当テンプレートシリーズの特徴でもあるトップ画像変更やベースカラーの変更は他のテンプレート同様、簡単に変更可能にしてあるので好きなようにカスタマイズしてお使いくださいませ。尚、あまりにも需要が無いようなら管理していくのが面倒なので削除する可能性がありますので欲しい人はお早めにどうぞです。

ヒヨコ君増殖中テンプレートmenu750px版

何気に需要があるようなので復活。

■ 主な概要

  • テンプレート名:hiyoko-news
  • メニューの増減可能。
  • サイドメニュータイトル左ボーダーの色変更可能
  • 英訳リンクを挿入してみた。←削除しました。
  • 管理リンクは新管理画面用にしておきました。
  • 印刷用CSS有り。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

■ NEWS900px版

使用方法は土台となるHTML(hiyoko-news)をダウンロードしCSSのみを上書きしてください。尚、現在FC2ブログでは同ネームのテンプレートがダウンロードできなくなっているので両方とも必要な場合はダウンロードしたテンプレートをリネームしてください。そうすれば同じテンプレートでもダウンロード可能になります。

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

今回、追記の展開やツリースクリプトは外してあります。もしご利用になられるのなら別の当テンプレートのソースを参考に挿入くださいませ。

■ テンプレート利用規定

| FC2ブログテンプレート | Permalink | comments:99 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートCALENDAR 750px版

当テンプレートシリーズもついに第6弾になりました。毎回同じようなテンプレートばかり登録してごめんなさい。さて今回のテンプレートは主に色変更に力を入れて作ってみました。CSSを2箇所変更する事でベースカラーが変更可能になっております。ついでにカラー変更支援ツールも作ったのでそこんとこよろしく。

当テンプレートを初めて使う人もいるだろうから少し宣伝を・・・。
当テンプレートシリーズは画像や色を差し替える事で『あなた色に染まります(キモッ!)』的な作りになっております。これを一般的に『ひよこテンプレートマジック』と言うのですが・・・言いません!。も、もしかしたら言うかも・・・。まあそんな事はどうでもいいとして、どうぞ自分の好みの色や画像を使用してあなただけの素敵なテンプレートを作成してください。ついでにその製作過程も楽しみやがれでございます。

ヒヨコ君増殖中テンプレートmenu750px版

■ 主な概要

  • テンプレート名:hiyoko-calendar750
  • CSSの2箇所を変更する事でベースカラーが変えられます。
  • トップ画像は差し替えてお使いください。※今回のサイズは750×170です
  • 記事中の画像横幅最大460pxまで表示可能です。
  • 基本的なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

■ カラー変更支援ツール

■ デザインサンプル

TOP画像に関しましては1枚の大きな画像にこだわらず壁紙を利用して模様を繰り返させるなんて方法もあります。って事で今回はラメ入り紅茶さんの所から素材を数点お借りして適当にデザインサンプルを作ってみました。

デザインサンプル 素材屋さん
デザイン1 ラメ入り紅茶
デザイン2
デザイン3
デザイン4

※画像は素材屋さんからお借りしている物なのでデザインサンプルからの直リンやお持ち帰りは絶対にしないで下さい。また、素材屋さんから画像をお借りしテンプレートで使用した場合はサイド一番下の著作表示部分にお借りした素材屋さんのリンクを挿入してください。(Photo by 素材屋さん icon by 素材屋さん)

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

■ テンプレート利用規定

| FC2ブログテンプレート | Permalink | comments:194 | trackbacks:0 | TOP↑

≫ EDIT

印刷用CSS作成

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

印刷時に表示される個所

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

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

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

<link rel="stylesheet" media="print" href="http://blog-imgs-27.fc2.com/h/i/y/hiyokokun/print001.css" type="text/css" />

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

余談

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

■ 関連リンク

| カスタマイズ | Permalink | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

カラー変更支援ツール

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

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

■ 余談

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

| カスタマイズ | Permalink | comments:3 | 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

追記の展開してみる?

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

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

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

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

※当テンプレートの最新バージョンはこのスクリプトは導入済みです。

■ 関連リンク

≫ 続きを読む?

| カスタマイズ | Permalink | comments:57 | trackbacks:1 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートMENU 750px版

久しぶりにテンプレートの登録してみました。とんでもない速度で新着テンプレートが流れていくので登録するのを躊躇していましたが、待っていても何も始まらないので公開に踏み切りました。新着テンプレート1ページ目に1日すら持たなかったら泣きます。

今回のテンプレートはhiyoko-menuの750px版です。menu部分を少し改良し背景色を変更できるようにしてあります。毎度の事ながらカスタマイズ前提に作られているのでグレーを基調とした無難なデザインとなっております。どうぞお好きな色に変更してお使いくださいませ。

ヒヨコ君増殖中テンプレートmenu750px版

■ 主な概要

  • テンプレート名:hiyoko-menu750
  • トップ画像は差し替えてお使いください。※今回のサイズは750×200です
  • 上部にあるに5メニューのタイトル・リンクはお好きなように変更ください
  • 記事中の画像横幅最大470pxです。
  • 簡単なカスタマイズに必要と思われる記述はCSS上部に配置してあります。
  • New Entriesの件数は管理画面→環境設定の変更→ブログ設定→最近の記事リストの表示数から変更可能です。
  • プラグインモードのみに対応
  • hiyoko-menu750のカラー変更方法。
  • 色見本/カラーチャート
  • 不具合報告お願いします。

■ テンプレート利用規定

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

カスタマイズ情報(応用してください)

| FC2ブログテンプレート | Permalink | comments:161 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートCALENDAR

今回は女性をターゲットにしたテンプレートを作ってみました。毎度の事ながらユーザー側で手を加える事で完成します。『ピンクっぽい色にしてハートを付ければイケるんちゃうん?』なんて女心をまるでわかってないかもしれないテンプレートですがよろしくお願いします。

カラー変更を想定して作っているので細部はなるべく各カラーに依存しないような色を使用しています。なので基本カラー・記事アイコン・トップ画像を変更する事で男女問わず使用できると思います。

ヒヨコ君増殖中テンプレートcalendar

■ 主な概要

  • テンプレート名:hiyoko-calendar
  • プラグインモードのみに対応
  • トップ画像は差し替えてお使いください。※サイズは710×170px
  • 記事中の画像横幅最大440pxです。
  • 基本的なカスタマイズに必要な記述はCSS上部に配置してあります。
  • TOPにあるNewEntriesが邪魔な場合はNewEntriesの消し方をどうぞ
  • 基本カラーカスタマイズ方法
  • 色見本/カラーチャート
  • 不具合報告お願いします。

■ テンプレート利用規定

■ ひよこブログデザイン履歴(参考になれば幸いです。)

画像は各素材屋さんからお借りしている物なのでデザイン履歴からの直リンやお持ち帰りは絶対にしないで下さい。また、素材屋さんから画像をお借りしテンプレートで使用した場合はサイド一番下の著作表示部分にお借りした素材屋さんのリンクを挿入してください。(Photo by 素材屋さん icon by 素材屋さん)

デザイン履歴 お借りした素材屋さん
DESIGN1 Onefineday (TOP画像)
DESIGN2 HEAVEN'S GARDEN (トップ&ワンポイント画像)
DESIGN3 NOION (TOP画像)
DESIGN4 MIYUKI PHOTO (TOP画像)
壁紙を敷き詰めるのも1つの方法です。↓3画像ランダム表示
壁紙仕様 Salon de Ruby (TOP壁紙)

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

| FC2ブログテンプレート | Permalink | comments:72 | 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:4 | trackbacks:0 | TOP↑

≫ EDIT

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

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

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

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

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


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

■ 余談

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

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

| カスタマイズ | Permalink | comments:37 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレート750px版(犬)

えと、当テンプレートの幅サイズは700px 720px 800pxとなっていたのですが、ここだけで配布している720px版があまりにも微妙なので750px版として生まれ変わる事になり、それと共に一般公開することにしました。『微妙に幅が足りひん・・・』なんて思っていた人は使ってみてください。

ヒヨコ君増殖中テンプレート犬・猫750px版

■ 主な概要

  • テンプレート名:hiyoko-dog750
  • プラグインモードのみに対応
  • トップ画像は差し替えてお使いください。
  • 画像設定の記述はCSS上部に配置してあります。
  • 記事中の画像横幅最大475pxです。
  • サイドメニューの幅も15px増やしてみた
  • よく見かけるカスタマイズミス例
  • 不具合報告お願いします。

■ テンプレート利用規定

■ お勧め素材

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

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

質問等はできるだけ該当するテンプレートの記事にお願いします。

| FC2ブログテンプレート | Permalink | comments:195 | trackbacks:0 | TOP↑

≫ EDIT

トップ背景画像ランダム表示

JavaScriptはMACOサッカースタジオさんのを使用させていただこうと思います。ただライブドアブログ用に公開されているものなので勝手にFC2で使用していい物か微妙なのですが、作者から何らかのアクションがあった場合、速やかにその指示に従ってください。

■下準備
まずはじめにランダム表示させたいトップ画像を適当に用意しアップロードしてください。そしてその各画像のアドレス(URL)をメモ帳等に控えておきます。

■JavaScript導入
とりあえず下記スクリプトをメモ帳等にコピーしましょう。

<!-- *** Script by MACOサッカースタジオ http://blog.livedoor.jp/maco915/ *** -->
<script language="JavaScript">
<!--
photo = new Array();

//画像の指定。ランダムに表示したい数だけ増やす。photo[連番] = '画像URL';
photo[0] = '画像URL1'; //1つ目の画像
photo[1] = '画像URL2'; //2つ目の画像
photo[2] = '画像URL3'; //3つ目の画像
photo[3] = '画像URL4'; //4つ目の画像

r = Math.floor(Math.random()*photo.length);
document.write('<style type="text/css">');
document.write('#header{background: url("'+photo[r]+'") ;}');
document.write('</style>');
//-->
</script>


そして赤太字部分にアドレス(URL)を挿入します。
↓こんな感じです(注:アドレスは略してはだめですよ。)

編集前

photo[0] = '画像URL1'; //1つ目の画像

編集後

photo[0] = 'http://中略/randomscript001.jpg'; //1つ目の画像


画像アドレスの挿入が完了したらJavaScriptをHTMLに埋め込みます。
挿入場所は下記画像を参考にしてください。

JavaScript挿入場所

当テンプレート全てに対応可能だと思います。一応、動作確認して動いたのでがんばってみてください。

■ 余談
ちょくちょくコメント欄にこの手の質問を頂いていたので、少しがんばってみました。

■ 作者様へ(2010年11月20日)
MACOサッカースタジオ閉鎖と言う事なのでスクリプトを引用させていただきました。問題があれば面倒だとは思いますがご連絡くださいませ。

| カスタマイズ | Permalink | comments:59 | trackbacks:1 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレートMENU

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

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

ヒヨコ君増殖中テンプレートmenu

■ 主な概要

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

■ テンプレート利用規定

■ 素材

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

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

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

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

| FC2ブログテンプレート | Permalink | comments:125 | trackbacks:0 | TOP↑

≫ EDIT

まあ待て、デザインする前にここを読め

ホームページ(ブログテンプレート)作製初心者から脱出を考えている人は下記サイトを読むと良いかも。初心者さんがよく使用する技法を軽く指摘してくれています。
2u Webデザイン.com@Webユーザビリティ

HTMLに慣れてきたんだけどデザインがなぜかパッとしないとお悩みの方は下記サイトがお勧めです。重要な事柄が簡単にまとめられています。
嫌われないWebデザイン
大原則:目の疲れた状態でサイトを見直そう

非常に参考になります。
訪問者に優しいWebサイト作り

ペタペタ広告を貼り付けたい人は読むと良いかも。
最も嫌われる広告テクニック

カッコイイテンプレートも良いのですが、読む側の事も少し意識しながらデザインすると、きっと素敵なテンプレートが作れるようになると思います。

| カスタマイズ | Permalink | comments:6 | trackbacks:0 | TOP↑

≫ EDIT

ヒヨコ君増殖中テンプレート800px版(PURE)

リクエストがありましたので800px版ってのを作ってみました。レイアウト的にどんな感じになるのかわかりませんがどうぞ。

ご使用方法は、当テンプレート本体をダウンロードし下記リンク先のスタイルシートを上書きくださいませ。元HTMLは最新バージョンのものをお使いください。現最新バージョンはver1.6(2008.1.7)です。

ヒヨコ君増殖中テンプレートPURE800px版

※記事中の画像横幅最大540px程度まで大丈夫だと思われます。よろしく。

| FC2ブログテンプレート | Permalink | comments:115 | trackbacks:0 | TOP↑

| PAGE-SELECT | NEXT