スポンサーサイト

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Guide
  •  …この記事と同じカテゴリの前後記事へのページナビ
  •  …この記事の前後に投稿された記事へのページナビ
  • Edit
  • TB(-)|
  • CO(-) 
 
 

文字のカスタマイズ

文字のカスタマイズ

  • ご自力でカスタマイズする場合のワンポイントアドバイス(08/13)
  • テンプレートのコピー・差し替え・名前の変更(08/14)
フォントについて、複数の方からご質問が寄せられましたので、とりあえず、ご質問があった個所だけ御説明していきます。

カスタマイズ



[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く


PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集         こんなふうに上から順番に並んでいます。

スタイルシート編集]部分をカスタマイズします。

ブログ全体の文字を変更する場合



スタイルシートから下のような body の設定箇所を探します。

body {
height : 100% ;margin:0;padding:0;
background-color: #fff;color:#333;
font-size : 85%;
font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "sans-serif", "MS Pゴシック";
}



テンプレートによってそれぞれ設定が違いますが、ここでは文字色、大きさ、字体を指定していますので、赤色の個所を変更します。

color: ***; 文字色を指定する
font-size: ***; 文字サイズを指定する
font-family: ***; フォントを指定する


注意テンプレートによっては、文字のサイズを基準としてボックスの幅、余白を指定してある個所があります。文字サイズを変更することによってテンプレート全体のレイアウトが崩れることがありますのでご注意ください。


ブログ名(サイトタイトル)の文字を変更する場合


スタイルシートから下のような h1 の指定箇所を探します。
ブログ名は通常この h1 で指定しています。

/* サイトタイトル */
/* =============================================
   見出し
============================================= */

/******* 大見出し:サイトタイトル ***************/

h1 { margin : 0px;padding : 0px ; font-size : 100%;line-height:120%;
color: #000; text-align:right;
_padding-top:1em;}

#index .container h1,#page .container h1{padding:10px 0 0 0;font-size : 160%;line-height: 150%;text-align:left;}

h1 a:link,h1 a:visited { color : #000; }
h1 a:hover,h1 a:active { color : #000; background-color : #f5f5f5; }



h1は、SEO対策上、HTMLの上部に配置してありますが、画面上部にメニューバーが固定されているテンプレートの場合、実際にはその下に隠れて見えなくなります。

画面上部にメニューバーがないテンプレートの場合、表紙や通常ブログ画面で表示されるブログ名のスタイルは#index .container h1と#page .container h1で指定しています。

例)トップページや通常ブログ画面のブログ名の字体を変更する場合は、以下の〇〇をフォント名に変更して追加

#index .container h1,#page .container h1{
padding:10px 0 0 0;font-size : 160%;line-height: 150%;text-align:left;
font-family: "〇〇";
}


但し、ブログ名はリンクテキストになっている事がほとんどですので、文字色を変更する場合は、
h1 a:link,h1 a:visited の文字色も変更する必用があります。

記事本文・追記のフォントを変更する場合



スタイルシートから下のような .entry_text の指定箇所を探します。

/****** 本文/追記 ***************/

.entry_text {
margin : 20px auto ;
padding:0 2em;
font-size : 120%; color: #333;
line-height: 200%; text-align:left;overflow:hidden;
}

