MY CSS DESIGN

最新記事のRSS

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

| PAGE-SELECT |

≫ EDIT

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

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

ウェブ配色ツール Ver2.0

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

関連リンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

≫ 続きを読む?

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

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

さて今回は当テンプレート用の記事本文中のリンクカラーのみをピンポイントで変更する方法を書いておきます。下記記述を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

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

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

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

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

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

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

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

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

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

≫ EDIT

ヒヨコ君増殖中テンプレートTOPリストカスタマイズ

当テンプレートに組み込まれているNewEntriesとアーカイブ表示時のINDEXが、なにげに邪魔で消してしまいたい。なんて思う人もいるでしょう。

HTMLより下記のような記述を探して要らないINDEX・全てを削除してください。

<!-- ▼INDEX表示が邪魔な場合はここを削除 -->
<!--index_area-->
<!-- NEWENTRIES -->
<div id="newentrys">
<h2 id="newentryname" class="navi-title">New Entries</h2>
<div id="newentrylist" class="navi-contents" >
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> (<%recent_month>/<%recent_day>)</li>
<!--/recent-->
</ul>
</div>
</div>
<!-- NEWENTRIES END -->
<!--/index_area-->

<!--category_area-->
<!-- カテゴリー表示時INDEX -->
<div id="newentrys">
<h2 id="newentryname" class="navi-title"><%sub_title>のINDEX</h2>
<div id="newentrylist" class="navi-contents">
<ul>
<!--topentry-->
<li><a href="#no<%topentry_no>"><%topentry_title></a> (<%topentry_year>.<%topentry_month>.<%topentry_day>)</li>
<!--/topentry-->
</ul>
</div>
</div>
<!-- カテゴリー表示時INDEX -->
<!--/category_area-->

<!--date_area-->
<!-- アーカイブ表示時INDEX -->
<div id="newentrys">
<h2 id="newentryname" class="navi-title"><%now_year>年<%now_month>月のINDEX</h2>
<div id="newentrylist" class="navi-contents" >
<ul>
<!--topentry-->
<li><a href="#no<%topentry_no>"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_title></a></li>
<!--/topentry-->
</ul>
</div>
</div>
<!-- アーカイブ表示時INDEX END -->
<!--/date_area-->
<!-- ▲INDEX表示が邪魔な場合はここを削除 -->

最新のテンプレートはver1.3(2007.10.01)です。
以前のテンプレートでは記述が若干違いますので注意してください。

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

≫ EDIT

ヒヨコ君増殖中テンプレートTOP設定カスタマイズ

当テンプレートのトップ画像の高さ変更の手引きを書いて見ました。
簡単なので、じゃんじゃんばりばりカスタマイズしてみてください。

ヒヨコ君増殖中テンプレートTOP設定カスタマイズ

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

≫ EDIT

ヒヨコ君増殖中テンプレート用ツリー化の手引き

当テンプレート用のツリー化の手引きを書いてみました。
多少理解しづらいかもしれませんが、焦らずゆっくり頑張ってみてください。

  • マックブラウザでの表示は不明です。
  • テンプレートは最新バージョンのものを使用してください。
  • 尚、最新エントリのツリー化はスクリプトを弄ってツリー化できないようにしてあるのでツリー化したい人はスクリプト作者のブログへ飛んで元のスクリプトを貼り直してください。

SPECIALTHANKS

  • Script by takkyun

■ ツリー化プラグインも公開されています

上記の方法が面倒と言う人は共有プラグインをツリー化で検索してみてください。結構な数のプラグインがヒットするはずです。面倒な書き換えはしなくていいのでお勧めかもです。

■ 関連記事

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

| PAGE-SELECT |