スポンサードリンク

2006年08月22日 | の天気 ☔

Seesaaブログのタグクラウドの項目の大きさを統一する

最近Seesaaブログでタグクラウドという面白い機能が追加されているが、サイドメニューやタグのページではタグのフォントが統一されなくて見づらいので対策を考えました。

一応スタイルシートの”.side-tag”のところで10ptに指定されているが効いていないようです。

1.まずサイドメニューのタグ表示を統一します。

[コンテンツの追加]で[タググラウド]を選択し追加したあとでコンテンツの一覧から[タググラウド]のコンテンツを選択し[コンテンツHTML編集]を選択します。

ソースを見ると
     :
<div class="side-tag">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%>
</div>
  :

とあるので下のように赤色の部分を挿入します。

<div class="side-tag">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<span style="font-size:12pt;"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></span>
</div>

”font-size”は12以外の好みの大きさでも構いません。

保存してから[すべて]を再構築します。[サイトを確認]して完了です。

2.次は、タグページの上部に表示されるタグ一覧の大きさの統一です。

[HTML]を選択してからHTMLソースを表示させます。

     :
<% if:page_name eq 'tag' -%>
<div class="tag">
<script language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud" ><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" id="tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div>
     :

と記述されている部分を探します。下のように赤色の部分を挿入します。

<% if:page_name eq 'tag' -%>
<div class="tag">
<script language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud" ><span style="font-size:10pt;"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" id="tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></span></div>

修正後保存します。再構築する必要はありません。

以上ですが、いかがですか?タグが見やすくなっているはずです。


ブログランキング
2006年05月07日 | の天気 ☁

トラックバックのテスト

トラックバックのテストさせていただきます。
トラックバックとは?
うまくいくかな?
ブログランキング
2006年05月05日 | の天気 ☁

誰かカレンダーのカスタマイズについて教えてください

Seesaaブログをカスタマイズ中ですが、カレンダーで前後の月を表示させる方法を知っている方教えていただけませんか?他のブログでは割とサポートしている機能です。
私の調べてみたところでは、カレンダーの コンテンツのHTML記述の中で以下部分の"now,content_calendar.datetime"の"now"のところを何かに書き換えればできるとは思うのですが、"prv"や"next"などに書き換えてもうまく行きません。

<caption class="calendarhead">
<% date_format(now,content_calendar.datetime) %>
</caption>


2006.5.17 追記
要望が多かったみたいでSeesaaのほうでソリューションを提供してくれました。ありがとうございます。


ブログランキング
2006年05月04日 | の天気 ☁

記事内容をスクロールバー付のフレームに表示する

記事内容が長い場合ウインドウ自体をスクロールさせるかあるいは、「続きを読む」などに追記する必要がありますが記事内容を個別にスクロールできるようにしました。

【設定方法】
@[マイブログ]ウインドウの[デザイン]-[スタイルシート]を選択して適用しているスタイルシートを選択し表示させます。
A[スタイルシート]のフレーム内をスクロールさせて #content { の少し下の .text { の部分を表示させます。この部分が記事内容のスタイルを設定している部分です。デフォルトでは以下のようになっているはずです。

.text{
padding:10px 0px 5px 0px;
margin-top:0px;
line-height:1.8em;
font-family:Verdana;
}

これを以下の赤い部分のように書き換えるあるいは追加します。

.text{
padding:5px;
margin-top:0px;
line-height:1.8em;
font-family:Verdana;
height:170px;
overflow:auto;
border:solid 1px #D3D3D3;

}

これでOKです。パディング(padding)、枠の高さ(height)、色/太さ(border)などは好みに応じて変えてください。



ブログランキング
2006年04月28日

カレンダーをバナーの右に表示

今日は、カレンダーの位置を移動させてみた。今日午前中いっぱい結構時間がかかったがうまくいきました。
再就職活動もしないで何をやっているのか(苦笑)。設定であれこれ悩んでいるかた、参考にしてください。
ポイントは、スタイルシートの[.description](ブログの説明のスタイルを設定する)のところで位置を絶対座標で指定するところでしょうかね。
@ [デザイン]の[コンテンツ]のページで[カレンダー]の[配置]を[ヘッダー]にして
A [並び順]を[ブログ名][カレンダー][ブログ説明]の順番にする。(例えば、ここの数字を10,20,30とする)
B そのあとでスタイルシートを以下のようにする。反転部分はスタイルシート内の修正・追加箇所です。 

h1 {
margin:0px;
padding-top:50px;
padding-bottom:10px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
float:left;                 「ブログの説明」をヘッダーの右に回りこませる

}
    :

#container{
margin:0px auto 0px auto;
width:800px;   ブログ全体を固定長にする
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
text-align:center;
}

    :

.description {
position:absolute; 「ブログの説明」項目を上からの絶対位置で指定
top:100px;            上から100ピクセルのところで左寄せ
width:650px;            「ブログの説明」項目の幅を指定
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 0px;
}

    :

#calendar {
margin-bottom:10px;
font-size:12px;
border:2px solid #F1F1F0;
baclground-color:#FFF;
width:20%; カレンダー全体の幅をブログ全体の幅の20%に指定
}   



ブログランキング

スポンサードリンク

×

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