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

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

総ページ数と現在のページ数の表示とリンク

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

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

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と表示されます。

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

スクロールバーの付け方

  1. テンプレート カスタマイズ
スクロールバーの付け方

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

スクロールバー装着前!

スクロールバー装着後!

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

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

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

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




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



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

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


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





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

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

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

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

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

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


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

2カラム


[ pluging_2a_01 ]

[ pluging_2b_01 ]



3カラム


[ pluging_3a_01 ]

[ pluging_3a_02 ]

[ pluging_3a_03 ]

[ pluging_3a_04 ]

[ pluging_3a_cutie_05 ]NEW

[ pluging_3b_01 ]

[ pluging_3b_02 ]

[ pluging_3c_01 ]

[ pluging_3c_02 ]

[ pluging_3d_01 ]

[ pluging_3e_girl_01 ]

[ pluging_3e_girl_02 ]





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

例)

960ピクセルのプラグイン素材入り

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

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

  1. テンプレート カスタマイズ
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

更新ボタンをクリック


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

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

  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)を書き換えれば完了です。

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

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

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;
}

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

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

  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の場合 (下記の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(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の場合 (下記の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);
と設定することもできます。



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


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

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

  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は、左右のカラムを入れ替えやすいように、上部にあるヘッダーとプラグイン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-->

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

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

  |  もくじへ  |  
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse