Home > FC2ブログ > cleanly_green > cleanly_green テンプレート 基本的なデザインのカスタマイズ・変更

cleanly_green テンプレート 基本的なデザインのカスタマイズ・変更

  • FC2公式テンプレート
  • 名前 : cleanly_green
  • 作者 : web*citron
  • 最終更新日 : 2013/02/13
  • ★★★★☆

 シンプルで清潔感のあるテンプレート。幅固定の画像が多いため、横幅の変更には背景画像をいくつか用意する必要がある。


文字サイズの変更

 変更する場所はスタイルシートの最初の方にある /* Default */ 部分です。

body {
  padding: 20px 0 0 0;
  background-image: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_bg.png");
  color: #333333;
  text-align: center;
  font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
  line-height: 1.6;
  font-size: small !important; /* IE7 */
  font-size: 82%; /* IE6 */
}

/* Modern browser */
html>/**/body {
  font-size: 13px;
}

 上記を以下に変更します。Modern browserは削除。

body {
  padding: 20px 0 0 0;
  background-image: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_bg.png");
  color: #333333;
  text-align: center;
  font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
  line-height: 1.6;
  font-size: 82%;
}

 これで全体の文字サイズを変更したい時は「82%」の数字を一つ変えるだけで済みます。

●文字を小さくする
 font-size: 69%;

●文字を大きくする
 font-size: 94%;

 ブログタイトルなどの文字サイズは次の項目で変更できます。探すときはCtrl+Fキーで検索フォームに「font-size:」や「h1 {」「#footer {」「.sub_title {」などスタイル中に使われているキーワードを入れると見つかります。IE6の文字サイズ指定の行は(ほぼ使われない&大した差はないので)削除してModern browserとまとめて1行にしまってもいいでしょう。
 数値を増やせば文字が大きくなり、減らせば小さくなります。

●ブログのタイトル
h1 { font-size: 180%; }

●記事のタイトル
h2 { font-size: 130%; }

●ページ一番下のフッター
#footer {
  margin: 0 auto;
  padding: 13px 0 40px 45px;
  width: 800px;
  text-align: left;
  font-size: 85%;
}

●カレンダー
div#calendar ul {
  padding: 6px 0 12px 0;
  margin: 0;
  list-style-position: inside;
  font-size: 85%;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_calendar_bottom.png") bottom no-repeat;
}

●「記事検索」「インデックス」などの見出し
p.sub_header {
  margin-bottom: 20px;
  padding: 0 0 7px 0;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_entry_title.png") left bottom no-repeat;
  font-size: 115%;
}

●「コメントの投稿」「トラックバック」などの見出し
div#tb p.sub_header,
div#cm p.sub_header,
div#ed p.sub_header
  {
  color: #333333;
  margin-bottom: 20px;
  padding: 0 0 7px 0;
  font-size: 115%;
  font-weight: normal;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_line_gray.png") bottom left no-repeat;
}
●投稿されたコメント・トラックバックのタイトル
h3.sub_title {
  width: 465px;
  margin: 0 0 5px 10px;
  font-weight: normal;
  font-size: 100%;
  color: #62931C;
}

●プラグイン3のタイトル
h3.plg3_header
{
  color: #333333;
  margin-bottom: 20px;
  padding: 0 0 7px 0;
  font-size: 115%;
  font-weight: normal;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_line_gray.png") bottom left no-repeat;
}

●サイドバーのタイトル
div#sidemenu dt.plg_title {
  margin: 0;
  padding: 0 0 15px 23px;
  width: 177px;
  font-weight: normal;
  text-align: left;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_side_title.png") left 4px no-repeat;
  font-size: 115%;
}

 ブログ説明文、記事本文、サイドバー本文などの文字サイズを個別に変更する時は以下のスタイルを追加してください。

#header p {font-size: 11px;} /* ブログ説明文 */
.entry_body {font-size: 13px;} /* 記事本文 */
.sidemenu_body .plg_body {font-size: 11px;} /* サイドバー本文 */
.plg3_body {font-size: 11px;} /* プラグイン3本文 */
.sub_body {font-size: 13px;} /* 投稿コメント・トラバ本文 */
.sub-footer {font-size: 11px;} /* 投稿コメント・トラバ名前日付 */