#page .entry_text {max-width:560px;_width:560px;_height:1%;/* IE6バグ対策 */}
.entry_text a:link { color: #C71585; border-bottom:1px dotted;}
.entry_text a:visited { color: #aa55ff; border-bottom:1px dotted;}
.entry_text a:hover, .entry_text a:active{ color: #C71585; background-color :#ffffd5;border-bottom:none;}


.entry_text は通常ブログ画面に記事欄があるテンプレートの場合は通常ブログ画面と個別記事ページ、両方の記事本文と追記を同時に指定しています。
通常ブログ画面と個別記事両方を変更するのか、それとも、個別記事もしくは通常ブログ画面だけを変更するのか、それぞれの場合に応じて、必用な指定を追加、もしくは変更します。

個別記事ページと通常ブログ画面の両方の記事欄のフォントを変更する場合

.entry_text {font-size: 〇〇%; }

個別記事ページのフォントだけを変更する場合

#permanent .entry_text {font-size: 〇〇%; }


通常ブログ画面のフォントだけを変更する場合

#page .entry_text {font-size: 〇〇%; }


通常ブログ画面サイド・コンテンツを変更する場合(ポラロイド写真風以外)


スタイルシートから下のような .side_text の指定箇所を探します。

/****** サイド:コンテンツ ***************/

.side_text {
font-size: 80%;
line-height: 130%;
margin: 0;color: #333;
background-color:#e2eaf1;

padding: 10px ;margin-bottom:20px;
border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;
-moz-border-bottom-left-radius: 20px;-moz-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;}


.side_text は通常ブログ画面だけでなく、一部のテンプレートでは、トップページのサイドコンテンツも指定しています。
通常ブログ画面のサイドコンテンツの文字の大きさをだけ変更する場合は、〇〇を数値に変更して以下を追加する

#page .side_text {font-size: 〇〇%; }



スタイルシートをカスタマイズしたら
更新】をクリック

カスタマイズはあくまでご自身のできる範囲内でとお願いしております。上の記事だけでは出来ない、わからないという場合、このカスタマイズはご自身が出来る範囲を超えているとご理解ください。現状での文字変更は諦め、スタイルシートの基本を学ぶ等、スキルアップなさってから、ご自力でトライしてください。

関連記事
スポンサーサイト

  • ご自力でカスタマイズする場合のワンポイントアドバイス(08/13)
  • テンプレートのコピー・差し替え・名前の変更(08/14)
Guide
  •  …この記事と同じカテゴリの前後記事へのページナビ
  •  …この記事の前後に投稿された記事へのページナビ
 

~ Comment ~

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: 無事に変更出来ました

検索フォームの不具合連絡ありがとうございます。

公開中のテンプレートに関しては、先ほど修正し、更新をかけました。
修正内容が承認されるまで多少の日数を要しますので、
更新日が8.14.になったのを確認してから、再DLしていただくと、通常ブログ画面の検索フォームも機能すると思います。
尚、DL済みのテンプレートの中に同じ名前のテンプレートがあると再DLできません。
再DLの際は、現在御利用中のテンプレートの名前を変更、もしくは削除してから御利用ください。


再DLせずに、現在御利用中のテンプレートを修正する場合のカスタマイズ

<div class="side_menu">
<h3 class="side_menu"><span>検索フォーム</span></h3><div class="side_text">
<img src="http://blog-imgs-59.fc2.com/g/a/l/gallerytemplate/search2.png" alt="" border="0" class="icon" />キーワードで記事を検索</legend>
<input type="text" name="q" onfocus="if (this.value == 'キーワードで記事を検索') this.value = '';" onblur="if (this.value == '') this.value = 'キーワードで記事を検索';"class="keyword"/><br /><label> <input name="w_res" type="checkbox" value="on" /> コメントも含めて</label> <input type="submit" value="検索" title="ブログ内記事検索開始" />

</div>

HTMLから上の個所を探し、赤字の部分を以下に変更


<form action="./" method="get"><img src="http://blog-imgs-59.fc2.com/g/a/l/gallerytemplate/search2.png" alt="" border="0" class="icon"/>キーワードで記事を検索<br />
<input type="text" name="q" onfocus="if (this.value == 'キーワードで記事を検索') this.value = '';" onblur="if (this.value == '') this.value = 'キーワードで記事を検索';"class="keyword"/><br /><label> <input name="w_res" type="checkbox" value="on" /> コメントも含めて</label> <input type="submit" value="検索" title="ブログ内記事検索開始" /></form>
ご質問の前にカスタマイズに関するご質問のコメントは、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけ   カスタマイズ解説記事からお願い致します。
尚、URL(ブログアドレス)が記載されていないご質問、シークレットコメントのみのご質問へはご返答致しません。
初めて投稿なさる前は必ず   ご質問・サポートについて をご確認ください。
  ※コメントの編集用
  シークレットコメントにする (管理者のみ表示)

~ Trackback ~

卜ラックバックURL


この記事にトラックバックする(FC2ブログユーザー)

MENU anime_down3.gif

同じカテゴリの記事が一覧表示されます
同じタグの記事が一覧表示されます
更新月別の記事が一覧表示されます
キーワードで記事を検索
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。