https://sknys.blog.so-net.ne.jp

ついにソネ風呂もスキン・カスタマイズが公式サポートされましたね（「カスタムスキンの作り方」）。〈猫にも出来るオリジナル・スキン〉の第４弾は、趣向を変えてサイドバー攻略‥‥「カスタムペインで作るサイド欄」の変更法を紹介します。既に「プロフィール」をカスタムペインで擬装しているユーザはピンと来るでしょう。デフォルトのサイド欄は中身を弄れないし、融通が利かない。倍増（5→10）したカスタムペインで作り直すと機能制限が生じる反面、自由度が広がります。機能優先か、見た目（デザイン）重視か？‥‥その判断はユーザ各自が決めて下さい。変更するサイド欄は「カレンダー」「カテゴリー」「最新記事一覧」「最近のコメント」「あなたがコメントした記事」の５つ。「プロフィール」については〈nice! を消す方法 2.1〉を参照して下さい。難易度をMac Fan風に　で３段階評価してみました（記事の末尾で「ソネ風呂の公式スキンをカスタムスキン化する方法」を紹介しています）。

PROFILE（プロフィール）no nice!

〔1〕カレンダー ‥‥‥‥ 　　　
〔2〕カテゴリー ‥‥‥‥ 　
〔3〕最新記事一覧 ‥‥‥‥ 　　
〔4〕最近のコメント ‥‥‥‥ 　　
〔5〕あなたがコメントした記事 ‥‥‥‥ 　　

　　　　　　　　　　　　　　　　　　　　＊

〔1〕CALENDER 2007（カレンダー2007）

基本的な作り方は使用ブラウザのメニューバーの「表示」から「ソース」を表示させて、該当部分をカスタムペインにコピーするだけ。「カレンダー」は過去カレンダーが表示されない、最新記事を手動更新しなければならないなど、面倒な作業が要求されます。その分、タイトルバーやカレンダーの年月の文字や土・日の日付けの色を自由に変えられるようになります。タイトルバーを英字（CALENDAR 2007）に変更、月と曜日も英字に変えています（フォントの色・サイズ・字体はデフォルト・カレンダーでも変更可能）。>>（nextMonth）は意味がないので非表示。<<（preMonth）リンクを青リンゴ・アイコンに変更しました（クリックすると記事タイトルの上に月リンク「2006年12月 | 2007年01月 | 2007年02月」が表示されます）。テーブル・タグは複雑なので、カレンダー本体の手動更新に苦労するかもしれませんが、「カレンダー」を再表示させてソースを丸コピするのが簡単。慣れて来れば苦にならないはず‥‥月１回の更新ですから。

<div id="calendar"><div class="calendar-date"><a href="https://sknys.blog.so-net.ne.jp/archive/200701" class="preMonth">　 </a><a href="https://sknys.blog.so-net.ne.jp/archive/200702" class="thisMonth">FEBRUARY</a><a href="https://sknys.blog.so-net.ne.jp/archive/200703" class="nextMonth"></a></div>
<table align="center"><tbody><tr class="day"><th class="sun">Sun</th><th class="mon">Mon</th><th class="tue">Tue</th><th class="wed">Wed</th><th class="thu">Thu</th><th class="fri">Fri</th><th class="sat">Sat</th></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td class="link"><a href="https://sknys.blog.so-net.ne.jp/archive/20070201">1</a></td><td>2</td><td><span class="sat">3</span></td></tr>
<tr><td><span class="sun">4</span></td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td><span class="sat">10</span></td></tr>
<tr><td><span class="sun">11</span></td><td><span class="sun">12</span></td><td>13</td><td>14</td><td>15</td><td>16</td><td><span class="sat">17</span></td></tr>
<tr><td><span class="sun">18</span></td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td><span class="sat">24</span></td></tr>
<tr><td><span class="sun">25</span></td><td>26</td><td>27</td><td>28</td><td> </td><td> </td><td> </td></tr></tbody></table>

