テンプレートに関する使い方index

  1. テンプレート
  1. テンプレートの管理
  2. 公式テンプレートを追加
  3. 共有テンプレートを追加
  4. トップ(ヘッダー)画像の変更
  5. 記事欄表示位置の変更
  6. サイドバーにバナーを入れる
  7. サイドバーのメニューの変更
  8. 記事の文字の大きさの変更
  9. 共有テンプレートに応募
  10. DTIブログの広告枠について

テンプレートの管理

  1. テンプレート
DTIブログでは、様々な種類のテンプレートを多数揃えており、また共有テンプレートとして自分のブログデザインを登録して他のブログユーザと共有して使う機能もあります。是非、ご利用ください。

左メニュー、デザイン変更内の「テンプレート設定」をクリックします
メニューデザイン


テンプレート設定が開きます

デザインタブ


 各ボタンの紹介  
プレビュー:テンプレートを下見

適用:あなたのブログへこのテンプレートを適応。 適応中のテンプレートにはテンプレート名の左に青いやじるしが付いています。

修正:HTMLとスタイルシート(CSS)、テンプレート名の編集が行えます

コピー: テンプレートを複製します。複製されたものは[テンプレート名_c]という風に、名前の末尾に_cが付きます。

削除: テンプレートを削除できます。現在適応中のものは削除できません。

テンプレートの並べ替え:テンプレートが複数リストにある場合、ここで「アルファベット順」もしくは「ダウンロード順」に並べ替える事ができます。

公式とプラグインテンプレートの追加

  1. テンプレート
ここでは公式テンプレートとプラグインテンプレートの追加をご説明します。公式テンプレートとはDTIブログが提供しているブログテンプレートのことです。プラグインテンプレートは公式でさらにプラグインに対応しているものです。様々な種類のテンプレートご用意していますのでどれを使いたいのか迷ったら後ほど編集を行えますので、気に入ったものを数個追加しておいてもいいかもしれません。

左メニュー、デザイン変更内の「テンプレート設定」をクリック
メニューデザイン

「公式テンプレート」もしくは「プラグインテンプレート」のタブをクリックし、好きなテンプレートを探し、追加します





 ページ送りです。別のページも見てみましょう。

 サムネイルをクリックするとプレビューできます。

 お好みのテンプレートが見つかったら「テンプレートを追加」をクリックしましょう。

 テンプレート設定に戻るとテンプレートが追加されています。

 ダウンロードしたテンプレートを削除したい場合は「テンプレート設定」画面でテンプレート名の列にある「削除」をクリックしてください。参照→

プラグインテンプレートをカスタマイズしてみよう
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。




共有テンプレートの追加

  1. テンプレート
共有テンプレートの追加をしてみましょう。共有テンプレートは、他のブログユーザが登録したテンプレートを利用する機能です。作者へのコメント機能もありますので是非ご利用下さい。作者の励ましにもなります。

左メニュー、デザイン変更内の「テンプレート設定」をクリックします
ショートカットデザイン


 「共有テンプレート」と書かれたタブをクリックし、好きなテンプレートを探します。見つかったらテンプレート名をクリックしましょう

共有てんぷれ一覧


作者名やテンプレート名での検索や、セレクトメニューの選択により、テンプレートの選択がとても簡単にできます。
セレクトメニューでは、新規登録順(登録の新しい順)、ダウンロード順(DLの多い順)、コメント順(コメントの多い順)、最終更新日順(更新順)での表示を選べます。


 テンプレート名をクリックすると詳細が出ます。

共有テンプレ詳細

 
「アクション」の欄の「プレビュー」でサンプルが見れます。
 もしテンプレートが気に入ったら作者の方にお礼や励ましのコメントを残してあげてくださいね!
「アクション」の欄の「ダウンロード」をクリックします。
「テンプレートの設定」画面のリストにテンプレートが追加されています。

トップの画像を変えてみよう

  1. テンプレート
テンプレートを編集して自分だけのオリジナルブログにカスタマイズする事ができます。ここでは基本的な事項についてだけ触れますが、もっと深く細かいところまでカスタマイズするには、HTMLやCSSの知識が必要となります。公式テンプレートや共有テンプレートを見本にしてお好みの画像を入れてみましょう。
------------------------------------------------------------------------------------------------------------------------
プラグインテンプレートをカスタマイズしてみよう
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。
------------------------------------------------------------------------------------------------------------------------

「general_buroguma」の左上の画像を変更してみましょう


画像トップ画像2





左メニュー、デザイン変更内の「テンプレート設定」をクリックします


[general_buroguma]を選んで「修正」します

画像トップ画像3


[general_buroguma]を選んで「修正」リンクをクリックして下さい


