Jug Em
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Jug Em as PDF for free.
More details
- Words: 494
- Pages: 50
IBA Template Manual 「IBA テンプレート設定マニュアル」 JUGEM ブログ編
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
JUGEM ブログのアカウント開設
▼無料ブログサービス「JUGEM」 http://jugem.jp/ まず、はじめに、JUGEM ブログという無料ブログサービスを使って、ブログを開設する 手順を説明いたします。 http://jugem.jp/ にアクセスして、画面左側の「無料ブログ作成」をクリックします。
3 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
次に、上図のように、メールアドレスを入力して「確認メール送信」をクリックします。
4 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、入力したメールアドレスに届いているメールを確認して、メールに記載されてい るＵＲＬをクリックします。 5 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、作成するブログのタイトル、そのブログのアドレス（ＵＲＬ）の一部となるサブ ドメインを入力して、「利用規約に同意する」にチェックを入れます。 (ブログのタイトルは、あとからでも自由に変更できるので、ここで、よいタイトルが思い つかない場合は、まずは適当につけておきましょう。)
▼参考リンク サブドメインとは？【ＩＴ用語辞典】 http://e-words.jp/w/E382B5E38396E38389E383A1E382A4E383B3.html 6 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、 「JugemKey」への登録に必要な情報を入力して、 「利用規約に同意する」にチェッ クをいれ、 「登録内容を確認する」をクリックします。 ▼参考リンク JugemKey について http://jugemkey.jp/ 7 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
登録情報を確認して間違いが無ければ、 「上記内容で申し込む」をクリックします。
8 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
以上で、ユーザー登録は完了です。続いて、ブログ作成管理画面にログインします。
9 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
まず「JUGEM」のトップページ http://jugem.jp/ にアクセスして、図の赤枠で囲んだ部 分に「JugemKeyID」と「パスワード」を入力して、「ログイン」をクリックします。
10 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、「管理者ページトップ」をクリックすると、管理者ページのトップページが表示さ れます。
11 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
なお、管理者ページのトップページの左上にある「ブログを確認する」をクリックすると、 今回、作成したブログが確認できます。
12 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
▼JUGEM オンラインマニュアル http://jugem.jp/manual/ 以上の作業で、まずは、無料ブログサービス「JUGEM」で、あなたのブログが開設されま した。このあと、実際に記事を書いたりというような操作方法については、まずは上記の 「JUGEM オンラインマニュアル」を参考にされてください。 今回、はじめてブログを作成されたのであれば、まずは 5 記事、6 記事と、あくまでも操作 に慣れる練習のつもりで記事を書いてみるとよいと思います。 13 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
設定ファイルをダウンロードする
続いて、まず、このマニュアルをダウンロードしたページから、設定ファイルを、ダウン ロードします。
「parts.zip」という名前の zip ファイルがダウンロードされますので、 まずは、あなたのパソコンに保存してください。
14 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
あなたのパソコンのデスクトップなどに、いったん保存した「parts.zip」ファイルを、続 いて、＋Lhaca などの解凍ソフトを使って、解凍します。
▼参考リンク 圧縮解凍ソフトについての動画解説マニュアル http://movie-repo.com/movie/lacha/lacha.html
解凍を行ったら、続いて、 「parts」フォルダの中身を確認します。
「parts」フォルダには、上の図のように、まずは、「jugem-css.txt」、「jugem-html.txt」 という２つのテキストファイルと、 「side.jpg」という画像ファイルが入っています。
15 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
テンプレートを構成する画像ファイルをアップロードする
続いて、今回のテンプレートを構成する画像ファイルをアップロードします。 まず、管理画面の「画像の管理」をクリックします。
▼JUGEM オンラインマニュアル／「画像をアップする」 http://jugem.jp/manual/manual.php?mode=b03_01 16 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
画像管理の画面の「画像のアップロード」の部分の「参照」ボタンをクリックします。
今回、アップロードする画像は、さきほどダウンロードした「parts」フォルダの中の 「side.jpg」ファイルとなりますので、そちらを選択します。
17 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ファイルを選択したら、 「アップロード」をクリックします。
画像ファイルのアップロードが終わると、このように、その画像のＵＲＬが表示されます。
18 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、「parts」フォルダの中から、今度は、「jugem-css.text」ファイルを、TeraPad な どのテキストエディッタで開きます。 19 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、「jugem-css.text」の中の「ここに[side.jpg]をアップロードしたＵＲＬ」という部 分に、先ほどアップロードした画像のＵＲＬをコピーして貼り付けます。
20 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
貼り付け終わると、このようになります。 続いて、「ここに[バナー画像]をアップロードしたＵＲＬ」という部分に、同じように、バ ナー画像のＵＲＬを貼り付けるために、まずは、バナー画像をダウンロードします。
21 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
バナー画像ファイルのダウンロードとアップロード
続いて、お使いいただくバナー画像を、まずは、あなたのパソコンにダウンロードします。 使用したいジャンルを、お選びいただき、「このデザインを見る」をクリックします。
22 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
使用したいバナー画像を選び、 「ダウンロード」をクリックします。
23 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
今回の例では、 「a_p.zip」というファイルがダウンロードされました。 これを、さきほどと同じ要領で、まずは解凍します。
ファイルを解凍すると、このように、バナー画像が入っておりますので、 続いて、さきほどと同じ要領で、JUGEM ブログの管理画面から、使いたいバナー画像を アップロードします。
24 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、 「jugem-css.text」の中の「ここに[バナー画像]をアップロードしたＵＲＬ」という 部分に、先ほどアップロードしたバナー画像のＵＲＬをコピーして貼り付けます。
25 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
貼り付け終わると、このようになります。 続いて、この「jugem-css.text」と、もうひとつ「jugem-html.text」を使って、ＨＴＭL とＣＳＳの設定を行います。
26 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ＨＴＭＬとＣＳＳの設定
続いて、ＨＴＭＬとＣＳＳの設定を行います。 まずは、管理画面の「テンプレートの編集」をクリックします。
27 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
すると、このような画面が表示されます。
28 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ＣＳＳとＨＴＭＬの設定には、最初にダウンロードした「parts」フォルダの中の 「jugem-css.txt」ファイルと、 「jugem-html.txt」ファイルを使用します。 まずは、さきほどから使用している「jugem-css.txt」ファイルの中身を、すべて選択し、 コピーします。
29 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
CSS の設定に関しては、上記の図のように、管理画面の右下にある赤枠で囲んだ「CSS 編 集フォーム」の部分に書かれている構文と、「jugem-css.txt」の中に書かれている構文を、 そっくりそのまま入れ替える作業を行います。
30 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
まず、 「jugem-css.txt」を開いた状態で、 「すべて選択」を選びます。
31 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
「すべて選択」された状態で、続いて、それを「コピー」します。
32 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、管理画面の「CSS 編集フォーム」の中の構文が書かれている部分で、 「すべて選択」 を選択します。
33 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、すべて選択された状態で、さきほどコピーした「jugem-css.txt」を「貼り付け」 ます。
34 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
貼り付けが、無事、終わったら、続いて、HTML の設定を行います。
35 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
HTML の設定に関しても、CSS の設定と同じ要領で、上記の図のように、管理画面の赤枠 で囲んだ「HTML 編集フォーム」という部分に書かれている構文と、 「jugem-html.txt」の 中に書かれている構文を、そっくりそのまま入れ替える作業を行います。 36 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
HTML の部分の入れ替えが終わったら、「テンプレートを更新する」をクリックします。
37 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
以上の作業で、テンプレートの設定作業は終了です。 管理画面にて、 「ブログを確認する」をクリックして、しっかりと設定できているか確認さ れてみてください。
しっかりと設定が行えていれば、このような感じで、ブログができあがります。 38 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を移動させる
今回、例にあげたバナー画像だと、図のように、タイトル文字と背景の色が同色なので、 非常に見えにくい状態です。 こういった場合は、管理画面の「CSS 編集フォーム」の CSS の数値を変更して、 タイトル文字を移動させることができます。
39 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を移動させるには、 「CSS 編集フォーム」の中に書かれた CSS の「.site_title」 という部分の「padding」の「20px 0px 10px 20px」という数値を増やしたり減らしたりし て移動させます。
40 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を、上から下に移動させたい場合は、padding: 20px 0px 10px 20px というよ うに並んでいる数字の一番左側の数字を増やします。
41 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
padding: 20px 0px 10px 20px を、padding: 100px 0px 10px 20px に変更すると、 図のように、タイトル文字が移動し、見えやすくなりました。
42 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を、左から右に移動させたい場合は、padding: 100px 0px 10px 20px という ように並んでいる数字の一番右側の数字を増やします。
43 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
padding: 100px 0px 10px 20px を、padding: 100px 0px 10px 520px に変更すると、 図のように、左から右にタイトル文字が移動します。
そして、さきほどの図の黒丸で囲んだ「説明文」を動かすためには、 「.description」の部分に書かれている数値を変えて動かしていきます。
44 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ブログの説明文が表示される部分を、左から右に移動させたい場合は、さきほどと同じ要 領で、padding: 0px 20px 0px 20px というように並んでいる数字の一番右側の数字を増や します。
45 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
padding: 0px 20px 0px 20px を、padding: 0px 20px 0px 520px に変更すると、 図のように、左から右に説明文が移動します。
46 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字の色を変える
タイトル文字の文字色を変更するには、まずタイトル文字のリンク色を表す、CSS の 「.site_title a」という部分と。「.site_title」の部分の「color」という部分に書かれている 「#000」で表わされているカラーコードの数字を全て変えてあげれば、変更されます。 47 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
初期設定では、黒色を表す#000 が設定されていましたが、それを白色を表す#fff に設定し なおすと、タイトル文字が白色に変わります。
48 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
説明文の文字色を変更するには、上の図の赤枠で囲んだ部分を変更します。
49 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
以上、テンプレートの設定作業についてでした。 ご精読ありがとうございました。 なお、今回、説明した JUGEM でのカスタマイズ方法を、もっと詳しく知りたい方は、以 下の参考リンクで紹介しているページなどをご覧いただければ宜しいかと思います。
▼参考リンク Jugem 独自タグについて http://jugem.jp/manual/manual.php?mode=r01 カラーコード表 http://jugem.jp/manual/manual.php?mode=r02 CSS とは http://jugem.jp/manual/manual.php?mode=css01 50 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
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
JUGEM ブログのアカウント開設
▼無料ブログサービス「JUGEM」 http://jugem.jp/ まず、はじめに、JUGEM ブログという無料ブログサービスを使って、ブログを開設する 手順を説明いたします。 http://jugem.jp/ にアクセスして、画面左側の「無料ブログ作成」をクリックします。
3 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
次に、上図のように、メールアドレスを入力して「確認メール送信」をクリックします。
4 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、入力したメールアドレスに届いているメールを確認して、メールに記載されてい るＵＲＬをクリックします。 5 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、作成するブログのタイトル、そのブログのアドレス（ＵＲＬ）の一部となるサブ ドメインを入力して、「利用規約に同意する」にチェックを入れます。 (ブログのタイトルは、あとからでも自由に変更できるので、ここで、よいタイトルが思い つかない場合は、まずは適当につけておきましょう。)
▼参考リンク サブドメインとは？【ＩＴ用語辞典】 http://e-words.jp/w/E382B5E38396E38389E383A1E382A4E383B3.html 6 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、 「JugemKey」への登録に必要な情報を入力して、 「利用規約に同意する」にチェッ クをいれ、 「登録内容を確認する」をクリックします。 ▼参考リンク JugemKey について http://jugemkey.jp/ 7 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
登録情報を確認して間違いが無ければ、 「上記内容で申し込む」をクリックします。
8 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
以上で、ユーザー登録は完了です。続いて、ブログ作成管理画面にログインします。
9 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
まず「JUGEM」のトップページ http://jugem.jp/ にアクセスして、図の赤枠で囲んだ部 分に「JugemKeyID」と「パスワード」を入力して、「ログイン」をクリックします。
10 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、「管理者ページトップ」をクリックすると、管理者ページのトップページが表示さ れます。
11 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
なお、管理者ページのトップページの左上にある「ブログを確認する」をクリックすると、 今回、作成したブログが確認できます。
12 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
▼JUGEM オンラインマニュアル http://jugem.jp/manual/ 以上の作業で、まずは、無料ブログサービス「JUGEM」で、あなたのブログが開設されま した。このあと、実際に記事を書いたりというような操作方法については、まずは上記の 「JUGEM オンラインマニュアル」を参考にされてください。 今回、はじめてブログを作成されたのであれば、まずは 5 記事、6 記事と、あくまでも操作 に慣れる練習のつもりで記事を書いてみるとよいと思います。 13 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
設定ファイルをダウンロードする
続いて、まず、このマニュアルをダウンロードしたページから、設定ファイルを、ダウン ロードします。
「parts.zip」という名前の zip ファイルがダウンロードされますので、 まずは、あなたのパソコンに保存してください。
14 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
あなたのパソコンのデスクトップなどに、いったん保存した「parts.zip」ファイルを、続 いて、＋Lhaca などの解凍ソフトを使って、解凍します。
▼参考リンク 圧縮解凍ソフトについての動画解説マニュアル http://movie-repo.com/movie/lacha/lacha.html
解凍を行ったら、続いて、 「parts」フォルダの中身を確認します。
「parts」フォルダには、上の図のように、まずは、「jugem-css.txt」、「jugem-html.txt」 という２つのテキストファイルと、 「side.jpg」という画像ファイルが入っています。
15 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
テンプレートを構成する画像ファイルをアップロードする
続いて、今回のテンプレートを構成する画像ファイルをアップロードします。 まず、管理画面の「画像の管理」をクリックします。
▼JUGEM オンラインマニュアル／「画像をアップする」 http://jugem.jp/manual/manual.php?mode=b03_01 16 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
画像管理の画面の「画像のアップロード」の部分の「参照」ボタンをクリックします。
今回、アップロードする画像は、さきほどダウンロードした「parts」フォルダの中の 「side.jpg」ファイルとなりますので、そちらを選択します。
17 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ファイルを選択したら、 「アップロード」をクリックします。
画像ファイルのアップロードが終わると、このように、その画像のＵＲＬが表示されます。
18 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、「parts」フォルダの中から、今度は、「jugem-css.text」ファイルを、TeraPad な どのテキストエディッタで開きます。 19 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、「jugem-css.text」の中の「ここに[side.jpg]をアップロードしたＵＲＬ」という部 分に、先ほどアップロードした画像のＵＲＬをコピーして貼り付けます。
20 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
貼り付け終わると、このようになります。 続いて、「ここに[バナー画像]をアップロードしたＵＲＬ」という部分に、同じように、バ ナー画像のＵＲＬを貼り付けるために、まずは、バナー画像をダウンロードします。
21 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
バナー画像ファイルのダウンロードとアップロード
続いて、お使いいただくバナー画像を、まずは、あなたのパソコンにダウンロードします。 使用したいジャンルを、お選びいただき、「このデザインを見る」をクリックします。
22 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
使用したいバナー画像を選び、 「ダウンロード」をクリックします。
23 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
今回の例では、 「a_p.zip」というファイルがダウンロードされました。 これを、さきほどと同じ要領で、まずは解凍します。
ファイルを解凍すると、このように、バナー画像が入っておりますので、 続いて、さきほどと同じ要領で、JUGEM ブログの管理画面から、使いたいバナー画像を アップロードします。
24 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、 「jugem-css.text」の中の「ここに[バナー画像]をアップロードしたＵＲＬ」という 部分に、先ほどアップロードしたバナー画像のＵＲＬをコピーして貼り付けます。
25 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
貼り付け終わると、このようになります。 続いて、この「jugem-css.text」と、もうひとつ「jugem-html.text」を使って、ＨＴＭL とＣＳＳの設定を行います。
26 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ＨＴＭＬとＣＳＳの設定
続いて、ＨＴＭＬとＣＳＳの設定を行います。 まずは、管理画面の「テンプレートの編集」をクリックします。
27 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
すると、このような画面が表示されます。
28 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ＣＳＳとＨＴＭＬの設定には、最初にダウンロードした「parts」フォルダの中の 「jugem-css.txt」ファイルと、 「jugem-html.txt」ファイルを使用します。 まずは、さきほどから使用している「jugem-css.txt」ファイルの中身を、すべて選択し、 コピーします。
29 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
CSS の設定に関しては、上記の図のように、管理画面の右下にある赤枠で囲んだ「CSS 編 集フォーム」の部分に書かれている構文と、「jugem-css.txt」の中に書かれている構文を、 そっくりそのまま入れ替える作業を行います。
30 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
まず、 「jugem-css.txt」を開いた状態で、 「すべて選択」を選びます。
31 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
「すべて選択」された状態で、続いて、それを「コピー」します。
32 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、管理画面の「CSS 編集フォーム」の中の構文が書かれている部分で、 「すべて選択」 を選択します。
33 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
続いて、すべて選択された状態で、さきほどコピーした「jugem-css.txt」を「貼り付け」 ます。
34 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
貼り付けが、無事、終わったら、続いて、HTML の設定を行います。
35 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
HTML の設定に関しても、CSS の設定と同じ要領で、上記の図のように、管理画面の赤枠 で囲んだ「HTML 編集フォーム」という部分に書かれている構文と、 「jugem-html.txt」の 中に書かれている構文を、そっくりそのまま入れ替える作業を行います。 36 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
HTML の部分の入れ替えが終わったら、「テンプレートを更新する」をクリックします。
37 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
以上の作業で、テンプレートの設定作業は終了です。 管理画面にて、 「ブログを確認する」をクリックして、しっかりと設定できているか確認さ れてみてください。
しっかりと設定が行えていれば、このような感じで、ブログができあがります。 38 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を移動させる
今回、例にあげたバナー画像だと、図のように、タイトル文字と背景の色が同色なので、 非常に見えにくい状態です。 こういった場合は、管理画面の「CSS 編集フォーム」の CSS の数値を変更して、 タイトル文字を移動させることができます。
39 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を移動させるには、 「CSS 編集フォーム」の中に書かれた CSS の「.site_title」 という部分の「padding」の「20px 0px 10px 20px」という数値を増やしたり減らしたりし て移動させます。
40 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を、上から下に移動させたい場合は、padding: 20px 0px 10px 20px というよ うに並んでいる数字の一番左側の数字を増やします。
41 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
padding: 20px 0px 10px 20px を、padding: 100px 0px 10px 20px に変更すると、 図のように、タイトル文字が移動し、見えやすくなりました。
42 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字を、左から右に移動させたい場合は、padding: 100px 0px 10px 20px という ように並んでいる数字の一番右側の数字を増やします。
43 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
padding: 100px 0px 10px 20px を、padding: 100px 0px 10px 520px に変更すると、 図のように、左から右にタイトル文字が移動します。
そして、さきほどの図の黒丸で囲んだ「説明文」を動かすためには、 「.description」の部分に書かれている数値を変えて動かしていきます。
44 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
ブログの説明文が表示される部分を、左から右に移動させたい場合は、さきほどと同じ要 領で、padding: 0px 20px 0px 20px というように並んでいる数字の一番右側の数字を増や します。
45 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
padding: 0px 20px 0px 20px を、padding: 0px 20px 0px 520px に変更すると、 図のように、左から右に説明文が移動します。
46 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
タイトル文字の色を変える
タイトル文字の文字色を変更するには、まずタイトル文字のリンク色を表す、CSS の 「.site_title a」という部分と。「.site_title」の部分の「color」という部分に書かれている 「#000」で表わされているカラーコードの数字を全て変えてあげれば、変更されます。 47 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
初期設定では、黒色を表す#000 が設定されていましたが、それを白色を表す#fff に設定し なおすと、タイトル文字が白色に変わります。
48 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
説明文の文字色を変更するには、上の図の赤枠で囲んだ部分を変更します。
49 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
以上、テンプレートの設定作業についてでした。 ご精読ありがとうございました。 なお、今回、説明した JUGEM でのカスタマイズ方法を、もっと詳しく知りたい方は、以 下の参考リンクで紹介しているページなどをご覧いただければ宜しいかと思います。
▼参考リンク Jugem 独自タグについて http://jugem.jp/manual/manual.php?mode=r01 カラーコード表 http://jugem.jp/manual/manual.php?mode=r02 CSS とは http://jugem.jp/manual/manual.php?mode=css01 50 （C）2008 インターネットビジネスアソシエイツ株式会社 http://internet-biz.jp
Related Documents
Jug Em
December 2019 15
Water Jug Problem
June 2020 3
Violences Con Jug Ales
November 2019 9
Dan Sinha Water Jug
April 2020 3
Em
October 2019 30
