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

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

Presented by Guitar Magazine


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

右にあるのが、指板図くんのブログパーツ第2弾・・・
"bloguitar"(ブロギター)です。

これを使うと、あなたのブログに、ギターコードの指板図やタブ譜を簡単に表示させることができます。♪ボタンをクリックすると音も鳴ります。

コードはあなたが自由に決められます。コードは4つまで並べられるので、短いコード進行も表現できます。

bloguitarの作成には、本サイト内の「作ろう! マイコードブック」を使うため、まずは「作ろう! マイコードブック」の基本的な操作法を覚える必要がありますが、とくに難しいものではありません。ふだんギターを弾いている人ならば、すぐにbloguitarが作れるようになるでしょう。


2. bloguitarの使用例

bloguitarの使用例と各機能を、実物を使いながら紹介します。

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

【例1】 コード表

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

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

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

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

バンドメンバーへ。

今日練習した新曲のイントロだけど、ギターは普通のEmよりも、こっちの響きの方がいいよね?

※このように指板図がひとつだけの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】

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

指板図がひとつだけのbloguitarを作るには、「指板図選択欄」で指板図を選んだあと、上の[ブログパーツ化]ボタンをクリックします。

指板図を2個から4個並べたbloguitarを作るときは、「指板図配置欄」の最初の4マス(「ブログパーツ作成欄」)に指板図をひとつ以上配置したあと、下の[ブログパーツ化]ボタンをクリックします。


【手順2】

「ブログパーツ用HTMLコード表示パネル」が開いたら、「ブログパーツ見本」を見てください。

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


【手順3】

必要に応じて、右側にあるラジオボタンで次の項目を選びます。

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

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

【手順4】

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

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

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

【手順5】

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

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

※bloguitarをブログのサイドバーに貼るときは、横幅にご注意ください。サイドバーよりもbloguitarの横幅の方が長いと、カラム落ち等が生じてページ全体のデザインが大きく崩れる可能性があります。

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

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

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

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

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

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

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

※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を貼る必要がある場合は、音声機能を無効にすることも考えてみてください。音声がロードされなくなって表示が速くなります。


ギター向け 出版物一覧ギターの弾き方、上達への近道はここにある!
エレキギター向け 出版物一覧エレキギターの弾き方、上達への近道はここにある!
アコースティックギター向け 出版物一覧アコースティックギターの弾き方、上達への近道はここにある!
ギター初心者向け(入門・基礎)ギター初心者向けに、基礎をわかりやすく解説!

Copyright © Rittor Music,Inc., an Impress Group company. All rights reserved.