タイトル横に日付を移動させる
タイトル横に日付を持ってくるには、「テンプレートの編集」→「HTMLの編集」で、
<ul></ul>タグを書き込み、この色の部分を■に移動させます。
次に、「テンプレートの編集」→「スタイルシートの編集」で、どこにでもいいので
と書き込むと、タイトル横の右端に寄ります。
FC2ブログ開設 >>
<ul></ul>タグを書き込み、この色の部分を■に移動させます。
<!-- 記事タイトル部分 -->
<ul>■</ul>
<h2 class="entry-header">
<a href="<%topentry_link>" title="「<%topentry_title>」の永続的アドレス"><%topentry_title></a>
</h2>
<!-- 記事本文部分 -->
<div class="entry-body">
<%topentry_body>
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->
</div>
<!-- 記事フッター部分 -->
<ul class="entry-footer">
<li class="date"><%topentry_year>-<%topentry_month>-<%topentry_day></li>
<li class="category">
<a href="<%topentry_category_link>" title="カテゴリ「<%topentry_category>」の記事一覧"><%topentry_category></a></li>
<ul>■</ul>
<h2 class="entry-header">
<a href="<%topentry_link>" title="「<%topentry_title>」の永続的アドレス"><%topentry_title></a>
</h2>
<!-- 記事本文部分 -->
<div class="entry-body">
<%topentry_body>
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->
</div>
<!-- 記事フッター部分 -->
<ul class="entry-footer">
<li class="date"><%topentry_year>-<%topentry_month>-<%topentry_day></li>
<li class="category">
<a href="<%topentry_category_link>" title="カテゴリ「<%topentry_category>」の記事一覧"><%topentry_category></a></li>
次に、「テンプレートの編集」→「スタイルシートの編集」で、どこにでもいいので
li.date {
float: right;
}
float: right;
}
と書き込むと、タイトル横の右端に寄ります。
FC2ブログ開設 >>
文字のサイズを変える
aaadesignのテンプレートでは、見る人が好きな文字サイズに変えられるよう、キーワードで指定しています。
サイズの見本です。
xx-small より小さい
x-small 小さい
small すこし小さい
medium 通常
large すこし大きい
x-large 大きい
xx-large より大きい
「テンプレートの編集」→「スタイルシートの編集」でこの色の部分を書き換えれば完了です。
ほかに、パーセントやピクセルなどいろいろな単位で指定することもできます。
ちなみに、以上のサイズの指定を消すと初期設定のサイズになるので、全体に大きめになります。
FC2ブログ開設 >>
サイズの見本です。
xx-small より小さい
x-small 小さい
small すこし小さい
medium 通常
large すこし大きい
x-large 大きい
xx-large より大きい
「テンプレートの編集」→「スタイルシートの編集」でこの色の部分を書き換えれば完了です。
ほかに、パーセントやピクセルなどいろいろな単位で指定することもできます。
/* body要素以下全てに適用されます */
font-size: small;
/* タイトル */
font-size: x-large;
/* 記事のタイトル部分 */
font-size: medium;
/* コメントの見出し */
font-size: medium;
/* コメントのタイトル */
font-size: small;
/* トラックバックトップ */
font-size: medium;
/* トラックバックのタイトル */
font-size: small;
/* 広告タグ削除不可のブロック */
font-size: x-small;
font-size: small;
/* タイトル */
font-size: x-large;
/* 記事のタイトル部分 */
font-size: medium;
/* コメントの見出し */
font-size: medium;
/* コメントのタイトル */
font-size: small;
/* トラックバックトップ */
font-size: medium;
/* トラックバックのタイトル */
font-size: small;
/* 広告タグ削除不可のブロック */
font-size: x-small;
ちなみに、以上のサイズの指定を消すと初期設定のサイズになるので、全体に大きめになります。
FC2ブログ開設 >>
コメントに絵文字・装飾機能を追加する
コメントに絵文字・装飾機能を追加するには、「コメントの投稿」と「コメントの編集」の両方に、ジャバスクリプトタグと<form>タグ内にこの色の部分を挿入する必要があります。
挿入部前後のみ抜き出しましたので、「テンプレートの編集」→「HTMLの編集」でこの4ヶ所を貼り付けて、更新すれば完了です。
FC2ブログ開設 >>
挿入部前後のみ抜き出しましたので、「テンプレートの編集」→「HTMLの編集」でこの4ヶ所を貼り付けて、更新すれば完了です。
<h3 class="comment-post">コメントの投稿</h3>
<form method="post" action="./" name="comment_form">
<dl>
（中略）
<dt><label for="comment">Comment</label></dt>
（中略）
<h3 class="comment-edit">コメントの編集</h3>
<form method="post" action="./" name="comment_form">
<dl>
（中略）
<dt><label for="comment">Comment</label></dt>
<form method="post" action="./" name="comment_form">
<dl>
（中略）
<dt><label for="comment">Comment</label></dt>
<script type="text/javascript" src="http://blog105.fc2.com/load.js"></script>
<dd><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></dd>（中略）
<h3 class="comment-edit">コメントの編集</h3>
<form method="post" action="./" name="comment_form">
<dl>
（中略）
<dt><label for="comment">Comment</label></dt>
<script type="text/javascript" src="http://blog105.fc2.com/load.js"></script>
<dd><textarea id="comment" cols="50" rows="5" name="edit[body]"><%edit_body></textarea></dd>FC2ブログ開設 >>
リンクの下線を消す
リンクの下線を消すには、「テンプレートの編集」→「スタイルシートの編集」で、どこにでもいいので
を挿入します。
これですべてのリンクの下線が消えます。
特定の部分のリンクの下線だけを消したい場合、例えば<div.entry-body>（aaadesignのテンプレートでは記事本文）だけに適用させたい場合は、
とします。div.entry-bodyのなかのa（リンク）を指します。間に半角スペースが必要です。
逆に、すべての下線を消した上で、この部分のリンクの下線だけを表示させたいという場合は、
となります。
a {
text-decoration: none;
}
text-decoration: none;
}
を挿入します。
これですべてのリンクの下線が消えます。
特定の部分のリンクの下線だけを消したい場合、例えば<div.entry-body>（aaadesignのテンプレートでは記事本文）だけに適用させたい場合は、
div.entry-body a {
text-decoration: none;
}
text-decoration: none;
}
とします。div.entry-bodyのなかのa（リンク）を指します。間に半角スペースが必要です。
逆に、すべての下線を消した上で、この部分のリンクの下線だけを表示させたいという場合は、
div.entry-body a {
text-decoration: underline;
}
text-decoration: underline;
}
となります。
画像の横に文章を配置する
何も指定をせずに画像の後に文章を書くと、画像は左寄りに配置されその下に文章が来ますが、この配置を変える方法です。
「新しく記事を書く」→「ファイルのアップロード」→「（該当ファイルの）記事を書く」をクリックすると、下記のようなタグが挿入されます。
これに、この色の部分を書き加えます。前に半角スペースが必要です。そして、<br clear="all">の前に右に配置したい文章を書きます。
こんな感じになりましたか？ margin-right: 10px;は、画像の右側に余白を作るためです。
反対に、 style="float: right; margin-left: 10px;"とすると画像は右に寄り、文章は左に配置されます。
FC2ブログ開設 >>
「新しく記事を書く」→「ファイルのアップロード」→「（該当ファイルの）記事を書く」をクリックすると、下記のようなタグが挿入されます。
<a href="http://blog-imgs-13.fc2.com/a/a/a/aaadesign/sky.jpg" target="_blank"><img src="http://blog-imgs-13.fc2.com/a/a/a/aaadesign/sky.jpg" alt="sky.jpg" border="0"></a><br clear="all">
これに、この色の部分を書き加えます。前に半角スペースが必要です。そして、<br clear="all">の前に右に配置したい文章を書きます。
<a href="http://blog-imgs-13.fc2.com/a/a/a/aaadesign/sky.jpg" target="_blank"><img src="http://blog-imgs-13.fc2.com/a/a/a/aaadesign/sky.jpg" alt="sky.jpg" border="0" style="float: left; margin-right: 10px;"></a>ここに文章<br clear="all">
こんな感じになりましたか？ margin-right: 10px;は、画像の右側に余白を作るためです。反対に、 style="float: right; margin-left: 10px;"とすると画像は右に寄り、文章は左に配置されます。FC2ブログ開設 >>
