2008年01月07日

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

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

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

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

なはは…、全然覚えてないもうやだ〜(悲しい顔)

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

てな訳で、やり方です。


マイブログ→デザイン→コンテンツ

左側にあるコンテンツの中から自由形式を自分が表示さ
せたい好きな位置へドラッグ&ドロップして設定を反映
するをクリック

自由形式を直接クリック

まず、ここでタイトルを変更して、自由入力欄に表示し
たい内容を入力して保存

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

そのままページを閉じずに、右上にあるコンテンツ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/>でもOK
です。いくつか連続してバナー表示する場合もバナーのタグ
同士の間に<br/>を挿入すればうまくいくと思います。

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

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

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

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

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

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

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

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

<span style="font-size:large;">

↓ こちらに変更

<span style="font-size:○○px;">


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


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

そんではまた〜!!


人気blogランキング見てみます?目
posted by れのじ at 18:20 | Comment(2) | TrackBack(0) | 初心者カスタマイズ
2007年12月07日

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

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

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

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

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

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

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

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

5つの記事がズラズラと縦に表示された際に、各記事の記事
下にアドセンスが表示されるとまずいので、人気ブログラン
キングのみ残し、記事下のアドセンスは個別記事(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ランキング見てみます?目
posted by れのじ at 22:59 | Comment(0) | TrackBack(0) | 初心者カスタマイズ
2007年11月30日

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

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

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

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

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

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

許してほしいし〜。

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

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

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


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

デザイン→コンテンツ→記事→コンテンツ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ランキング見てみます?目
posted by れのじ at 22:52 | Comment(2) | TrackBack(0) | 初心者カスタマイズ
2007年10月21日

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

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

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

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

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

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

右上のコンテンツ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 %>">

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


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

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

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

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

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

<% 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〜〜〜〜〜〜〜〜




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

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

ブログカスタマイズ 様

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

人気blogランキング見てみます?目
posted by れのじ at 23:21 | Comment(0) | TrackBack(0) | 初心者カスタマイズ
2007年09月13日

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

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


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;}

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

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

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

ありがたいですよねわーい(嬉しい顔)

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

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

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

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

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

かと言って全て分かってる訳でも無しなぁ〜。
人気blogランキング見てみます?目
posted by れのじ at 23:01 | Comment(0) | TrackBack(0) | 初心者カスタマイズ
RDF Site Summary
RSS 2.0

広告


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

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

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


×

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