HOMECOLUMN>WEB&PCブログカスタマイズ2【カテゴリサリー化】【カレンダー横配置】他7件

2005年06月16日

ブログカスタマイズ2【カテゴリサリー化】【カレンダー横配置】他7件

■スタイルシートの変更を終えたので、次は使いやすさ向上計画。
次項有カテゴリーのツリー化
次項有各記事にページのアップダウンリンクをつける
次項有各記事から直接編集作業に移れるリンクをつける
次項有カレンダーを横一列で配置
次項有新着記事の横に『NEW!』マークを表示させる
次項有新着記事の表示を『(日付)タイトル』→『タイトル(日付)』へ変更する
次項有サイドバーにスクロールバーをつける
次項有コメント入力時にアイコンをつける
次項有続きを読むリンクを見やすく表示








次項有カテゴリーのツリー化
…これは絶対条件でした。何かとカテゴリーをたくさん増やしてしまう性質があるので…。
これはDes notes de KOHtanさまの
カテゴリのツリー化(サブカテゴリ化)3
を参考にして。
説明も丁寧にしてくださってるので、とっても簡単にできましたハートたち(複数ハート)





次項有各記事にページのアップダウンリンクをつける
…ブログって、どうしても下へのスクロールが増えてしまうんだけど、
一番古い記事から読みたい!なんて時にマウス操作がとってもめんどー。
なのでリンクをつけてみました。
これは無料ブログでビジネスブログさまの
HTML ページ内ナビをつける
を参考にしました。
オリジナルの物と変えてあるのは、「表示させる場所」「文字の色やサイズ」です。
場所はdiv class="posted"〜とあるあたり。
上→▲UP
下→▼DOWN
にして|で区切ってるだけ。

そしてスタイルシートでupdownというのを作って文字色を指定しました。
.updown{
font-size:12px;
text-align:right;
padding:0px 10px 0px 10px;
}

このへんはお好みで。






次項有各記事から直接編集作業に移れるリンクをつける
…誤字脱字を発見した時、いちいち記事編集メニューから該当記事を探すのはとっても面倒。
というわけでEdit機能をつけてみました。
これは無料ブログでビジネスブログさまの
記事に編集ページリンク修正
を参考にしました。





次項有カレンダーを横一列で配置
…サイドバーに乗せておきたいコンテンツは多いし、でもあまり長くしたくない。
カレンダーも必要なんだけど、場所を取る…と悩んでいたところに知ったのがこの方法。
見た目もスッキリぴかぴか(新しい)いい感じ。
これはPERSONA@BLOGさまの
横型カレンダーを設置する
を参考にしました。
スタイルはstyle bookさまの
カレンダーを横一列で表示する
を参考にしました。
文字のサイズなどはスタイルシートで指定するように変更してあります。
ひらめき【追記】
さらにカスタマイズ。
カスタマイズならやっぱりココだ、PERSONA@BLOBさまの
今日がわかりやすい横型カレンダーを導入!





他にも、
・パンくずリストをつける
・新着記事の横に『NEW!』マークを表示させる
・新着記事の表示を『(日付)タイトル』→『タイトル(日付)』へ変更する
・管理人のコメントの文字色を変える
・続きを読むリンクを見やすく表示

をやってます。まだ試験中だったり上手くいかなかったりたらーっ(汗)





ひらめき【また少し頑張ってみた】
次項有新着記事の横に『NEW!』マークを表示させる
…やっとこできました〜今まで3つくらいサイトを巡ったんだけど、
思い通りに表示できるものに巡り会えました黒ハート
これはPERSONA@BLOGさまの
○時間以内の投稿にnewマークを付ける
を参考にしました。
素材はちーたんのPocketさまからお借りしました。





次項有新着記事の表示を『(日付)タイトル』→『タイトル(日付)』へ変更する
これは無料ブログでビジネスブログさまの
さっそくHTML編集
を参考にしました。





次項有サイドバーにスクロールバーをつける
これはあいこの書きたいホーダイ!さまの
「新着記事」と「最近のコメント」にスクロールバー
を参考にしました。





次項有コメント入力時にアイコンをつける
…管理人のコメントの文字色を変える、にしようかと思っていたんですが、
「こっちのほうがいいや晴れ」と思ってアイコンをつけてみました♪
BBSみたいになっていいんじゃないかなっexclamation&question
これはあいこの書きたいホーダイ!さまの
コメントに絵文字設置法
を参考にしました。
素材はA Trial Product's 素材置き場さまからお借りしました。

※絵文字の表示サイズの調整等を行いました。詳しくは追記をご覧ください。





次項有続きを読むリンクを見やすく表示
これは無料ブログでビジネスブログさまの
できた!続きを読む

きむっちのBlog::五線譜に思いを乗せて…さまの
「続きを読む」の飛び先指定
を参考にしました。

※タグ修正しました。詳しくはコチラをご覧ください


これでとりあえずやり途中のものは終了。
は〜スッキリしたっひらめき




【追記】
次項有コメント用絵文字の表示サイズを調節する
…表示の幅、どうにか調整できないものかな〜と思っていたら紹介されてました
BlogPetはじめよう!(Seesaa編)さま
Seesaaでコメントに絵文字を使えるようにする


posted by モモカ at 10:02 | Comment(4) | TrackBack(0) | COLUMN>WEB&PC
この記事へのコメント
ども、初めまして^^
ウチにコメントをくださったようなのですが…空コメントになっちゃってますので、一旦削除させていただきますね。
お名前とコチラのリンクがありましたのでコメントさせていただきましたm(_ _)m
Posted by あいこ at 2005年06月16日 16:45
あれ?コメント入っていることは入ってますね…。
表示だけがされないようです…。
再構築もしてみたのですが^^;
またチャレンジしてみます。。。
Posted by あいこ at 2005年06月16日 16:50
顔文字アイコン変えてみたりして…[ラヴ]
Posted by 結城廉 at 2005年06月17日 00:45
あいこさま、いらっしゃいませ。
ご訪問ありがとうございます[ラヴ]

コメントが表示されないのは、わたしのポカのせいです…[(汗)]
先日お詫びしに書き込みに行ってきました。
なおして頂いき、ありがとうございました[♪]

またお世話になりますので、よろしくお願いします<(_ _)>
Posted by 結城廉 at 2005年06月17日 19:16
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/4393857
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
アクセス解析
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。