CANPANマニア

※この記事を書いた後にもっと簡単な方法があったので、そちらもご覧ください。
写真を横に並べてレイアウトする改訂版

写真を横並びにしたい。こんな時は配置指定で「左回り込み」を選びます。

　　
写真を横２列に並べてみた。



あれ？改行したのに文字が下に来ない！緑の文字部分は下の来てほしいんだけど・・・
こんな時には回り込みを解除するおまじない「<div style="clear:both;"></div>」を文章と写真の間に入れればOKです。

↓↓↓回り込みを解除してみた場合
　　

写真を横２列に並べてみた。

■回り込みを解除していない

■回り込みを解除している

違いは赤枠部分があるかないかです。
文字を写真の下に持ってきたい場合には、回り込みを解除するおまじない「<div style="clear:both;"></div>」を写真と文字の間にいれましょう。


NPO法人こどもステーション山口さん、毎回の例会の様子をたくさんアップしています。

このレイアウトを実現するのも、このおまじない。
　写真１・写真２・写真３
　<div style="clear:both;"></div>
　写真４・写真５・写真６
　<div style="clear:both;"></div>
　：
こんなふうにすればできあがり！

レポートで写真をたくさん載せたい場合などチャレンジしてみてください。きっとステキなアルバムが完成しますよ

記事を書くときの文字の拡大縮小は「A+、A++、A-」でできます。



使ってみるとこんな感じ。
文字のサイズを変更する　・・・A-
文字のサイズを変更する　・・・通常
文字のサイズを変更する　・・・A+
文字のサイズを変更する　・・・A++

でも、もう少し小さくしたい、もっと大きくできない？という質問がありました。

大丈夫、コツさえつかめば簡単、�@�A�Bでできあがります。

---

�@文字を選択

�A文字をA+で拡大する

�B�Aで追加された文字の中の「font-size:large」の「large」を「300%」に変更する
※このとき、「300%」はすべて半角英数字で書くこと

---

「300%」の部分を変えると以下のようになります。
文字のサイズを変更する　・・・70%
文字のサイズを変更する　・・・80%
文字のサイズを変更する　・・・90%
文字のサイズを変更する　・・・通常
文字のサイズを変更する　・・・110%
文字のサイズを変更する　・・・120%
文字のサイズを変更する　・・・130%
文字のサイズを変更する　・・・200%
文字のサイズを変更する　・・・300%

どうでしたか？覚えると表現の自由度が上がります。試してみてくださいね。

はじめるまえに記事入力画面の下の方「この記事の詳細設定＞改行HTMLタグ変換」で「改行を<br/>タグに変換しない」にチェックして「保存する」を押す。


�@見てみよう
上記の表、どうかいてあるか見てみると↓

01	<table cellpadding="5" cellspacing="1" border="1">	表の開始
02	<tr>	行の開始
03	<th>A1</th>	見出しセルの開始　A1　セルの終了
04	<td>A2</td>	セルの開始　A2　セルの終了
06	</tr>	行の終了
07	<tr>	行の開始
08	<th>B1</th>	見出しセルの開始　B1　セルの終了
09	<td>B2</td>	セルの開始　B2　セルの終了
11	</tr>	行の終了
12	</table>	表の終了

�A以下をコピーして、ブログの記事に貼りつけ
<table cellpadding="5" cellspacing="1" border="1">
<tr>
<th>A1</th><td>A2</td>
</tr>
<tr>
<th>B1</th><td>B2</td>
</tr>
</table>

�B行を増やしてみよう(C1・C2を追加してみよう)

�C列を増やしてみよう(A3・B3・C3を追加してみよう)

�DA1〜C3を変えてみよう

もっと詳しく知りたい人は、こちらのHPをみてください
http://www.kanzaki.com/docs/html/htminfo16.html

「枠線を細くしたいな」とか「表の見出し背景に入れを入れたいな」という場合。

A1	A2	A3
B1	B2	B3

�@「スキンサイドバー＞デザイン一覧」で選択中のデザインをクリック


�A以下を一番下に追加