<style>
#calendar a{font-weight:normal; color:#006699}
#calendar td.link{background:url("/_images/blog/_fc3/sknys/6169896.jpg") no-repeat 1px -1px}
#calendar td.link a{font-weight:bold; color:#339900; text-decoration:none}
#calendar td a:visited{color:#339900}
#calendar td a:hover{color:#dc143c}
#calendar td a:active{color:#dc143c}
.calendar-date a{font:normal 10pt "Comic Sans MS", Arial; margin-left:2px}
.day{font-weight:normal}
.preMonth{background:url("/_images/blog/_fc3/sknys/6233433.jpg") no-repeat 0px 0px}
.sun{color:#ff0000}
.sat{color:#0000ff}
</style>


〔2〕MY CATEGORIES（カテゴリー）

「カテゴリー」のカスタムペイン化は簡単です。リスト・タグはテーブル・タグより単純だし、「最新記事一覧」以下、このリスト・タグで書かれています。<ul><li>〜</li></ul>で囲むだけ。階層構造にしたり、バナー（画像）を入れたり、色を変えたりetc.‥‥愉しいですよ。手動更新は（〜）内の数字を変えるだけ。2000字以内という字数制限があるので、項目数は20以内に留めた方が無難かな？‥‥実は融通の利かない「カテゴリー」をカスタマイズしたかった。カスタムペインが10に倍増されて、漸く念願が叶ったという感じです。「カレンダー」は複雑で難しいという人は「カテゴリー」から始めて下さい。

<ul><li><a class="index" href="https://sknys.blog.so-net.ne.jp/archive/c25361723">I N D E X</a> (3)</li> <li><a class="cats" href="https://sknys.blog.so-net.ne.jp/archive/c203563">c a t' s　c r a d l e</a> (4)</li></ul>

<style>
a.index{color:#555555}
a.cats{color:#00cc00}
</style>


〔3〕LASTEST ARTICLES（最新記事一覧）

「最新記事一覧」の表記を英字に変えたかったというのも、カスタムペインで作り直した理由の１つです。iBook 12" だと漢字フォント（bold）が潰れちゃう。「カテゴリー」のアーカイヴ・リンクとは異なり、個別の記事リンクなのでURLを埋め込まなければなりませんが、ジャンル別に色を揃えたり、サブタイトルや説明文を加えたり、お洒落に飾れます。最新記事〈宇宙からの訪問者〉はMEW（←猫の鳴き声！）でアピール。色を薄くして非リンクにすれば、〈猫にも出来るオリジナル・スキン 4.1〉のように、次回の記事タイトルも予告表示出来ますよ。

<ul><li><a class="skin" href="https://sknys.blog.so-net.ne.jp/2007-02-06"></a><span class="precat">猫にも出来るオリジナル・スキン 4.1</span></li> <li><a class="music" href="https://sknys.blog.so-net.ne.jp/2007-02-01">宇宙からの訪問者</a><span class="new">MEW</span></li></ul>

<style>
.precat{color:#999999} ← CSSで色指定しています
a.skin{color:#9400d3}
a.music{color:#4169e1}
</style>

　　
〔4〕LASTEST COMMENT（最近のコメント）

コメントの内容を抜粋して手動コピーする作業を面倒と感じるかどうかが判断の別れ目ですが、スパムコメントの自動表示を阻止出来たり、長めのコメントを引用出来るなど、利点も幾つかあります。コメントの長さに比例して引用する字数を調整し、マイ・コメントと読者のコメントを色分けしました。１日のコメント数が多いと大変かな？‥‥でも、１日に数10〜100もコメントがあるような人気ブログなら、そもそも「最近のコメント」欄を表示する意味がないのでは？

<ul><li><a class="sknys" href="https://sknys.blog.so-net.ne.jp/2007-02-01">松matsuさん、コメントありがとう。HNやタイトル、記事（テーマ、文体）だけではなく、使用しているスキン・イメージにも「性別」があるのかな？</a></li> <li><a class="sonet" href="https://sknys.blog.so-net.ne.jp/2007-02-01">sknysさーん　▼o・_・o▼コンニチワ♪　いやー、互いに性を入れ違ってましたですね（爆）</a></li></ul>

<style>
a.sknys{color:#339900}
a.sonet{color:#006699}
</style>


〔5〕SKNYS COMMENTED ARTICLES（あなたがコメントした記事）

最大のメリットは〈猫欠乏症〉や〈ど・ろ・ろ･･･封切。〉のように、ソネ風呂以外に付けたコメントの記事リンクを表示可能なこと。どうしてソネ風呂内オンリーなのか前々から理不尽に思っていたので、漸く溜飲が下がりました。ソネ風呂内と外風呂、自分の記事と他記事を色別に表示しています。
‥‥以上、実際に表示しているサイド欄について説明しましたが、その他の項目についても同じように変更出来るので、各ブロガーの嗜好に応じて自由にカスタマイズして下さい。「記事検索」＆「読者になる(RSSに登録)」の表記も英字に変えてみました。iBook 12"で見ると「読者になる」の漢字フォントも「最新記事一覧」と同様に潰れていたので‥‥。

<ul><li><a class="sknys" href="https://sknys.blog.so-net.ne.jp/2007-02-01">宇宙からの訪問者</a></li> <li><a class="sonet" href="http://blog.so-net.ne.jp/b_chboy2/2007-01-31">新オリジナルスキン　ワイド化計画</a></li></ul>

　　　　　　　　　　　　　　　　　　　　＊

  • 「カレンダー」のカスタムペイン化は面倒ですが、「カテゴリー」は簡単です＾＾

  • リンゴ・アイコンはkovaioさんに密造してもらいました。スティーヴ・ジョブズには内緒にね＾＾;

  • ソネ風呂の公式スキンをカスタムスキン化する方法を発見しました＾＾
    1. カスタム化したいスキンのソースを表示させる（FirefoxはCmd+U）
    2. CSSのリンク・ファイルを開いて丸コピする。ベーシック（白）のURL↓
    （http://blog.so-net.ne.jp/_skin/system/19/style.css?1169580000000）
    3.カスタムスキンの「編集ページ」の中にあるCSSと入れ替えて保存する
    ‥‥これで公式スキンを自由にカスタマイズ出来るようになります（2007/02/12）

　　　　　　　　　　　　　　　　　　　　＊