2007年09月06日
サイドバー項目名を変更しよう
今更ながらちょっと恥ずかしいのですが、サイドバーの項目名を変更できることに気付きました
例えば「お気に入り」という名前を「リンク」というようなかんじに名前を変更できるのです。
そんなん知ってるわ~
っとつっこまれそうですが、一応、設定の紹介をします。
設定
設定は↓の画像を参照してください。
まず管理画面TOPからサイドバーを選択し、サイドバー設定画面へと進みます。
変更したい名前を選択して、「名称変更」ボタンをクリックします。
すると名前を変更できる枠が表示されますから、お好みの名前に変更してOKをクリックします。
これだけで名前の変更は完了です。
まとめ
どうですか
これもりっぱなカスタムですよね。
尚、名前を変更できないモノもありますから、そのへんはしょうがないってことで
あと、名前は変更できても機能までは変わりませんからご注意を
(ナカガワ@湖底さんから情報をいただきました)
それではお疲れ様でした
2007年07月27日
カレンダーの投稿日にマークをつけよう
もう一般的な属性は紹介したと思うので、今回からは応用
みたいなかんじで紹介していきたいと思います。
今回はカレンダーのアレンジです。
ブログの記事を投稿した日にマークを付けたいと思います。
また、マウスカーソルが上に乗るとマークも変わるってこともしてみます。
使用するマーク用の画像は、
いつものこの星です。
この星が記事を投稿した日だけ表示されるようにします。
設定(例)
| /*曜日*/ .calendarweek{ color:#000000; font-size:14px; font-weight: bold; font-style:italic; font-family:"Times New Roman"; width:20px; text-align:center; } /*日付*/ .calendard{ color:#000000; font-style:italic; font-family:"Times New Roman"; font-size:10px; width:20px; line-height:20px; text-align: center; } /*日付リンク*/ .calendard a{ background:url("http://shiga-saku.net/usr/customshichao/calender-icon1.jpg"); background-repeat:no-repeat; color:#000000; width:20px; line-height:20px; display:block; margin:0 auto; text-decoration:none; } |
っとまぁ、これがこのブログのカレンダーの曜日と日付の設定です。
これを参考にアレンジしてみてくださいね。
っとその前に、今回出てきた新しい属性は「margin」、「line-height」、「display」になります。
ではそれぞれの属性の説明を・・・。
margin
「margin」は「padding」と似ていまして、「padding」が枠の内側の余白設定だとしたら、「margin」は枠の外側の余白設定となります。
値は「padding」と一緒なので、過去の記事を参考にしてくださいね。
また、「auto」という値は、自動設定という意味です。
ですから上の場合、縦の余白が0pxで、横が自動ということになります。
line-height
「line-height」は行と行の間を数値で設定したりすることです。
縦の設定ということで「height」にも似ていますね。
display
「display」は「inline (インライン要素)」と「block (ブロックレベル要素)」が主に指定できます。
| display : block ; |
「inline」は要素の後に改行が入らないように設定するのに対し、「block」は改行が入るように設定します。
っとまぁ、これの説明はちょっと大変ですので省きますが、上の場合、形を崩さないために用いました。
ポイント
今回のポイントは「width」と「line-height」、「display」にあると思います。
画像のサイズと同じサイズに設定し、尚且つ形を崩さないようにするということです。
| width : 画像の横幅 ; line-height : 画像の縦幅 ; display : block ; |
これらを設定しないと上手く表示できないと思いますので、要チェックです。
あとはみなさんのサイドバーの横幅やカレンダーのそれぞれの幅に応じて画像のサイズを微調整して設定してみてください。
これで記事を投稿した日だけにマークが表示されるようになると思います。
次に応用の、マウスが上に乗ったらマークが変わるようにしてみます。
これを行うにはもう1枚画像が必要となります。
今回は、マウスが上に乗ったら、星が渦巻きになるようにしてみます。
ってことで画像は
これです。
設定
| /*日付リンク*/ .calendard a:hover{ background:url("http://shiga-saku.net/usr/customshichao/calender-icon2.jpg"); background-repeat:no-repeat; color:#ffffff; } |
っとなります。
「a:hover」は以前にも紹介しましたが、マウスが上に乗ったときという意味です。
上の「.calendard a」が記事を投稿した日のリンク全体設定ですから、
| width:20px; line-height:20px; display:block; margin:0 auto; text-decoration:none; |
これらを設定しなくても継承されるので、「.calendard a:hover」では、これらの設定は必要ないと思います。
もちろん変更も可能だと思いますけど。
まとめ
今回のは細かな設定が必要とされますので、上のをコピー&貼り付けされたところで、上手く表示されないと思います。
画像のサイズ、カレンダーなどの幅設定を微調整しながらチャレンジしてみてくださいね
次回はブログの記事の部分の構造を紹介したいと思います。
これから先は、あまり属性の紹介もないと思いますので、IDとCLASSの紹介がメインになると思います。
いろんな属性を使って、皆さんのお好みのデザインになるようアレンジしてみてくださいね。
それではお疲れ様でした
~追記を読む~
2007年07月24日
サイドバーの構造を知ろう
今回は、記事の横に並んでいるカレンダーやカテゴリといったところの「#links (サイドバー)」の中の構造を紹介したいと思います。
特にカレンダーの構造を知っていれば、背景や投稿日など、さまざまな設定がお好みにできるようになって楽しいと思います。
では、右の画像と共に説明していきたいと思います。
ID
「#links」はサイドバー全体のです。
クラス
カレンダー
「.calendarhead」は「< 2007年07月 >」などと表示されているヘッダーと呼ばれるところです。
「.calendartable」は曜日&日時表示の下にあるテーブルのことです。
「.calendarweek」は曜日の文字のエリアのことです。
「.carendarwd」は曜日の文字の下にあるエリアのことです。
「.calendard」は日付の文字の下のエリアのことです。
「.calendar」はカレンダー全体ですが、設定としては日付の文字になると思います。
サイドメニュー
「.sidetitle」はサイドメニューのカテゴリや最近の記事といったタイトルのエリアのことです。
「.side」はサイドメニュー各項目リストのエリアのことです。
「.side .text」はテキストの横幅などの設定のことです。
その他
この一覧以外にも、細かな設定ができるので、分かる部分だけ紹介します。
「.photo」はプロフィール画像のエリアです。
「.nickname」は名前のエリアです。
「.message」は自己紹介の文章のエリアです。
「.rss」、「ul .rss」、「ul.rss li」、「ul.rss a」は、それぞれrssの項目、項目リスト、リンクの設定です。
まとめ
今回はサイドバーの構造を紹介したわけですが、エリアという言葉を使いましたけど、エリアといっても文字の設定もできるわけですから、言い方は正しくないかもしれません。
でも、どう言えばいいか分からなかったので、エリアにしました。
だいたい言いたいこと分かりますよね
次回はカレンダーの設定を紹介したいと思います。
といっても、属性などは、これまで紹介してきたものを応用すればいいだけですので、紹介としては僕がお気に入りの「投稿日の下に画像を表示する」ってのをしたいと思います。
元々 文字をダラダラ入力するより絵を描く方が好きなもんで・・・
それではお疲れ様でした




