テンプレをカスタマイズしてみよう！

  1. テンプレート カスタマイズ
  1. テンプレカスタマイズの前に
  2. テンプレートのレイアウトと横幅の変更
  3. 背景色と背景画像の変更
  4. ヘッダー画像の替え方
  5. 左右カラムの入れ替え方
  6. リストタグ（・や■）の編集
  7. サイドメニュー
  8. コンテンツ全体の背景編集
  9. 日付、 コメント、 トッラックッバクを非表示にする方法
  10. 余白（マージン）の作り方
　　

テンプレカスタマイズの前に

  1. テンプレート カスタマイズ
テンプレートを自分用に装飾したいけど、やり方が今までわからなかった方のために、簡単にテンプレートをカスタマイズできるマニュアルを作りました。

テンプレートをカスタマイズする前に、下記の注意事項をご確認下さい。

このマニュアルをもとにカスタマイズしたテンプレートで、万が一不具合が起こっても、個別で対応はしませんので、カスタマイズを始める前に、必ずバックアップを取っておいて下さい。

また、テンプレート カスタマイズに関して質問があれば、該当する記事にコメントを残して下さい。個別の対応や返答はしませんが、マニュアルで修正が必要な箇所や、もっと別のテクニックを紹介した方が良い場合、やり方を追加していこうと思います。


対応しているテンプレートは、下記の７種類です。

２カラム


[ pluging_2a_01 ]

[ pluging_2b_01 ]



３カラム


[ pluging_3a_01 ]

[ pluging_3a_02 ]

[ pluging_3a_03 ]

[ pluging_3a_04 ]

[ pluging_3b_01 ]

[ pluging_3b_02 ]

[ pluging_3c_01 ]

[ pluging_3c_02 ]

[ pluging_3d_01 ]

NEW[ pluging_3e_girl_01 ]

NEW[ pluging_3e_girl_02 ]





pluging_2a_01、pluging_3a_01、pluging_3a_02、pluging_3d_01は、９６０ピクセルのプラグイン素材を追加できるように、プラグインメニューの名称（プロフィールやフリーエリアなど）を表示しないように、デザインしてあります。

例）

９６０ピクセルのプラグイン素材入り

プラグインメニューの名称が表示されていない例

テンプレートのレイアウトと横幅の変更

  1. テンプレート カスタマイズ
２カラムと３カラムのレイアウト

テンプレートの枠を組む際、HTML内にdivと呼ばれるタグを使ってブロックを囲んでいきます。このマニュアルで紹介しているテンプレートは、基本的に下記のような構成になっています。

２カラム



３カラム

３カラムパターン２ （pluging_3cとpluging_3d）





横幅の変更

横幅の指定は、スタイルシートを編集します。例えば、３カラムのテンプレートで左右のカラム（#rightと#left）の横幅変更するには、#right　#left　#container　#footerの４箇所を変更する必要があります。
（３カラムパターン２は、#right　#left　#wrapper　#container　#footerの５箇所を変更）

カスタマイズの前に、テンプレートのコピーをまず取って下さい

デザインの編集＞修正＞スタイルシートより、#right　#left　#containerの３箇所を順に探して下さい

（pluging_3a_01の場合）

#container {
width: 960px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
}

#left {
float: left;
width: 180px;
display: inline;
margin-right: 16px;
overflow: hidden;
}

#right {
float: left;
width: 220px;
display: inline;
margin-left: 16px;
overflow: hidden;
}

#footer {
width: 928px;
margin: 0 auto;
clear: both;
padding: 16px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/footer.gif) repeat-x top;
text-align: center;
}

width: ＯＯpx;が横幅になります。お好きな数字を入力して下さい

例）

#container {
width: 1100px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
}

#containerの横幅は、#leftで増やした100pxと#rightで増やした40pxを足した数字になります。
960+100+40=1100

#left {
float: left;
width: 280px;
display: inline;
margin-right: 16px;
overflow: hidden;
}

#right {
float: left;
width: 260px;
display: inline;
margin-left: 16px;
overflow: hidden;
}

#footer {
width: 1068px;
margin: 0 auto;
clear: both;
padding: 16px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/footer.gif) repeat-x top;
text-align: center;
}

#footerの横幅は、#leftで増やした100pxと#rightで増やした40pxを足した数字になります。
928+100+40=1068

更新ボタンをクリック