HTMLコード内で該当する画像コードを見つけましょう

画像トップ画像4


[general_buroguma]の場合、下記が該当する画像ファイルのコードです。

http://1.dtiblog.com/template/genral_buroguma/image/rotennburo.gif

↑の画像コードをアップロードした画像に差し替えてみましょう
※ショートカットCtrl+Fの検索機能で検索すると簡単に見つけられます。



利用したい画像をアップロードします


トップ画像5




サムネイルをクリックして画像URLをコピーしましょう


トップ画像6





画像URLを書き換えます (サイズもあわせましょう)

トップ画像7

元の画像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"

画像は変更されましたが、タイトルが画像の横になってしまっています

トップ画像7-2





タイトルと説明文の位置を左側に変更してみましょう

トップ画像8



1.タイトル部分をコピーする

下記のコードがタイトルとその説明箇所です。ここをコピーします。 
<td><a href="<%url>"><%blog_name></a><div class="site_intro"><%introduction></div></td>


2.トップ画像の上の位置にタイトル部分のコードをペーストします。


3.コピー元を削除します。




タイトルと説明文を左に移動しました

トップ画像9




記事欄表示位置の変更

  1. テンプレート
ブログの構成は、HTMLとスタイルシートが一体となったものが基本です。ここでは見本のテンプレートを元に投稿欄表示位置を移動させる手順を実際のCSS(スタイルシート)とHTMLを参照しながら解説します。これはあくまでも一例であって、テンプレートによっては構成が違うケースもあります。
------------------------------------------------------------------------------------------------------------------------
プラグインテンプレートをカスタマイズしてみよう
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。
------------------------------------------------------------------------------------------------------------------------
「general_buroguma」の記事投稿欄を左側によせてみましょう









デザイン編集ページでHTML内のCSSを確認しましょう





上記のブログは、「左メニュー」と「右メイン部分」の構成で成り立っている事を理解しましょう。今回は「右メイン部分」=「投稿欄」の幅を左寄せにしたいのでHTML内で「右メイン部分」のコードを探します。

スタイルシートに注目しましょう。
<div id="main'>→これがCSSを指定しているコードになります。これは、mainというIDでブログのレイアウトを指定していると言う意味です。レイアウトや文字の大きさを変更したいときは大抵がCSS(スタイルシート)を変更するだけで大丈夫です。



スタイルシート内でmain部分を見つけます




float部分をleft(左)で指定します。padding(隙間)部分も左から20px(上部)20px(右側)20px(下部)20px(左側)という形で隙間も取っておくと見やすくなります。


更新ボタンを押す(HTML又はスタイルシートどちらのボタンでもOKです)


記事投稿欄が左側に寄りました





サイドバー(サイドカラム)にバナーやブログパーツを入れる

  1. テンプレート
HTMLやスタイルシートに該当するコードを入力することで記事としてだけではなく、ブログのサイドバー(横のカラム)にバナーや画像を入れる事が出来ます。

ここでは、「トクノフミトシ4コマまんがブログパーツ」の設置方法を紹介していますが、他のブログパーツやバナー等も同様の方法で設置することができます。
------------------------------------------------------------------------------------------------------------------------
プラグインテンプレートをご利用の方
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。
------------------------------------------------------------------------------------------------------------------------
<トクノフミトシ4コマまんがブログパーツ>

貼り付けコードはこちらからゲットする事ができます>>


サイドバーにある「プロフィール」の下にブログパーツをいれてみましょう

sidebar1


下記のコードを挿入します

(リンク先の変更等、タグの改変は禁止しております)
<!--▼トクノフミトシ4コマ▼-->

<iframe src="http://blog.dtiblog.com/4koma_blogparts/4koma_random.html" width="170px" height="220px" frameborder="0" scrolling="no" allowtransparency="true" style="border:#999999 1px solid;">

</iframe>

<!--/▲トクノフミトシ4コマ▲-->

HTML内で「プロフィール」部分を見つけます

sidebar3

*管理ページの「デザイン(の編集)」にある「テンプレート設定」のところで、テンプレート名の右にある「修正」をクリックすると、HTML修正画面が出てきます。


ブログパーツのコードをペーストします

sidebar4

ブログパーツの上下のスペースが極端に狭くて見苦しい場合は、ブログパーツコードの上下に<
という改行タグを入れるとスペースが空きます。
ペーストしたら更新ボタンを押しましょう。



ブログパーツ「踊るラブ運試し」がプロフィールの下に表示されました

sidebar5

サイドバーのメニューの変更

  1. テンプレート