行間の変更

 変更する場所はスタイルシートの最初の方にある /* Default */ 部分です。

body {
  padding: 20px 0 0 0;
  background-image: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_bg.png");
  color: #333333;
  text-align: center;
  font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
  line-height: 1.6;
  font-size: 82%;
}

 line-height の数値を増やせば行間が広がり、減らせば狭まります。

●行間を広くする
 line-height: 1.8;

 個別に行間を指定する時は以下をスタイルシートに追加します。

.entry_body {line-height: 1.6;} /* 記事本文の行間 */
.plg_body {line-height: 1.6;} /* サイドバー本文の行間 */
.plg3_body .plg_body {line-height: 1.6;} /* プラグイン3本文の行間 */

フォントの変更

 変更する場所はスタイルシートの最初の方にある /* Default */ 部分です。

body {
  padding: 20px 0 0 0;
  background-image: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_bg.png");
  color: #333333;
  text-align: center;
  font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
  line-height: 1.6;
  font-size: 82%;
}

 font-family に使いたいフォントを指定します。左端の指定が優先されます。

 英数字のアンチエイリアンス(ぼやけたなめらかな字)が気に入らない時は「Verdana, Helvetica,」を後ろに移動させます。

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", Verdana, Helvetica, sans-serif;

メイリオフォントを使う

font-family: 'メイリオ', Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;

コメントなどの入力フォームのテキストにもメイリオフォントを使う

 スタイルシートの最下部にあるfont-familyを変更します。

input, textarea, select {
 font-family: "MS Pゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", sans-serif;
}

↓変更後

