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

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

  • FC2公式テンプレート
  • 名前 : business-u1
  • 作者 : びろ
  • 最終更新日 : 2009/07/17
  • ★★★★☆

 グレーベースのクールでシンプルなテンプレート。横幅の変更には背景画像を新たに用意する必要がある。


文字サイズの変更

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

body {
  background: url(http://templates.blog.fc2.com/template/business-u1/body_back.png) #f5f5f5 repeat-x left top;
  color: #000000;
  text-align: center;
  font-family: ;
  line-height: 1.4;
  font-size: small !important; /* IE7 */
  font-size: 82%; /* IE6 */
}
/* Modern browser */
html>/**/body {
  font-size: 13px;
}
}

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

body {
  background: url(http://templates.blog.fc2.com/template/business-u1/body_back.png) #f5f5f5 repeat-x left top;
  color: #000000;
  text-align: center;
  font-family: ;
  line-height: 1.4;
  font-size: 82%;
}

 これで全体の文字サイズを変更したい時は「82%」の数字を一つ変えるだけで済みます。「}」が二つ並んでるのは作成者のミスなので削除しましょう。

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

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

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

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

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

●ページ一番下のフッター
#footer {
  clear: both;
  padding: 0px;
  width: 100%;
  font-size: 85%;
  background: url(http://templates.blog.fc2.com/template/business-u1/footer_back.png) #3f3f3f repeat-x left top;
  color: #FFFFFF;
  letter-spacing: 0.2em;
}

