CANPAN ブログ検索
Loading
  • もっと見る
« その他 | Main | ブログって何?»
サイドバーに自動翻訳ボタンを設置(約50カ国語) [2011年08月31日(Wed)]
←サイドバーのトップにGoogle翻訳の
自動翻訳ボタンを設置しました。



私がCANPANブログを使い始めた約5年前は
翻訳できる言語は20カ国語程度だったのが、
今では50カ国語以上に
機械的に翻訳されブログを見ることができます笑い

自動翻訳ボタンのコードは
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サイト全般に設置できますので
よろしければご活用ください。
(続)SNSへのリンクボタンをサイドバーに設置してバイラル(口コミ)効果を高めよう [2011年04月15日(Fri)]
先回
SNSへのリンクボタンをサイドバーに設置してバイラル(口コミ)効果を高めようという
記事を書いたのですが、

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

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



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

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

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

<!-- 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プロジェクトのバナーを掲載 [2011年04月15日(Fri)]
日本財団さんの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>

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


※参考 新規にサイドバー(タイトル、枠線含む)を作る方法
SNSへのリンクボタンをサイドバーに設置してバイラル(口コミ)効果を高めよう [2011年04月08日(Fri)]
ほとんど更新できていないブログですが
毎日多くの方に訪問していただき
本当にありがとうございますクローバー

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

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


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


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

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


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

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

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


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






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

<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">このブログをSNSで紹介</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>

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

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

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

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


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

後日、サイドバーのボタンを改めて設置し直しました。
(続)SNSへのリンクボタンをサイドバーに設置してバイラル(口コミ)効果を高めよう
https://blog.canpan.info/document/archive/63
サイドバーでよく使うタグ一覧 [2008年07月20日(Sun)]
タグとは
< >で囲まれた記号のことです。

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

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

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

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

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




1.文章を改行

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


2.文字や画像の中央揃え

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




1.画像を掲載

 を入力。




1.画像にリンクを貼る

画像にカーソルが触れた時に表示する文章 を入力。

2.文字にリンクを貼る

文章 を入力。


3.文字にメールリンクを貼る

文章 を入力。

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

文章 を入力。

5.画像にメールリンクを貼る

 を入力。




1.フォントの色を変える

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

2.フォントの大きさを変える

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

3.フォントの色と大きさを変える

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

4.文字を太くする

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



1.コメント(ブラウザでは表示されない。編集時のメモに最適)の入れ方

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



※その他、一覧に加えるとよいタグがあれば
 ぜひコメントくださいまる
カテゴリーを階層化して表示する方法 [2008年06月19日(Thu)]
CILたすけっとさんから

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

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

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


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

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

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


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

○イベント・勉強会 開催のお知らせ
 ├地震対策!!福祉キャラバン隊のご紹介(6月18日)
 ├映画「ふるさとをください」上映のお知らせ(6月12日)
 ├ボランティア救命講座のお知らせ(6月12日)
 ├仙精連主催「ピアカウンセリング基礎講座」のお知らせ(6月12日)
 └第2回 住まいと暮らしのバリアフリー展のお知らせ(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">第2回 住まいと暮らしのバリアフリー展のお知らせ(6月9日)</a><br>
月別アーカイブをプルダウンメニューで表示する方法 [2008年06月04日(Wed)]
サイドバーに月別アーカイブを設置すると
記事を月別に表示して
過去の記事を見たいときにとても便利ですまる

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

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

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



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

<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>



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



(続き)サイト内検索の設置方法(Google) [2008年04月27日(Sun)]
MAMAのすったもんだのこがちゃんから
前回の記事についてコメントをいただきました笑い


> 荻上様のようにWebでなくCANPANにしたいときは、
> どのように入力したらいいのですか?
> こがちゃんはCANPANにしとうございますびっくり


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

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

              変更後

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


←このブログのサイト内検索もCANPANにしてみました。
  参考になればうれしいですクローバー
サイト内検索の設置方法(Google) [2008年04月23日(Wed)]
「サイト内検索」 とは、
自身のサイト(ブログ)内でキーワードを入力して
全文検索を行なうことができる
システムのことです笑い

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

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

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

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



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

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

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

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



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




Google

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ですので、
記述を変更すれば
現在は白色の検索窓の背景色を
揃えることができますまる
サイドバーの文字にリンクを貼る方法 [2008年01月31日(Thu)]
前回の記事でサイドバーの作り方を紹介しましたが
今回は
文字へのリンクの貼り方を紹介します。




○前回の記述内容(一部)
――――――――――――――――――――――――――――――――――――――

長い間休んでいたブログを再開しました。お気軽にコメントをいただけるとうれしいです(^^)

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

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

長い間休んでいたブログを再開しました。お気軽にコメントをいただけるとうれしいです(^^)



CANPANのヘルプページにカスタムスキンの設定方法が掲載されています。

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



は改行を意味します。


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

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

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



| 次へ