「アルボード」情報局 分館(貼り付け方法)

【PickUpSNS】は、サポリンSNS内でサポーター有志が立ち上げた企画・話題などを告知・紹介するエントリーです。

<< 「アルボード」情報局 メインページに戻る


★アルボードをブログに貼るには? ~ ブログパーツの貼り付け方法 ~

【重要なお知らせ】 2010.07.06
「特殊2:<img>タグバージョン」のブログパーツ(goo, msnで使用)に新バージョンが登場!
最新3個を表示し、見た目もオリジナルバージョンに近いものになりました。
貼り替えされる方は「貼り付け方法」をご覧になってください。

【重要なお知らせ】 2010.04.26
「特殊1:<embed>タグバージョン」のブログパーツ(msnで使用)が、パーツ配布元の事情により表示されなくなっております。
代替パーツが見つかるまで「特殊2:<img>タグバージョン」に貼り替えてくださるようお願いします。

 
さて、ここからは各ブログサービスごとに「貼り付け方法」を解説します。

掲載情報
msnブログ (2010.07.06 更新)
BIGLOBE ウェブリブログ
livedoor ブログ
So-net ブログ
nifty ココログ
seesaaブログ
gooブログ (2010.07.06 更新)
Ameba アメブロ (2010.03.17 更新)
fc2ブログ (2010.03.19 追加)
楽天ブログ (2010.03.19 追加)
exciteブログ (2010.03.19 追加)
jugemブログ (2010.03.19 追加)
WordPress.comブログ←msnブログからの移行 (2010.12.16 追加)

 
上記は貼り付け例です。
ここに掲載していないブログでも「アルボード」の貼り付けは可能です。
次の枠内のスクリプトをご自身のブログのブログパーツ貼り付け可能エリアに記述(コピー&ペースト)してください。

 
▼ブログパーツ(標準:<script>タグバージョン)

 
上記の標準パーツが貼り付けられない(パーツが動かない)場合は次のパーツをお試しください。

 
▼ブログーパーツ(特殊1:<embed>タグバージョン)
→<script>タグは使用不可だが、<embed>タグは使用可能である場合に対応

当パーツの留意点:クリックしても各企業のURLには飛びません。

 
▼ブログーパーツ(特殊2:<img>タグバージョン) (2010.07.06 更新)
→<script>タグ、<embed>タグともに使用不可である場合に対応

当パーツの留意点:最新のつぶやき3個だけの表示になります。

▼ブログーパーツ(特殊2:<img>タグバージョン)※旧バージョン
→<script>タグ、<embed>タグともに使用不可である場合に対応

当パーツの留意点:最新のつぶやき1個だけの表示になります。

 

※枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリックしてください。

※いずれの場合も、スクリプト内にある「width(幅)」「height(高さ)」の数値は変更が可能です。ブログのデザインやお好みに合わせて変更下さい。たとえば「width: 180;」のように記載すると幅180pxで表示されます。

