IBA Template Manual

「IBA テンプレート設定マニュアル」 忍者ブログ編

1
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 All Rights Reserved

「IBA Template Manual」並びに、それに付属するテンプレート設定ファイルは、著作権

法で、保護されている著作物です。

「IBA Template Manual」並びに、それに付属するテンプレート設定ファイルの使用に関

しては、以下の点にご注意ください。

「IBA Template Manual」並びに、それに付属するテンプレート設定ファイルの著作権は、

著者である、インターネットビジネスアソシエイツ株式会社に属します。

著作権者の事前許可を得ずにして、レポートの一部または全部を、あらゆるデータ蓄積手
段（印刷物、ビデオ、テープレコーダーおよび電子メディア、インターネット等）により複製および
転載することを禁じます。なおオークションを含む、一切の転売行為もかたく禁じます。以上に
記載した行為により著作権者が不利益を被ったと判断した場合、該当する行為を行った者
に対し、著作権法等、関係法規に基づく手続きにより法的手段により損害賠償請求などを
行う場合があることを御了承ください。

「IBA Template Manual」で取り上げられた情報は、作成された時点での著者の見解

であります。状況の変化に応じて、著者は、このレポートで表示した見解とは異なる見解を
新しい変化に応じての表現を行う権利を有しています。

このレポートに関しては、適切かつ信頼に足る情報を提供しておりますが、いかなる誤り・不
正確・不作為に対して著者・出版元・アフィリエイトパートナーなどに代表される業務提携者
は一切責任をおうものではないことを御了承ください。

また、法律、その他の分野に関しての専門的なアドヴァイスを与えかねること、利益や特定の
目的に対する適合性を保障しかねること、このレポートを使用することによって生じた、いかな
る結果に対しても責任を負わないことも御了承ください。

2
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 忍者ブログのアカウント開設

▼忍者ブログ
http://blog.ninja.co.jp/

まず、はじめに、忍者ブログという無料ブログサービスを使って、ブログを開設する手順
を説明いたします。

http://blog.ninja.co.jp/ にアクセスして、画面右側の「新規ユーザー登録」をクリックし
ます。

▼参考リンク「NINJA TOOLS ヘルプ 新規登録の仕方」

http://www.ninja.co.jp/help/general/entry.html

3
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
「新規ユーザー登録」をクリックします。

続いて、メールアドレス、パスワードを入力して、
「この内容で送信する」をクリックしま
す。

4
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
続いて、このような画面が表示されます。この画面が表示されたら、さきほど入力したメ
「NINJA TOOLS ユーザー登録のご案内」が送られていますので、次
ールアドレス宛に、
は、そのメールを確認します。

5
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
続いて、
「NINJA TOOLS ユーザー登録のご案内」というメールが届いていたら、
そのメールの本文中の「◆本登録のＵＲＬ」をクリックします。

6
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
必要事項を入力したら、
「確認画面へ」をクリックします。

7
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
間違いがなければ、
「ユーザー登録を確定する」をクリックします。

8
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
以上で、NINJA TOOLS のユーザー登録作業は完了です。
続いて、「管理ページへログインする」をクリックして、管理ページへログインします。

9
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
管理ページにログインしたら、
「忍者ブログ作成」をクリックします。

▼参考リンク「NINJA TOOLS ヘルプ ツールのレンタル」

http://www.ninja.co.jp/help/general/rental.html

10
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
必要事項を入力したら、
「作成する」をクリックします。

11
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
間違いがなければ、
「この情報でツールを作成する」をクリックします。

12
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
続いて、上記の図の赤枠で囲った「ツールの名前」の部分をクリックします。

13
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
以上の作業で、まずは、忍者ブログが使えるようになりました。

続いて、テンプレートの設定作業について、ご説明いたします。

14
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 設定ファイルをダウンロードする

まず、このマニュアルをダウンロードしたページから、設定ファイルを、ダウンロードし
ます。

「shinobi-parts.zip」という名前の zip ファイルがダウンロードされますので、

まずは、あなたのパソコンに保存してください。

15
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
あなたのパソコンのデスクトップなどに、いったん保存した「shinobi-parts.zip」ファイル
を、続いて、＋Lhaca などの解凍ソフトを使って、解凍します。

▼参考リンク 圧縮解凍ソフトについての動画解説マニュアル
http://movie-repo.com/movie/lacha/lacha.html

解凍を行ったら、続いて、
「shinobi-parts」フォルダの中身を確認します。

「shinobi-parts」フォルダには、上の図のように、まずは、
「b」フォルダ、
「d」フォルダ、
「p」フォルダの３つのフォルダと、「CSS.txt」、「HTML.txt」という２つのテキストファ
イルが入っています。

16
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 テンプレートを構成する画像ファイルをアップロードする

続いて、今回のテンプレートを構成する画像ファイルをアップロードします。

まず、管理画面の「ファイルアップロード」をクリックします。

▼参考リンク 忍者ブログマニュアル／ファイルアップロード
http://www.ninja.co.jp/manual/blog/manual095.html

17
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
ファイルアップロードの画面の「参照」ボタンをクリックします。

18
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
今回、アップロードする画像は、さきほどダウンロードした「shinobi-parts」フォルダの
中の「b」フォルダ、「d」フォルダ、
「p」フォルダのいずれかから選択します。

今回は、ブルーを基調としたテンプレートを例にあげて、設定方法を説明いたしますので、
まずは、「b」フォルダの中から、アップロードする画像を選択します。

【注】今回提供させていただいている
忍者ブログテンプレートは、
右の図のように、上から、
ブルー、ピンク、ダークの
3 色のテンプレートを、
ご用意しております。

それぞれ、
「b」フォルダには、
ブルーのテンプレートの
素材画像

「p」フォルダには、
ピンクのテンプレートの
素材画像

「d」フォルダには、
ダークのテンプレートの
素材画像が入っています

19
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
「b」フォルダに入っている、「bg.gif」、
「bottom.gif」、「main.gif」、「menu.gif」、
「top.gif」という５つの画像ファイルを、順番に、ひとつづつ、すべてアップロードします。

20
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
５つの画像ファイルのアップロードが終わったら、続いて、それぞれの画像のアップロー
ド先のＵＲＬを、メモ帳や、TeraPad などのテキストエディッタにメモしておきます。

そのために、まず、上記の図の「記事を書く」という部分をクリックします。

21
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
続いて、この画面が表示されたら、
「簡素版のエディタに変更」をクリックします。

22
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
上の図の赤枠で囲んだ部分が、アップロードした画像のＵＲＬとなりますので、
それをいったん、テキストエディッタにコピーして、わかるようにしておきます。

23
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
画像のＵＲＬをコピーし終わったら、再度、
「ファイルアップロード」をクリックして、
ファイルアップロード画面に戻り、同じ要領で、上から順番に、
「記事を書く」をクリック
しながら、アップロードした画像、すべてのＵＲＬをコピーしていきます。

24
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
このように、５つの画像ファイルのＵＲＬを取得できれば、テンプレートを構成する画像
ファイルのアップロード作業は終了です。

これらのＵＲＬは、のちほど、ＣＳＳの設定のときに使いますので、まずは、しっかりと、
あとからでもわかるようにしておきましょう。

25
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 バナー画像ファイルのダウンロードとアップロード

続いて、お使いいただくバナー画像を、まずは、あなたのパソコンにダウンロードします。

使用したいジャンルを、お選びいただき、「このデザインを見る」をクリックします。

26
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
今回は、ブルーのテンプレートを使う場合を想定して、「b」フォルダの中に入っていた画
像ファイルをアップロードしましたので、バナー画像も、まず「Blue」をクリックして、
ブルーのテンプレートに適合するバナー画像をダウンロードします。

