canpan...

-----------------------------------------------------------------------

生野区まちづくりセンター支部

大阪市生野区勝山南 3-1-19（生野区役所 4階）

TEL: 06‐6711‐0888 FAX: 06‐6711‐0991

Mail: [email protected]

-----------------------------------------------------------------------

中級編 CANPANブログ基礎マニュアル

1

①デザインを変える

現在お使いのブログのデザインを変更してみましょう。

ブログ管理画面の「スキンサイドバー」をクリックしてください。

下のような画面になったら「デザイン一覧」をクリックしてください。

ここをクリック


2

次に「一覧からデザインを追加する」をクリックしてください。

すると、デザインの一覧がでてくるので、好きなデザインの「追加する」をク

リックしてください。



3

デザイン一覧の中には、好きな写真をブログのデザインとして使えるモノもありま

す。「画像変更可能」ができるデザインを選んでください。

画像変更可能のデザインを選び「追加する」をクリックしてください。

「カスタムスキン１、２、３」のデザインは好きな

画像をブログのデザインとして使えます。

4

デザインを追加できたら・・・

次に「スキンサイドバー」の「 HTML 」をクリックしてください。

すると下のような画面になります。そしたら、画像変更可能のデザイン（ここでは

カスタムスキン３）の HTML名をクリックしてください。


名前をクリック

5

すると・・・下の画面になります。

ここで「カスタムヘッダー画像登録・削除」をクリックしてください。

ここでは、「 HTML 」を変更しないでください。もし、変更してしまった場合は、

「初期値に戻す」のチェックボックスにチェックし、「保存」をクリックし

てください。


もし HTMLをいじってしまい、デザインを壊して

しまった場合は「初期値に戻す」のチェッ

クボックスにチェックし、「保存」をクリッ

クしてください。

ここはいじらないようにしてください。

デザインが崩れます。

6

「参照」をクリックし、好きな画像をご自身のパソコンのデーターから選んで

ください。そして「設定」をクリック

ここで注意すべき点は画像の大きさ！画像の大きさは、横幅 750ピクセル、縦幅 200ピクセル以内にしてください。

画像が大きすぎると、レイアウトが崩れます。

では、どのようにして画像の大きさを変更するのか？ご自身のパソコン上にある画像データーを右クリックしてください。

そして「プログラムから開く」をクリックし「 Microsoft Office 2010 」

(お使いのパソコンによっては、Microsoft Office 2007 などバージョンによって数

字が違いますが、基本的な使い方は同じです)をクリックしてください。プログラム

が開いたら、次に「画像の編集」をクリックしてください。

①画像選びのクリック

②画像を選んだらクリック


7

そして「サイズ変更」をクリックしてください。

「定義済みのサイズ」もしくは「ユーザー設定のサイズ」で画像の大きさ

を調整して、調整し終わった画像を「保存」もしくは「上書き保存」をし

たら完了です。


「定義済みのサイズ」

「ユーザー設定のサイズ」

どちらかで編集してください。

8

②ツールチップ

ツールチップとは？

ユーザーがカーソル（パソコンのマウスポインタ）をブログの画面上で何かの項目

（文字や画像）に合わせたとき、小さな枠が出現し、その枠内には選択された項目

に関するコメントが下の画面のように表示されます。また、その選択された項目を

クリックすると、他のリンクに飛ばすことが出来ます。

上の画面上にある「ツールチップ」にカーソルを合わせると小さな枠内に

「このカテゴリーのトップへジャンプします」という情報がでてきます。

そして、「ツールチップ」をクリックすると他のリンクに飛ばす事が出来ます。

この作業を行うには… 以下のタグ（定められた特殊な記法により文書に埋め込む形

で記述される付加情報）を挿入する必要があります。

<a href="index.html" title="このカテゴリーのトップへジャンプします">ツールチップ</a>

①"index.html"

②"このカテゴリーのトップへジャンプします"

③ツールチップ

この３つのところを変更してください。

①飛ばしたいリンク ②表示させたいコメント ③リンクとコメントを

くっつける主体

9

③別ウィンドウ

例えば下の画面の「サンプル.pdf 」をクリックすると、同じウィンドウ上で、

下の画面から別の画面に変わり、２つの画面を同時に見る事が出来ません。

そこで、同じウィンドウ上ではなく「別ウィンドウ」を開かせ、２つの画面を

効率よくみる方法をご紹介します。

通常ファイルをブログ上にアップさせると以下のような HTMLが挿入されます。 <a href="/ブログのアドレスの最後尾/img/E382B5E383B3E38397E383AB.pdf">サンプル.pdf</a>