input, textarea, select {
 font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

 フォームにメイリオを指定すると横幅が広くなるのでHTMLにあるinput要素のsizeやtextarea要素のcolsを小さくするといいでしょう。

<input id="name" type="text" name="comment[name]" size="15" value="<%cookie_name>" />

<textarea id="comment" cols="30" rows="5" name="comment[body]"></textarea>

文字色の変更

 変更する場所はスタイルシートの最初の方にある /* Default */ 部分です。

body {
  padding: 20px 0 0 0;
  background-image: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_bg.png");
  color: #333333;
  text-align: center;
  font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
  line-height: 1.6;
  font-size: 82%;
}

●色を濃くする
color: #000000;

 記事本文、サイドバー本文などの色を個別に変更する場合はスタイルシートに以下を追加します。

/* 記事タイトル */
.entry_header a:link, .entry_header a:visited { color: #000000; }
.entry_header { color: #000000; }

.entry_body { color: #000000; } /* 記事本文 */

/* 記事本文リンクリンク */
.entry_body a:link, .entry_body a:visited { color: #62931c; }
.entry_body a:active, .entry_body a:focus, .entry_body a:hover { color: #898f95; }

.plg_title { color: #000000; } /* サイドバータイトル */
.plg_body { color: #000000; } /* サイドバー本文 */

/* サイドバーリンク */
.sidemenu_body a:link, .sidemenu_body a:visited { color: #62931c; }
.sidemenu_body a:active, .sidemenu_body a:focus, .sidemenu_body a:hover { color: #898f95; }

.plg3_body .plg_body { color: #000000; } /* プラグイン3本文 */

/* プラグイン3リンク */
.plg3_body a:link, .plg3_body a:visited { color: #62931c; }
.plg3_body a:active, .plg3_body a:focus, .plg3_body a:hover { color: #898f95; }

●投稿コメント・トラックバック本文
.sub_body { color: #000000; }

 その他の色についてはスタイルシートにある次の値を変更します。探すときはCtrl+Fキーで検索フォームに「#header h1 a」や「color:」などスタイル中に使われているキーワードを入れると見つかります。

●リンク色
a:link {
  color: #62931c;
}
a:visited {
  color: #000000;
}
a:focus,
a:hover,
a:active {
  color: #898f95;
}

●ブログタイトル
#header h1 a {
  color: #62931C;
  text-decoration: none;
}
#header h1 a:hover {
  color: #898f95;
  text-decoration: none;
}
#header h1 a:visted {
  color: #62931C;
}

●ブログ説明文
#header p {
  margin: 0;
  padding: 0 0 0.5em 0;
  color: #000000;
  text-align: right;
}

●カレンダーリンク色
div#calendar li a,
div#calendar li a:active,
div#calendar li a:visited {
  text-decoration: none;
  color: #62931C;
}
div#calendar li a:hover {
  color: #898F95;
  text-decoration: none;
}

●プラグイン3のタイトル
h3.plg3_header
{
  color: #333333;
  margin-bottom: 20px;
  padding: 0 0 7px 0;
  font-size: 115%;
  font-weight: normal;
  background: url("http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_line_gray.png") bottom left no-repeat;
}

横幅の変更

 背景画像が横幅の影響を受けるため、幅に合わせた画像を用意する必要があります。ここではこちら側で用意した背景画像を使用します。

 全体幅とサイド幅を選択すると下にコードが表示されるのでそれをスタイルシートに貼り付けてください。テンプレートの初期値は全体幅800です。

全体幅:854 930 1015

サイド幅:普通 少し広め(+20px)

 画像の読み込みに問題があるときはコード内の画像アドレスに直接アクセスしてその画像を保存。自分のブログにアップロードしてアドレスを差し替えてください。

続きを読むのテキストを変更

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「<%template_extend>」を入れると見つかります。

<a href="<%topentry_link>#more" title="<%template_extend>"><%template_extend></a>

 この部分を「Read more」「続きを見る」など別のテキストに変更します。

<a href="<%topentry_link>" title="<%template_extend>">Read more</a>

時刻を消す

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「_hour」を入れると見つかります。全部で4ヶ所あります。

●トラックバック:以下を削除
 <%tb_hour>:<%tb_minute>

●コメント:以下を削除
 <%comment_hour>:<%comment_minute>

●検索ページ:以下を削除
(<%topentry_hour>:<%topentry_minute>)

日付に曜日を入れる

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「_day」を入れると見つかります。全部で5ヶ所あります。

●記事部分:以下の強調部分を追加
-<%topentry_day> (<%topentry_youbi>)

●トラックバック:以下の強調部分を追加
-<%tb_day> (<%tb_youbi>) <%tb_hour>:<%tb_minute>

●コメント:以下の強調部分を追加
-<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>

●記事一覧:以下の強調部分を追加
<%titlelist_day> (<%titlelist_youbi>)

●検索ページ:以下の強調部分を追加(時刻のカッコは見栄え上、削除)
<%topentry_day> (<%topentry_youbi>) <%topentry_hour>:<%topentry_minute> :

 日本語(月火水木金土日)で表示したい時は「youbi」の前に「wa」を付けます。例えば「<%topentry_youbi>」なら「<%topentry_wayoubi>」、「<%comment_youbi>」なら「<%comment_wayoubi>」とします。

本文とリンク色の区別がつかない時

  変更する場所はスタイルシートです。Ctrl+Fキーで検索フォームに「Hyper text」を入れると見つかります。

a:visited {
  color: #000000;
}

 「000000」を別の色に変更します。

a:visited {
  color: #62931c;
}

 あるいは文字色変更の記事本文リンク色コードを追加してください。

 記事本文のリンクのみ下線を付ける時は以下のコードを追加します。

.entry_body a {text-decoration: underline;}

関連記事
スポンサー リンク
コメント
#339 : No title
始めまして、
cleanly_green テンプレートがお気に入りでお借りしておりますが、よりシンプルにしたくて少し手を加えさせて頂いております、今回の質問ですがトップの四つ葉のクローバーのような図柄を削除したいのですが、誠に失礼とは思いますがよろしかったらお教え頂きたいと思います。
#342 : とても役に立ちました!
はじめまして。ダイチャンと申します。

ブログでcleanly_greenをつかっていまして、本文とリンクの区別がつかなくてどうしようと思っていたら、このブログにたどり着きました。

ほかにもいろいろ参考になるところがあり、本当に役立ちました。
ありがとうございます。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered