CANPANブログ基礎マニュアル

Transcription

1 中級編 CANPAN ブログ基礎マニュアル 生野区まちづくりセンター支部大阪市生野区勝山南 ( 生野区役所 4 階 ) TEL: FAX: Mail: ikuno-machikyou@arion.ocn.ne.jp

2 1 デザインを変える 現在お使いのブログのデザインを変更してみましょう ブログ管理画面の スキンサイドバー をクリックしてください ここをクリック 下のような画面になったら デザイン一覧 をクリックしてください ここをクリック 1

3 次に 一覧からデザインを追加する をクリックしてください ここをクリック すると デザインの一覧がでてくるので 好きなデザインの 追加する をクリックしてください ここをクリック 2

4 デザイン一覧の中には 好きな写真をブログのデザインとして使えるモノもあります 画像変更可能 ができるデザインを選んでください カスタムスキン のデザインは好きな 画像をブログのデザインとして使えます 画像変更可能のデザインを選び 追加する をクリックしてください 3

5 デザインを追加できたら 次に スキンサイドバー の HTML をクリックしてください ここをクリック すると下のような画面になります そしたら 画像変更可能のデザイン ( ここではカスタムスキン 3) の HTML 名をクリックしてください 名前をクリック 4

6 すると 下の画面になります ここで カスタムヘッダー画像登録 削除 をクリックしてください ここをクリック ここはいじらないようにしてください デザインが崩れます ここでは HTML を変更しないでください もし 変更してしまった場合は 初期値に戻す のチェックボックスにチェックし 保存 をクリックしてください もし HTML をいじってしまい デザインを壊してしまった場合は 初期値に戻す のチェックボックスにチェックし 保存 をクリックしてください 5

7 参照 をクリックし 好きな画像をご自身のパソコンのデーターから選んでください そして 設定 をクリック 1 画像選びのクリック 2 画像を選んだらクリック ここで注意すべき点は画像の大きさ! 画像の大きさは 横幅 750 ピクセル 縦幅 200 ピクセル以内にしてください 画像が大きすぎると レイアウトが崩れます では どのようにして画像の大きさを変更するのか? ご自身のパソコン上にある画像データーを右クリックしてください そして プログラムから開く をクリックし Microsoft Office 2010 ( お使いのパソコンによっては Microsoft Office 2007 などバージョンによって数字が違いますが 基本的な使い方は同じです ) をクリックしてください プログラムが開いたら 次に 画像の編集 をクリックしてください ここをクリック 6

8 そして サイズ変更 をクリックしてください ここをクリック 定義済みのサイズ もしくは ユーザー設定のサイズ で画像の大きさを調整して 調整し終わった画像を 保存 もしくは 上書き保存 をしたら完了です 定義済みのサイズ ユーザー設定のサイズ どちらかで編集してください 7

9 2 ツールチップ ツールチップとは? ユーザーがカーソル ( パソコンのマウスポインタ ) をブログの画面上で何かの項目 ( 文字や画像 ) に合わせたとき 小さな枠が出現し その枠内には選択された項目に関するコメントが下の画面のように表示されます また その選択された項目をクリックすると 他のリンクに飛ばすことが出来ます 上の画面上にある ツールチップ にカーソルを合わせると小さな枠内に このカテゴリーのトップへジャンプします という情報がでてきます そして ツールチップ をクリックすると他のリンクに飛ばす事が出来ます この作業を行うには 以下のタグ ( 定められた特殊な記法により文書に埋め込む形で記述される付加情報 ) を挿入する必要があります <a href="index.html" title=" このカテゴリーのトップへジャンプします "> ツールチップ </a> 1 飛ばしたいリンク 2 表示させたいコメント 3 リンクとコメントを くっつける主体 1"index.html" 2" このカテゴリーのトップへジャンプします " 3 ツールチップこの 3 つのところを変更してください 8

10 3 別ウィンドウ 例えば下の画面の サンプル.pdf をクリックすると 同じウィンドウ上で 下の画面から別の画面に変わり 2 つの画面を同時に見る事が出来ません そこで 同じウィンドウ上ではなく 別ウィンドウ を開かせ 2 つの画面を効率よくみる方法をご紹介します 通常ファイルをブログ上にアップさせると以下のような 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> これで 別ウィンドウ でみることができます 9

11 4 文字や画像を動かし 強調する 記事に掲載されている文字や画像を動かし 強調することで ブログを見ている人たちにインパクトを与える事が出来ます では どうすれば文字や画像を動かせるのか? 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> を挿入すると 文字が左から右に動きます 10

12 動かす文字や画像の速度を変えるには? 速度を速める : 小さい数字速度を遅める : 大きい数字 例えば 文字を上から下に動かしたい時 下のタグを挿入します <marquee behavior="alternate" direction="down" scrolldelay="150"> 文字や画像を挿入 </marquee> ここの数字変更で 速度調整が出来ます 速度を速めたい時は 150 を 150 より小さい数字に変えてください 逆に 速度を遅めたい時は 150 を 150 より大きい数字に変えてください 11

13 5 ファイル名変更 通常ファイルをブログ上にアップさせると ファイル名がそのままブログ上に載ります ファイル名 ファイル名がそのまま載ります このままでも問題ありませんが もし変更したい場 合 変更してみましょう 12

