blog*citron

▼カスタマイズの手順（共通）
1)必要な画像をDLして、FTPかアップロード機能でアップロード。
2)「▽CSSの書き換え箇所」に従ってテンプレートのCSSを編集する。画像のURLと書いてある部分は、1でアップロードした各画像のURLを入れて下さい。
3)保存して終了。再構築は不要です。

▼フォントサイズ12px罫線セット　(SAMPLE IMAGE)

左）12px用の罫線（記事:entry_body,entry_more用）
右）12px用の罫線（引用:blockquote用）

▽CSSの書き換え箇所
太字の部分をこの色の部分のように書き換えます。

div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
→ font-size:12px;
line-height:17px;
→ line-height:20px;
background-image:url(罫線画像のURL);
}

div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
→ font-size:12px;
line-height:17px;
→ line-height:20px;
background-image:url(罫線画像のURL);
}

blockquote{
margin:0px 5px 0px 5px;
padding:17px 2px 17px 5px;
→ padding:20px 2px 20px 5px;
color:#8B7765;
font-size:10px;
→ font-size:12px;
line-height:17px;
→ line-height:20px;
background-image:url(引用の罫線画像のURL);
}

▼罫線なし用の針ねずみの壁紙　(SAMPLE IMAGE)

▽CSSの書き換え
この色の部分のように書き換えます。

div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
line-height:17px;
background-image:url(背景画像のURL);
background-position:right;
background-repeat: repeat-y;
}

div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
line-height:17px;
background-image:url(背景画像のURL);
background-position:right;
background-repeat: repeat-y;
}

罫線なしなのでfont-size（文字サイズ）やline-height（行間）はご自由に。emや%の相対指定をされたい方はこちらがおすすめ。
見やすさとバランスを考えて、記事の右側に表示されるようにしていますが、
background-position:right;
background-repeat: repeat-y;
の２つを消せば、針ねずみの模様を記事全体の背景にすることもできます。

Close

　
レビューを参考にすべくamazonで検索してみて気になったものたち。
Logicoolコードレスマウス MX-1000 Laser Cordless Mouse
1番人気。高価ですかそれだけの価値はある様子。コードレスなのにそれを感じさせない反応の速さが売り。初期不良が多かったようですが、流石にもうないよね…？と思いたい。
WM-50WH コードレスマウス ホワイト
コードレスなのに2000円を切る安さ。ただしボール式。光化学にこだわりがなければ良さそう。私はカーペットの部屋なので埃が出やすく、ゴミもたまりやすいので悩みどころ。
MX-310WH オプティカルマウス
そこそこのお値段でなかなかの評価のバランスのとれたマウス。
SOM-P20 オプティカルマウスPS/2
光化学マウスにしてはありえない1250円という安さ。当然安かろう悪かろうじゃないのかと疑うところだが、USB型の方も合わせてレビューを見ている限りでは中々好評判。ただ小さいらしいので私には不向き？
テクスチャーマウス「マリメッコ」
実用性はともかく可愛いです(*´ー｀)

合うかどうかは実際に自分の手に合わせて操作してみないと…って思うと、靴と一緒だなぁなんて思いました。安物買うと痛い目みて後悔するのも似てるかも（笑）
Close

▼参考記事
"いろは"の先のCSS 第3回

ロゴ画像はあらかじめアップロードしておいて下さい。
▼ベースHTML
<h1>のタグをこのようにします。<h1>を入れる場所はお使いのテンプレートによって多少異なると思いますので、テンプレに合わせて下さいね。

<h1><a href="URL" title="タイトル"><span>タイトル</span></a></h1>

小梅系のテンプレの場合は、<div class="description">～</div>と<div class="head">～</div>を消せばタイトル部分が一枚の画像風になります。

▼CSS
下記を追記します。

h1 a { display:block;
margin:0 auto; /* センタリングする場合 */
height:●●px; /* タイトルの高さ */
width:●●px; /* タイトル部の横幅 */
background:url(タイトル画像のURL);
background-repeat:no-repeat; /* リピートさせない場合 */
}
h1 span { display:none; }

テンプレートでh1やタイトル部分に他のスタイルが設定されている場合、スタイルが複数指定されて表示が思うようにならない場合があります。その場合は最初に指定されていたh1やtitle,headあたりのCSSを外してみて下さい。
どういう指定をされているかはテンプレートによって異なりますので、一気に削除するのではなくメモ帳にでもバックアップしながらやると、削除しすぎて困った時に元に戻すのも簡単です。
プレビューでちゃんと表示されているのが確認できたら再構築して終了です。

▼すっ飛ばす方法もあるようだ
hail2u.net - Weblog - Fahrner Image Replacement hacks
▼kyoさんはこんなこともやってた。さすが(´ω｀)
hail2u.net - Weblog - タイトル改造

Close

　
▼ソニープラザ
ソニプラのキャラクターや絵本のイラストを使ったカレンダー。
ソニプラらしくとってもカラフル！
DLページ：Character Praza→Desktop Calendar Download
サイズ：800*600・1024*768・1280*1024

▼ディズニーストア
お馴染みディズニーのキャラクターたちの壁紙が月替わりで公開。
DLページ：ストアファン→壁紙
サイズ：640×480・800*600・1024*768

▼PINGU
可愛いペンギンキャラクターPINGUの月替わりカレンダー。
DLページ：FUN&GAMES→壁紙ダウンロード
サイズ：640×480・800*600・1024*768

▼JTB
イラストレーター寺田順三さんの書き下ろし！大企業は太っ腹である。
寺田さんの絵はとっても好きなのでオススメ。
DLページ：JTBトップ→INFOCREW会員登録（登録は不要）→とってもプレミアム・壁紙&ポストカード→利用方法（※会員登録は不要です）
サイズ：800*600・1024*768・1280*1024

▼@cosme
女性向けのイラスト入りでカレンダータイプが選べる2種類。
DLページ：TOP内のコンテンツ『壁紙ダウンロード』
サイズ：800*600・1024*768

▼ギャラリーブルーバレン
大分のギャラリー&雑貨屋さん。月替わりで1種類。
DLページ：ブルーバレンからのおくりもの
サイズ：800*600・1024*768

▼cicada
インテリアセレクトショップさん。「コケティッシュでゴージャスでラグジュアリー」のショップコンセプトに合わせたデザイン。
DLページ：今月の壁紙
サイズ：800*600・1024*768

▼amadana
オリジナルデザインの家電ブランドさん。サイトデザインも格好イイ。スタイリッシュな写真系とシュールなイラストの2枚。オススメ。
DLページ：lounge→CALENDAR
サイズ：800*600・1024*768

毎月きちんと定期的に更新されると思われる商用サイトさんのみ紹介させていただきました。自分で作らないのは定期的にアップできる自信がないからです（笑）
Close