Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006年11月26日

エントリ本文のカスタマイズ方法その2

今回は前回(エントリ本文のカスタマイズ方法その1)の続きです。エントリ部分カスタマイズの参考にしてみて下さい。

0.エントリ部分のHTML


<!--topentry-->
<div class="section" id="a<%topentry_no>">
<div class="mainbox">
<div class="maindate"><!-- 投稿日と時間 -->
<h2 class="maindate2">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->
<h3 id="a<%topentry_no>" class="maintitle"><%topentry_title></h3>
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>

1.エントリ本文のカスタマイズ

個別に文字色などは指定していますが、あまり個別にごちゃごちゃ設定すると、統一感がなくなりますので注意してください。


HTML部分
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 12px;
line-height: 150%;
}

重要なのはline-heightで、ここで行間を指定できます。地味ながら非常に重要で、ここで適度に行間をあけないと非常に見づらい文章が出来上がります。ここだけでなく、(テキストを複数行設定する)どの部分でもこのline-heightを指定して、適度な行間を指定するようにしてください。

2.続きを読むのカスタマイズ


HTML部分
<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->


.mainmore{
text-align: right;
margin-bottom: 10px;
color: #000;
font-size: 12px;
}

追記部分を表示する、「…続きを読む」部分は好きな文字を使用できます。赤で囲んだ文章が表示する文字なので、好きな文字に変更してください。
また、CSS部分で文字を右寄せにしています。個人的には右寄せの方が好きですが、これを指定しなければ左寄せになります。その方がよければ削除してください。

3.タグの表示


<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->


.maintag{
margin-top: 14px;
text-align: right;
color: #000;
font-size: 10px;
}

タグの表示部分です。フッター要素としていますので、文字は10pxと小さめです。もちろん変更は可能です。また、「タグ : xx」という表記ですので、ここも好きな文字に変更できます。

4.フッター部分のカスタマイズ1


<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>


.mainfooter{
margin-top: 4px;
text-align: right;
color: #000;
font-size: 10px;
}

エントリ下部のフッター部分1です。ちょっとごみごみしていてわかりにくいかと思いますが、変数(<%で囲んである部分>)部分以外なら簡単に変更できますので、表記を変えるのは問題ありません。ここで指定しているのはカテゴリと固定リンク(記事のURLとしている)部分です。
色を変えているHTML部分が表示する文字です。好きな文字に変更してみてください。
CSS部分も変更できますが、文字を大きくすると改行が入って綺麗ではなくなる可能性があるので、このままの方がいいかと思います。もちろん大きくしても大丈夫です。

5.コメント・トラックバックフッター部分


<!-- 下部コメント -->
<!--allow_comment-->
| <a href="<%topentry_link>#comment-top" title="<%topentry_title>へのコメント">コメント</a> (<%topentry_comment_num>)
<!--/allow_comment-->
<!--deny_comment--><!--/deny_comment-->

<!-- 下部トラックバック -->
<!--allow_tb-->
| <a href="<%topentry_link>#trackback-top" title="<%topentry_title>へのトラックバック">トラックバック</a> (<%topentry_tb_num>)
<!--/allow_tb-->
<!--deny_tb--><!--/deny_tb-->
</div><!-- mainfooter -->

CSSのコメント・トラック部分はフッター部分のCSSではありませんのでご注意下さい。ここは単なるエントリ本文のフッター部分内です。
こんなに長くなっているのは、コメントを許可している時としていない場合を表記しているためです。
カスタマイズとしては、「コメント」「トラックバック」の文字と、それぞれの数をカウントしている部分の「(0)」カッコ部分が可能です。好きな文字、好きな括弧を使用してください。

以上でエントリ本文のカスタマイズ解説は終了です。文字の種類や色、場所などは簡単にカスタマイズできますので、好みのカスタマイズを楽しんで下さい。

スポンサーサイト

2006年11月20日

記事タイトルと投稿日を入れ替え、タイトルにリンクを設定

今回はカスタマイズの方法や解説ではなくて、カスタマイズの実例をご紹介します。あまり興味がない方でも、そのまま貼り付ければ変更できますので、是非使ってみてください。

ここでは、以下のカスタマイズを行います。

  • エントリ上部の日付の場所と記事タイトルを入れ替える
  • 記事タイトルに固定リンクを設定し、文字を太字にする
  • エントリフッター部分の固定リンクを、通常リンクと新規ウインドウを開くリンク(target使用)、二つ用意する

(このテンプレートだと、本当はtargetを使用しないのが望ましいのですが、厳密に考えなければ問題ありませんのでここでは使用しています)

1.HTML部分のカスタマイズ

通常テンプレートに、変更する部分をそのまま貼り付けてください。貼り付ける部分を間違えないように気をつけてください。

通常テンプレート


<!-- エントリ開始 -->
<!-- エントリ部分の最大サイズは500pxですが、★480px程度に収めて下さい★ -->
<!--topentry-->
<div class="section" id="a<%topentry_no>">
<div class="mainbox">
<div class="maindate"><!-- 投稿日と時間 -->
<h2 class="maindate2">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->
<h3 id="a<%topentry_no>" class="maintitle"><%topentry_title></h3>
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>

カスタマイズしたHTML


<!-- エントリ開始 -->
<!-- エントリ部分の最大サイズは500pxですが、★480px程度に収めて下さい★ -->
<!--topentry-->
<div class="section" id="a<%topentry_no>">
<div class="mainbox">
<div class="maindate"><!-- 投稿日と時間 -->

<h2 class="maindate2">
<a href="<%topentry_link>" title="<%topentry_title>のページ"><%topentry_title></a>
</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->

<h3 class="maintitle">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h3>

<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

