配布テンプレートのカスタマイズ方法－２

アフィリエイト初心者講座：TOP PAGE » テンプレートのカスタマイズ方法 » 配布テンプレートのカスタマイズ方法－２

配布テンプレートのカスタマイズ方法－２

テンプレート利用者でカスタマイズの情報を共有したいと考えているので
配布しているテンプレートのご質問などはこのスレッドでお願いします。

カスタマイズをやりたいが、HTMLやCSSが解らない人も配布テンプレートの
何処をどんな風にカスタマイズしたいのかを遠慮なく質問してください。

■ トップにインフォメーションボックスを作る
このサイトのトップページに作っている、Pick up-Information みたいな
挨拶文や特に読んで欲しい記事を案内するボックスを作りましょう。

登録不要にしたため、テンプレートのご利用状況が把握できてません。
もし良ければサイドバーにあるフォームよりサイトアドレスをお知らせ下さい。
当記事へコメントにてサイトアドレスをポストされても構いません。
あくまでも任意ですが、どうぞよろしくお願いします。

カスタマイズ記事の更新情報やご利用サイトにてブログランキングや
リスティング広告を設置されている方は応援させていただきます。

スタイルシートの設定

それでは、下のスタイルシートをコピーしてあなたのスタイルシートに貼りつけて下さい。
貼り付ける場所としては、■ads と ■メイン設定の間に貼り付けた方が、修正などで探す時に
位置関係として分かりやすいと思います。

/* ========================================
■ トップインフォメーション設定
======================================== */

#info {
margin-bottom: 30px;
padding: 0;
width: 605px; /*ボックスの幅*/
}

#info h2.infoTitle {
border-top: 1px solid #009900;　/*タイトルの枠線の色*/
border-right: 1px solid #009900;　/*タイトルの枠線の色*/
border-bottom: 1px solid #009900;　/*タイトルの枠線の色*/
border-left: 5px solid #004d25;　/*タイトルの枠線の色（ここだけ濃い色を使ってます）*/
padding: 7px 0 6px 12px;
margin: 0;
color: #004d25;　/*タイトルの文字色*/
background: url(https://fanblogs.jp/gamadasuzo/file/2/dC1iYWNrR3JlZW4nGQ.gif) repeat-x; /*タイトルの文字の背景画像*/
}

#info .infoBody {
padding: 10px 10px 10px 10px;
font-size: 12px;
line-height: 1.4em;
border-right: 1px solid #009900;　/*ボックスの枠線の色*/
border-bottom: 3px solid #009900;　/*ボックスの枠線の色*/
border-left: 1px solid #009900;　/*ボックスの枠線の色*/
}

#info ul {
margin: 0;
padding: 0;
}

#info li {
margin: 0;
padding: 0 0 0 14px;
list-style-type: none;
background: url(https://fanblogs.jp/template/4001/img/icon.gif) no-repeat left center;
}

#info li a {
color: #0000FF;
text-decoration: none;

#info li a:hover {
color: #CC3333;
text-decoration: underline;
}

上記のカラーはグリーンの設定になります。

■ レッドの設定
#640125　← タイトルの文字色
#8B0000　← タイトル・ボックス枠線の色
#8B0000　← 枠線の濃い色
https://fanblogs.jp/gamadasuzo/file/1/dC1iYWNrNHw.gif　← タイトル文字の背景画像

■ ブルーの設定
#000099　← タイトルの文字色
#0000CC　← タイトル・ボックス枠線の色
#000099　← 枠線の濃い色
https://fanblogs.jp/gamadasuzo/file/1/dC1iYWNrQmx1Zb3r.gif　← タイトル文字の背景画像

■ ブラックの設定
#333333　← タイトルの文字色
#696969　← タイトル・ボックス枠線の色
#333333　← 枠線の濃い色
https://fanblogs.jp/gamadasuzo/file/1/dC1iYWNrR3v3.gif　← タイトル文字の背景画像

メインHTMLに表示させるためのHTMLを記述する

スタイルシートの設定ができたら、メインHTMLに記述しましょう！

－－－－－－－－－－ここから－－－－－－－－－－

<div id="info">
<h2 class="infoTitle">インフォメーションのタイトル</h2>

<div class="infoBody">
ブログタイトル<br />
<br />
<img src="https://fanblogs.jp/あなたのアカウント/file/profile" border="0" width="100" height="100" alt="" align="left" style="margin-right:10px;" />テキストの回り込みなので、続けて紹介文や簡単なプロフィールなどを書いて下さい。
<br />

<div style="font-weight:bold;">Pick-UP！アーティクルなどタイトルを記入</div>
<ul>
<li><a href="記事のアドレス">記事のタイトル</a></li>
<li><a href="記事のアドレス">記事のタイトル</a></li>
<li><a href="記事のアドレス">記事のタイトル</a></li>
<li><a href="記事のアドレス">記事のタイトル</a></li>
</ul>
<div style="text-align: right">
ここにランキングバナーなどを設置して下さい。
</div>
</div>
</div>

－－－－－－－－－－ここまで－－－－－－－－－－

上記のHTMLをメインHTMLの下記の場所にコピーして下さい。

<div id="main" class="clr">
<div id="content">

ここにコピーして下さい。

<div id="entries">
<BlogEntries>
<div class="entry">

出来ないと思うのではなく、やってみようと思う勇気があなたの進化を生み出す。

いつも笑顔で。。
寿一太朗