CANPANマニア

＜参加予定団体とブログ＞
藍と愛の会 https://blog.canpan.info/aitoainokai/
古典芸能南京玉すだれ山口保存会 https://blog.canpan.info/sudareyamaguti/
恋活プロデュース コミュネット http://commnet.soreccha.jp/
富海史談会 https://blog.canpan.info/tonomishidankai/
佐波の里山サポートネット https://blog.canpan.info/sabayama/
大道地区社会福祉協議会 https://blog.canpan.info/daidoutikusyakyou/

＜スケジュール　10時〜12時00分　＞
10時　あいさつと資料の確認
10時5分　前回の復習(カテゴリー追加・並べ替え・整理・検索ボックスの追加）
・カテゴリーの追加（CANPANブログヘルプ）
・カテゴリーの並び変え（CANPANブログヘルプ）
・サイドバーに検索ボックスを表示させる
10時15分 「ブログのみやすさチェックシート」記入
10時20分 ワンクリックの説明・ワンクリック以内で表示するための説明
・メインページ自由記述の使い方
・サイドバーに自由形式
・レイアウトの変更(復習)
10時50分 2グループに分かれておたがいのサイト・ブログをみる　5分×2団体分。
　ふせん青によかったこと、みやすかったこと、
　ふせん赤に、よくわからなかったこと、こうしたらいいなと思ったこと、、もっと知りたかったこと
11時00分　共有の時間、グループ内　1グループ5分
11時15分　他者からの視点をもらって、自団体のブログについてどうしたらいい、を各自発表　3分×6団体
11時35分　講師説明
11時40分 広報紙への活用 QRコードやURLへの掲載
11時50分 Facebookについて紹介・活用事例
11時00分 終了 主催者あいさつ、アンケート記入

＜準備＞
１．パソコンをインターネットに接続する
２．自団体のブログ編集画面にログイン
３．２とは別のウィンドウで「CANPANマニア」で検索し、今日のレジメを開く
４．配布資料A4で1枚「ブログのみやすさチェックシート」
５．時間があれば、「ブログのみやすさチェックシート」を記入

＜配布資料＞
ブログのみやすさチェックシート

ブログタイトルの変わりに画像を設定、こんな例もありますよ。CANPANマニアも使っています。


１．「スキンサイドバー＞HTML」で使用しているHTMLをクリック

２．開いた画面を編集する

２−１　赤枠部分を削除


２−２　削除した場所にカーソルを持って行く


２−３　ブログタイトル変わりの画像をファイルをアップロードし、画像を挿入する
　※画像挿入前に、以下の赤枠部分のように２つのチェックははずし、配置は指定なしにすること


２−４　挿入した画像が下記の赤線部分。赤枠部分「title.jpg」にあたるところをブログタイトルに変更。
　※このとき左右のダブルクオテーションンは消さないこと


２−５　画像にブログトップページのリンクを貼る。※下線「target="_blank"」を削除。


３．「保存する」ボタンを押す

完成です
※印に気をつけながら設定しましょう。

デザインできるひと、これまでプロにデザインしてもらった団体のリーフレットがある、などの団体さんにはおすすめです。

ブログタイトルと説明の背景に画像を設定、こんな例もありますよ。



１．タイトル背景に使用する画像をアップロード
　※横幅は９４０ピクセルで作成すること

２．「スキンサイドバー＞デザイン一覧」でタイトル背景に画像を設定したいものをクリックして編集画面を開く

３．背景画像についてスタイルシートに記述する
※ ここでは１で「title.jpg」という高さ横９４０ピクセル、縦１８０ピクセルの画像をアップロードしたとする。
＜変更前＞

#banner{
padding:30px 5px 20px 5px;
text-align:left;
}

＜変更後＞　※赤字の行を追加。

#banner{
padding:30px 5px 20px 5px;
text-align:left;
background-image: url("https://blog.canpan.info/○○○/img/title.jpg"); /* タイトル背景画像 */
height:180px;
}

＜追加ポイント＞
・○○○は自分のブログアカウント(CANPANマニアの場合URLは「https://blog.canpan.info/77iro/」なので○○○に77iroといれる)
・title.jpgは、各自のアップロードした画像ファイル名に変更
・180は、各自のアップロードした画像ファイルの高さに変更

４．「スタイルシートを変更する」ボタンを押す
完成です！

ブログタイトルの背景色、見出しの背景色、サンプルで5パターン作ってみました。






新着情報をメインページ自由記述の上の配置しない場合でも上記サンプルCSSを使用して大丈夫です。

参考にしたのはインターネットで「配色　パターン　サンプル」で検索して出てきたサイトです。

コピーして貼り付けたら、ライトグレー(両サイドバー)のデザインが変わります。






（１）ライトグレー(両サイドバー)の見た目を変えたい
１．右ファイルをダウンロード　side2_css.txt
２．「スキンサイドバー＞デザイン一覧＞一覧からデザインを追加する」をクリックして「ライトグレー(両サイドバー)」を追加。
３．テーマタイトル一覧画面で「ライトグレー(両サイドバー)」の右横のチェックをクリック(適用を変える)
４．一覧で「ライトグレー(両サイドバー)」のリンクをクリック
５．開いた画面で「スタイルシートタイトル 」に「ライトグレーカスタマイズ_両サイド」と入力。
６．「スタイルシート 」をすべて削除し、１のファイルをテキストエディタ(メモ帳など)で開きコピーする
５．「スタイルシートを変更する」ボタンを押す
完成です！
※元に戻す場合は一覧画面で前のデザインタイトルの右横のチェックをクリックし、適応を変更。



（２）新着情報を表示したい
１．右ファイルをダウンロード　side2_new_html.txt
２．「スキンサイドバー＞HTML＞HTMLの追加」をクリックしてHTMLを追加
３．開いた画面で「ＨＴＭＬ名」に「ライトグレーカスタマイズ_両サイド_新着あり」と入力。
４．「ＨＴＭＬ」をすべて削除し、１のファイルをテキストエディタ(メモ帳など)で開きコピーする
５．「保存する」ボタンを押す
６．HTML名の一覧画面で「ライトグレーカスタマイズ_両サイド_新着あり」の右横のチェックをクリック(適用を変える)
完成です！
※元に戻したい場合は、「デフォルトＨＴＭＬ」の右横のチェックをクリックし適応を変更。

タイトルや説明の背景に画像を設定したり、タイトルや説明の代わりに画像を設定したりもできます。





その他、タイトルや文章の文字の色、フォント種類や全体背景色の変更など、まだまだいろいろありますが、説明はまた後日