※ブログパーツについて重要な変更があった場合にご連絡を差し上げたいので、「ブログに貼ったよ!」というご報告をいただけると嬉しいです。(報告先はこちら

 
○ブログパーツのアクセス集計はこちら
 http://y-nagisa.sakura.ne.jp/cgi-bin/dayx/dayxmgr.cgi

msnブログの場合

 (2010.07.06 更新)
通常のブログパーツを貼り付けることができませんので、特殊なタイプを貼り付けていただきます。
最新のつぶやき3個だけの表示になります。

貼り付け例:http://y-nagisa.spaces.live.com/
貼り付け方法:
1.ブログの「デザイン設定」から「モジュールの追加」を選ぶ
2.「カスタムHTML」を追加し、「保存」をクリックする
3.ドラッグ&ドロップで好きな位置に配置する
4.「カスタムHTML」の「編集」をクリックする
5.入力欄に以下をコピペで貼り付ける

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

6.「投稿」をクリックする
7.「カスタムHTML」右の下向きの矢印をクリックし、「設定」をクリックする
8.タイトル(必須)に「アルボード」と入力し、「保存」ボタンを押す
9.表示を確認し、右上の「保存」ボタンを押して完成

BIGLOBE ウェブリブログの場合

貼り付け例:http://802525728.at.webry.info/

貼り付け方法
1.ブログ管理画面から左サイドバーの「設定」をクリック。
2.「?表示項目設定」をクリック。
3.サイドバー表示項目設定にある、フリースペース(3種類)の表示させたいスペースの「編集する」ボタンをクリック。
4.編集画面の入力枠に<h2></h2>を使って、
  <h2>タイトルなどのテキスト文</h2> を入力。
  (後で編集しやすいように、タイトル入れると良いですよ)
5.タイトルを入力したら、改行して以下のスクリプトを貼り付け。

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

6.入力枠下にある「設定」ボタンをクリック。(忘れると、もう一度やり直し)
7.「編集内容を上書き更新します。よろしいですか?」と訊いてくるので「OK」ボタンをクリック。

以上で設定は完了です、ブログを確認してみましょう。

尚、ウェブリブログは表示幅が160ピクセルに固定されているので変更は出来ませんが、スクリプト自体の設定が”auto”なので、変更の必要はありません

livedoor Blog の場合

貼り付け例:http://blog.livedoor.jp/rakugakialbi/

貼り付け方法:
新管理画面の場合
1.管理画面の「ブログ設定(スパナのアイコン)」をクリック
2.「ブログパーツ」の中の「新規追加」をクリック

3.「新着ブログパーツ」または「自由なカスタマイズ用」の一覧にある
  「フリーエリア」の下の「追加」ボタンをクリック→「追加する」をクリック
4.改行設定=「変換しない」を選択
  タイトル設定=チェックを入れる
  プレビュー機能はどちらでも可

  入力欄に以下をコピーして貼り付けたら「保存する」をクリック  

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

5.「ブログパーツの設定」タブをクリック→好きな位置に動かしたら
  「ブログに反映する」をクリックして完了です

旧管理画面の場合
1.管理ページ上部の「カスタマイズ/管理」をクリック
2.「プラグインの追加」の横にある「新規追加」をクリック
3.「上級者向けプラグイン」をクリック→「フリーエリア」の右にある
  「追加する」をクリック
4.改行設定=「変換しない」を選択
  タイトル設定=チェックを入れる
  プレビュー機能はどちらでも可

  入力欄に以下をコピーして貼り付けたら「保存する」をクリック  

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

5.「プラグインの追加をクリックし、好きな順序に設定したら
  「プラグインの内容を更新する」をクリックして完了です

albiboard_livedoorblog
※「プラグインの設定」画面でタイトルにブログパーツの内容をいれておくと、どれがどのブログパーツか一目で分かって便利です。
タイトルに入力した文字は、ブログに表示されません。

So-netブログの場合

貼り付け例:http://snowflake421mt.blog.so-net.ne.jp/

貼り付け方法

1.管理ページから「デザイン」をクリック
2.「レイアウト」をクリック
3.画面左側にある「サイドコンテンツ」の左にある+印をクリックして項目を表示する
4.「カスタムペイン」ボックスをドラッグ&ドロップして右側の好きな位置に移動
5.右側のコンテンツ配置画面に移動後 「カスタムペイン」をクリック
6.カスタムペイン編集画面が表示されるので タイトルを入力
  自由入力欄に以下をコピーして貼り付け 「設定を保存する」ボタンをクリック

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

7.「設定を完了しました」と表示されたら 右上の×で編集画面を閉じる
8.レイアウト画面に戻ったら 「設定を保存する」ボタンをクリックして完成

nifty ココログの場合

貼り付け例:http://cutshop.cocolog-nifty.com/blog/

貼り付け方法

1.まず、ココログの「管理ページ」で「マイリスト」という項目をクリックします。
2.マイリストの新規作成から、
リストのタイプ→人
リストの名前→AlbiBoard
として、リストの作成ボタンを押してください。
3.次に出てくる画面で、「名前」という欄に 以下をコピペで貼り付けます。

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

4.保存ボタンを押します。
5.ブログのデザイン画面から、「表示項目の選択」で、マイリストにある「AlbiBoard」を選択して変更を保存します。

seesaaブログの場合

貼り付け例:http://arbi-de-diet.seesaa.net/?1267684938
貼り付け方法:
1.ブログの「デザイン」から「コンテンツ」を選択。
2.左側に「コンテンツ」という欄があります。
  その中の「自由形式」という四角(下の方にあります)を
  表示したい場所にドラッグ&ドロップしてください。
3.暫く待つと、「自由形式」の文字が青く変わります。
  そうしたら自由形式という文字をクリックしてください。
4.タイトルを「AlbiBoard」にかえ、「自由入力欄」に以下をコピペします。

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

5.「保存する」ボタンをクリックします。
6.「閉じる」ボタンをクリックします。
7.「設定を反映する」ボタン(下の方にあります)をクリックします。

gooブログの場合

 (2010.07.06 更新)
通常のブログパーツを貼り付けることができませんので、特殊なものを貼り付けていただくことになります。
最新のつぶやき3個だけの表示になります。

貼り付け例:http://blog.goo.ne.jp/y-nagisa

貼り付け方法
1.ブログの編集画面で、テンプレート編集を選択。
2・画面中段の「モジュール配置」で「オリジナルモジュールの新規追加」をクリック
3.「タイトル」:「アルボード」と入力
  「追加位置」:好きな場所を選択(3カラムの場合、右サイドバーなど)
  「内容」:下記スクリプトをコピペで貼り付け

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

4.「追加する」をクリック
5.「モジュール配置」画面にもどる。
追加位置で選択した場所(右サイドバーを選択したなら、右サイドバーの一番下)に「アルボード」というモジュールが追加されている。
モジュールにカーソルを合わせてクリックしたまま上下させると表示順を変更できるので、好みの位置でクリックを放して、配置を決める。
6.最後に画面下の方にある「変更を保存する」を押す。
7.ブログを表示して確認する。

Ameba アメブロの場合

 (2010.03.17 更新)

貼り付け例:http://ameblo.jp/yynagisa

貼り付け方法
1.「ブログを書く」をクリック
2.「サイドバーの設定」をクリック
3.「プラグインの追加」をクリック
4.「フリープラグイン」のタブをクリック
5.「他サイトで配布されているタグを入力してください。」という欄に以下のスクリプトを貼り付け。

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

6.「保存」をクリック
7.「サイドバーの配置」をクリック
8.「使用しない機能」のところにある「フリープラグイン」を、「使用する機能」の表示したい位置までドラッグ&ドロップ
9.「保存」をクリック

fc2ブログの場合

 (2010.03.19 追加)

設置例:http://yynagisa.blog41.fc2.com/

※使用しているテンプレートがプラグインに対応している必要があります。
※以下は「プロフィール欄」の下にアルボードを表示する場合の例です。

貼り付け方法:
1.「管理者ページ」を開く
2.左サイドバーにある「環境設定」をクリック
3.「プラグインの設定」をクリック
4・PCプラグインのうち、「プロフィール」の「詳細」をクリックする。
5.「プラグインの改造」の【HTMLの編集】の文字をクリック
6.すでに入っている文字列(<!–myimage–>~</p>)の下に、以下のコードを貼りつける

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

7.「設定」ボタンを押す

楽天ブログの場合

 (2010.03.19 追加)

通常のブログパーツを貼り付けることができませんので、特殊なものを貼り付けていただくことになります。
最新のつぶやき1個だけの表示になります。

貼り付け例:http://plaza.rakuten.co.jp/yynagisa/

貼り付け方法:
1.「ブログ管理」をクリック
2.左サイドバーメニューの「基本の設定」から「デザイン設定」をクリック
3.「ブログパーツの設定」をクリック
4.表示しない項目欄から「サイド自由欄」を選び、ドラッグアンドドロップで表示する項目のサイドバーの好きな位置に配置
5.「登録する」ボタンを押す。
6.左サイドバーメニューの「ページの設定」から「ホーム」をクリック
7.「サイド自由欄編集」タブをクリック
8.本文欄に以下のコードをコピペ

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

9.「このHTMLを登録」ボタンを押す

exciteブログの場合

 (2010.03.19 追加)

通常のブログパーツを貼り付けることができませんので、特殊なものを貼り付けていただくことになります。
最新のつぶやき1個だけの表示になります。

貼り付け例:http://arukou.exblog.jp/

貼り付け方法:
1.ブログの管理画面左側の「メニュー管理」をクリック
2.「メニュー別選択」欄の「メモ帳編集」をクリック
3.メモ帳タイトル: Albibordなどと入力
  メモ帳内容:以下のスクリプトを入力

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)

