2005年06月20日

ブログカスタマイズ7【パン屑リスト】【カテゴリ内記事一覧】

次項有パン屑リスト
…やーっとできた〜長かったあ。
↑に表示されてるような、
HOME > DIARY>WEB&PC > 記事のタイトル

っていうのをやりたかったんです。
いい方法がやっと見つかりました♪
参考にしたのはSeesaaデザインテンプレートさま
断層化メニュー_ブレッドリスト
に少し手を加えました。





次項有カテゴリ内記事一覧
…日記の部分なんかは多すぎて使わないかもたらーっ(汗)
だけどその他のカテゴリを見る時は便利だと思ってつけてみました♪
参考にしたのはSeesaaデザインテンプレートさま
カテゴリで記事一覧を表示する[HTML+CSS]
これはほとんど変えてませんが、スタイルシートの部分だけ変えました。




次項有パン屑リスト
1デザイン→カテゴリ→記事→HTML編集
□オリジナル
<p class="breadnavi">
<a href="<% blog.page_url %>">HOME</a>
<a href="<% article_category.page_url %>"><% article_category.name %></a>
この記事
</p>

□変更後
<p class="breadnavi">
<a href="<% blog.page_url %>">HOME</a>
<a href="<% article_category.page_url %>"><% article_category.name %></a>
<b><% article.subject %></b>
</p>

こうすると、記事タイトルが自動でつきますから便利です

※貼り付ける場所も
□オリジナル
<h3 class="title">
<a href="<% article.page_url %>" class="title">
<% article.subject %></a>
</h3>

ではなく
□変更後
<h2 class="date" ;>
<% article.createstamp | date_format("%Y年%m月%d日") %>
</h2>

にするとこのブログのように日付の上に表示されるようになります。

2スタイルシートの追加
…適当なところ(一番下にでも)はりつけます。
.breadnavi{
color:#996699;
background-color:#FFFFFF;
border-style:dotted;
border-width:4px 4px 4px 4px;
border-color:#FFCABA;
font-size:12px;
font-weight:normal;
text-align:left;
margin:10px 0px 0px 0px;
width:100%;
padding : 5px;
}

色やサイズはお好みで変えてください。色々試してみると面白いですよ〜





次項有カテゴリ内記事一覧
1デザイン→カテゴリ→記事→HTML編集
□オリジナル
<% if:page_name eq 'category' -%>
<div id="clist">
<p>このカテゴリの記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li>
<a href="<% article.page_url %>" class="title"><% article.subject %>
</a>
</li>
<% /loop -%>
</ul>
</div>
<% /if -%>

□変更後
<% if:page_name eq 'category' -%>
<div id="clist">
<p>カテゴリの内記事一覧</p>
<ul>
<% loop:list_article -%>
<li>
<a href="<% article.page_url %>" class="clist-text"><% article.subject %>
</a>
</li>
<% /loop -%>
</ul>
</div>
<% /if -%>

に変更します。

2スタイルシートの追加
…適当なところ(一番下にでも)はりつけます。
/* カテゴリ記事リスト */
#clist {
color:#996699;
background-color:#FFFFFF;
border-style:dotted;
border-width:4px 4px 4px 4px;
border-color:#FFCABA;
font-size:12px;
font-weight:normal;
text-align:left;
width:100%;
margin:0px 0px 0px 15px;
padding: 10px;
}

#clist li {
font-size:12px;
font-weight:normal;
text-align:left;
}

.clist-text{
color:#FF8C00
font-size: 12px;
letter-spacing:2px;
line-height:300%
margin-top:0px;
padding:0px 10px 0px 10px;
}

色やサイズはお好みで。

ずーっとできなくて諦めてたのでうれしかったり♪
カスタマイズってスバラシイ!!
posted by モモカ at 14:17| Comment(0) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

2005年06月18日

ブログカスタマイズ6【2次元コード】

次項有2次元コード(QRコードを設置する)
Seesaaブログは携帯サイトからも見られるのは知っていたんだけど、
アドレスって打ち込むのが面倒じゃないですかあせあせ(飛び散る汗)
ので作ってみた、2次元コード。
作るのはとってもカンタン♪
auでQRコード作成プログラムをダウンロードさせてくれるので、プログラムを手に入れてみました。
存在は知ってたけど、今まで使い道がなかったこのプログラム。
ちょ〜カンタン、便利!
これからも何かと使えそうな気がするぴかぴか(新しい)




1まずはプログラムを手に入れる。
ダウンロードはコチラ
使い方はプログラム添付のヘルプを参照してください。
で、bmpイメージファイルを保存します。