●「コメントの投稿」「インデックス」などの見出し
.sub_title {
  background: url(http://templates.blog.fc2.com/template/business-u1/sub_title_back.png) no-repeat left 5px;
  padding: 0 0 5px 10px;
  margin: 0 10px 5px 10px;
  color: #333333;
  font-size: 108%;
  letter-spacing: 0.1em;
  border-bottom: 2px solid #666666;
}

●投稿されたコメント・トラックバック本文
.sub_body {
  margin: 0 20px;
  font-size: 85%;
  color: #666666;
  padding-bottom: 10px;
}

●投稿されたコメント・トラックバックの日付・名前など
.sub_footer {
  margin: 0 20px;
  font-size: 85%;
  color: #666666;
  border-top: 1px dotted #666666;
  padding: 5px 0 20px 0;
}

●サイドバーの最新記事リストなどの本文
.sidemenu_body .plg_body li {
  border-bottom: 1px dotted #cccccc;
  padding: 0px 0px 3px 30px;
  margin-bottom: 5px;
  font-size: 85%;
  background: url(http://templates.blog.fc2.com/template/business-u1/sidemenu_arrow.png) no-repeat left top;
}

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

#header p {font-size: 11px; /* ブログ説明文 */ }
.entry_body {font-size: 15px; /* 記事本文 */ }
.plg_title {font-size: 15px; /* プラグイン1,2タイトル */ }
.sidemenu_body .plg_body {font-size: 15px; /* プラグイン1,2本文 */ }
.plg3_header {font-size: 15px; /* プラグイン3タイトル */ }
.plg3_body {font-size: 15px; /* プラグイン3本文 */ }

行間の変更

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

body {
  background: url(http://templates.blog.fc2.com/template/business-u1/body_back.png) #f5f5f5 repeat-x left top;
  color: #000000;
  text-align: center;
  font-family: ;
  line-height: 1.4;
  font-size: 82%;
}

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

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

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

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

フォントの変更

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

body {
  background: url(http://templates.blog.fc2.com/template/business-u1/body_back.png) #f5f5f5 repeat-x left top;
  color: #000000;
  text-align: center;
  font-family: ;
  line-height: 1.4;
  font-size: 82%;
}

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

メイリオフォントを使う

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

MS Pゴシックを使う

font-family: font-family:'ヒラギノ角ゴ 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 {
  background: url(http://templates.blog.fc2.com/template/business-u1/body_back.png) #f5f5f5 repeat-x left top;
  color: #000000;
  text-align: center;
  font-family: ;
  line-height: 1.4;
  font-size: 82%;
}

●色を薄くする
color: #666666;

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

.entry_body { color: #000000; } /* 記事本文 */
.plg_body { color: #000000; } /* サイドバー本文 */


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

●リンク文字色
a:link {
  color: #0099cc;
}
a:visited {
  color: #663366;
}
a:focus,
a:hover {
  color: #00cccc;
  text-decoration: none;
}
a:active {
  color: #336633;
}

●ブログタイトル
#header a:link,
#header a:visited,
#header a:focus,
#header a:active {
  color: #ffffff;
  text-decoration: none;
}
#header a:hover {
  color: #ffffff;
  text-decoration: underline;
}

●サイドバーのリンク
.sidemenu_body a:link,
.sidemenu_body a:visited,
.sidemenu_body a:active,
.sidemenu_body a:focus {
  color: #666666;
}

.sidemenu_body a:hover {
  color: #00cccc;
}

●トップページなどでの記事タイトル
h2.entry_header a:link,
h2.entry_header a:visited,
h2.entry_header a:focus,
h2.entry_header a:hover,
h2.entry_header a:active {
  color: #ffffff;
}

●フッターのリンク
#footer a:link,
#footer a:visited,
#footer a:focus,
#footer a:hover,
#footer a:active {
  color: #ffcc00;
}

●フッター本文
#footer {
  clear: both;
  padding: 0px;
  width: 100%;
  font-size: 85% !important; /* for Modern browser */
  font-size: 90%; /* for IE6 */
  background: url(http://templates.blog.fc2.com/template/business-u1/footer_back.png) #3f3f3f repeat-x left top;
  color: #FFFFFF;
  letter-spacing: 0.2em;
}

●記事タイトル
h2.entry_header {
  text-align: left;
  margin-bottom: 10px;
  padding: 10px;
  background: url(http://templates.blog.fc2.com/template/business-u1/entry_header_back.png) #3f3f3f repeat-x left top;
  border: 1px solid #3f3f3f;
  color: #ffffff;
}

●サイドバータイトル
.sidemenu_body .plg_title {
  padding: 5px;
  background: url(http://templates.blog.fc2.com/template/business-u1/plg_title_back.png) #860000 repeat-x left top;
  color: #ffffff;
  font-weight: bold;
}

●投稿コメント・トラックバック本文
.sub_body {
  margin: 0 20px;
  font-size: 85%;
  color: #666666;
  padding-bottom: 10px;
}

横幅の変更

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

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

メイン幅
570 600 630 660 690 720

サイド幅
200 220 240 260 280 300

body #header {width: 900px;}
body #container { width: 920px;
background: #fff url(http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/business-u-side220.gif) repeat-y 670px top;
}
body #footer #footer_inner { width: 640px;
background: url(http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/business-u-foot220.png) no-repeat right top;
}
body #main {width: 630px !important;}
body #sidemenu {width: 220px;}

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

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

 変更する場所は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ヶ所あります。

●記事部分:以下を削除
(<%topentry_hour>:<%topentry_minute>)

●トラックバック:以下を削除
(<%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>」とします。

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「<%template_preventry>」を入れると二ヶ所見つかります。その二ヶ所両方を次のように変更します。
 「<%template_preventry>」と「<%preventry_title>」を入れ替え、「<%template_nextentry>」と「<%nextentry_title>」の位置を入れ替えます。

  <!--preventry--><a href="<%preventry_url>" title="<%template_preventry>">&laquo;&nbsp;<%preventry_title></a>&nbsp;<!--/preventry-->
  <a href="<%url>" title="<%template_home>"><%template_home></a>
  <!--nextentry-->&nbsp;<a href="<%nextentry_url>" title="<%template_nextentry>"><%nextentry_title>&nbsp;&raquo;</a><!--/nextentry-->

 入れ替えが面倒な時は上記コードをそのまま上書き貼り付けしてもOKです。2つ目の所は<!--permanent_area-->の直後にあるコードです。間違ってその上にある<!--not_permanent_area-->内のコードを上書きしたり、<!--permanent_area-->自体を削除したりしないように注意してください。心配な時はバックアップを取ってから編集することを推奨します。title属性自体が不要な時は「title="~"」を削除しても構いません。

長いタイトルの見栄えを整えたい場合

 「 class="nvlink"」を3つ追加して「<!--/preventry-->」の直前にある「&nbsp;」と「<!--nextentry-->」の直後にある「&nbsp;」を削除します。

  <!--preventry--><a href="<%preventry_url>" title="<%template_preventry>" class="nvlink">&laquo;&nbsp;<%preventry_title></a><!--/preventry-->
  <a href="<%url>" title="<%template_home>" class="nvlink"><%template_home></a>
  <!--nextentry--><a href="<%nextentry_url>" title="<%template_nextentry>" class="nvlink"><%nextentry_title>&nbsp;&raquo;</a><!--/nextentry-->

 そして以下のコードをスタイルシートに追加します。

/* 記事下部ナビ位置調整 */
.page_navi {position: relative; min-height: 1px;}
.page_navi > .nvlink {text-align: left; float: left; display: block; width: 43%;}
.page_navi .nvlink+a {text-align: center; width: auto; position: absolute; left: 47%; top: 5px;}
.page_navi .nvlink+a+a {text-align: right; float: right; position: static; width: 43%;}
.page_navi:after {content:'';display:block;clear:both;}
#main .content {clear:both;}
/* END */

 すると次のように表示されます。ホームの位置は47の数値を増減させて調整。


 あるいは「template_home」のリンクを削除して二行にする時はHTMLを次のようにします。

  <!--preventry--><a href="<%preventry_url>" title="<%template_preventry>" class="nvlink1">&laquo;&nbsp;<%preventry_title></a><!--/preventry-->
  <!--nextentry--><a href="<%nextentry_url>" title="<%template_nextentry>" class="nvlink2"><%nextentry_title>&nbsp;&raquo;</a><!--/nextentry-->

 そして以下のコードをスタイルシートに追加します。

/* 記事下部ナビ位置調整 */
.page_navi .nvlink1 {text-align: left; display: block;}
.page_navi .nvlink2 {text-align: right; display: block;}
/* END */

 すると次のように表示されます。

サイドバーのリストの文字が小さい時

 文字サイズの変更にあるリスト本文のfont-sizeを固定にします。探すのが面倒な時は以下をスタイルシートに追加します。数値を増やすと大きくなります。

body .sidemenu_body .plg_body li {font-size: 12px;}

 階層化されたリストの文字サイズが小さくなるのをどうにかしたい時は以下を追加してください。

.sidemenu_body .plg_body li li {font-size: 100%;}

関連記事
スポンサー リンク
コメント
#15 : No title
はじめまして。
business-u1を使わせて頂いております。
ブログ記事の下の日付部分のカラーを個別で
変更するにはどのようにしたら良いでしょうか。

私のブログを見て頂ければ どのようにしたいのか
分かるかと思います。
何分にも素人なものですみません。
宜しくお願い致します。
#16 : No title
たびたびすみません。
なんとか、解決することができました。
お騒がせいたしました。

また宜しくお願い致します。
#20 : 日付部分の色
いえいえ、一応、他の部分にも使えるように例を載せておきます。

「<span class="date-color">」と「</span>」で色を変えたい部分を囲って

<ul class="entry_footer">
<li><span class="style-color"><%topentry_year>-<%topentry_month>-<%topentry_day>(<%topentry_hour>:<%topentry_minute>)</span> : </li>

スタイルシートに色を指定する記述を加えると変わります。
.style-color {color: #cc0000;}

別の所で別の色を使う時は「style-color2」に変更して追加すればOKです。
<span class="style-color2">
.style-color2 {color: #008800;}
#43 : No title
はじめまして。
business-u1をつかわせていただいています。

ページ下部のナビゲーションのところ、
<前の記事へ> <HOME> <次の記事へ>
としています。

この部分を<前の記事のタイトル> <home> <次の記事のタイトル>
に変更することはできないのでしょうか?

現状のHTMLは下記のようになっています。

<!--not_permanent_area-->
<!--prevpage--><a href="<%prevpage_url>" title="<%template_prevpage>">« <前の記事へ></a> <!--/prevpage-->
<a href="<%url>" title="<%template_home>"><%template_home></a>
<!--nextpage--> <a href="<%nextpage_url>" title="<%template_nextpage>"><次の記事へ> »</a><!--/nextpage-->
<!--/not_permanent_area-->

始めたばかりでいまいち理解できていないのですが、
よろしくお願いします。

#46 : 記事ページの前後のリンクを記事タイトルで表示
コンニチハ。
<!--not_permanent_area-->ブロックで囲まれた部分は個別記事以外のページで表示する部分なので、変更する場所はその下の<!--permanent_area-->(個別記事ページでのみ表示するブロック)で囲まれた部分になります。
その中の<%template_preventry>を<%preventry_title>に、<%template_nextentry>を<%nextentry_title>に書き換えると記事タイトルが表示されます。
このページのカスタマイズ方法に『記事ページの前後のリンクを記事タイトルで表示する』項目を加えましたのでご参考ください。
#48 : No title
ありがとうございます。

無事に変更することができました。
#331 : サイドメニューと#footer_inner画像が色で繋がっている空間
はじめまして。
business-u1を使わせて頂いております。

現在記事の部分を半透明にし、下の背景が透けて見えるようにカスタマイズしているのですが、記事が透けるまでは上手く行ったのですが、サイドメニューから#footer_innerの画像の間の空間まで半透明部分で塗りつぶされてしまいます。
スタイルシートを以下のように操作しました。

#container {
width: 1090px;
position: relative;
overflow: hidden;
background: url(半透明にする画像のURL) transparent; repeat-y 760px top;
margin: 0 auto;
padding: 0;
border-top: 20px solid #ffffff;
}

サイドメニューと#footer_innerの画像が繋がっている空間も半透明に変更した記事の色に塗り潰されないようにする方法はありませんでしょうか?
自分も始めたばかりでまだ手探りの状態であまり良く理解できていないのですが、
お時間ございましたら何卒よろしくお願いします。

コメントの投稿

  

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

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

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

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

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

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