シーサーの自由形式欄にタイトルを表示させる方法!!

シーサーの自由形式欄にタイトルを表示させる方法なん
ていまさらの感もありますが…

やり方は非常に簡単で殆んどの方がご存知だと思います。

しかし、自由形式を追加してブログに手を加えようと思
ったら、あれタイトルってどうやって入れるんだっけ？

なはは…、全然覚えてない

まっ、こんなもんですよ。特に私の場合は。

てな訳で、やり方です。


マイブログ→デザイン→コンテンツ
↓
左側にあるコンテンツの中から自由形式を自分が表示さ
せたい好きな位置へドラッグ＆ドロップして設定を反映
するをクリック
↓
自由形式を直接クリック
↓
まず、ここでタイトルを変更して、自由入力欄に表示し
たい内容を入力して保存

注）ちなみに、ここではマイブログのコンテンツの編集
ページのみのタイトル変更でブログ自体には、まだこの
タイトルは反映されません。

そのままページを閉じずに、右上にあるコンテンツHTML
編集をクリック。
↓
すると下記の文字列が表示されます。

＜% content.header -%＞
＜% content.free.text %＞
＜% content.footer -%＞

これを下記の通り変更して下さい。(○○○○○がタイト
ル部分になります。)

＜div class="sidetitle"＞○○○○○＜/div＞
＜div class="side"＞
＜% content.header -%＞
＜% content.free.text %＞
＜% content.footer -%＞
＜/div＞

ここで保存をクリック後、プレビューで確認してみる事を
お勧めします。タイトルの文字数の問題などもありますし、
再構築する前にいくつかタイトルを試してみる方が安心だ
と思います。

タイトルが決まったら保存後、再構築で完成です。


えー、それと自由形式の中に表示する内容部分についても
ちょっと触れておきたいと思います。

はっきり言って私もあまりよく分かっていないという状況
ですが(なんだかこっちの方が難しくて悩む気もします)自
分の為にも書き残しておこうかなと…

自由形式の中にバナーを表示させようとする方が結構多い
と思うんですが、自由入力欄にまんまタグを貼って保存す
ると、タイトルの直下にひっついた状態だったり、左に寄
って表示されたり、自分の思った位置に表示されない場合
があると思います。

おそらくスタイルシートでの指示の為と思われますが、こ
の指示を調整するのは結構面倒ですし、調整具合も迷うと
ころです。

ですので、私はまんま自由形式の中で調整しました。

直下にひっついた状態を直すのには、タグの前に＜br/＞を
入れて下さい。ひとつで足りければ＜br/＞＜br/＞でもＯＫ
です。いくつか連続してバナー表示する場合もバナーのタグ
同士の間に＜br/＞を挿入すればうまくいくと思います。

＜br/＞は改行タグというもので、文章など改行を行う時に
挿入したりします。(シーサーの記事入力の際は改行HTMLタ
グ変換をするにしているのでいちいち＜br/＞を入れる必要
がない訳です)

左に寄って表示されてしまうのを防ぐにはタグの文字列全
体に自由入力欄の中央寄せの効果をかけてあげればよいと
思います。

また、バナーの上下に文字の説明を入れたい場合も多いと
思います。

単純に自由入力欄に文字を書いていけば反映はされるんで
すが、やっぱり微調整は必要かな〜。

まあ、私自身もあまりうまくできてないですけど…

文字もバナー同様タイトルの直下から始まるのが嫌な場合
文字の前に＜br/＞でＯＫです。

文字の色に関しては自由入力欄のカラーパレットが使えま
すし、もちろん中央寄せや文字を大きくするのもＡ＋(大)
が使えます。

文字のサイズを自分の好きなサイズに調整したい場合は、
Ａ＋(大)で大きくした後下記の通りです。

＜span style="font-size:large;"＞

↓　こちらに変更

＜span style="font-size:○○px;"＞


○○の部分に10や12等の数字を入れて調整してみて下さい。


例によってど素人のやり方ですので違っていたら平にご容
赦下さい。

そんではまた〜!!


人気blogランキング見てみます？

カテゴリ記事リストをトップに自動表示する方法

今回のカスタマイズはかなり有名なカスタマイズなので、
ご存知の方も多いと思います。

目的は当然の事ながら、埋もれている自分の記事も見ても
らいたい、発見してもらいたいという事です。

実は、このカスタマイズを実行する事をかなり迷いました。

以前「自動で全ての記事にリンクやアドセンスを表示する
方法」を行った際に、トップページ、カテゴリページ、過
去ページでの記事表示数を全て１ページに変更しました。

グーグルアドセンスのページ内にアドセンスは３つまでし
か表示できないという規約があった為です。

ところが、今回のカスタマイズは記事表示数に連動してト
ップ部分に表示される記事リスト数が決まるため、１ペー
ジ表示では意味が無くなってしまいます。

で、仕方なくカテゴリページの記事表示数を５つに変更し
ました。

５つの記事がズラズラと縦に表示された際に、各記事の記事
下にアドセンスが表示されるとまずいので、人気ブログラン
キングのみ残し、記事下のアドセンスは個別記事(article)の
みに変更しました。

埋もれている自分の記事を見てもらうには、他にも方法があ
りますが、とりあえず今回はこれでしばらく様子見です。


●やり方

デザイン→コンテンツ→記事を直接クリック
↓
コンテンツHTML編集をクリック

赤字部分を追加挿入してください。
(＜＞は大文字で表記していますが、本来は半角です）

＜div class="navi"＞
＜% if:pager.previous_page %＞＜a href="＜% category.page_url
(pager.previous_page) %＞"＞＜% /if %＞<<＜% if:pager.
previous_page %＞＜/a＞＜% /if %＞＜% loop:list_pager %＞
＜% if:current_page ne pager_number %＞＜a href=
"＜% category.page_url(pager_number)%＞"＞＜% /if %＞
＜% pager_number %＞＜% if:current_page ne pager_number %＞
＜/a＞ ＜% /if %＞＜% /loop %＞＜% if:pager.next_page %＞
＜a href="＜% category.page_url(pager.next_page) %＞"＞
＜% /if %＞>>＜% if:pager.next_page %>＞＜/a＞＜% /if %＞
＜/div＞
＜% /if -%＞

＜div id="clist"＞
＜script langage="JavaScript"＞
＜!--
＜% if:pager.need_pager -%＞
var start=1+<% blog.category_page_cnt %＞*
(＜% current_page %＞-1);var end=＜% if:pager.next_page %＞
＜% blog.category_page_cnt %＞*＜% current_page %＞
＜% else %＞＜% category.article_count %＞＜% /if %＞;
document.write("「＜% category.name %＞」カテゴリの
＜% category.article_count %＞件中",start,"-",end,
"件の記事一覧です。");
＜% else -%＞
document.write("「＜% category.name %＞」カテゴリの記事一
覧です。");
＜% /if -%＞
// --＞
＜/script>＞
＜ul＞
＜% loop:list_article -%＞
＜li＞＜a href="＜% article.page_url %＞" class="a"＞＜% artic
le.subject %＞＜/a>＞＜/li＞＜% /loop -%＞
＜/ul＞
＜/div＞

＜% /if -%＞

＜% loop:list_article -%＞


更に、スタイルシート部分にも変更を加えます。


デザイン→デザイン一覧→現在使用中のデザインをクリック
↓
スタイルシートの一番下に赤字部分を追加挿入して下さい。



/* カテゴリ記事リスト */
#clist {
text-align:left;
background:#FEFFF0;
margin: 20px;
padding: 10px;
border: 3px double #B2B2B2;
font-size: 90%;
}
#clist li {
margin-bottom: 0.6em;
font-size: 90%;
font-weight:normal;
line-height:150%;
}

ちなみに、backgroundで枠内の色指定ができたり、
border: 部分で線の種類や色が変更できると思います。
(普通はbackground-colorで指定しそうなもんですが、back
groundのみで各種まとめ指定できるのでこの様な表記に
なっていると思われます。)


今回のカスタマイズでお世話になったブログ様

じゅるいなぁ　様


おいおい、参考じゃなくて、まんまの記事じゃねえか。

おまえ、じゅるいなぁ。

お後がよろしい様で…


人気blogランキング見てみます？

シーサーブログ、ソーシャルブックマーク機能追加なのに手動設定(泣)

せっかく、シーサーブログがソーシャルブックマーク機
能追加してくれたのに訳の分からないカスタマイズもど
きをやっていた為、なぜか手動設定するはめに(笑)

と言いましても、この方法が絶対的に安心安全な方法か
どうかは人それぞれです(汗)

どれだけの多種多様なカスタマイズをやっていて、ど
こにどう影響しているのかが分かる位の方でなければ
本当に確信は持てないと思います。

「いい加減だな〜」と言われましても…

低レベルの私のことですし〜。

許してほしいし〜。

で、何故やり方に気が付いたかと申しますと、別のカ
スタマイズを実行したからなんです。

まあ、カテゴリのどれかをクリックしていただければ
わかると思いますけど。

このカスタマイズは、またの機会にでも。


さてさて本題に参ります。

デザイン→コンテンツ→記事→コンテンツHTML編集
　　　　↓
初期値との差分を見るをクリック

すると下記のような現象が何故かおきてます。
(＜＞は全角で表示していますが本来は半角です)

-＜% if:blog.bookmark_service %＞
-＜script type="text/javascript" language=
"javascript" charset="utf-8"＞＜!--
-seesaa_bookmark_services =
"＜% blog.bookmark_service %＞";
-seesaa_article_page_url =
"＜% article.page_url %＞";
-seesaa_article_subject =
"＜% article.subject | jsescape | tag_strip %＞";
-seesaa_blog_url = "＜% site_info.blog_url %＞";
-//--＞＜/script＞
-＜script type="text/javascript" language=
"JavaScript" charset="utf-8" src=
"＜% site_info.blog_url %＞/js/bookmark.js"＞
＜/script＞
-＜% /if %＞

なんで勝手にマイナスしとるんじゃ〜!!

マイナス表示は元のHTMLから削除してますの意味で
プラスの場合は追加してますという意味です。

このマイナス(-の部分)を消して下記の部分の下に
追加挿入すればたぶん大丈夫だと思われます。

＜% if:list_tag %＞＜div class="tag-word"＞タグ：
＜% loop:list_tag %＞
＜a href="＜% blog.tag_url(tag) %＞"＜% tag.word %＞
＜/a＞ ＜% /loop %＞
＜/div＞＜% /if %＞
＜% /if -%＞
ここに追加挿入してください。

記事のタグの下にソーシャルブックマークが表示される
はずです。

だたし、カスタマイズしている方法や種類によって
上手くいかない場合もあると思いますので無理して
表示させなくても良いかな〜とも思います。

ちなみにウィキペディアによりますとソーシャルブ
ックマークとは下記の説明の通りだそうです。

ソーシャルブックマーク(Social Bookmark、SBM)は、
インターネット上のサービスの一つで、オンライン
ブックマークサービスの発展形。

自分のブックマークをネット上に公開し、不特定多数
の人間と共有する事で、これらを有益な情報源とする
ことができる。

同一アドレスを登録している他人のブックマークを観
たり、またタグと呼ばれる登録者が付ける分類用の語
句により同一タグで分類している他人のブックマーク
を観たりすることで同じ指向のサイトが見付けやすく
なる。またサムネイルを付ける機能も増えている。
（フォークソノミー、ソーシャルタギング）。

人気blogランキング見てみます？

ブログの日付を消す(同じ日の記事を別けて表示する)方法

ブログの日付を消す方法です。(シーサーブログ用)

ブログの投稿の日付を消した場合、なんとなくサイト風？
な感じになります。(私が感じるだけかもしれませんが)

初めて訪問された方でも、随分昔に書いた記事だと思われ
ませんし、アフィリエイト用にも良いかもしれません。

●やり方　(ブログの日付を消す)
(＜＞は大文字になっていますが、実際は半角です。)

デザイン→コンテンツ→記事を直接クリック
↓
右上のコンテンツHTML編集をクリック
↓
すると訳の分からない文字列が表示されます
↓
スクロールしてこの文字列の中段あたりの下記の文字列
を探します。

＜% if:with_date %＞＜h2 class="date"＞
＜% article.createstamp | date_format("%Y年%m月%d日") %＞
＜/h2＞＜% /if %＞

この文字列を全て削除すれば投稿日の日付が表示され
なくなります。


しかし、最近の記事の部分には(10/21)のような日付が
出ています。これも消したい場合は下記の通りです。

