スポンサード リンク
2007年02月17日

「自由形式」のタイトルに好きな言葉を表示するカスタマイズ

シーサーブログカスタマイズしてますかぁ!

 きょうは、シーサーブログの「自由形式」のタイトルに好きな言葉を表示するためのカスタマイズ方法を紹介するよ。

 以前、「自由形式」のタイトルを表示するためのカスタマイズ方法を紹介したよね。

 でも、それで表示されるタイトルは、「自由形式」の編集画面で入力した「タイトル」なんだ。

 だから、この「タイトル」はコンテンツ編集画面でコンテンツを見分けるときにも使うし、ブログに表示されるときにも使われることになるんだ。つまり、2つは同じ文字列になるってこと。

 でも、コンテンツ編集画面で表示するタイトルは自分の解り易い名前にしたいけど、それがそのままブログに表示されるのは、チョット。ということもあるよね。

 そこで、今回は「自由形式」のタイトルに好きな言葉を書かせようってわけ。


◆シーサーブログの「自由形式」のタイトルを好きな言葉にする◆


 シーサーブログの「自由形式」のタイトルを好きな言葉にするためには、

   「デザイン」→「コンテンツ」

で、「コンテンツ」の編集画面に移動するんだ。そしたら、そこで「自由形式」を選択するか追加して、編集画面に移行するんだ。

 そうすると編集画面の右上に「コンテンツHTML編集」ってリンクがあるから、そこをクリックしてみて。

 デフォルトでは次のようなコードが既に用意されてるんだ。
 
<% content.header -%>
<% content.free.text %>
<% content.footer -%>

 これを、まるごと下のコードと取り替えるんだ。そうすれば「自由形式」のタイトルに好きな言葉を書いてくれるようになるんだ。

<div class="sidetitle"> 表示したい文字列 </div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

 「表示したい文字列」の部分を、ブログで表示したい言葉にするんだよ。

 こうすれば、コンテンツ編集画面では、自分にとって解り易い名前、ブログ画面ではそれなりのタイトル、っていう使い分けが出来るんだよ。

以上で、きょうのシーサーブログカスタマイズはお・わ・りっ!

 どう? 参考になったかな?

 いやぁーっ、シーサーブログカスタマイズって本当に楽しいですね!


もしこの記事があなたの参考になりましたらランキングの応援お願い致します。

人気ブログランキングへ
にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村


by seesaaカスタマイズ職人 | Comment(11) | TrackBack(1) | 「自由形式」
2007年02月15日

テンプレート「エアメール」のカスタマイズ

seesaaブログカスタマイズしてますかぁ!

 きょうは、シーサーブログのテンプレート「エアメール」をカスタマイズする方法を紹介するよ。

 シーサーブログでは、テンプレート「エアメール」が好きでよく使うんだけど、デフォルトでは次の2点が気に入らなかったので、なんとかカスタマイズしたんだ。

 1:タイトル文字が大きすぎる。

 2:ブログ説明の下の空白が大きすぎる


◆タイトル文字を小さくする◆



 これは、スタイルシートを変更するんだ。だから、この変更をする場合は、失敗した場合に備えて、事前にスタイルシートを保存してから、この変更を実行してね。

 スタイルシート次の部分がタイトル文字の大きさを決めているんだよ。

   h1 {
   margin:0px;
   padding-top:0px;
   font-weight:bolder;
   font-size:16px;
   padding: 5px;
   margin-bottom:10px;
   }


だから、この中の

   font-size:16px;

16px を好みの値に変更すればOK!

 デフォルトでは、24px だから、 16px なら、3分の2の大きさになるよね。

 実際には、この値を変更してみて、その都度できあがったページを見て、大きさを調整するんだ。



◆ブログ説明の下の空白を小さくする◆



 えーっと、これもスタイルシートを変更するよ。

 だから、注意点は上の「タイトル文字を小さくする」と同じだよ。

 スタイルシートの次の <#banner> セクションを変更するよ。


   #banner{
   font-family:arial, Helvetica;
   margin:0px;
   text-align:left;
   background-image:url(http:.....);
   background-repeat:no-repeat;
   width:788px;
   padding-left:110px;
   padding-top:50px;
   padding-bottom:100px;
   padding-right:270px;
   }

 この中の、

   padding-bottom:100px;

の部分が、ブログ説明の下の空白の高さを決めてるんだ。

 だから、この 100px を適当な大きさにすれば、余白の高さが低くなり、見やすくなるんだ。


以上で、きょうのシーサーブログカスタマイズは終わり!

参考になったかな? 参考になったと思う人は「ガッテン!ガッテン!ガッテン!」




もしこの記事があなたの参考になりましたらランキングの応援お願い致します。

人気ブログランキングへ
にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村


by seesaaカスタマイズ職人 | Comment(0) | TrackBack(0) | スタイルシート
×

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