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

--年--月--日

スポンサーサイト

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

2007年02月17日

テンプレートに、コメント欄の絵文字・デコレーション機能を追加

今回はリクエストにお応えする形ですが、需要はあると思いますのでエントリでご紹介します。
FC2ブログの機能にある、コメント時に絵文字&装飾を使用できる機能を追加します。公式のテンプレだと付いているようですが、こちらでご紹介しているFC2ブログ用のテンプレートには付いていません。必要と思われる方は以下の方法でカスタマイズをお願いいたします。

0.記事を書く機能にある装飾機能を利用する場合

(コメント時の絵文字&装飾機能とは関係ありませんので、それだけをカスタマイズする場合は必要ありません。)
このテンプレだと、FC2の標準機能を用いた場合の、文字を大きくしたり小さくしたりする機能がうまく利用できませんので、それを修正するカスタマイズです。以下の通りに変更してください。

CSS部分

  • テキストエディタにCSS全文をペースト
  • 置換機能を使って、font-size: 12px;を全て削除
    (置換部分を空白にしておけば、削除(空白で置換)されると思います。改行はそのままでも大丈夫です)
  • 以下を追加

* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal; /*太字を使うなら削除*/
word-break: break-all;
font-size: 12px; /*追加*/
font-family: Verdana, Arial, sans-serif;
}

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 14px;/*追加*/
line-height: 1.5;/*変更*/
}

これで修正は終わりですので、テキストエディタ全文をコピーして、FC2ブログ管理画面のテンプレート編集画面でペーストして下さい。
プレビューでは確認できませんので、元のCSSをテキストエディタなどで保存した上で、管理画面の方も保存して、表示を確認してください。
また、エントリ本文の太字が効かない件に関してはこちらもご覧下さい。
FC2の新しく記事を書く機能を使って強調文字を使用する場合

1.FC2ブログの機能、コメント時に絵文字&装飾の追加

コメント時に絵文字&装飾機能の追加はHTMLを編集します。追加だけですので、以下箇所を変更して下さい。


<!-- コメント投稿フォーム -->
から3行下にある、
<form method="post" action="./"><form method="post" action="./" name="comment_form">
に変更


<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
</dl>
<div class="comment-button">

上記の部分を下記に置き換えて下さい(該当部分にそのまま貼り付けて、その下の説明箇所だけ更に変更してください)。


<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
</dl>
<script type="text/javascript" src="http://blogxx.fc2.com/load.js"></script>
<div class="comment-button">

赤が追加青が移動箇所です。また、http://blogxx.fc2.comのxx部分はご利用のFC2ブログのサーバー名を入れて下さい。このブログならblog78.fc2.comなので、xxは78になります。

これでFC2ブログのコメント機能である、絵文字&装飾が追加されます。java scriptですので機能を有効にしないと表示されませし利用できません。

カスタマイズは以上です。ちなみにこの絵文字&装飾機能についてはこちらが公式の情報のようです。この記事もこちらを参考にしています。
コメント欄での絵文字・デコレーション機能のカスタマイズについて

スポンサーサイト

2007年01月23日

FC2の新しく記事を書く機能を使って強調文字を使用する場合

今回はコメントで質問をいただいた返答を元に、FC2ブログで用意されている、新しい記事を書くの本文欄で使用できる、strong(強調)とi(斜体)タグを使用する場合向けのカスタマイズです。

1.スタイルシートのカスタマイズ


* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal;
word-break: break-all;
font-family: Verdana, Arial, sans-serif;
}

上記の抹消線を削除してください。


#box-right{
float: right;
width: 230px;
}

#box-right h3{
font-weight: normal;
}

#box-sub{
float: left;
width: 150px;
}

#box-sub h3{
font-weight: normal;
}

今度は赤色の部分を追加します。できたらこの場所に追加してください。
これで本文に強調文字、斜体文字が設定でき、左右カラムのh3タグ部分も標準フォントで表示されるはずです。(後ほどこのようにFC2ブログ用のテンプレートを変更するかもしれません。この方がよいかも。)

2.FC2ブログ本文で文字のサイズ変更を使用する

大・小の文字設定機能ですが、文字の指定方法が異なるため、うまくは機能しません。どうしても使用したい場合は、以下のようにFC2ブログ用テンプレートを変更してください。


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

上記のスタイルシート抹消線部分を削除して、替わりにfont-size: small;font-size: x-small;を追加してください。
これで大文字・小文字も設定できますが、本文の文字サイズはコントロールできなくなります(ブラウザなどにより異なるサイズで表示される)。

2006年12月23日

テーブル内のフォントサイズと色の指定

「画像の下にいれた文字のサイズが大きくなる」、という質問を頂いたんですが、考えられるのは画像をテーブル内に配置する場合です。
以前にエントリしていますが、テーブルは使い方が単純ではないので、あえて何もスタイルシートで設定していません。
ですので、文字サイズはブラウザの標準サイズになりますので、たいていは大きくなってしまいます。

特に深く考えない場合は、メイン部分で使用するテーブル全てに対してスタイルシートを適用すれば簡単です。


#box-main img{
margin-right: 16px;
margin-bottom: 16px;
}

#box-main ul{
margin: 10px 0 10px 16px;
line-height: 175%;
}

#box-main table{
font-size: 12px;
color: #000;
}

/* メイン部分 */

赤色の部分をできればこの場所に追加してください。これでテーブルを使用しても、他のテキストと同様に12pxサイズのフォントで表示されます。

また、この場合はメイン部分だけの指定になりますので、ブログ全体で同じサイズ(12px)で表示したい、という場合は以下になります。


.section{
}

table{
font-size: 12px;
color: #000;
}

/*    基本的な設定    */

この場所だけに追加すれば大丈夫です。先ほどの部分の追加は必要ありません。
テーブルを画像組みや、簡単な表でしか使わない場合は、このスタイルシートを追加してしまったほうがよいかもしれません。

これでも画像の下のフォントサイズが治らない場合は、再現していただかないと原因がわかりかねます。

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;を追加して、文字を大きくすることもできます。

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

プロフィール

templatetube

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

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

Appendix


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