[ テンプレートのレイアウトと横幅の変更 ] の続きを読む

背景色・背景画像の変え方

  1. テンプレート カスタマイズ
背景色の変更

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_2a_01 ]

背景色変更完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートよりbodyと書かれた部分を探して下さい

例）
body {
text-align: left;
background: url(http://1.dtiblog.com/template/pluging_2a_01/image/bg.jpg);
}

background: url(http://1.dtiblog.com/template/pluging_2a_01/image/bg.jpg);
の部分をお好きなカラーコードに変更します
例）
background: #660000;


・カラーコードはこちらをご覧下さい

更新ボタンをクリック



背景画像の変更

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_3b_01 ]

背景画像変更完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートよりbodyと書かれた部分を探して下さい

例）
body {
text-align: left;
background: url(http://1.dtiblog.com/template/pluging_3b_01/image/bg.jpg) repeat-x fixed;
}

background: url(http://1.dtiblog.com/template/pluging_3b_01/image/bg.jpg) repeat-x fixed;
が現在の背景画像のことです。お好きな写真をDTIブログの管理画面にアップして、そのURLを()内に書き換えて下さい。
例）
background: url(http://13.dtiblog.com/b/blogmanual/file/myphoto.jpg);

更新ボタンをクリック

＊この記事の続きにもっと、細かいテクニックを説明しています。興味がある方はぜひ参考にして下さい。





[ 背景色・背景画像の変え方 ] の続きを読む

左右カラムの入れ替え方

  1. テンプレート カスタマイズ
　



　



左右のカラムを入れ替えるには、スタイルシート内で#rightと#leftまたは、#wrapperにあるfloatプロパティの値（rightやleft）を書き換えれば完了です。

カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより

２カラムなら#leftと#right
３カラムなら#wrapperと#left

と書かれた部分を探して下さい

２カラムの例 （pluging_2a_01の場合）

#left {
float: left;
width: 320px;
display: inline;
margin-right: 20px;
overflow: hidden;
}

#right {
float: right;
width: 600px;
padding: 0 10px 10px;
overflow: hidden;
}

３カラムの例 （pluging_3c_01の場合）
#wrapper {
float: right;
width: 722px;
padding-bottom: 20px;
}

#left {
float: left;
width: 218px;
display: inline;
overflow: hidden;
font-size: 11px;
margin: 0 10px;
}

各floatプロパティの値（rightまたはleft）を入れ替えます

２カラムの例 （pluging_2a_01の場合）

#left {
float: right;
width: 320px;
display: inline;
margin-right: 20px;
overflow: hidden;
}

#right {
float: left;
width: 600px;
padding: 0 10px 10px;
overflow: hidden;
}

３カラムの例 （pluging_3c_01の場合）
#wrapper {
float: left;
width: 734px;
padding-bottom: 20px;
}

#left {
float: right;
width: 206px;
display: inline;
overflow: hidden;
font-size: 11px;
margin: 0 10px;
}

２カラムの例 （pluging_2a_01の場合）

#left {
float: left;
width: 320px;
display: inline;
margin-right: 20px;
overflow: hidden;
}

#right {
float: right;
width: 600px;
padding: 0 10px 10px;
overflow: hidden;
}

３カラムの例 （pluging_3c_01の場合）
#wrapper {
float: right;
width: 722px;
padding-bottom: 20px;
}

#left {
float: left;
width: 218px;
display: inline;
overflow: hidden;
font-size: 11px;
margin: 0 10px;
}

更新ボタンをクリックします

ヘッダー画像、背景色の替え方

  1. テンプレート カスタマイズ
↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_3a_01 ]

ヘッダー画像変更完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより#masterheadと書かれた部分を探して下さい

例）
#masterhead {
width: 380px;
margin: 0 auto;
background: #1c3754;
padding: 10px 100px 10px 480px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/header.jpg) no-repeat;
height: 100px;
text-align: right;
}

