指板図くん:ブログパーツ"bloguitar"

"bloguitar"(ブロギター)は、あなたのブログに、ギターコードの指板図やタブ譜を表示するためのブログパーツです。どんなコードも自由に作れて、音も鳴らせます。このページでは、その使い方や作り方について説明します。


1. ブログパーツ"bloguitar"の概要

"bloguitar"(ブロギター)は、ギターコードの指板図、またはタブ譜を、あなたのブログに簡単に表示させるためのブログパーツです。音も鳴ります。

指板図やタブ譜の内容は、あなたが自由に決められます。コードは最大で4つまで並べられるので、短いコード進行も表現できます。

bloguitarの作成には、本サイト内の「作ろう! マイコードブック」を使います。そのため、まずは「作ろう! マイコードブック」の基本的な操作法を覚える必要がありますが、決して難しいものではありません。慣れてくれば、好きなコードを作って自分のブログに貼り付けるまでに、1分とかからないようになるでしょう。


2. bloguitarの使用例

bloguitarの使用例と各機能を、実物を使いながら紹介します。指板図についた♪ボタンをクリックすると音が鳴ります

薄いオレンジ色の枠内は、ブログ内の記事や日記の一部だと思ってください。

【例1】 コード表

小学校低学年のFくんはまだ手が小さく、ギターのコードを大人と同じようには押さえられずに泣いていたのですが・・・

・・・のように高音側の3本の弦だけで弾けるコードを教えたところ、「これなら手が痛くない!」と言って、それからはいつも楽しそうにギターを弾いてくれるようになりました。

※この例のように、市販の(本の)コードブックにはあまり載っていない指板図も作れます。

【例2】 指板図(ひとつだけ)

バンドメンバーに告ぐ。今日練習した新曲のイントロだけど、ギターはこのボイシングの方がよくね?

※このように指板図がひとつだけのbloguitarを作ることもできます。この横幅であればブログのサイドバーに入れることもできるでしょう。

※背景色は、白、赤、青、黄、緑、灰、の5色から選べます。ここでは青を指定しています。

※ストロークの速度は0〜5の6段階から選べます。この【例2】では、最も遅い"5"に指定しています。上の【例1】では比較的速い"1"を指定していますので、聴き比べてみてください。

【例3】 タブ譜

Em7-A7-D△7という進行を例にとろう。
この場合、ドミナントであるA7をE♭7で代替する例が、ジャズにおいてはよく見られる。

このE♭7が“裏コード”と呼ばれるものである。

※bloguitarをギターコードの解説記事に利用した例です。

※指板図ではなくタブ譜で表示しています。

※さらにこの例では音声機能を無効にしています。 音声機能を無効にすると♪ボタンは表示されず、音声ファイルもロードされなくなるので、その分、表示にかかる時間を短縮できます。

【例4】 効果音

彼に呼び出されたときからイヤな予感はしてたんだけど・・・



ついにハッキリ言われたよ!
他に好きな子できたって!!!


この恋オワタ\(^o^)/

※bloguitarを日記の中の効果音として使った例です。コード名や音楽理論などはまったく気にしないで作った方が、面白い響きが見つかるかもしれません。

※なおここでは1つの記事に2つのbloguitarを貼っていますが、2つ以上のbloguitarを素早く続けて鳴らそうとしても、コードが完全には鳴り切らないことがあります。これはFlashPlayerの同時発音数に上限があるためです。この点にはご留意の上、うまい使い方を見つけてください。このページの最後のご利用上の注意点【4】もあわせてお読みください。

【例5】 チューニング用

おいらチューナーも音叉も持ってないんでこれ貼っとく。
よかったらみんなも使っておくれ。
ベースの人もたぶんこれでチューニングできると思うよ。

※開放弦だけで作ったbloguitarを、ギターをチューニングするときに使う例です。

※コード名の部分を書き換えられることを利用して、ここでは「6弦E」「5弦A」といった文字を入れています。

※ちょっとわかりにくい点ですが、フレット番号の数字(0、1、2、3)が表示されている位置にもご注目ください。上に挙げた【例1】【例2】【例4】では、フレット番号がフレットとフレットの中間に表示されていましたが、この【例5】ではフレットの真下になっています。このようにフレット番号の表示位置も選択できます。どちらの方が見やすいかは人それぞれですので、好きな方を選んでください。

以上が使用例でした。おそらく他にも色々な使い方があると思います。皆様のアイディアに期待しています!

3. bloguitarの作り方

bloguitarは、「作ろう! マイコードブック」で作ります。

「作ろう! マイコードブック」をまだ使ったことがない方は、先に「作ろう! マイコードブック:チュートリアル」をご一読いただいた上で、しばらく遊んでみてください。使い方はすぐに覚えられると思います。

以下は、「作ろう! マイコードブック」で指板図の登録や配置が完了した状態からの説明となります。

【手順1-A】

「作ろう! マイコードブック」の「2.指板図の選択→配置」の欄には、[ブログパーツ化]と書かれたボタンが2つあります。

