カスタマイズ 
EntryTop 文字のカスタマイズ
文字のカスタマイズ
2013.08.
カスタマイズ
［テンプレートの管理］ページを開く
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", "ＭＳ Ｐゴシック";
}
テンプレートによってそれぞれ設定が違いますが、ここでは文字色、大きさ、字体を指定していますので、赤色の個所を変更します。
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: 〇〇%; }
【更新】をクリック
- 関連記事
EntryTop ～ 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>
- #14 Galleryテンプレ
- URL
- 2013.08/14 12:50
- ▲EntryTop
～ Trackback ～
卜ラックバックURL
⇒
⇒この記事にトラックバックする(FC2ブログユーザー)
管理人のみ閲覧できます