しかし、これを「別ウィンドウ」で開かせるには

target=”_blank”

を追加挿入する必要があります。

通常と追加後を比較してみてください。

通常

<a href="/ブログのアドレスの最後尾/img/E382B5E383B3E38397E383AB.pdf">サンプル.pdf</a>

追加後

<a href="/ブログのアドレスの最後尾/img/E382B5E383B3E38397E383AB.pdf"target="_blank">サ

ンプル.pdf</a>

これで「別ウィンドウ」でみることができます。

10

④文字や画像を動かし、強調する

記事に掲載されている文字や画像を動かし、強調することで、ブログを見ている人

たちにインパクトを与える事が出来ます。

では、どうすれば文字や画像を動かせるのか？

MARQUEE（マーキー）というタグを挿入する事で、文字や画像を動かせます。

左右に往復： <marquee behavior="alternate" > 文字や画像を挿入</marquee>

横切る： <marquee behavior="scroll">文字や画像を挿入</marquee>

往復する： <marquee behavior="alternate">文字や画像を挿入</marquee>

右から左： <marquee direction="left">文字や画像を挿入</marquee>

左から右： <marquee direction="right">文字や画像を挿入</marquee>

ちょっと遅く横切る： <marquee scrolldelay="100">文字や画像を挿入

</marquee>

ちょっと早く横切る： <marquee scrollamount="8">文字や画像を挿入

</marquee>

下から上： <marquee behavior="scroll" direction="up" scrolldelay="200"

truespeed="truespeed">文字や画像を挿入</marquee>

上から下： <marquee behavior="alternate" direction="down"

scrolldelay="100">文字や画像を挿入</marquee>

例えば、下の画面上の「ふれあい協議会」を左から右に動かす場合は、

<marquee direction="right">ふれあい協議会</marquee>を挿入すると・・・

文字が左から右に動きます。

11

動かす文字や画像の速度を変えるには？

速度を速める：小さい数字

速度を遅める：大きい数字

例えば、文字を上から下に動かしたい時・・・下のタグを挿入します。

<marquee behavior="alternate" direction="down" scrolldelay="150">文字や画

像を挿入</marquee>

速度を速めたい時は、「 150 」を 150より小さい数字に変えてください。

逆に、速度を遅めたい時は、「 150 」を 150より大きい数字に変えてください。

ここの数字変更で、速度調整が出来ます。

12

⑤ファイル名変更

通常ファイルをブログ上にアップさせると、ファイル名がそのままブログ上に載り

ます。

ファイル名

ファイル名がそのまま載ります。

このままでも問題ありませんが、もし変更したい場

合、変更してみましょう。

13

ファイルをアップロードし、下の画面の状態になったら、ファイル名を変更するだ

けです。

例えば、元のファイル名「サンプル.pdf 」を「ここのファイル名を変更して

ください。」に変更すると・・・

ブログ上では、以下のように変更できます。

元のファイル名「サンプル.pdf 」を変更してください。

ここを変更してください。

変更できました。

14

⑥スキンサイドバーのコンテンツ追加

まず、ブログ管理画面から「スキンサイドバー」をクリックし、「コンテンツ」

にいってください。

スキンサイドバーとは？

ブログのサイドバー部分とは、ブロ

グの両端もしくはブログの左右にあ

るブログ記事とは別の部分（主に、

カレンダーや最新記事などの）です。

ここをクリックしてください。

15

すると、下のような画面にいきます。

左のコンテンツ一覧から追加したいコンテンツをドラッグ（ドラッグするには、追

加したいコンテンツに、カーソルを位置し、マウスの左ボタン（または NX パッド、

インターネットパッドの左クリックボタン）を押しながら、マウスを動かし（また

はパッド上で指を動かし）、追加したい場所でボタンを離す）して追加してください。

追加できたら、「設定を反映する」を忘れずにクリックしてください。

こちらのコンテンツ一覧から追

加したいコンテンツを選んでく

ださい。

追加したいコンテンツを左もしくは右にド

ラッグしてください。

ここへのドラッ

グも可能です

ここをクリックしてください。

16

もし、追加したいコンテンツが見当たらない場合

～オリジナルコンテンツの作り方～

コンテンツ一覧から「自由形式」を２つ選んで、追加してください。

１つ目の「自由形式」には、例えば、以下のような説明文を入力後、保存してくだ

さい。ここでは、タイトルを仮に「Adobe Readerについて」にしています。