2保存したbmpファイルをアップロードします。

3デザイン→コンテンツで「お気に入りリンク」を追加。
場所はお好みで。
私は「全ページ・右サイドバー」にしました。

4作成した「お気に入りリンク」の編集。
とりあえずは紛らわしいのでタイトルを「お気に入りリンク」→「2次元コード」に変える。
そしてコンテンツHTMLの編集。

<div class="sidetitle"><% content.title %></div>
<% content.header -%>
<div class="side">
<div style="text-align:center;"><img src="画像ファイルのURL"></a></div>
<% loop:list_link -%>
<a href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><% content_link.title %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

この部分を追加して、保存。
↑はサイドバーに表示させる時の例ですが、そうでなくても

<% content.header -%>
<div class="○○">

なんてことが書いてある下にでも追加すればオッケーです。

最後に再構築をかけて終了〜♪

ついでに、デザイン→モバイルで背景色や文字色をいじっておくとグッドかもるんるん

追記を読む?
posted by モモカ at 23:42| Comment(2) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

ブログカスタマイズ5【プルダウンメニュー】

次項有過去ログをプルダウンメニューにする
…カレンダーもそうなんだけど、表示はないと不便なのにめったに使わない、
それなのに場所を取ってしまうカテゴリがこれ。
特にSeesaaはブログに良くある『見たい月を選択』っていうのがないんだもの。
と、いうわけでやってみました。

ただし、まだSeesaa用タグを理解できてるわけじゃないので、
変なところがあるかも…たらーっ(汗)
(今のところエラーも何もないけど)
コピペする方がもしおられたら、自己責任でどぞよろしくです!バッド(下向き矢印)




1デザイン→コンテンツ→過去ログ→コンテンツHTML編集を開く

2コンテンツHTMLを編集する

<FORM name="pullmenu">
<SELECT onChange="location=this.options[this.selectedIndex].value" style="color: #AA5B44; background-color: #FFFFFF;">
<OPTION SELECTED VALUE="#">
▼読みたい月を選択してください▼

<% content.header -%>
<% loop:list_archives -%>
<% if:archives.article_count -%>

<OPTION VALUE="
/archives/<% archives.createstamp | date_format("%Y%m") %>.html"><% archives.createstamp | date_format("%Y年%m月") %>
(<% archives.count | __or__ | echo('0') %>)
<% /if -%>
<% /loop -%>
</SELECT>
</FORM>
<% content.footer -%>

※文字色の指定:お好きな色をどぞ。
※背景色の指定:お好きな色をどぞ。
※フォームの名前:つけてもつけなくてもいいんだけどいちおう。何かに表示されるわけじゃないから、分かりやすければ何でも大丈夫。
※メニューのトップ表示:【過去ログ】でも■バックナンバー■でもなんでもよし。
特に変えたくなければ、<% content.title %>が一番問題ないかも。
(カテゴリタイトルが表示される。何もいじってなきゃ『過去ログ』って表示されるはず。)

3プルダウンメニューに表示されるログ件数を変える。
・せっかくプルダウンにするんだし、思いっきり増やしてやれ!と私は50にしてある(笑)
本当に50表示されるようになったら、もう少し減らすかも…晴れ

デザイン→コンテンツ→過去ログを開いて、表示件数を変更、保存するだけ。 


4スタイルシートの変更※お好みで
スタイルシートの好きなとこ(私の場合は一番下)に↓を書き込む。

form {
margin:0px 20px 5px 0px;
padding:0px 20px 5px 0px;
}

select {
width="100%";
}


form {
margin:0px 20px 5px 0px;
padding:0px 20px 5px 0px;
}

は、「自分の好きなところに表示させたい!」って場合。
特になければ設定しなくてもヘーキ。
select {
width="100%";
}

はプルダウンメニューの幅。
小さすぎると文字が切れちゃうから注意。
設定しなければ、最大も字数に合わせてメニューが伸び縮みします。
私は「過去ログカテゴリー」を「右サイドバー」に置いてるので、100%にしてます。
(見た目がいいし。)
だけど、ヘッダーとかに設定して100%にしちゃうと、とんでもなくでっかいメニューになっちゃうから気をつけましょう。

こんなもんで終了〜るんるん

posted by モモカ at 12:17| Comment(0) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

2005年06月17日

ブログカスタマイズ4【続:コメントに絵文字を使う】他7件

■カスタマイズしたのは以下の通り。みんな素敵サイトさま達のおかげです

