- テンプレート カスタマイズ
- テンプレート カスタマイズ
ブログを何ページか読んでいて、前後のページには簡単に進めるけど、一体あと何ページ先があるのかな?と少し不安になったことはありませんか?この問題を解決すべく、総ページ数と現在のページ数とそのリンクを表示させるための変数をご用意致しました。
使い方は、例えば下記のようにブログ上で表示したい場合、
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-->で囲わない場合、各エントリページの総ページ数と現在のページ数は1と表示されます。
このナビゲーションを設置すればページビューがもう少し増えるチャンス

ぜひご利用下さい!
- テンプレート カスタマイズ
スクロールバーの付け方
↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓
※ マニュアルカテゴリーに付いたスクロールバーを比較して下さい。
カスタマイズの前にテンプレートのコピーを取って下さい。
ブログ管理画面内のデザインの変更>テンプレート設定>修正>スタイルシートの分かり易いところに下記のCLASSタグを追加して下さい。
例)
.scrollbar {
overflow: auto;
height: 150px;
}
overflow, heightの値は御自分の好みのサイズに合わせて変更して下さい。
heightはスクロールバーを付けるプラグインボックスの高さを指定するプロパティです。
詳細はこちらを参照下さい。
overflow は、領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。
詳細はこちらを参照下さい。
※【クラス名について】クラス名をつける際には以下の点に注意してください。
・クラス名はご自由に選べますが、HTMLで使用するものと同じものをご利用下さい。
・今回scrollbarという名前で使用したクラス名ですが、どのクラス名を選んだとしてもご利用の際には、テンプレートですでに使われていないかを確認してからご利用下さい。
・大文字と小文字の区別があります。
・使用できる文字は、半角の英数字、ハイフン( - )、アンダーバー( _ )です。
・アンダーバー( _ )をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。
・アルファベットで始めなければなりません。(数字や記号で始めてはならない)
・テンプレートを変更したら、スタイルシートに.scrollbar{..}を再度追加する必要ありますので、テンプレートの変更の際にはお忘れないようお気を付け下さい。
最後に、CLASSタグを追加し終えたら、更新ボタンを押して下さい。
ブログ管理画面内のデザインの変更>プラグイン管理>スクロールバーを付けたいプラグインカテゴリー>編集>HTMLの編集><ul>タグ内ににclass属性を追加してクラス名を下記のように入れて下さい。
例)
<ul class="scrollbar">
※ クラス名はご自由に選べますが、

のスタイルシートとクラス名が同じになるようにご設定して下さい。
最後に変更をボタンを押して下さい。
※どのプラグインカテゴリーでも同じやり方で、スクロールバーを付けられますのでご利用下さい。
- テンプレート カスタマイズ
テンプレートを自分用に装飾したいけど、やり方が今までわからなかった方のために、簡単にテンプレートをカスタマイズできるマニュアルを作りました。

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

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

また、テンプレート カスタマイズに関して質問があれば、該当する記事にコメントを残して下さい。個別の対応や返答はしませんが、マニュアルで修正が必要な箇所や、もっと別のテクニックを紹介した方が良い場合、やり方を追加していこうと思います。
対応しているテンプレートは、下記の7種類です。
2カラム
3カラム
pluging_2a_01、pluging_3a_01、pluging_3a_02、pluging_3d_01は、960ピクセルのプラグイン素材を追加できるように、プラグインメニューの名称(プロフィールやフリーエリアなど)を表示しないように、デザインしてあります。
例)
- テンプレート カスタマイズ
2カラムと3カラムのレイアウト
テンプレートの枠を組む際、HTML内にdivと呼ばれるタグを使ってブロックを囲んでいきます。このマニュアルで紹介しているテンプレートは、基本的に下記のような構成になっています。
2カラム
3カラム

3カラムパターン2 (pluging_3cとpluging_3d)

横幅の変更
横幅の指定は、スタイルシートを編集します。例えば、3カラムのテンプレートで左右のカラム(#rightと#left)の横幅変更するには
、#right #left #container #footerの4箇所を変更する必要があります。
(3カラムパターン2は、#right #left #wrapper #container #footerの5箇所を変更)
カスタマイズの前に、テンプレートのコピーをまず取って下さい
デザインの編集>修正>スタイルシートより、#right #left #containerの3箇所を順に探して下さい
(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: OOpx;が横幅になります。お好きな数字を入力して下さい
例)
#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)を書き換えれば完了です。
カスタマイズの前にテンプレートのコピーを取って下さい
デザインの編集>修正>スタイルシートより
2カラムなら#leftと#right
3カラムなら#wrapperと#left
と書かれた部分を探して下さい
2カラムの例 (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;
}
3カラムの例 (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)を入れ替えます
2カラムの例 (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;
}
3カラムの例 (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;
}
2カラムの例 (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;
}
3カラムの例 (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の場合 (下記の2箇所)
#center .menucontent li {
padding-left: 20px;
list-style: none;
}
#right .menucontent li {
padding-left: 20px;
list-style: none;
}
list-styleのプロパティを下記のように編集します
画像に変更するには: 管理画面にお好きな画像をアップして、そのURLに変更
例)
list-style: url(https://13.dtiblog.com/b/blogmanual/file/liststyle.jpg);
・に変更するには
list-style: circle;
■に変更するには
list-style: square;
#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の場合 (下記の2箇所)
#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;
}
・
背景画像の位置指定はこちらをご覧下さい
・
カラーコードはこちらをご覧下さい
更新ボタンをクリックして完成です
この記事の続きに、ボーダープロパティーについてもう少し詳しい説明を書いていますので、興味がある方は参考にして下さい。
[ 記事投稿欄の編集 ] の続きを読む
- テンプレート カスタマイズ
- テンプレート カスタマイズ
テンプレートに余白(マージン)の作りたいというご要望があったので、pluging_3c_01を用いて、ご紹介したいと思います。
pluging_3c_01は、左右のカラムを入れ替えやすいように、上部にあるヘッダーとプラグイン3の右側には、マージンを設定していません。変更方法は何通りかありますが、今回は最もコードの編集が必要のないやり方をご紹介したいと思います。
カスタマイズの前にテンプレートのコピーを取って下さい
デザインの編集>修正>スタイルシートより #masterhead を探して下さい
pluging_3cb_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-->
編集箇所は下記の2箇所です。
#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-->
更新ボタンをクリックして完成です
[ 余白(マージン)の作り方 ] の続きを読む
|