background: url(http://1.dtiblog.com/template/pluging_3a_01/image/header.jpg) no-repeat;
が現在の背景画像のことです。お好きな写真をDTIブログの管理画面にアップして、そのURLを()内に書き換えて下さい

例）
background: url(http://13.dtiblog.com/b/blogmanual/file/ny.jpg) no-repeat;

画像ではなく色だけにしたい場合は、下記のように変更します



background: #000000;

参考リンク

・色番号について
・背景画像の繰り返しについて

更新ボタンをクリック

リストタグ（・や■）の編集

  1. テンプレート カスタマイズ
メニュー内にあるコンテンツに・や■がついていたりしますが、これをお好きな画像や、何も表示させないように編集することができます。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_3d_01 ]

リストタグ変更完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより .menucontent li を探して下さい

pluging_3d_01の場合　（下記の２箇所）

#center .menucontent li {
padding-left: 20px;
list-style: none;
}

#right .menucontent li {
padding-left: 20px;
list-style: none;
}

list-styleのプロパティを下記のように編集します

画像に変更するには：　管理画面にお好きな画像をアップして、そのURLに変更
例）
list-style: url(http://13.dtiblog.com/b/blogmanual/file/liststyle.jpg);
・に変更するには
list-style: circle;
■に変更するには
list-style: square;


#center .menucontent li {
padding-left: 20px;
list-style: url(http://13.dtiblog.com/b/blogmanual/file/liststyle.jpg);
margin-left: 10px;
}

#right .menucontent li {
padding-left: 20px;
list-style: url(http://13.dtiblog.com/b/blogmanual/file/liststyle.jpg);
margin-left: 10px;
}
＊margin-left: 10px;の値はテンプレートによって異なります。10pxでも画像が切れてしまう場合は、20pxなどに増やしてみて下さい。

更新ボタンをクリックします

サイドメニュー

  1. テンプレート カスタマイズ
各メニューの背景画像、背景色などを編集してみましょう。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_3b_01 ]

サイドメニュー編集完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより .menubox h4 を探して下さい

pluging_3b_01の場合　（下記の２箇所）

#left .menubox h4 {
color: #444444;
padding: 4px;
font-size: 12px;
font-weight: bold;
border-left: #f9a6b6 2px solid;
background: url(http://13.dtiblog.com/template/pluging_3b_01/image/entrytitle.jpg) repeat-x;
}

#right .menubox h4 {
color: #444444;
padding: 4px;
font-size: 12px;
font-weight: bold;
border-left: 2px solid #f9a6b6;
background: url(http://13.dtiblog.com/template/pluging_3b_01/image/entrytitle.jpg) repeat-x;
}

colorは文字色、backgroundが背景になります。カラーコードを参考に、編集して下さい

#left .menubox h4 {
color: #ffffff;
padding: 4px;
font-size: 12px;
font-weight: bold;
border-left: #f9a6b6 2px solid;
background: #000000;
}

#right .menubox h4 {
color: #ffffff;
padding: 4px;
font-size: 12px;
font-weight: bold;
border-left: 2px solid #f9a6b6;
background: #000000;
}

背景色の代わりに
background: url(画像のURL);
と設定することもできます。


・背景画像の位置指定はこちらをご覧下さい
・カラーコードはこちらをご覧下さい


更新ボタンをクリックします

コンテンツ全体の背景編集

  1. テンプレート カスタマイズ
コンテンツ全体はcontainerというブロックで囲われています。このブロックに、背景色や、背景画像を設定してみましょう。

コンテンツ全体の背景色編集

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_3c_01 ]

全体の背景色変更完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより #container を探して下さい

pluging_3c_01の場合

#container {
width: 960px;
margin: 0 auto;
background: url(http://1.dtiblog.com/template/pluging_3c_01/image/container.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #705038;
border-right: 1px solid #705038;
font-size: 12px;
line-height: 22px;
}

backgroundが背景になります。カラーコードを参考に、編集して下さい

#container {
width: 960px;
margin: 0 auto;
background: #61360f;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #705038;
border-right: 1px solid #705038;
font-size: 12px;
line-height: 22px;
}


・カラーコードはこちらをご覧下さい


更新ボタンをクリックして完成です


コンテンツ全体の背景色編集では、もう少し細かい設定を説明したいと思います。興味がある方は、記事の続きを読んでみて下さい。

[ コンテンツ全体の背景編集 ] の続きを読む

記事投稿欄の編集

  1. テンプレート カスタマイズ
記事投稿欄の背景を編集したり、枠（ボーダー）を設定する方法をご紹介したいと思います。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名：[ pluging_2b_01 ]

記事投稿欄編集完了！



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより .entry を探して下さい

pluging_2b_01の場合