次項有コメントに絵文字を使う
次項有コメントにクッキー機能をつける
次項有記事の中のタグの書き方
次項有コメントをラインで区切る
次項有トラックバックURLコピーボタンの設置
次項有著作権表示の自動更新
次項有「最新の記事・コメント」などにスクロールバーをつける









次項有コメントに絵文字を使う
…表示の幅、どうにか調整できないものかな〜と思っていたら紹介されてましたぴかぴか(新しい)
BlogPetはじめよう!(Seesaa編)さま
http://blogpetuser.seesaa.net/article/3726244.html#more





次項有コメントにクッキー機能をつける
…これ、ほんと便利黒ハート
・スクリプトはコチラから
PERSONA@BLOGさま
http://persona-blog.seesaa.net/article/3581473.html
・調整についてはコチラを参照。
BlogPetはじめよう!(Seesaa編)さま
http://blogpetuser.seesaa.net/article/3904935.html#more





次項有記事の中のタグの書き方
・タグをキレイにテーブルで囲みたくて…これを試したブログカスタマイズ3はとってもお気に入り揺れるハート
BlogPetはじめよう!(Seesaa編)さま
http://blogpetuser.seesaa.net/article/4150549.html#more





次項有コメントをラインで区切る
・コメント、もらう機会って少ないんだけど(笑)つけてみた。
BlogPetはじめよう!(Seesaa編)さま
http://blogpetuser.seesaa.net/article/4391167.html#more





次項有トラックバックURLコピーボタンの設置
・トラックバック、してもらう機会も少ないけどつけてみた(大笑)
LADY CRAGY*BLOG!!!!さま
http://lazycrazy.seesaa.net/article/2387495.html

当サイトのトラックバック方法変えました。詳しくは追記をご覧ください。





次項有著作権表示の自動更新
・ブログの一番下あたりに表示されてる、
『Copyright © 2005 結城廉 All Rights Reserved. 』のことです。
PERSONA@BLOGさまより
http://persona-blog.seesaa.net/article/2935861.html





次項有「最新の記事・コメント」などにスクロールバーをつける
・これ!これのおかげでずいぶん右バーがスッキリした♪
3カラムはスキじゃないので、こういうのはとってもありがたいです黒ハート
アイコの書きたいホーダイ!さまより
http://aiko0129.seesaa.net/article/1602529.html#more

こんなもんで、落ち着いたかな?
あまりごちゃごちゃしても仕方ないし。(今更…)
さて、あとは過去日記をアップしなくては!まだまるまる1年分、残ってるんだよ〜あせあせ(飛び散る汗)

トラックバックアドレスコピーボタン変更はコチラ
posted by モモカ at 19:02| Comment(0) | TrackBack(1) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

ブログカスタマイズ3【コメント投稿者別アイコン表示】

次項有コメント投稿者別アイコン表示
や、やっとできた…たらーっ(汗)
もうずっと、これにかかりっきりだったのです。
これはstroll::blogさまの
http://melrose.jugem.cc/?eid=132
を参考にしたものです。
なぜできなかったかというと、strollさまが使っておられるブログ(JUGEM)と
私の使っているブログ(Seesaa)ではHTMLのタグが少しずつ違うからです。
まあ素人なもので(笑)そんなことにも気付かず1日中悩んでいたわけなんだけど(笑)
ふと、上記ページで紹介されていた*nisshi.jpさまの記事を見て、
「そっか、この部分をSeesaa対応のタグに書き換えればいいんだ」と気付いた(もっと早く気付こうよ…)

昨日ずっと、ブログカスタマイズ2で書いた「コメントに絵文字を使用する」のために
HTMLをいじってたからおかげで、全体図が少々見えてきたのが良かったぴかぴか(新しい)

以下、書き方が分かりにくかったらごめんなさい。




1アイコンを表示したい場所
(うちの場合だと<div class="comments-post">Posted byのうしろ)に貼るスクリプトの変更。
■元スクリプトをstroll::blogさまのサイトからコピー&ペーストする

■スクリプトを書き換える

<script type="text/Javascript">
<!--
getCommentNameImageTag('{comment_name}');
//-->
</script>



<script type="text/Javascript">
<!--
getCommentNameImageTag('<% comment.writer %>');
//-->
</script>

この部分を書き換えればオッケー。





2HTMLの</head>のすぐ上に貼るスクリプトの変更。
■元スクリプトをstroll::blogさまのサイトからコピー&ペーストする

■スクリプトの一部を削除する

