ブログ カスタマイズ 方法

◎ 背景色（画像）変更方法

以下のスタイルシート（CSS）の赤字部分を変更してください。

■ ブログ全体の背景色を変更する場合

body {
background-color : #123456;
}

　※参考； HTMLリファレンス - カラー編（RGB）


■ ブログ全体の背景画像を変更する場合

body {
background : #123456 url("画像へのパス（URL）");
}

　※備考； "#123456" は、背景画像が表示されない時に表示する色を指定

　▼ 背景画像の位置を指定する場合
　　body {
　　background : #123456 url("画像へのパス（URL）") no-repeat fixed 50% 30%;
　　}
　　　※「no-repeat fixed 50% 30%」を追加 （”50% 30%”は、縦、横の配置位置の割合）

　▼ 背景画像を固定する場合
　　body {
　　background : #123456 url("画像へのパス（URL）") fixed;
　　}
　　　※「fixed」を追加

● 関連する記事
　※背景イメージを指定するCSS＆背景画像（フリー素材）
　※ブログタイトル部分の背景色（画像）を変更する
　※メニュー部分の背景色（画像）変更方法

▼ 関連カテゴリー
　※スタイルシート（CSS）
　※HTML タグ 関連解説
　※JavaScript （ジャバスクリプト）
　※ブログ カスタマイズ 方法
　※HTML・CSS・JavaScript 解説本
　※ブログ関連 本・書籍・ブック

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎ ページタイトル下部のカレンダー表示を削除する

テンプレートによっては、ページタイトル下部に横型のカレンダーが表示されるように設定されていますが、ページタイトル下部のカレンダー表示を削除するには、以下の手順で作業して下さい。

1. 管理者ページ＞テンプレートの設定＞テンプレートの一覧より編集画面を表示し、
   該当するテンプレートを選択
   
2. <!--calendar-->
   <div id="Calendar">
   <p style="margin:0px 0px 0px 0px;">
   <a href="<%prev_month_link>" title="「<%prev_year>年<%prev_month>月」を表示する"><%prev_year>/<%prev_month></a> ｜
   <!--calender2--><span class="day"><%days></span><!--/calender2-->
   ｜ <a href="<%next_month_link>" title="「<%next_year>/<%next_month>月」を表示する"><%next_year>/<%next_month></a>
   </p>
   </div>
   <!--/calendar-->
   の部分を削除する
   
3. スタイルシートの編集より、/* 上部カレンダー設定 */　部分の
   
4. #Calendar {
   text-align: center;
   font-size: 12px;
   color: #997700;
   margin-top: 10px;
   }
   #Calendar .day {
   margin-right: 2.5px;
   padding-right:3px;
   }
   #Calendar a {
   font-weight: bold;
   color: #cc9900; text-decoration : underline;
   }
   
   #Calendar a:hover {
   color:#ff3300; text-decoration : underline;
   }
   の部分を削除する
   

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎ ブログタイトル部分の背景色（画像）変更方法

以下のスタイルシート（CSS）の赤字部分を変更してください。

■ ブログタイトル部分の背景色を変更する場合

#headBlock {
background-color : #123456;
}

　※参考； HTMLリファレンス - カラー編（RGB）

■ ブログタイトル部分の背景画像を変更する場合
#headBlock {
background : #123456 url("画像へのパス（URL）");
}
　※備考； "#123456" は、背景画像が表示されない時に表示する色を指定

　▼ 背景画像の位置を指定する場合
　　#headBlock {
　　background : #123456 url("画像へのパス（URL）") no-repeat fixed 50% 30%;
　　}


● 関連する記事 ⇒ ※背景イメージを指定するCSS＆背景画像（フリー素材）

▼ 関連カテゴリー
　※スタイルシート（CSS）
　※HTML タグ 関連解説
　※JavaScript （ジャバスクリプト）
　※ブログ カスタマイズ 方法
　※ブログ関連 本・書籍・ブック

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

アフィリエイトや物販などでブログを利用する場合など、記事部分に日付を表示したくないという方もいるでしょう。

そこで、記事部分の日付表示をさせないようにする設定方法を説明します。
ここでは、「blog298_10-3」を例に説明します。
（※テンプレートによって記述が違う場合がありますので注意してください）

▼記事の日付を表示しない設定方法

1. 管理者ページ＞テンプレートの設定＞テンプレートの一覧より編集画面を表示
   
2. テンプレートの編集画面が開いたら、キーボードの「Ctrl」ボタンと「F」ボタンを同時に押す
   
3. 検索ボックスが出てくるので、「 <a href="<%topentry_link>"><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)
   </a> 」と入力して、エンターキーを押してください
   