<div class="mainfooter"><!-- エントリ下部 -->

カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>  (<a href="<%topentry_link>" title="<%topentry_category>のページを新窓で開く" target="_blank">↑</a>)

変更した箇所は色を変えてあります。この変更したHTMLを通常テンプレートのHTMLに貼り付けて下さい。

2.CSS部分のカスタマイズ

追加するスタイルシートは、できればこの例の箇所(.maindateの下)に貼り付けてください。

通常テンプレート


.maindate{
padding: 3px;
text-align: left;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.maindate2{
font-size: 12px;
font-weight: bold;
color: #000;
}

カスタマイズしたスタイルシート


.maindate{
padding: 3px;
text-align: left;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.maindate a,
.maindate a:link,
.maindate a:visited{
color: #1785e5;
text-decoration: none;
font-weight: bold;
}

.maindate a:hover{
color: #1785e5;
text-decoration: underline;
font-weight: bold;
}

.maindate a:active{
}

.maindate2{
font-size: 12px;
font-weight: bold;
color: #000;
}

.maindate内のリンクを設定しています。これならリンクの色も変更できます。

3.カスタマイズしたエントリ部分

エントリ上部のカスタマイズを適用した画面
上部
上にエントリタイトルが来て、かつ固定リンクが設定され、太字になっています。その下に投稿日が続きます。

エントリ下部のカスタマイズを適用した画面
下部
一見すると変化が無いように見えますが、記事のURLの隣に(↑)が増えてます。これが固定リンクを新規ウインドウで開くリンクです。邪魔にならないようにシンプルに表記しましたが、お好きな文字(新規など)に変更しても大丈夫です。

4.カスタマイズを更にカスタマイズしてみる

スタイルシートを変更して、もう少し変化させてみます。それ程難しくありませんので、これを参考にカスタマイズしてみてください。

タイトル部分のリンクの色を変更する

リンク変更
個人的には黒の方が落ち着くと思いますので、タイトルに付けたリンクの色を変更してみましょう。


.maindate a,
.maindate a:link,
.maindate a:visited{
color: #000;
text-decoration: none;
font-weight: bold;
}

.maindate a:hover{
color: #000;
text-decoration: underline;
font-weight: bold;
}

先ほど追加したリンク部分の文字色を変更しただけです。ですので、他の色にしたり、更にfont-size: 14px;を追加して、文字を大きくすることもできます。

以上がカスタマイズの実例でした。変更箇所を少しカスタマイズするだけなら簡単ですので、お好きなカスタマイズを楽しんで下さい。

2006年10月13日

リンクの色を変更する

今回はリンクの色を変更します。リンク部分以外には色がついていないため、リンクの色を変更するだけでもかなり雰囲気が変わります。そして難しいカスタマイズではありませんから、気軽に変更してみて下さい。

タグの細かい解説はおこないませんので、興味が出たらタグの解説をされているサイトなどで勉強してみて下さい。
標準のリンクの色はサイト全体で統一です。設定を行っているのはこの部分です。


a,
a:link,
a:visited{
color: #1785e5;
text-decoration: none;
}
a:hover{
color: #1785e5;
text-decoration: underline;
}
a:active {}

1.リンクの色を変更する

color: #xxxxxx;の部分が色の設定です。#の後ろの6文字が色コードで、ここを変更するとリンクの色が変わります。変更してプレビューした時の画像をご覧下さい。

#e51717
変更
#279bb3
変更

ちなみに、
a:visited{
color: #1785e5;

の色コードを変更すると、リンクの色が変わり(正確に言うと違います)、
a:hover{
color: #1785e5;

の色コードを変更すると、リンクにカーソルを乗せた時のリンクの色が変わります。
プレビューで簡単に変更したときのイメージが表示できますので、色を変更したい場合はお試し下さい。

2.リンクに下線を設定する

text-decoration: underline;(下線あり)
text-decoration: none;(下線なし)

通常では、カーソルを乗せた時に下線を表示しています。いらない場合は変更して下さい。

3.左右カラムとメイン部分で違う設定

変更したい場合は次のようにして下さい。ただし、この場合フリーエリアは標準設定のリンク色のままです。また、リンクの色を変更する場合は一部だけでなく、全ての設定を貼り付けて下さい(例えばa:hoverだけ貼り付けたりしないように)

メイン部分のリンク色を変更


#box-main a,
#box-main a:link,
#box-main a:visited{
color: #ffb2d4;
text-decoration: none;
}
#box-main a:hover{
color: #ffb2d4;
text-decoration: underline;
}
#box-main a:active {}

左カラムのリンク色を変更


#box-sub a,
#box-sub a:link,
#box-sub a:visited{
color: #e51717;
text-decoration: none;
}
#box-sub a:hover{
color: #e51717;
text-decoration: underline;
}
#box-sub a:active {}

右カラムのリンク色を変更


#box-right a,
#box-right a:link,
#box-right a:visited{
color: #ffb2d4;
text-decoration: none;
}
#box-right a:hover{
color: #ffb2d4;
text-decoration: underline;
}
#box-right a:active {}

上記の変更を全て適用した画像
変更

4.変更箇所について

カスタマイズに慣れていない方は、変更して追加する部分は全てスタイルシートの一番下にまとめた方が分かりやすいかもしれません。
本当は、/* 右カラム *//* メイン部分 *//* 左カラム */それぞれのエリアの中に置くのが適切です。この意味がわからない方は、もう少しスタイルシートについて勉強してみましょう。この各エリアは、このセレクタ部分のスタイルを指定しています。

変更を行う場合は、正常に動作しているスタイルシートを保存して、いつでも変更を元に戻せるようにしておきましょう。

プロフィール

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。