CANPAN ブログ検索
Loading
  • もっと見る
ここはメインページ自由記述

2014年02月13日

防府市市民活動支援センター ブログ活用講座2回目

2014年2月13日は防府市市民活動支援センター主催
ブログを使ってここまでできる!もっとブログ活用講座!2回目です


<参加予定団体とブログ>
藍と愛の会 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分 終了 主催者あいさつ、アンケート記入

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

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


2014年02月09日

ライトグレー(両サイド)のカスタマイズ4 ブログタイトルの変わりに画像を設定する

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


1.「スキンサイドバー>HTML」で使用しているHTMLをクリック

2.開いた画面を編集する

2−1 赤枠部分を削除
110_12.png

2−2 削除した場所にカーソルを持って行く
110_13.png

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

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


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

3.「保存する」ボタンを押す

完成です手(チョキ)
※印に気をつけながら設定しましょう。

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

ライトグレー(両サイド)のカスタマイズ3 ブログタイトルに背景画像を設定

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

110_10.png 110_08.png



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

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

3.背景画像についてスタイルシートに記述する
※ ここでは1で「title.jpg」という高さ横940ピクセル、縦180ピクセルの画像をアップロードしたとする。
<変更前>

#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は、各自のアップロードした画像ファイルの高さに変更

4.「スタイルシートを変更する」ボタンを押す
完成です!

ライトグレー(両サイド)のカスタマイズ2 配色

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






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

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


ライトグレー(両サイド)のカスタマイズ1 基本

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

<ライトグレー(両サイドバー)の変更前>
110_04.jpg

<ライトグレー(両サイドバー)の変更後(1)>
文字が大きくなる。記事タイトルの緑の○を消去して背景色を設定。リンクを標準色に変更、など
110_05.jpg

<HTMLに新着情報追加後(2)>
メインページ自由記述の下に新着情報を配置
110_07.png



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



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

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

110_10.png 110_10.png




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