4. 反転表示された上記の該当部分（赤字）を全て削除して下さい
   
5. 更新ボタンを押して完了です。
   

部分的に削除したい場合には、下記の該当する部分だけ削除して下さい。

▼各パーツの説明
　※ <%topentry_link> ⇒ 記事ページのURL
　※ <%topentry_year> ⇒ 投稿した年
　※ <%topentry_month> ⇒ 投稿した月
　※ <%topentry_day> ⇒ 投稿した日
　※ <%topentry_wayoubi> ⇒ 投稿した曜日

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング 総合ランキングサイト FC2ブログランキング

■特定の場所に、フリースペースや広告などを表示する方法
　※ 〜 の部分に掲載したい内容を記入
　　（注意；ＦＣ２ブログでのみ使える独自タグです）

◎トップページにのみ表示する
<!--index_area--> 〜 <!--/index_area-->

◎トップページ以外に表示する
<!--not_index_area--> 〜 <!--/not_index_area-->

◎カテゴリ部分にのみ表示する
<!--category_area--> 〜 <!--/category_area-->

◎カテゴリ部分以外に表示する
<!--not_category_area--> 〜 <!--/not_category_area-->

◎エントリー記事部分にのみ表示する
<!--permanent_area--> 〜 <!--/permanent_area-->

◎エントリー記事部分以外に表示する
<!--not_permanent_area--> 〜 <!--/not_permanent_area-->

◎データエリアにのみ表示する
<!--date_area--> 〜 <!--/date_area-->


◆カスタマイズする際のアドバイス

　※失敗しても良いように、改造前のテンプレートをバックアップしておく
　※一度にカスタマイズしないで、少しずつ確認しながらカスタマイズする
　　（こうすれば、どこで間違ったのかわかりやすいです）

◆お願い

カスタマイズは、自己責任でお願いします。
カスタマイズした事によって、パソコンやプラウザ等に支障がおきたとしても、当方では責任はもてません。また、どのようにカスタマイズされたのか、当方では把握できませんので、いかなる質問にもお答えできません。

■フリースペースの編集について - １


記事の内容にご満足戴けましたならクリックをお願いします ↓
人気blogランキング！ ＪＲＡＮＫブログランキング FC2ブログランキング

エントリー記事部分に広告挿入欄などのスペースを挿入します 　※サンプル

◎HTMLソース部分

<!--mainEntryBase--> 〜 <!--/mainEntryBase--> で囲まれている部分がエントリー記事内容部分です
緑字の部分は、テンプレートにより異なる場合もありますので注意して下さい
　※赤字の部分を挿入したいところに追加して下さい。

<!--mainEntryBase-->
<div class="mainEntryBase">
<div class="EntryBody_cm">
→　※エントリー記事部分、広告挿入欄のサンプル 上部スペース　←
</div>
<div class="editentry">
<a href="./admin.php?mode=editentry&no=<%topentry_no>" title="記事を編集する">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)</a>
</div>
<div class="mainEntryBody"><%topentry_body></div>
<div class="mainEntryMore">
<!--more_link-->
≫<a href="<%topentry_link>#more">[<%topentry_title>]の続きを読む</a>
<!--/more_link-->
<!--more-->
<a name="more" id="more"></a><%topentry_more>
<div class="EntryBody_cm">
<hr />
→　※エントリー記事部分、広告挿入欄のサンプル 下部スペース　←
<p class="cm_banner">
◎ 広告のサンプル
</p>
</div>
<!--/more-->
</div>
<div class="mainEntryDate">
<a href="<%topentry_category_link>" title="カテゴリ一分類"><%topentry_category></a> |
<!--allow_tb-->
<a href="<%topentry_link>#trackback">トラックバック：<%topentry_tb_num></a> |
<!--/allow_tb-->
<!--deny_tb-->
<!--/deny_tb-->
<!--allow_comment-->
<a href="<%topentry_link>#comment">コメント：<%topentry_comment_num></a> |
<!--/allow_comment-->
<a href="#page_top" title="ページトップへ"> Page Top↑</a>
<!--deny_comment-->
<!--/deny_comment-->
</div>
</div>
<!--/mainEntryBase-->

◎CSSソース追加部分

.EntryBody_cm {
margin: 10px 0px 10px 0px;
font-size: 14px; color: #6C6C6C;
}
.cm_banner {
text-align: center;
margin: 5px 0px 2px 0px;
}

　※この部分で文字サイズやスペースなど適当に調整して下さい。
　※margin の左右部分（0pxの部分）をとると記事部分の幅が広くなりレイアウトが崩れます

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！