もう１つの方の「自由形式」には、HTMLを入力し、保存してください。

タイトルを仮に「横幅」にしています。

17

HTML の使い分け

右のサイドスキンに追加する場合の HTML は、以下のようになっております。

<table width="100%" cellpadding="0" cellspacing="0" border="0">

<tr>

<td class="side">

<div align="center"><img src="/template/6001/img/side_title_header.gif"

align="absmiddle"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="side_title">お好きなタイトル</td>

</tr>

</table>

<div align="center"><img src="/template/6001/img/side_title_footer.gif"

align="absmiddle"></div>


<tr>

<td>

ここにオリジナルコ

ンテンツを追加の場

合は以下の HTML！！

18

左に追加する場合は、以下の HTMLをいれてください。


<tr>

<td class="side_title">お好きなタイトル</td>

</tr>

</table>

HTML入力後、保存をクリックしてください。

ここにオリジナルコ

ンテンツを追加の場

合は以下の HTML！！

19

配置

右のサイドスキンに追加した場合は・・・

「横幅」を上に、「Adobe Readerについて」を下にして、

「設定を反映する」をクリックしてください。

左に追加した場合は・・・

「Adobe Readerタイトル」（HTMLデーターが入っている）を上に、「Adobe Readerに

ついて」を下にして、「設定を反映する」をクリックしてください。

編集後は必ず「設定を反映する」をクリックしてください。

このような並びにしてください。

このような並びにしてください。

20

⑦個人情報取り扱い／著作権・免責の挿入

ブログを運営するにあたって、個人情報の取り扱いや著作権、免責についての方針

をブログ上に明白に載せておくことが大切です。

そもそも個人情報取り扱い／著作権・コピーライト／免責とは？

個人情報取り扱い（プライバシーポリシー）：インターネット上で、収集した個人情

報（氏名・性別・生年月日・住所・住民票コード・携帯番号・勤務場所・職業・年

収・家族構成・写真など、個人を特定できる情報）をどう扱うかについての文言

著作権・コピーライト：まちづくり協議会のブログに属している写真や文章など

の表現形式などは、まちづくり協議会に属しており、無断で使用・転送を禁ずる文

言（コピーライトは、著作権表示です。通常は Copyright(C) ○○○○ All rights

reserved と記載されます。）

免責：まちづくり協議会のブログが原因で何かトラブルが起きた際の文言

例えば、大阪市のホームページにも「個人情報の取り扱い」「著作権・免責」につい

ての大阪市の方針／文言が掲載されています。

では、今お使いの CANPANブログにも個人情報の取り扱いや著作権、免責についての

方針、コピーライトを入れてみましょう。

個人情報の取り扱い／著作権・免責

コピーライトは、著作権表示です。コピーライトマークは、

(C)または、© と記載されます。

21

まずは、ブログ管理画面の「スキンサイドバー」（下の図の①）をクリックして

ください。次に、「 HTML 」（下の図の②）をクリックしてください。

すると・・・上の図のような画面になります。

今お使いのデザイン（目印は右の「適用」黒ボタン（●））

今お使いのデザインのタイトル（ HTML 名）をクリックしてください。

①スキンサイドバーをクリック

②HTMLをクリック

●になっているのが今お使いのデザインです。

タイトルをクリックしてください。

22

すると、下の画面のようになります。

個人情報／著作権・免責を挿入する場所を選

択してください。（トップが最適だと思われま

す）

ここを下に「スクロール」（画面内に表示しきれない部分

を表示するために、表示内容を上下左右に移動させること）

23

一番下までスクロールし、下の画面のようになったら・・・

＜/div＞の下に、まずは、＜footer＞＜/footer＞と挿入してください。次に今挿入

した＜footer＞＜/footer＞の間に、個人情報／著作権・免責を挿入していきます。

ブログ上に、事業計画書や予算書、写真を載せる際、行う「ファイルを追加する」

で、個人情報や著作権・免責の文言のデーターをアップロードしてください。そし

て、それを先ほど入れた、＜footer＞＜/footer＞の間に入れてください。

ファイルを入れ終わったら、＜pre＞を挿入し、＜pre＞の横に Copyright(C) ○○

○○ All rights reserved と手入力で入れてください。

そして、「保存」をクリックしたら完成です。

まずは、＜footer＞＜/footer＞と挿入してください。次

に今挿入した＜footer＞＜/footer＞の間に、個人情報／

著作権・免責を挿入していきます。

ここの●●●部分には各地活協の名前が入

ります。

canpan...

Documents