テンプレカスタマイズの前に テンプレートのレイアウトと横幅の変更 背景色と背景画像の変更 ヘッダー画像の替え方 左右カラムの入れ替え方 リストタグ（・や■）の編集 サイドメニュー コンテンツ全体の背景編集 記事投稿欄の編集 日付、 コメント、 トッラックッバクを非表示にする方法 余白（マージン）の作り方 スクロールバーの付け方 総ページ数と現在のページ数の表示とリンク

ブログを何ページか読んでいて、前後のページには簡単に進めるけど、一体あと何ページ先があるのかな？と少し不安になったことはありませんか？この問題を解決すべく、総ページ数と現在のページ数とそのリンクを表示させるための変数をご用意致しました。

使い方は、例えば下記のようにブログ上で表示したい場合、

2ページ（4ページ中）

こちらのコードをテンプレート内の表示したい場所にに挿入して下さい。

<!--not_permanent_area-->
<a href="<%current_page_url>"><%current_page_num>ページ</a>（<a
href="<%total_pages_url>"><%total_pages>ページ中</a>）
<!--/not_permanent_area-->

※<!--not_permanent_area-->〜<!--/not_permanent_area-->で囲わない場合、各エントリページの総ページ数と現在のページ数は１と表示されます。

このナビゲーションを設置すればページビューがもう少し増えるチャンス ぜひご利用下さい！

スクロールバーの付け方

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

※ マニュアルカテゴリーに付いたスクロールバーを比較して下さい。

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

ブログ管理画面内のデザインの変更＞テンプレート設定＞修正＞スタイルシートの分かり易いところに下記のCLASSタグを追加して下さい。
例）
.scrollbar {
overflow: auto;
height: 150px;
}

overflow, heightの値は御自分の好みのサイズに合わせて変更して下さい。
heightはスクロールバーを付けるプラグインボックスの高さを指定するプロパティです。詳細はこちらを参照下さい。
overflow は、領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。詳細はこちらを参照下さい。




※【クラス名について】クラス名をつける際には以下の点に注意してください。
・クラス名はご自由に選べますが、ＨＴＭＬで使用するものと同じものをご利用下さい。
・今回scrollbarという名前で使用したクラス名ですが、どのクラス名を選んだとしてもご利用の際には、テンプレートですでに使われていないかを確認してからご利用下さい。
・大文字と小文字の区別があります。
・使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です。
・アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。
・アルファベットで始めなければなりません。（数字や記号で始めてはならない）
・テンプレートを変更したら、スタイルシートに.scrollbar{..}を再度追加する必要ありますので、テンプレートの変更の際にはお忘れないようお気を付け下さい。



最後に、CLASSタグを追加し終えたら、更新ボタンを押して下さい。

ブログ管理画面内のデザインの変更＞プラグイン管理＞スクロールバーを付けたいプラグインカテゴリー＞編集＞HTMLの編集＞<ul>タグ内ににclass属性を追加してクラス名を下記のように入れて下さい。
例）
<ul class="scrollbar">


※ クラス名はご自由に選べますが、のスタイルシートとクラス名が同じになるようにご設定して下さい。





最後に変更をボタンを押して下さい。
※どのプラグインカテゴリーでも同じやり方で、スクロールバーを付けられますのでご利用下さい。

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

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



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

２カラム




３カラム






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

例）

２カラムと３カラムのレイアウト

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

２カラム







横幅の変更

横幅の指定は、スタイルシートを編集します。例えば、３カラムのテンプレートで左右のカラム（#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

更新ボタンをクリック

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

背景色の変更

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



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

デザインの編集＞修正＞スタイルシートより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;


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

更新ボタンをクリック



背景画像の変更

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



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

デザインの編集＞修正＞スタイルシートより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);

更新ボタンをクリック

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

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

左右のカラムを入れ替えるには、スタイルシート内で#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;
}

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

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



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

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

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

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

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

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



background: #000000;

参考リンク

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

更新ボタンをクリック

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

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



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

デザインの編集＞修正＞スタイルシートより .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のプロパティを下記のように編集します



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

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

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

各メニューの背景画像、背景色などを編集してみましょう。

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



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

デザインの編集＞修正＞スタイルシートより .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);
と設定することもできます。


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


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

コンテンツ全体はcontainerというブロックで囲われています。このブロックに、背景色や、背景画像を設定してみましょう。

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

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



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

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

pluging_3c_01の場合

#container {
width: 960px;
margin: 0 auto;
background: url(https://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;
}


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


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


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

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

記事投稿欄の背景を編集したり、枠（ボーダー）を設定する方法をご紹介したいと思います。

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



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

デザインの編集＞修正＞スタイルシートより .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;
}


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

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

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

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

ブログを記事投稿すると、ほぼ全てのテンプレートに日付、 コメント、 トッラックッバクが表示されます。これらを表示したくない方は、ブログテンプレートの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-->を検索し、その数行下をチェックして下さい

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

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


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

テンプレートに余白（マージン）の作りたいというご要望があったので、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-->

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

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