- テンプレート
- テンプレート
- テンプレート
ここでは公式テンプレートとプラグインテンプレートの追加をご説明します。公式テンプレートとはＤＴＩブログが提供しているブログテンプレートのことです。プラグインテンプレートは公式でさらにプラグインに対応しているものです。様々な種類のテンプレートご用意していますのでどれを使いたいのか迷ったら後ほど編集を行えますので、気に入ったものを数個追加しておいてもいいかもしれません。
「デザインの編集」をクリックし「公式テンプレート」もしくは「プラグインテンプレート」へ行く
もしくは
好きなテンプレートを探し、追加します
ページ送りです。別のページも見てみましょう。
サムネイルをクリックするとプレビューできます。
お好みのテンプレートが見つかったら「テンプレートを追加」をクリックしましょう。
テンプレート設定に戻るとテンプレートが追加されています。
ダウンロードしたテンプレートを削除したい場合は「テンプレート設定」画面でテンプレート名の列にある「削除」をクリックしてください。
参照→
- テンプレート
共有テンプレートの追加をしてみましょう。共有テンプレートは、他のブログユーザが登録したテンプレートを利用する機能です。作者へのコメント機能もありますので是非ご利用下さい。作者の励ましにもなります。
「デザインの編集」＞「共有テンプレート」のタブをクリックします
もしくは
好きなテンプレートを探します。見つかったらテンプレート名をクリックしましょう
作者名やテンプレート名での検索や、セレクトメニューの選択により、テンプレートの選択がとても簡単にできます。
セレクトメニューでは、新規登録順（登録の新しい順）、ダウンロード順（DLの多い順）、コメント順（コメントの多い順）、最終更新日順（更新順）での表示を選べます。
テンプレート名をクリックすると詳細が出ます。
「アクション」の欄の「プレビュー」でサンプルが見れます。
もしテンプレートが気に入ったら作者の方にお礼や励ましのコメントを残してあげてくださいね！
「アクション」の欄の「ダウンロード」をクリックします。
「テンプレートの設定」画面のリストにテンプレートが追加されています。
- テンプレート
テンプレートを編集して自分だけのオリジナルブログにカスタマイズする事ができます。ここでは基本的な事項についてだけ触れますが、もっと深く細かいところまでカスタマイズするには、ＨＴＭＬやＣＳＳの知識が必要となります。公式テンプレートや共有テンプレートを見本にしてお好みの画像を入れてみましょう。
「デザインの編集」をクリックします
「general_buroguma」の左上の画像を変更してみましょう
[general_buroguma]を選んで「修正」します
[general_buroguma]を選んで「修正」リンクをクリックして下さい
ＨＴＭＬコード内で該当する画像コードを見つけましょう
[general_buroguma]の場合、下記が該当する画像ファイルのコードです。
http://1.dtiblog.com/template/genral_buroguma/image/rotennburo.gif
↑の画像コードをアップロードした画像に差し替えてみましょう
※ショートカットCtrl+Fの検索機能で検索すると簡単に見つけられます。
利用したい画像をアップロードします
サムネイルをクリックして画像URLをコピーしましょう
画像URLを書き換えます （サイズもあわせましょう）
元の画像URL
http://1.dtiblog.com/template/genral_buroguma/image/rotennburo.gif
差し替え画像URL
http://1.dtiblog.com/b/blacky1/file/back.jpg"
画像のサイズも指定します
width"800" height="200"
画像は変更されましたが、タイトルが画像の横になってしまっています
タイトルと説明文の位置を左側に変更してみましょう
1.タイトル部分をコピーする
下記のコードがタイトルとその説明箇所です。ここをコピーします。
<td><a href="<%url>"><%blog_name></a><div class="site_intro"><%introduction></div></td>
2.トップ画像の上の位置にタイトル部分のコードをペーストします。
3.コピー元を削除します。
タイトルと説明文を左に移動しました
- テンプレート
ブログの構成は、ＨＴＭＬとスタイルシートが一体となったものが基本です。ここでは見本のテンプレートを元に投稿欄表示位置を移動させる手順を実際のＣＳＳ（スタイルシート）とＨＴＭＬを参照しながら解説します。これはあくまでも一例であって、テンプレートによっては構成が違うケースもあります。
「general_buroguma」の記事投稿欄を左側によせてみましょう
デザイン編集ページでＨＴＭＬ内のＣＳＳを確認しましょう
上記のブログは、「左メニュー」と「右メイン部分」の構成で成り立っている事を理解しましょう。今回は「右メイン部分」＝「投稿欄」の幅を左寄せにしたいのでＨＴＭＬ内で「右メイン部分」のコードを探します。
スタイルシートに注目しましょう。
<div id="main'>→これがＣＳＳを指定しているコードになります。これは、mainというＩＤでブログのレイアウトを指定していると言う意味です。レイアウトや文字の大きさを変更したいときは大抵がＣＳＳ（スタイルシート）を変更するだけで大丈夫です。
スタイルシート内でmain部分を見つけます
float部分をleft（左）で指定します。padding（隙間）部分も左から20px（上部）20px（右側）20px（下部）20px（左側）という形で隙間も取っておくと見やすくなります。
更新ボタンを押す（ＨＴＭＬ又はスタイルシートどちらのボタンでもＯＫです）
記事投稿欄が左側に寄りました
- テンプレート
ＨＴＭＬやスタイルシートに該当するコードを入力することで記事としてだけではなく、ブログのサイドバー（横のカラム）にバナーや画像を入れる事が出来ます。
ここでは、ブログパーツ「踊るラブ運だめし」の設置方法を紹介していますが、他のブログパーツやバナー等も同様の方法で設置することができます。
<ブログパーツ「踊るラブ運だめし」>
サイドバーにある「プロフィール」の下にブログパーツをいれてみましょう
下記のコードを挿入します
（リンク先の変更等、タグの改変は禁止しております）
<!-- ここからブログパーツ -->
<script src="http://goodluck.noz.st/imgs/nbp880/getversionvb.vbs" language="VBScript" type="text/vbscript"></script>
<script src="http://goodluck.noz.st/nbp880/NOZ00544/blogp/" language="javascript"></script>
<noscript>
<table width="166" height="326" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFF0F5">
<tr>
<td height="206" align="center" valign="middle"><p style="font-size:80%; line-height:1.2; color:#333; padding:0.2em 2em;">踊るラブ運だめしをするにはJavaScriptを有効にしてください</p></td>
</tr>
<tr>
<td height="120"><a href="http://love.nozze.com/kekkon/NOZ00544/blogp/"><img src="http://goodluck.noz.st/imgs/nbp880/166_120_01.gif" alt="無料パートナー紹介" width="166" height="120" border="0"></a></td>
</tr>
</table>
</noscript>
<!-- ここまでブログパーツ -->
ＨＴＭＬ内で「プロフィール」部分を見つけます
＊管理ページの「デザイン（の編集）」にある「テンプレート設定」のところで、テンプレート名の右にある「修正」をクリックすると、ＨＴＭＬ修正画面が出てきます。
ブログパーツのコードをペーストします
ブログパーツの上下にスペースを設ける為、
という改行を入れたほうが良いです。
ペーストしたら更新ボタンを押しましょう。
ブログパーツ「踊るラブ運試し」がプロフィールの下に表示されました
- テンプレート
サイドバー（横のカラム）のメニュー（プロフィール、カレンダー）などの位置を変更する方法を解説します。
サイドバーにある「プロフィール」の下にカレンダーを移動してみましょう
ＨＴＭＬ内でカレンダーのコードを見つけコピーしましょう
<!--カレンダー--> <!--/カレンダー>部分を見つけます
<!--プロフィール--> <!--/プロフィール>部分を見つけます
※Ctrl+Fの検索機能を利用してカレンダー、プロフィールのキーワードを検索します
ＨＴＭＬ内で「プロフィール」部分を見つけます
上下にスペースを設ける為、<br>という改行コードを利用します。
カレンダーのコピー元を消して更新ボタンを押します
下記のようにカレンダーがプロフィールの下に移動されました
- テンプレート
アクセントとして、一部分の文字を装飾する方法は
「記事の作成・編集」の章でお話しました。
次は、記事内のデフォルトの文字サイズを変更してみましょう。
記事内の文字は相手が読みやすい大きさとして12pxか14pxかそれ以上が望ましいと言われています。
文字のサイズもテンプレートのレイアウトと同じくスタイルシートで指定してますのでスタイルシート内の文字設定部分を変更します。
現在の文字サイズは12px（ピクセル）です。これを大きくします
ＨＴＭＬ内で記事内のテキストの指定を確認します
< %topentry_body>この部分が記事の内容が反映される場所（変数値）
<class="entry_text"> が記事内の文字の装飾を決定していることがわかります。
スタイルシート内で「entry_text」を見つけます
文字の大きさ指定（font-size)は、12px(ピクセル）になっていますのでこれを14pxに変更します。
entry_text a{ font-size〜は、entry_text で指定されている箇所の文字がリンクの場合のサイズを決定しています。
混乱を避けるため、上記2つとも同じサイズで統一することをお勧めします。
文字サイズを変更して更新ボタンを押します
ブログを確認すると下記のように文字サイズの変更が反映されています
- テンプレート
オリジナルのテンプレートの作成ができたら、共有テンプレートとして応募してみましょう。認証後、あなたが作ったテンプレートデザインを他のユーザーも使えるようになります。
まず、ご自分のブログ内でオリジナルのテンプレートを作成しておいてください。さらに、テンプレートのイメージ図のサムネイルを20kb以内で作成しておいてください。
管理画面左メニューの「デザイン」より「テンプレート応募」へすすむ。
応募したいテンプレートを選択します
応募したいテンプレート名を選択してください。
※名前を決めるときは、テンプレートの雰囲気が伝わるものを使うことをお勧めします。
テンプレートの説明文を作成します
全角100文字以内であなたのテンプレートをユーザーの方々に紹介しましょう。
サムネイル画像を選択します
説明文作成後、ここでテンプレートの応募ボタンをクリックして終了です。その際、20KB以上のサムネイル画像はご使用いただけませんのご注意ください。
登録したテンプレート一覧を確認します
ここでは応募したテンプレートの状況が一覧表示されていますので、応募を試みたテンプレートの状況を確認できます。
- テンプレート
皆さんのブログには、当DTIブログが設けているDTIブログの広告枠があります。これは、お使いのテンプレートによりますが、必ず左右どちらかのカラム内か、下のフッター内にあります。
（ジャンルやテンプレートにより若干異なります）
DTIブログの広告
DTIブログのページトップに飛びます。
現在のすすめのサイトや企画です
このブログを通報
閲覧しているブログが、ワンクリ詐欺等の違反行為やDTIブログの利用規約に違反しているのを発見した時にDTIブログ管理者に通報することができます。
「チャンプdeGOGO」のテキスト広告
ランキングサイト「チャンプdeGOGO」のテキスト広告です。
これらの広告は、テンプレートのHTML内に < %ad> < %ad2>のタグで組み込まれていて、DTIブログをご利用頂く上で非表示・削除は不可になっています。上記のタグを削除した場合、ブログが表示されなくなります。
また、広告タグをブラウザー上で非表示にする行為は禁止しております。ブログのメインページとなるページにDTIブログの広告が表示されていない場合は、予告なしにアカウントを停止致します。
＊ユーザー側で用意する広告の掲載については、違法行為でない限り、ご利用自由となっております。 ただし、グーグル・アドセンスに関しては、現在のところご利用いただけない状態になっております。
|
各ボタンの紹介
削除： テンプレートを削除できます。現在適応中のものは削除できません。
テンプレートの並べ替え：テンプレートが複数リストにある場合、ここで「アルファベット順」もしくは「ダウンロード順」に並べ替える事ができます。
