ブログに横長の楽譜(1段譜)を画像で表示して弾き方などを解説する方法♪

2013年01月12日


ども、ピアノ教室管理人です。


ブログ上で部分的に楽譜を掲載して、弾き方などを解説したいことはありませんか?




楽譜全体の解説などは、1ページまるごとの画像を貼り付ければいいと思うんですが、
特定の一部分だけ抜き出して、演奏のポイントなどを説明したいときは、
少々事情がちがってきますよね。


特定の1小節、特定のフレーズだけの説明、
必要なのは楽譜全部じゃなくて1段譜だけってとき。


またはコードの解説などをしたいときは、その部分だけの楽譜を表示したものです。




でも残念なことに、
現在のHTMLではブログやサイト上に簡単に楽譜を記述する方法がありません。


そのため、どうしても画像にした楽譜を使う必要があるんですが、
ご存知のように楽譜はまず横方向に記述されています。


横に書いて、1段下がってまた横に続きます。




それに反して、
ブログの記事を書くスペースの横幅はそんなに広くはありませんよね。


このブログはかなり横幅を広くとっているんですが、
一般的によく見かける3カラムのブログになると
記事部分の横幅は300pxちょっとしかないこともしばしば。


すると必然的に縮小した画像やサムネイルでの表示になってしまい、
楽譜の細部が損なわれてしまうことがあります。


こんな感じに・・・

score-ex01.jpg
(※クリックすると拡大します。)


クリックして拡大すると、今度は解説文が同時に読めないっていうジレンマがぁ!
(;´Д`)アウ...




もっと楽譜を大きく表示して、しっかり解説した〜い!


そんなときはこの方法を。




<DIV>のoverflowを使う



score-ex02.jpg


こんな感じで横方向にスクロールするを作って、
その中に大きめの楽譜画像を表示しています、

(このサンプル画像は横1137pxもあります。)


これでどんな横長の楽譜、1段譜でも、
ブログにハッキリクッキリ表示できますよ!


(楽譜の右側は隠れますが...。)




【追記】
枠の縦横のサイズを指定してしまうので、
スマホやケータイでは正しく表示されない可能性があります。





HTMLコードはこうなっています。
<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>



では解説です。




width:480px;|枠の横幅


<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>


枠の横幅(ワイド=width)を指定している部分で、このサンプルでは480pxになっています。


枠の横幅はご自分のブログの記事部分の横幅に応じて値を加減してください。


たとえば「width:300px;」だとこうなります。

score-ex02.jpg





また指定自体を削除すると横幅いっぱいに広がります。。

score-ex02.jpg





height:259px;|枠の縦幅


<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>


枠の縦幅(ハイ=height)を指定しています。


枠の下にはスクロールバーが表示されるので、
「枠内に表示する画像の縦サイズ+20px」が目安です。

(20pxがスクロールバー分の幅です。)




padding:0;とmargin:0;|隙間と余白


<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>


「padding:0;」は枠と画像の隙間の値です。
サンプルでは「0」で、隙間なしにしています。


「margin:0;」は枠の外の余白です。
サンプルでは「0」で、余白なしにしています。




border:1px solid #CCC;|枠の線


<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>


枠の線(=border)を指定しています。


サンプルでは「1px」の「実線(=solid)」で、
色は「灰色(=#CCC)」に指定しています。


色の変更はコチラを参考にしてください。




overflow:auto;|はみ出したときの処理


<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>


枠の中身(画像)が、枠の横幅からはみ出した(=overflow)ときの処理の指定です。


今回の肝(キモ)となる部分ですね。




サンプルでは「overflow:auto;」となっていて、
自動(auto)でスクロールバーが表示されるように指定しています。




img|画像の指定


<div style="width:480px; height:259px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
--><img border="0" alt="score-ex02.jpg" src="http://kanrinin-fukuon.up.seesaa.net/image/score-ex02.jpg" width="1137" height="239">
</div>


枠の中に表示する楽譜画像の指定ですね。


ご自分でアップした楽譜画像を指定してください。



その際、サムネイル画像や縮小表示は解除して、
実寸大(実物)の画像を表示しないと意味がありませんから注意してください。




今回のコピーコード


<div style="width:※px; height:※px; padding:0; margin:0; border:1px solid #CCC; overflow:auto;"><!--
-->※ここに楽譜画像を指定します※
</div>


コピーしてお使いください。

※の部分はご自分で指定してくださいね。


【追記】
枠の縦横のサイズを指定してしまうので、
スマホやケータイでは正しく表示されない可能性があります。





ん?楽譜の画像はどうやって用意するの?


今回の記事ではコチラのフリーソフトを使って楽譜画像を準備しました。

作曲&楽譜作成のフリーソフトウェア|MuseScore (ミューズスコア)

MuseScore.jpg

また今回の楽譜画像は、MuseScoreの初期設定のサンプル楽譜を使用させていただきました。


楽譜が読めない管理人には、これが何の曲の楽譜だかサッパリわかりませんが。
(;´Д`)アウ...




でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。