.entry {
margin: 0 10px 20px 10px;
background: #ffffff;
border: dotted 2px #40322f;
padding: 4px;
}

backgroundが背景でborderが枠になります。ここでは、背景を画像にして更にボーダーも編集してみます

.entry {
margin: 0 10px 20px 10px;
background: url(http://13.dtiblog.com/b/blogmanual/file/entrybg.jpg) #ffffff bottom repeat-x;
border: solid 1px #40322f;
padding: 4px;
}


・背景画像の位置指定はこちらをご覧下さい
・カラーコードはこちらをご覧下さい

更新ボタンをクリックして完成です

この記事の続きに、ボーダープロパティーについてもう少し詳しい説明を書いていますので、興味がある方は参考にして下さい。

[ 記事投稿欄の編集 ] の続きを読む

日付、 コメント、 トラックバックを非表示にする方法

  1. テンプレート カスタマイズ
ブログを記事投稿すると、ほぼ全てのテンプレートに日付、 コメント、 トッラックッバクが表示されます。これらを表示したくない方は、ブログテンプレートのHTMLを編集して下さい。

カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞HTMLより下記を探して下さい

pluging_3c_01の場合

↓日付
<li><a href="<%topentry_link>"><%topentry_year>.<%topentry_month>.<%topentry_day>(<%topentry_wayoubi>) <%topentry_hour>:<%topentry_minute:<%topentry_second></a> |</li>


↓トラックバック
<li><!--allow_tb--><a href="<%topentry_link>#trackback">トラックバック：<%topentry_tb_num></a><!--/allow_tb--><!--deny_tb-->トラックバック(-)<!--/deny_tb--> |</li>


↓コメント
<li><!--allow_comment--><a href="<%topentry_link>#comment">コメント：<%topentry_comment_num></a><!--/allow_comment--><!--deny_comment-->コメント(-)<!--/deny_comment--></li>

*これらは全て、HTMLの<!--topentry-->で囲われたブロックに記述されています。まずはコントロール+Fキーで<!--topentry-->を検索し、その数行下をチェックして下さい

上記を全て削除して下さい

更新ボタンをクリックして完成です


・テンプレートに使うその他の変数はこちらを参考にして下さい

余白（マージン）の作り方

  1. テンプレート カスタマイズ
テンプレートに余白（マージン）の作りたいというご要望があったので、pluging_3c_01を用いて、ご紹介したいと思います。

pluging_3c_01は、左右のカラムを入れ替えやすいように、上部にあるヘッダーとプラグイン３の右側には、マージンを設定していません。変更方法は何通りかありますが、今回は最もコードの編集が必要のないやり方をご紹介したいと思います。

カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより #masterhead を探して下さい

pluging_3ｃb_01

#masterhead {
margin: 0 auto;
background: url(http://1.dtiblog.com/template/pluging_3c_01/image/header.gif) repeat-x;
padding: 10px 0 10px 10px;
overflow: hidden;
height: 101px;
}

デザインの編集＞修正＞HTMLより <!--plugin_third--> を探して下さい

<!--plugin_third-->
<div class="entry">
<!--<h3 style="text-align:<%plugin_third_talign>;"><%plugin_third_title></h3>-->
<div class="entrybody">
<div class="topcontent">
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description></p>
<div style="text-align: <%plugin_third_align>;" class="plugincontent"><%plugin_third_content></div>
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description2></p>
</div>
</div>
</div>
<!--/plugin_third-->

編集箇所は下記の２箇所です。

#masterhead {
margin: 0 10px 0 auto;
background: url(http://1.dtiblog.com/template/pluging_3c_01/image/header.gif) repeat-x;
padding: 10px 0 10px 10px;
overflow: hidden;
height: 101px;
}

marginのプロパティ値を列挙に関する詳しい説明は、「続きを読む」からどうぞ


<!--plugin_third-->
<div class="entry" style="margin-right: 10px;">
<!--<h3 style="text-align:<%plugin_third_talign>;"><%plugin_third_title></h3>-->
<div class="entrybody">
<div class="topcontent">
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description></p>
<div style="text-align: <%plugin_third_align>;" class="plugincontent"><%plugin_third_content></div>
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description2></p>
</div>
</div>
</div>
<!--/plugin_third-->

更新ボタンをクリックして完成です

[ 余白（マージン）の作り方 ] の続きを読む

  |  もくじへ  |  
|