4.「保存」をクリック
5.メニュー別選択画面一番下の「適用」をクリック

※メモ帳を表示する設定になっていない場合は、以下の作業が必要です。
6.メニュー管理画面の「並べ替え」をクリック
  現在のブログのレイアウトが表示されます。
  表示されている項目はアイコンが黄色くなっています。
  「メモ帳」の頭についているアイコンが白いままだったら表示されていないので
  「メモ帳」をクリック
7.右側の「表示する」をクリック
8.「上へ」「下へ」をクリックして好みの場所に配置します。

jugemの場合

 (2010.03.19 追加)

貼り付け例:http://soccer-mom.step.raindrop.jp/

貼り付け方法:
1.管理者ページにアクセスし、「デザイン」にポインタを合わせ「フリースペース」をクリック。
2.1~5までの「フリースペースリスト」が表示されるので、「まだ設定されていません」と表示されているところの「編集」アイコンをクリック。
3.内容を入力していきます。
   「タイトル」:    「Albibord」などと入力。
   「内容」:      以下のスクリプトをコピペ

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)
   「公開・非公開」: 公開を選択
4.「編集内容を保存」をクリック。

※ここまでの作業で、たいていの場合ブログ上にアルボードが表示されますが、
使用しているテンプレートによってはフリースペースの設定をしていないものもあるかもしれません。
(OTHERSタブなどをクリックすると表示される設定になっている場合もあります)
ブログを確認してAlbiBoradが表示されていない場合は以下の作業が必要になります。