指板図がひとつだけのbloguitarを作るには、自分で登録した指板図をどれか1つ選択した上で、「▼選択中の指板図」欄の左横にある[ブログパーツ化]ボタンをクリックします。


【手順1-B】

指板図を2個〜4個並べたbloguitarを作るときは、「▼指板図配置欄」の最初の4マス(水色の線で囲まれた「ブログパーツ作成欄」)に指板図をひとつ以上配置した上で、その左横にある[ブログパーツ化]ボタンをクリックします。


【手順2】

[ブログパーツ化]ボタンをクリックすると「ブログパーツ用HTMLコード表示パネル」が開きます。

このパネルに表示された「ブログパーツ見本」を見て、間違いがないか確認してください。

♪ボタンをクリックして音も聴いてみましょう。


【手順3】

必要に応じて右側にあるラジオボタンで次の5項目を設定します。

●背景色 (白/赤/青/黄/緑/灰)
●サウンド再生機能 (ON/OFF)
●表示 (指板図/タブ譜)
●ストロークの速度 (0/1/2/3/4/5)
●フレット番号の位置 (中間/真下)

※音量を変えたいときはパネルをいったん閉じ、「1.指板図の作成→登録」欄の右端にあるボリュームのスライダーで音量を変更したあと、再度「ブログパーツ化」ボタンをクリックしてください。

【手順4】

見本を再度確認したら、[HTMLコードをクリップボードにコピーする]ボタンをクリックします。

これによって、ボタンの上のテキストボックス内に表示されているHTMLコードが、OSのクリップボードにコピーされます。

※テキストボックス内のHTMLコードは、マウスのドラッグで選択してコピーすることもできます。

【手順5】

そしてあなたがお使いのブログサービスの管理画面にアクセスし、今コピーしたHTMLコードを、ブログの本文またはサイドバーなどのテンプレート内にペーストします。

公開後、あなたのブログにbloguitarが表示されたら成功です。

※bloguitarをブログのサイドバーに貼るときは、横幅に十分ご注意ください。サイドバーよりもbloguitarの横幅の方が長いと、カラム落ち等が生じてページ全体のデザインが大きく崩れる可能性があります。多くの場合、指板図を2つ以上並べたbloguitarはサイドバーには使えないでしょう。

※HTMLの知識がある方なら、ブログ以外のWEBページにbloguitarを貼ることもできます。

4. bloguitarをブログ以外で使う方法

自分のブログを持っていない方や、ブログパーツが貼り付けられないブログサービスを利用している方でも、bloguitarを利用する方法があります。やり方は以下のとおりです。

【1】(ブログパーツとして利用する場合と同じように)[ブログパーツ化]ボタンをクリックして「ブログパーツ用HTMLコード表示パネル」を開きます。

【2】パネル上にある[実物を確認する]ボタンをクリックします。すると、ブラウザで新しいウィンドウが開き、bloguitarの実物が表示されます。このとき、ブラウザの上部のURL入力欄にはbloguitar自体のURLが表示されています。

【3】このbloguitar自体のURLを、次のように使用します。

●例1:URLをブラウザのブックマーク(お気に入り)に登録する。
●例2:URLをメールの本文に貼り付け、友達に送信する。
●例3:URLに(自分のブログから普通に)リンクを貼る。

※bloguitarのURLはかなり長いものになりますが、この中には、あなたが作ったbloguitarを再現するために必要な情報が含まれていますので、必ず全体をコピー&ペーストしてください。

5. bloguitarご利用上の注意点

【1】
自分のブログにブログパーツを貼るのは初めて、という方は、まずご利用のブログサービスのヘルプなどを一読することをお勧めします。ブログパーツを貼ることができないブログサービスもありますので、その点を最初にお確かめください。

【2】
bloguitarを表示するにはFlashPlayerのバージョン7以降がパソコンにインストールされている必要があります。またブラウザのJavaScriptが「有効」になっている必要があります。

【3】
「一度貼ったbloguitarを別のものに差し替えたのに、なぜか前のものが表示されてしまう」という現象が見られたときは、ブラウザを何度か再読み込みしてください。

※Windows版のFirefoxでは、単なる再読み込みでは表示が変わらないことがあります。その場合はCtrlとF5の2つのキー、またはCtrlとShiftとRの3つのキーを同時に押して、キャッシュを上書きする再読み込みを行ってください。

【4】
1つのページに多数のbloguitarを貼り付けて大きなコード表を作ることも可能ではありますが、ロードにそれなりの時間がかかるようになりますので、お薦めはできません。基本的には、bloguitarはひとつのページにつき1個か2個ぐらいが望ましいでしょう。

※その点でいえば、今ご覧のこのページは良い例ではありません。環境によってはロードに時間がかかります。

※複数のbloguitarを貼る必要がある場合は、音声機能を無効にすることも考えてみてください。音声がロードされなくなって表示が速くなります。


【5】
bloguitarのご利用によって何らかの問題が生じた場合も当方では責任を負いかねますので、あらかじめご了承ください。ご意見、ご希望、不具合報告等は下記のメールアドレスで受け付けております。

gmonline@rittor-music.co.jp
※メールの件名は「指板図くん」でお願いします。