どうも。CSSは独学近所です(´･ω･｀)
今回は4/10にお披露目されたはてなブログの
サイドバーモジュールのカスタマイズについて
分かりやすく説明してみようと思います。
そんじゃ早速やってみようかな。
高度なモジュールってなんぞ？
うん。まずこれの言葉の意味ですがよー分かりません(´･ω･｀)
よー分らんけど少なからず使い方の解説は出来ます。
色々試してみてちょこっとだけ弄ってみました。
という訳で解説。
ヘルプページからCSS持ってきました。
※ヘルプでは{Categories}となってますが
{CategoryLinks}としないと正常に機能しません。
なんかカラフルに色分けしましたが色ごとでデザイン上は一塊です。
上から順に
赤＝記事に飛ぶURL関連
紫＝日付
緑＝ブックマーク数(タイトルの横に付ける)
青＝カテゴリ
黄＝冒頭50文字
全てdiv classでまとめられているのでCSSでデザイン設定が可能です。(たぶん)
一応色々試してみましたが文字の大きさなどは変えられますが
あまり大きさをでっかくやりすぎると表示しきれなくなりました。
不要であれば塊ごと消してしまえば表示されません。
どんなことができるの？
まずできることの一つに並び替えや表示・非表示が選べます。
今まではチェックボックスでのオンオフは出来ましたが並べ替えは出来ませんでしたしね。
やろうと思えば冒頭50文字を先頭に持ってくるなんてこともできます。
それに意味があるかはさておいて。
さらに上の通りCSSでデザイン設定出来るので
サムネイル画像の大きさを変えたり、文字の大きさを変えたりできます。
これ・・・意外といい感じの機能ではないでしょうか。
という訳で早速このブログのサイドバー弄りました。
どーでしょうか。
え？分からん？
なら比較をご覧あれ！！
やったことは以下の通り
★ NEW Arrivalの部分
カテゴリーを一番上に持ってきて太字にしてみた。
★ Attentionの部分
日付を太文字にしてみた
★２つ共通部分
サムネ画像を80pxの長方形にした
日付とカテゴリの文字の大きさを若干大きくした
★ NEW Arrival ★
どうでしょう。ちょっとすっきりしました。
★ Attention ★
こっちも文字にもメリハリがついてすっきりした感じ。
冒頭文字が50文字固定？みたいなのでそこ弄りたいんですけどね…。
コピペでOK！CSSのご紹介！
このブログと同じようにしたいって方は以下の手順でお願いします。
管理画面→デザイン→サイドバー→モジュールの追加
新着記事・関連記事・注目記事から作りたいものを選ぶ
高度なカスタマイズを使うにチェックを入れる
下の空白に先ほど紹介したヘルプと同じHTMLを入れて適用。
↓ これです ↓
次に同じデザイン画面の下部にあるデザインCSSに
このCSSを貼り付けてください
.urllist-image-link, .urllist-image {
width: 80px;
height: 80px;
margin: 0;
}
.urllist-date-link {
font-size: 15px;
font-weight: bold;
}
.urllist-categories-link {
font-size: 18px;
font-weight: bold;
margin: 0;
}
これが基本の形です。
数字が入ってる部分は数字を大きくすればデカくなります。
font-sweight: bold;は太字の意味なので不要でしたら消してください。
他の部分は・・・まぁ弄る必要なさげなので弄ってません(´･ω･｀)
順番を変えたいときは塊まるっと移動させてくださいね。
これをそのまま使うと全部に同じデザインが適用されます。
近所のブログのようにどちらか一個だけ太字にしたい！
と言う場合はちょっとひと手間。
ちょっと難しい! 片方だけにデザインを入れる方法
これはCSSがある程度理解できてないと意味わからないと思います。
以下のHTMLは近所のNEWArrivalのHTMLです。
<div class="urllist-categories-link1">{CategoryLinks}</div><a href="{Permalink}" class="urllist-image-link">
<img src="{ImageURL}" alt="{Title}" class="urllist-image">
</a>
<div class="urllist-date-link">
<a href="{Permalink}"><time>{Date}</time></a>
</div>
<a href="{Permalink}" class="urllist-title-link">{Title}</a>{BookmarkCount}
<div class="urllist-entry-body">{EntryBody}</div>
見ての通り先頭にカテゴリを持ってきて<div class="urllist-categories-link1">と
linkの後ろに１がついてます。
さらに近所のデザインCSSはこうなってます。
.urllist-image-link, .urllist-image {
width: 80px;
height: 80px;
margin: 0;
}
.urllist-date-link {
font-size: 15px;
}
.urllist-date-link1 {
font-size: 15px;
font-weight: bold;
}
.urllist-categories-link1 {
font-size: 18px;
font-weight: bold;
margin: 0;
}
後ろに１が付くことで別物として認識してくれるので
NEWArrivalの部分のHTMLの.urllist-categories-linkには１が入っていますが、
Attentionの部分のHTMLの.urllist-categories-linkには１を入れていません。
こうすることで新着記事と人気記事で分けてデザインできるようになっています。
…うーん。これ数か月前の自分ならお手上げの自信あるわ。
もしも
こんな感じにしてみたい！とかあればコメントなりいただければ
わかる範囲でしたらお答えします。
ひとまず新機能という事で使ってみました。
もう少し何か出来そうなら弄ってみようと思ってます。