テーマ「Pastel-Liquid」のカスタマイズ
CSSでのテーマだけでは提供できなかった部分や、表示方法を変えたいと思う人がいるかもしれない部分について、そのカスタマイズ方法を紹介します。
そのほかに何か気になるところなどがあればお知らせください。対応できるものかどうかは別にしても、今後制作する上での参考にしたいと思います。
カテゴリタブの追加
詳細デザイン設定でページヘッダとスタイルシートの追加編集作業が必要になります。
ページヘッダの追加
ページヘッダにカテゴリリンクを記述します。KAZUMiX memoのページヘッダを例に説明します。
<div class="main">
<!-- カテゴリタブ -->
<div id="tabs">
<ul>
<li><a href="/KAZUMiX/"><strong>最新</strong></a></li>
<li><a href="/KAZUMiX/searchdiary?word=%2a%5b%a5%b2%a1%bc%a5%e0%5d">ゲーム</a></li>
<li><a href="/KAZUMiX/searchdiary?word=%2a%5b%cb%dc%5d">本</a></li>
<li><a href="/KAZUMiX/searchdiary?word=%2a%5bPC%5d">PC</a></li>
<li><a href="/KAZUMiX/searchdiary?word=%2a%5b%b2%bb%b3%da%5d">音楽</a></li>
<li><a href="/KAZUMiX/searchdiary?word=%2a%5b%bb%a8%b5%ad%5d">雑記</a></li>
<li><a href="/KAZUMiX/archive"><strong>記事一覧</strong></a></li>
</ul>
</div>
tabsというidのdivタグ内に、ulリストタグで各カテゴリのリンクを記述します。上のサンプルをコピーして<li>〜</li>内を書き換えて使えばOKです。<li>〜</li>はいくつでも記述できますが、画面端に届いた場合は折り返されることに気をつけてください。
スタイルシートの追加
上記ヘッダに追加したカテゴリリストがタブ状に表示されるよう、詳細デザイン設定においてスタイルシートを追加します。以下をそのままコピーして追加してください。*1
/* Pastel-Liquid用タブ */
#tabs {
overflow: hidden;
font-size: 80%;
position: relative;
top: -14px;
margin-bottom: -10px;
}
* html #tabs {
height:1%;
}
#tabs:after {
content:".";
display:block;
clear:both;
line-height:0;
visibility:hidden;
}
#tabs a {
color: #996699;
background-image: url("http://www.rr.iij4u.or.jp/~kazumix/d/css/Pastel-Liquid/tab_bg.png");
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 12px;
padding-bottom: 4px;
padding-top: 2px;
text-shadow: 2px 2px 1px #888888;
}
#tabs ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#tabs li {
float: left;
background-color: #EEEEEE;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 12px;
background-image: url("http://www.rr.iij4u.or.jp/~kazumix/d/css/Pastel-Liquid/tab_bg.png");
background-repeat: no-repeat;
background-position: left bottom;
margin-right: 2px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
}
サイドバーのリストタグ内のリンクのブロック化をやめる
見た目的にはこのブロック化により改行が発生している部分があります。これをやめたい場合は詳細設定のスタイルシートに以下の記述を追加します。
/* Pastel-Liquidサイドバー内のリストタグ内リンクのブロック化無効 */
.sidebar .hatena-modulebody ul li a {
display: inline;
}
asinlogモジュールやhotasinモジュールをインライン表示にする
/* asinlogとhotasinをインライン表示に */
.sidebar .hatena-module .hatena-hotasin,
.sidebar .hatena-module .hatena-asinlog {
margin: 0px;
}
.sidebar .hatena-module .hatena-hotasin *,
.sidebar .hatena-module .hatena-asinlog *{
background-color: transparent;
background-image: none;
display: inline;
}
.sidebar .hatena-module .hatena-hotasin li,
.sidebar .hatena-module .hatena-asinlog li {
padding: 0px;
margin: 0px;
}
asin画像(asin:〜:image)を右側に表示してテキストを回り込ませる
/* asin画像を右に */
.section img.asin {
clear: right;
float: right;
margin-bottom: 8px;
margin-left: 8px;
}これはどのテーマでも使えます。右ではなく左にしたい場合はrightの部分をleftに、leftの部分をrightにします。