サイドバー(横のカラム)のメニュー(プロフィール、カレンダー)などの位置を変更する方法を解説します。
------------------------------------------------------------------------------------------------------------------------
プラグインテンプレートをご利用の方
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。
------------------------------------------------------------------------------------------------------------------------
サイドバーにある「プロフィール」の下にカレンダーを移動してみましょう






HTML内でカレンダーのコードを見つけコピーしましょう




<!--カレンダー--> <!--/カレンダー>部分を見つけます
<!--プロフィール--> <!--/プロフィール>部分を見つけます
※Ctrl+Fの検索機能を利用してカレンダー、プロフィールのキーワードを検索します


HTML内で「プロフィール」部分を見つけます




上下にスペースを設ける為、<br>という改行コードを利用します。


カレンダーのコピー元を消して更新ボタンを押します




下記のようにカレンダーがプロフィールの下に移動されました






デフォルトの文字のサイズを変更

  1. テンプレート
アクセントとして、一部分の文字を装飾する方法は「記事の作成・編集」の章でお話しました。
次は、記事内のデフォルトの文字サイズを変更してみましょう。
記事内の文字は相手が読みやすい大きさとして12pxか14pxかそれ以上が望ましいと言われています。
文字のサイズもテンプレートのレイアウトと同じくスタイルシートで指定してますのでスタイルシート内の文字設定部分を変更します。


現在の文字サイズは12px(ピクセル)です。これを大きくします

文字サイズ1







HTML内で記事内のテキストの指定を確認します

文字サイズ2


< %topentry_body>この部分が記事の内容が反映される場所(変数値)
<class="entry_text"> が記事内の文字の装飾を決定していることがわかります。




スタイルシート内で「entry_text」を見つけます

文字サイズ3


文字の大きさ指定(font-size)は、12px(ピクセル)になっていますのでこれを14pxに変更します。
entry_text a{ font-size〜は、entry_text で指定されている箇所の文字がリンクの場合のサイズを決定しています。

混乱を避けるため、上記2つとも同じサイズで統一することをお勧めします。




文字サイズを変更して更新ボタンを押します




ブログを確認すると下記のように文字サイズの変更が反映されています

文字サイズ4



共有テンプレートを応募

  1. テンプレート
オリジナルのテンプレートの作成ができたら、共有テンプレートとして応募してみましょう。認証後、あなたが作ったテンプレートデザインを他のユーザーも使えるようになります。

まず、ご自分のブログ内でオリジナルのテンプレートを作成しておいてください。さらに、テンプレートのイメージ図のサムネイルを20kb以内で作成しておいてください。

管理画面左メニューの「デザイン」より「テンプレート応募」へすすむ。


応募したいテンプレートを選択します
応募1



応募したいテンプレート名を選択してください。
※名前を決めるときは、テンプレートの雰囲気が伝わるものを使うことをお勧めします。


テンプレートの説明文を作成します

応募2


全角100文字以内であなたのテンプレートをユーザーの方々に紹介しましょう。



サムネイル画像を選択します

応募3


説明文作成後、ここでテンプレートの応募ボタンをクリックして終了です。その際、20KB以上のサムネイル画像はご使用いただけませんのご注意ください。




登録したテンプレート一覧を確認します

応募4


ここでは応募したテンプレートの状況が一覧表示されていますので、応募を試みたテンプレートの状況を確認できます。


DTIブログの広告枠について

  1. テンプレート
皆さんのブログには、当DTIブログが設けているDTIブログの広告枠があります。これは、お使いのテンプレートによりますが、必ず左右どちらかのカラム内か、下のフッター内にあります。


ad

(ジャンルやテンプレートにより若干異なります)

DTIブログの広告
DTIブログのページトップに飛びます。

現在おすすめのサイトや企画です


このブログを通報
閲覧しているブログが、ワンクリ詐欺等の違反行為やDTIブログの利用規約に違反しているのを発見した時にDTIブログ管理者に通報することができます。

「ガールズルーム」の広告
女の子のための情報ページ「ガールズルーム」の広告です。

「チャンプdeGOGO」のテキスト広告
ランキングサイト「チャンプdeGOGO」のテキスト広告です。

これらの広告は、テンプレートのHTML内に < %ad> < %ad2>のタグで組み込まれていて、DTIブログをご利用頂く上で非表示・削除は不可になっています。上記のタグを削除した場合、ブログが表示されなくなります。

また、広告タグをブラウザー上で非表示にする行為は禁止しております。ブログのメインページとなるページにDTIブログの広告が表示されていない場合は、予告なしにアカウントを停止致します。


*ユーザー側で用意する広告の掲載については、違法行為でない限り、ご利用自由となっております。 ただし、グーグル・アドセンスに関しては、現在のところご利用いただけない状態になっております。

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