5.フリースペース編集画面の下方に「[ID: 1(~5)]の内容を表示する独自タグ」が表示されているので、それをコピーしておきます。
6.上方の「デザイン」タブにポインタを合わせ「CSS・HTML編集」をクリック
7.HTML編集フォーム内の、AlbiBoradを貼り付けたい位置に、コピーしておいたタグをペーストします。
(たとえばサイドバー上に表示したい場合は<div id=”side”>以下の箇所に貼り付けます。

WordPress.comの場合

 (2010.12.16 追加)

貼り付け例:http://nagisa3399.wordpress.com/

貼り付け方法:
1.WordPress.comの管理画面にログインして、「外観」→「ウィジェット」をクリックします。
2.「利用できるウィジェット 」一覧の中から「テキスト」をクリックして、そのまま右側の「サイドバー」というところまでカーソルを移動し、クリックを離します(ドラッグ&ドロップ)。
3.テキスト」ウィジェットの詳細窓が開くので、「タイトル」には「アルボード」と入力(しても、しなくてもよい)、本文の欄には以下のスクリプトを貼り付けます。

(枠内のコピーは、枠内で右クリックして「すべて選択」、ふたたび右クリックで「コピー」をクリック)
4.「保存」ボタンを押します。
5.「閉じる」リンクをクリックして、詳細窓を閉じます。
6.ブログにアクセスして、「アルボード」が表示されることを確かめます。

この作業で注意しなければならないことは・・・
上記の方法で「アルボード」をサイドバーに貼り付けた場合、それまでサイドバーに表示されていた他のウィジェットは全て消えてしまう、ということです。デフォルト(初期状態)でセットされているウィジェットの情報がクリアされてしまうためで、この場合には、「アルボード」以外にサイドバーに表示したいものを、自分で「利用できるウィジェット」一覧から選んで追加してやる必要が出てきます。

「カレンダー」「最近の投稿」「アーカイブ」「カテゴリ」「最近のコメント」「メタ情報」などが主なものになると思いますが、自分のブログに必要なものをドラッグ&ドロップで追加して、ブログを表示して確認してみて下さい。

いったんサイドバーを自分オリジナルのものに置き換えてしまえば、それ以降は、随時ウィジェットの追加・削除が行えるようになります。

ページの先頭へ↑

メインページの<もくじ>へ↑


(最終更新日:2010年12月16日 こちらアルボード運用部 SNS→ (PC) (携帯)