デザイン→コンテンツ→最近の記事を直接クリック
↓
こちらは文字列は非常に少ないので簡単です。下記の
文字列を削除して下さい。

(＜% article.createstamp | date_format("%m/%d") %＞)

これだけだと殺風景だと思われる方は、記事の前に記号
などを入れても良いと思います。

＜% loop:list_article -%＞・
＜a href="<% article.page_url %＞"＞

これで最近の記事の前に全て・の記号が入ります。
★や●も上記の・の代わりに間に入れれば表示されます。


●やり方　(同じ日の記事を別けて表示する)

同じ日に記事を投稿すると、日付部分は１つだけで
同じ枠内に連続して表示されてしまいます。

同じ日の投稿でもそれぞれ別枠で表示する方法です。

で、やり方なんですが上記のブログの日付を消す方法で
すでに完成です。(笑)

しかし、私は日付は消したくないという方も当然いらっ
しゃいますよね〜。その場合は日付を消す方法で探した
下記の文字列の赤字部分のみを削除して下さい。

＜% if:with_date %＞＜h2 class="date"＞
＜% article.createstamp | date_format("%Y年%m月%d日") %＞
＜/h2＞＜% /if %＞

これで、下記のような感じになると思います。


2007年10月21日

タイトル�@

……………………
……………………

posted by〜〜〜〜〜〜〜〜

2007年10月21日

タイトル�A

……………………
……………………

posted by〜〜〜〜〜〜〜〜

参考にさせて頂いたサイト・ブログ様

・１つは女性の方のブログでしたが、ブックマーク
していたにもかかわらず何処にいったか分からなく
なってしまいました(汗)

・ブログカスタマイズ　様

追記
＜h2＞のタグは非常に大切なタグなので(対検索エンジン上)
初心者のアクセスアップ!(見出しタグの変更)
を参考に先にカスタマイズしておいた方が良いと思います。

人気blogランキング見てみます？

リンクを変化させる方法まとめ!!

リンクを変化させるスタイルシートの記述
を簡単にまとめてみました。


a : 標準のリンク(シーサーの場合、最初は
これしか記述されていません)

a:link まだアクセスしたことのないリンクに適用

a:visited 既にアクセスしたことのあるリンクに適用

a:hover オンマウスのリンクに適用

a:active クリック時のリンクに適用


又、記述順序がきまっており下記の順番で記述
しないと一部しか反映されなくなります。

�@:link
�A:visited
�B:hover
�C:active


上記の記述の後に｛　｝を付け、｛　｝内に
属性（プロパティ）：値 と指定し、
複数の指定をするときは　；　で区切って連記します。

下記がその代表例です。

文字の大きさ font-size: 　
文字の色 color: 　
文字の背景色 background:
文章の飾り text-decoration:
動かしたい場合　position:



では、実際に代表的な見本をhoverを使った
場合で例示してみます。
(文字の上にマウスでカーソルをのせてみて下さい)



文字の色が変わる

a:hover{color:#009933;}


背景色が変わる

a:hover{background-color:#ff0000;color:#ffffff;}


下に線を引く

a:{color:#008800;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:underline ;}


文字が動く

a:{color:#ff0000;}
a:hover{color:#ff0000;
position:relative;top:2px;left:1px;}

とまあ、こんな感じなんですが…

正直こんな事誰でも紹介できます。

ネットではそれだけ色々な方が無料で様々な
事を公開してる訳ですから。

ありがたいですよね

で、１番苦労したのはスタイルシートでリンクの変化
を指定してるにもかかわらず、記事中に別のリンクの
変化を例示する事だったんです。

残念ながらスタイルシートでの指示も同時に
表現されてしまっていますが…
(オンマウスでリンクが浮き出てクリックでへこむ指示)

う〜ん、本当はスタイルシートでの指示は今回の記事
では無効にしたかったんですけどね。

このやり方、正直あまりお勧めできない事かも
しれませんが、記事にするかもしれません。
(もちろんご存知の方も沢山いらっしゃると思いますし、
それをやるならこの方法だろというのがあれば
教えて欲しい〜)

しかし、これ初心者のカスタマイズじゃ
なくなってきたなぁ？

かと言って全て分かってる訳でも無しなぁ〜。
人気blogランキング見てみます？