←サイドバーのトップにGoogle翻訳の
自動翻訳ボタンを設置しました。



私がＣＡＮＰＡＮブログを使い始めた約５年前は
翻訳できる言語は２０カ国語程度だったのが、
今では５０カ国語以上に
機械的に翻訳されブログを見ることができます

自動翻訳ボタンのコードは
Google翻訳のツールとリソースのページから
入手できます。


ちなみに、
私はドロップダウンのみのシンプルな自動翻訳ボタンを選択し
その上にmarqueeのタグを入れてみました。

コードは以下の通りです。

<center><FONT color="#ff0000"><marquee width="135"
scrolldelay="250">Select Your Language</marquee></FONT><br>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() { new google.translate.TranslateElement({
pageLanguage: 'ja', layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></center><br>

上記のコードをコピーして
サイドバーに貼り付けるだけで設置できます

（参考）新規にサイドバーを作る方法


ブログだけでなく、Webサイト全般に設置できますので
よろしければご活用ください。

先回
ＳＮＳへのリンクボタンをサイドバーに設置してバイラル（口コミ）効果を高めようという
記事を書いたのですが、

AddClips ソーシャルブックマーク＆RSSボタン統合サービスというサイトが
1つのボタンで３２サービスに対応するオールインボタンを提供しているのを知り

サイドバーのボタンを改めて設置し直しました。



スッキリしてよい感じです

以下にコードを貼り付けておきますので
参考まで、ご活用ください。

――――――――――――　ココから　――――――――――――

<!-- AddClips Code START -->
<center><script type="text/javascript">
<!--
AddClipsUrl = location.href;
AddClipsTitle = document.title;
AddClipsId = '1B441F4010088';
AddClipsType='1';
AddClipsVerticalAlign='middle';
AddClipsDefault='bookmark';
AddClipsMode='popup';
// -->
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script></center>

<!-- AddClips Code END -->

――――――――――――　ココまで　――――――――――――


※参考　新規にサイドバー（タイトル、枠線含む）を作る方法

日本財団さんのROADプロジェクトのバナーを作成し
サイドバーに掲載しました。






『復興という名の「道」
明日への希望という「道」
一人ひとりの夢に続く「道」
いろいろな道が一つになって大きな未来への「道」へ・・・
みなさんと一緒につくる「ROADプロジェクト」はじまりました。』


長い時間が必要だと思いますが、

日本がひとつになる“道”に
つながることを信じています。


以下にコードを貼り付けますので
ご活用ください。

――――――――――――　ココから　――――――――――――

<center><IMG src="https://blog.canpan.info/document/img/64/word.gif" width="150" height="64" border="0" alt="「今出来ること」という一人ひとりの小さな道が一緒になって大きな道へ"><BR>
<A href="http://road.nippon-foundation.or.jp/" target="_blank"><IMG src="https://blog.canpan.info/document/img/64/logo.gif" width="150" height="67" border="0" alt="日本財団ROADプロジェクト"></A></center>

――――――――――――　ココまで　――――――――――――


※参考　新規にサイドバー（タイトル、枠線含む）を作る方法

ほとんど更新できていないブログですが
毎日多くの方に訪問していただき
本当にありがとうございます

私ごとですが、
３月４日に渋滞の最後尾で停車中に
後ろから追突されて、約１カ月入院しました

現在も、
まだ、座位を保つだけのことが
思った以上に大変で
情けないです(^^ゞ


今回の震災に対して
今の自分ができる、自分なりの支援は何だろう？と
考えました。


ＣＡＮＰＡＮブログや各種サイトで
震災関連の多くの情報発信が行われている中で

ＲＳＳフィールドやＳＮＳで
情報の共有がされています。


情報共有について
私ができる、ささやかな支援ですが、

以下のコードを
コピーして張り付ければ
サイドバーに
Twitterのツイートボタンと
facebookのいいね！ボタンを設置できるようにしました。

※参考　新規にサイドバー（タイトル、枠線含む）を作る方法


被災地の方の思いが長く深く伝わるように
ＳＮＳを通じて
多くの方に情報が広がる一助になれば幸いです






――――――――――――　ココから　――――――――――――

<table width="100%" cellpadding="0" cellspacing="0"
border="0"><tr><td class="side">
<div style="text-align:center;">
<img src="{$BlogTmplUrl$}img/side_title_header.gif"alt=""></div>
<table width="100%" border="0" cellspacing="0"cellpadding="0">
<tr><td class="side_title">このブログをＳＮＳで紹介</td></tr>
</table><div style="text-align:center;"><img src="{$BlogTmplUrl$}img/side_title_footer.gif"
alt=""></div><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr><td><div class="side_text"><br>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="canpan2009" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br><br>
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like href="" layout="button_count" show_faces="true" width="150" font=""></fb:like><br>
</div></td></tr></table></td></tr></table>
<div style="text-align:center;"><img src="{$BlogTmplUrl$}img/spacer.gif"
align="absmiddle" width="5" height="10" alt=""></div>

――――――――――――　ココまで　――――――――――――

赤字の部分はコピーして張り付ければ、
ブログ以外のホームページなどで
ページごとにボタンの設置・情報共有ができます

ＣＡＮＰＡＮブログで、個別記事ごとにTwitterのツイートボタンと
facebookのいいね！ボタンを設置する方法は以下の記事を参照ください。

https://blog.canpan.info/document/archive/65（カスタムスキンの方）
https://blog.canpan.info/document/archive/66（デザインスキンの方）


※AddClips ソーシャルブックマーク＆RSSボタン統合サービスという
サイトが1つのボタンで３２サービスに対応する
オールインボタンを提供しているのを知り

後日、サイドバーのボタンを改めて設置し直しました。
・（続）ＳＮＳへのリンクボタンをサイドバーに設置してバイラル（口コミ）効果を高めよう
https://blog.canpan.info/document/archive/63

タグとは
<　>で囲まれた記号のことです。

サイドバーの部分は、
ブログの編集画面で文章を改行しても
Internet Explorerなどの表示ソフトで見ると
改行がされません。

タグを使うことによって初めて、
Internet Explorerなどの表示ソフトで
改行などのレイアウトやフォントの大きさなどが
正しく表示されます。

タグは難しそうですが、
コピーして貼り付けるだけなので
慣れれば
そんなに難しいことではありません。

サイドバーのカスタマイズに
普段私が使っているタグの一覧を参考まで
紹介します

※画像掲載やメールリンクなどは
　メインページの自由記述の部分でも活用できます。




１．文章を改行

改行を入れたい場所に
を入力。


２．文字や画像の中央揃え

中央揃えしたい文字や画像をとで囲む。




１．画像を掲載

　を入力。




１．画像にリンクを貼る

　を入力。

２．文字にリンクを貼る

文章　を入力。


３．文字にメールリンクを貼る

文章　を入力。

４．文字のメールリンクに件名を指定する

文章　を入力。

５．画像にメールリンクを貼る

　を入力。




１．フォントの色を変える

色を変えたい文字をと　で囲む。
参考：フォントカラー早見表

２．フォントの大きさを変える

大きさを変えたい文字をと　で囲む。
数字は「1〜7」まで指定することができます。

３．フォントの色と大きさを変える

色と大きさを変えたい文字を
と　で囲む。

４．文字を太くする

太くしたい文字をと　で囲む。



１．コメント（ブラウザでは表示されない。編集時のメモに最適）の入れ方

コメントを入れたい部分を　　で囲む。



※その他、一覧に加えるとよいタグがあれば
　ぜひコメントください

CILたすけっとさんから

『サイドバーにカテゴリ毎の新着記事を表示させる方法』
についてコメントをいただきました

・どのカテゴリーを表示するか（全てなのか、一部なのか指定）
・記事をどのように表示するか（件数、並び順などの指定）

などを、スクリプトで新規記述すれば
表示されるみたいですが…
すぐには私もわかりませんので^^;


代用として…
アナログの手作業になりますが、
カテゴリーを階層化して表示する方法について参考まで。

以下の部分をコピーして
サイドバーに貼り付ければ
カテゴリーが階層化して表示されます。

○文字<br>
　├<a href="アドレス">文字</a><br>
　├<a href="アドレス">文字</a><br>
　└<a href="アドレス">文字</a><br>


参考まで、
CILたすけっとさんのブログのカテゴリー
『イベント・勉強会　開催のお知らせ』を例にすると
以下のようになります。

○イベント・勉強会　開催のお知らせ
　├地震対策！！福祉キャラバン隊のご紹介（6月18日）
　├映画「ふるさとをください」上映のお知らせ（6月12日）
　├ボランティア救命講座のお知らせ（6月12日）
　├仙精連主催「ピアカウンセリング基礎講座」のお知らせ（6月12日）
　└第２回　住まいと暮らしのバリアフリー展のお知らせ（6月9日）

（HTML）
○イベント・勉強会　開催のお知らせ<br>
　├<a href="https://blog.canpan.info/tasuketto/archive/33">地震対策！！福祉キャラバン隊のご紹介（6月18日）</a><br>
　├<a href="https://blog.canpan.info/tasuketto/archive/17">映画「ふるさとをください」上映のお知らせ（6月12日）</a><br>
　├<a href="https://blog.canpan.info/tasuketto/archive/16">ボランティア救命講座のお知らせ（6月12日）</a><br>
　├<a href="https://blog.canpan.info/tasuketto/archive/15">仙精連主催「ピアカウンセリング基礎講座」のお知らせ（6月12日）</a><br>
　└<a href="https://blog.canpan.info/tasuketto/archive/9">第２回　住まいと暮らしのバリアフリー展のお知らせ（6月9日）</a><br>

サイドバーに月別アーカイブを設置すると
記事を月別に表示して
過去の記事を見たいときにとても便利です

ただ、ブログを長い年月続けていると
表示が縦に長くなってしまいます…。

そんな時に
プルダウンメニューを活用すれば
すっきりと表示することができます。

サイドバーの新規作成で
以下のソースを貼り付けて
赤字の部分を変更すれば完成です



―――――――ココから↓――――――――――――――――――――――――

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

<tr><td class="side">

<div style="text-align:center;">

<img src="{$BlogTmplUrl$}img/side_title_header.gif"

alt=""></div>

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

cellpadding="0">

<tr>

<td class="side_title">月別アーカイブ</td>

</tr>

</table>

<div style="text-align:center;">

<img src="{$BlogTmplUrl$}img/side_title_footer.gif"

alt=""></div>

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

<tr>

<td>

<div class="side_text">









<form>



<select onChange="location.href=value;">



<option value="#">▼月別アーカイブ</option>



<option value="https://blog.canpan.info/アドレス/monthly/200806（表示したい月）/">2008年06月（プルダウン表示）</option>



<option value="https://blog.canpan.info/アドレス/monthly/200805（表示したい月）/">2008年05月（プルダウン表示）</option>



<option value="https://blog.canpan.info/アドレス/monthly/200804（表示したい月）/">2008年04月（プルダウン表示）</option>


</select>



</form>









</div>

</td>

</tr>

</table>

</td></tr></table>

<div style="text-align:center;"><img src="{$BlogTmplUrl$}img/spacer.gif"

align="absmiddle" width="5" height="10" alt=""></div>

―――――――↑ココまで――――――――――――――――――――――――

月数が多い場合は

<option value="https://blog.canpan.info/アドレス/monthly/200806（表示したい月）/">2008年06月（プルダウン表示）</option>



の部分を追加すれば表示されます。

ＭＡＭＡのすったもんだのこがちゃんから
前回の記事についてコメントをいただきました


> 荻上様のようにＷｅｂでなくCANPANにしたいときは、
> どのように入力したらいいのですか？
> こがちゃんはCANPANにしとうございます


HTMLの
次の箇所（赤字）を変更するだけで
CANPAN内をサイト内検索できます

―――――――――――――――――――――――――――――
<input type=radio name=sitesearch value="">Web全体

　　　　　　　　　　　　　　↓変更後

<input type=radio name=sitesearch value="https://blog.canpan.info/">CANPAN
―――――――――――――――――――――――――――――


←このブログのサイト内検索もCANPANにしてみました。
　　参考になればうれしいです

「サイト内検索」 とは、
自身のサイト（ブログ）内でキーワードを入力して
全文検索を行なうことができる
システムのことです

ブログを毎日書いていると
カテゴリに分けていても
なかなか目的の記事にたどり着くことができません

キーワードを入れれば、
迷子にならず目的の記事にたどりつけるため

「サイト内検索」は、
利用者の使い勝手、利用者本位（ユーザビリティ）の視点でも
重要視されつつあります。

CANPANブロガーの中でも、
設置されている方が増えています。
・NPO会計道（脇坂さん）
・晴耕雨読（荻上さん）



大きな企業などでは
独自のシステムを開発していますが、

ヤフーやグーグルなどの検索エンジンが
無料で提供しているシステムでも
十分実用的ですので
紹介したいと思います。

・グーグル設置方法
http://www.google.co.jp/intl/ja/searchcode.html

・ヤフー設置方法
http://search.yahoo.co.jp/promo/searchbox.html



今回は、グーグルを利用して
「サイト内検索」を
サイドバーの幅に合うように作ってみました。

Web全体 このブログの中

“このブログの中”にチェックを入れて
検索をすると
『ブログ入門』のブログ内のキーワードを検索します。


下↓に今回の「サイト内検索」のHTMLソースを
掲載します。
コピーして貼り付ければ、そのまま使えます

赤字の部分にご自身のブログのアドレス、
青字の部分は好きな言葉に変更してください。　


―――――――――↓ココから――――――――――

<!-- SiteSearch Google -->

<center><form method=get action="http://www.google.co.jp/search"><table
bgcolor="#FFFFFF"><tr valign=top><td><A href="http://www.google.co.jp/"><IMG
src="http://www.google.com/logos/Logo_40wht.gif" border="0"
alt="Google" align="absmiddle"></A><br><INPUT
type="text" name="q" size="15" maxlength="255"
value=""><INPUT type="submit" name="btnG"
value="検索"><BR><input type=hidden name=ie value=Shift_JIS><input
type=hidden name=oe value=Shift_JIS><input type=hidden name=hl value="ja"><font
size=-1><input type=hidden name=domains value="https://blog.canpan.info/document/"><input
type=radio name=sitesearch value="">Web全体<BR><input
type=radio name=sitesearch value="https://blog.canpan.info/document/"
checked>このブログの中 </font></td></tr></table></form></center>

<!-- SiteSearch Google -->

―――――――――↑ココまで――――――――――

ちなみに、
検索窓の背景色は<table bgcolor="#FFFFFF">で指定します。

自立フロンティアズ「たまごハウス｣さんのブログを例にあげると

サイドバーの背景色は#FFFFCCですので、
記述を変更すれば
現在は白色の検索窓の背景色を
揃えることができます

前回の記事でサイドバーの作り方を紹介しましたが
今回は
文字へのリンクの貼り方を紹介します。




○前回の記述内容（一部）
――――――――――――――――――――――――――――――――――――――

――――――――――――――――――――――――――――――――――――――
　　　　　　↓

○今回追加した記述内容（赤字）
――――――――――――――――――――――――――――――――――――――

――――――――――――――――――――――――――――――――――――――



は改行を意味します。


文字へのリンク部分は以下の部分です。

a href="https://blog.canpan.info/html/help/help05.html#26" target="_blank">CANPANのヘルプページ

赤字がリンク先のアドレス、
青字がリンクされる文字列です。