// 投稿者名別アイコン表示
function getCommentNameImageTag(userName) {
// 投稿者名ごとの画像のURL定義
// ['(投稿者名)', '(画像のURL)']
var userImages = [
['投稿者名1', '画像のURL/?image=1'],
['投稿者名2', '画像のURL/?image=2'],
['投稿者名3', '画像のURL/?image=3']
];

// 上記投稿者名以外に表示する画像のURL
var otherImage = '画像のURL/?image=4';

この部分を削除する。

最後にサイトの再構築をして終わり。

…それにしても、つくづくもっと勉強しなきゃ、って実感してしまったわたらーっ(汗)
ちなみに、ド素人なものでこの記事に関して質問とかあっても答えられない可能性大なのでご注意をあせあせ(飛び散る汗)
ほんと、運良くできたって感じなのです〜(自慢にはならない)

追記を読む?
posted by モモカ at 15:33| Comment(3) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

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::五線譜に思いを乗せて…さまの
「続きを読む」の飛び先指定
を参考にしました。

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


これでとりあえずやり途中のものは終了。
は〜スッキリしたっひらめきコメント用絵文字の表示サイズを調節するはコチラ
posted by モモカ at 10:02| Comment(4) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

2005年06月12日

ブログカスタマイズ1【スタイルシート】

■今日一日、過去日記の移動もしないでしていたのはブログのカスタマイズ。
次項有スタイルシートで全体イメージの変更
次項有スクロールバーの色を変える
次項有ファビコンをつける




次項有スタイルシートで全体イメージの変更
…テンプレート「さくら」を元に、まずはスタイルシートの変更を。
タイトルなどを自作したり素材を借りてきたり。
まずまず形になってきました。
カラフルな配色は大好きなんですが、本家サイトはイラストや小説のサイトなので、
色をあまり使うと映えなくなっちゃうから抑えめにしていたんですね。
それをここぞとばかり、大好きなベビーカラーで。





次項有スクロールバーの色を変える
…スクロールバーの色も変えてみた。





次項有ファビコンをつける
…最後に、お気に入り登録すると左に出る画像をくっつけて、おしまい♪
(これだけはHTMLをいじった)


今、やろうとしてうまくいってないのは
「管理人のつけたコメントの文字色を変える」というやつ。
なんどやつてもうまくいかないんだよなあ。う〜ん…。
他にも、ナビゲーションバーをつけたいな〜とか野望は色々。
ブログって、制限はあるけどいじり出すと楽しい♪




スタイルシートのカスタマイズ紹介をされてるサイトさまはコチラ
posted by モモカ at 22:59| Comment(0) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

2005年06月10日

ブログLOVE BESTへようこそ♪

日記、ブログにしてみました。
データの移動はまだ途中で、残りは2003年の11月〜2005年の4月まで。
1年後ヶ月分のデータ!
うひ〜あせあせ(飛び散る汗)
「どうせ自分がまめまめしく日記なんかつけてるわけないから楽チン楽チン」とか思ってたらとんでもなかったっす。
まじめに、毎日毎日つけてはる…たらーっ(汗)
そしてコメントもいっぱい頂いてる…どんだけかかるんでしょう、ねえ(笑)

ブログってことで、カテゴリー別に分けて書くつもり。
ガンダムSEEDDISTENYのネタバレ話とか!ぴかぴか(新しい)
これ乗ってくるのサクヤさんだけだろうけど!!(笑)
どぞよろしくね〜。
posted by モモカ at 19:07| 埼玉 ☔| Comment(0) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする

2005年05月13日

こんな時になにやってるんだ

というツッコミが来そう。
でもリニューアルって言っても「プチ」だし。
まあヒマなんだと思っててくださいな。
身体はしんどいから、ひとつやっては寝て…というペース。
スッゴク時間がかかりそうです。
実は日記をブログにしようとずーっと思ってて、色々画策していたのです。
DIONのブログ、文字データだけなら無限らしいからそっちにデータをちょっと移動すればホームページの方の容量が少し浮くかな、と…。
日記はもともとレンタルだからあまり変わらないんだけれどね。
移動予定なのは、「日記」「親ばか育児記」「プロフィール」「100の質問」「HOBBY」かな。
コンテンツばっかり多いんだよねぇこのサイト…
ホームページは「Fantasia」で、ほぼイラストと小説だけ(掲示板は残します)。
ブログは「LOVE BEST」で、日記とかひとりごととかにしようと思ってます。
過去日記をブログに移そうと思ってるからその作業が大変そう。
だけど過去日記を消すのも分けるのもあんまり好きじゃないから頑張ります。
2003年の6月からか…まる2年。
うううっ。
posted by モモカ at 00:00| Comment(1) | TrackBack(0) | COLUMN>WEB&PC | このブログの読者になる | 更新情報をチェックする
アクセス解析

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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