27
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
今回の例では、
「b_b.zip」というファイルがダウンロードされました。
これを、さきほどと同じ要領で、まずは解凍します。

ファイルを解凍すると、このように、バナー画像が入っておりますので、
続いて、さきほどと同じ要領で、忍者ブログの管理画面から、使いたいバナー画像を
アップロードします。

28
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
バナー画像のＵＲＬも、のちほど使いますので、しっかりと、わかるようにしておきまし
ょう。

29
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 ＨＴＭＬとＣＳＳの設定

続いて、ＨＴＭＬとＣＳＳの設定を行います。

まずは、管理画面の「テンプレート設定／編集」をクリックします。

続いて、「修正」をクリックします。

30
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
すると、このような画面が、新しく表示されます。

ＣＳＳとＨＴＭＬの設定には、最初にダウンロードした「shinobi-parts」フォルダの中の
「CSS.txt」ファイルと、
「HTML.txt」ファイルを使用します。

「HTML.txt」ファイルを、メモ帳や TeraPad などのテキストエディタで開きます。

まずは、

31
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
HTML の設定に関しては、上記の図のように、管理画面の右上の赤枠で囲んだ部分に書か
れている構文と、「HTML.txt」の中に書かれている構文を、そっくりそのまま入れ替える
作業を行います。

32
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
まず、
「HTML.txt」を開いて、
「すべて選択」を選びます。

33
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
「すべて選択」された状態で、続いて、それを「コピー」します。

34
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
続いて、管理画面の上の構文が書かれている部分で、「すべて選択」を選択します。

35
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
続いて、すべて選択された状態で、さきほどコピーした「HTML.txt」を「貼り付け」ます。

36
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
貼り付けが、無事、終わったら、続いて、ＣＳＳの設定を行います。

37
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
CSS の設定に関しても、HTML の設定と同じ要領で、上記の図のように、管理画面の右下
の赤枠で囲んだ部分に書かれている構文と、「CSS.txt」の中に書かれている構文を、そっ
くりそのまま入れ替える作業を行います。

38
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
CSS の部分の入れ替えが終わったら、続いて、入れ替えた CSS に、画像のＵＲＬを指定す
る作業を行います。まずは、黒丸で囲んだスクロールバーを使い、CSS の一番上の部分を
表示します。

39
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
スクロールさせて、入れ替えたＣＳＳを見てみると、上記の図のように、
（※ここにバナー画像のＵＲＬが入ります※）とか、（※ここに、bg.gif で終わる画像のＵ
ＲＬが入ります※）というようなところが、数か所あります。

この部分に、さきほどアップロードした画像のＵＲＬを、それぞれ該当する部分に、入れ
込んでいきます。

40
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 41
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
 42
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
（※ここに、bg.gif で終わる画像のＵＲＬが入ります※）という部分には、
上記の図のように、bg.gif で終わるＵＲＬを入れ込みます。

43
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
その他にも、ＣＳＳの部分をスクロールさせていくと、bg.gif 以外にも、
（※ここに、menu.gif で終わる画像のＵＲＬが入ります※）というように、
アップロードした画像のＵＲＬを指定する部分が、数か所ありますので、
該当するものを、それぞれ入れ込んでいきます。

44
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
ＣＳＳへのアップロードした画像の指定が、すべて終了したら、
画面左上の「テンプレート保存」をクリックして設定の保存を行います。

45
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp
以上の作業で、テンプレートの設定作業は終了です。
管理画面にて、
「ブログトップ」をクリックして、しっかりと設定できているか確認されて
みてください。

しっかりと設定が行えていれば、このような感じで、ブログができあがります。

ご精読ありがとうございました。
今後とも、どうぞ宜しくお願いいたします。

46
（C）2008 インターネットビジネスアソシエイツ株式会社
http://internet-biz.jp