■「旧デザイン」の場合
.entry_layer table{
background-color: #ffffff;
border-collapse: collapse;
border-spacing: 0;
}
.entry_layer th{
text-align: left;
border-collapse: collapse;
border: solid 1px #55a5da; /* 枠線色 */
padding: 5px;
background-color: #bbdbf0;　/* 見出しの背景色 */
}
.entry_layer td{
text-align: left;
border-collapse: collapse;
border: solid 1px #55a5da; /* 枠線色 */
padding: 5px;
}

■「旧デザイン」以外の場合
.blogbody table{
background-color: #ffffff;
border-collapse: collapse;
border-spacing: 0;
}
.blogbody th{
text-align: left;
border-collapse: collapse;
border: solid 1px #55a5da; /* �@枠線色 */
padding: 5px;
background-color: #bbdbf0;　/* �A見出しの背景色 */
}
.blogbody td{
text-align: left;
border-collapse: collapse;
border: solid 1px #55a5da; /* �B枠線色 */
padding: 5px;
}

　※枠線の色を変えたい�@�B色部分を変えてください。
　※見出しの背景の色を変えたい�A色部分を変えてください。
　色見本はこちら



�B「スタイルシートを反映する」ボタンをクリック

�C表を作ってみよう(1行目が練習�@と変わっています)
<table>
<tr>
<th>A1</th><td>A2</td><td>A3</td>
</tr>
<tr>
<th>B1</th><td>B2</td><td>B3</td>
</tr>
</table>

上手くできましたか？

1カ月ぶりの更新です。

団体ブログと代表(またはスタッフや事務局)ブログが分かれている。
団体ブログに代表ブログの新着を載せたい！ということありますよね。

そんな時便利な機能がCANPANには標準装備です

-----------------------------------------
�@「マイページ＞スキンサイドバー＞コンテンツ＞ノーマル」を開く

�Aコンテンツエリアにある「RSS取得」を左右のサイドバーに移動
　例)赤文字�@をドラッグして赤文字�Aの場所に移動


�B「RSS取得」の文字をクリックしてウィンドウを開く
　赤文字�Bの欄に、外部のブログタイトルを記入(1行で収まる程度の長さ)
　赤文字�Cの欄に、外部のブログのRSSのURLを記入
　　※CANPANの場合は、「https://blog.canpan.info/○○○/index1_0.rdf」の○○○にブログ名(URL)をいれます
　赤文字�Dの欄で、サイドバーに表示する新着記事の件数を選択


�C「保存」ボタンを押し、画面を閉じる。

�D「設定を反映」ボタンを押す。
-----------------------------------------

サポートした団体さんのブログにも早速この機能を付けました
左下の「代表ブログ」のところが代表ブログの新着記事です。

高次脳機能障害支援団体キセキさんのブログ

サイドバーにリンク画像を使って、メニューを配置した例

ブログのサイトバーにリンク画像を入れる方法

�@画像を準備
　横160ピクセルまで
　※デザイン一覧の「ライトグレー」を利用している場合は横200ピクセルまで

�A「スキンサイドバー　＞　コンテンツ　＞　エキスパート」の画面を開く

�Bコンテンツで「自由形式」を選び「コンテンツの追加」ボタンを押す

�Cバナーの内容を入力する
　１．タイトルを入力する
　２．�@で準備したバナー用のファイルをアップロードする
　　※サムネイルで表示＝チェックを外す
　　※別ウィンドウで原寸大表示＝チェックを外す
　　※配置指定＝中央寄せ
　３．自由入力欄に画像を追加する

�D画像にリンクを貼る
　１．画像部分を選択する

　２．「リンクを挿入」ボタンを押し、リンクしたいURLを入力する

　※バナーをクリックしたときに別ウィンドウで画面を表示したい場合を除いて、選択部分を削除する。
　３．「保存する」ボタンをクリックする

�Eサイドバーにバナーを配置する
　１．「スキンサイドバー　＞　コンテンツ　＞　ノーマル」画面を開く

　２．ごみ箱に�Dで作成したバナーがあるので、選択(※カーソルが十字マークの状態)してサイドバーへドラッグする

　３．「設定を反映」ボタンを押す









どんな時に使うの？
�@イベントや告知など目立たせたい記事がある時

�Aカテゴリーの代わりにバナーをメニューにする
　ブログがワンランクアップしたホームページに見えますよ！
　例）こどもステーション山口
　　画面左上の方のメニューは、サイドバーにバナーを貼る方法で作っています。