14 ファイルをアップロードし 下の画面の状態になったら ファイル名を変更するだけです 元のファイル名 サンプル.pdf を変更してください 例えば 元のファイル名 サンプル.pdf を ここのファイル名を変更してください に変更すると ここを変更してください ブログ上では 以下のように変更できます 変更できました 13

15 6 スキンサイドバーのコンテンツ追加 スキンサイドバーとは? ブログのサイドバー部分とは ブログの両端もしくはブログの左右にあるブログ記事とは別の部分 ( 主に カレンダーや最新記事などの ) です まず ブログ管理画面から スキンサイドバー をクリックし コンテンツ にいってください ここをクリックしてください 14

16 すると 下のような画面にいきます 左のコンテンツ一覧から追加したいコンテンツをドラッグ ( ドラッグするには 追加したいコンテンツに カーソルを位置し マウスの左ボタン ( または NX パッド インターネットパッドの左クリックボタン ) を押しながら マウスを動かし ( またはパッド上で指を動かし ) 追加したい場所でボタンを離す ) して追加してください ここへのドラッグも可能です こちらのコンテンツ一覧から追加したいコンテンツを選んでください 追加したいコンテンツを左もしくは右にドラッグしてください 追加できたら 設定を反映する を忘れずにクリックしてください ここをクリックしてください 15

17 もし 追加したいコンテンツが見当たらない場合 ~ オリジナルコンテンツの作り方 ~ コンテンツ一覧から 自由形式 を 2 つ選んで 追加してください 1 つ目の 自由形式 には 例えば 以下のような説明文を入力後 保存してください ここでは タイトルを仮に Adobe Reader について にしています もう 1 つの方の 自由形式 には HTML を入力し 保存してください タイトルを仮に 横幅 にしています 16

18 HTML の使い分け ここにオリジナルコンテンツを追加の場合は以下の 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> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> 17

19 ここにオリジナルコンテンツを追加の場合は以下の HTML!! 左に追加する場合は 以下の HTML をいれてください <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="side_title"> お好きなタイトル </td> </tr> </table> HTML 入力後 保存をクリックしてください 18

20 配置右のサイドスキンに追加した場合は 横幅 を上に Adobe Reader について を下にして 設定を反映する をクリックしてください このような並びにしてください 左に追加した場合は Adobe Reader タイトル (HTML データーが入っている ) を上に Adobe Reader について を下にして 設定を反映する をクリックしてください このような並びにしてください 編集後は必ず 設定を反映する をクリックしてください 19

21 7 個人情報取り扱い / 著作権 免責の挿入 ブログを運営するにあたって 個人情報の取り扱いや著作権 免責についての方針をブログ上に明白に載せておくことが大切です そもそも個人情報取り扱い / 著作権 コピーライト / 免責とは? 個人情報取り扱い ( プライバシーポリシー ): インターネット上で 収集した個人情報 ( 氏名 性別 生年月日 住所 住民票コード 携帯番号 勤務場所 職業 年収 家族構成 写真など 個人を特定できる情報 ) をどう扱うかについての文言 著作権 コピーライト : まちづくり協議会のブログに属している写真や文章などの表現形式などは まちづくり協議会に属しており 無断で使用 転送を禁ずる文言 ( コピーライトは 著作権表示です 通常は Copyright(C) All rights reserved と記載されます ) 免責 : まちづくり協議会のブログが原因で何かトラブルが起きた際の文言 例えば 大阪市のホームページにも 個人情報の取り扱い 著作権 免責 についての大阪市の方針 / 文言が掲載されています 個人情報の取り扱い / 著作権 免責 コピーライトは 著作権表示です コピーライトマークは (C) または と記載されます では 今お使いの CANPAN ブログにも個人情報の取り扱いや著作権 免責についての方針 コピーライトを入れてみましょう 20

22 まずは ブログ管理画面の スキンサイドバー ( 下の図の 1) をクリックしてください 次に HTML ( 下の図の 2) をクリックしてください 2HTML をクリック 1 スキンサイドバーをクリック すると 上の図のような画面になります 今お使いのデザイン ( 目印は右の 適用 黒ボタン ( )) になっているのが今お使いのデザインです 今お使いのデザインのタイトル ( HTML 名 ) をクリックしてください タイトルをクリックしてください 21

23 すると 下の画面のようになります 個人情報 / 著作権 免責を挿入する場所を選択してください ( トップが最適だと思われます ) ここを下に スクロール ( 画面内に表示しきれない部分を表示するために 表示内容を上下左右に移動させること ) 22

24 一番下までスクロールし 下の画面のようになったら </div> の下に まずは <footer></footer> と挿入してください 次に今挿入した <footer></footer> の間に 個人情報 / 著作権 免責を挿入していきます まずは <footer></footer> と挿入してください 次に今挿入した <footer></footer> の間に 個人情報 / 著作権 免責を挿入していきます ブログ上に 事業計画書や予算書 写真を載せる際 行う ファイルを追加する で 個人情報や著作権 免責の文言のデーターをアップロードしてください そして それを先ほど入れた <footer></footer> の間に入れてください ファイルを入れ終わったら <pre> を挿入し <pre> の横に Copyright(C) All rights reserved と手入力で入れてください ここの 部分には各地活協の名前が入ります そして 保存 をクリックしたら完成です 23