So-net無料ブログ作成
» スポンサーリンク
So-netブログ改造ワザ
前の5件 | 次の5件

So-netブログ標準のMP3プレイヤーを使ってみました
» So-netブログ改造ワザ 

先日の So-net ブログのシステムアップデートで新しく実装された標準の MP3 プレイヤーを使ってみました。
ついでなのでデモ用に曲も1つ簡単なものを作ってみました。


 使ったネタは、MusicMaster.jp の年末年始 TB キャンペーンで当たった ProSamples シリーズのサンプリングデモ CD-ROM で、他の音はいっさい使わずに CD-ROM に入っていたループネタだけ使ってあまり凝ったことをせずに簡単に済ませました(=手抜きとも言う)。

 デモ版で収録されているループ素材が少ないので、手っ取り早くシンプルなドラムンベースを作ってみました。ミックスダウンのバランスは適当です。使った音ネタは20個(1トラックずつ)。

今時ドラムンベースかよって感じですが…(好きなので)


 ブログにアップロードできる音声ファイルは5Mバイト以下のサイズ制限があるので、今回は5分14秒(前後1秒ずつ無音)の曲を MP3 の 128kbps でエンコードしてギリギリ5Mバイトに収まるように調整してあります。

 ポッドキャストとして聴く場合は、ブログの RSS フィードがそのままポッドキャストのフィードになっていて、iTunes にドラッグ&ドロップで登録したら聴くことができました。



[関連サイト]
 So-neyブログ 新機能追加のお知らせ
 MusicMaster.jp
 Crypton Future Media


この記事で使っている曲(曲名なし)は TAN に著作権があります
Creative Commons License - Creative Commons クリエイティブ・コモンズ>帰属 - 非営利 - 派生禁止 2.1 日本
nice!(2)  コメント(0)  トラックバック(0)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク
DMR

サウンドハウス

So-netブログのプロフィールのアイコンをランダム表示させる
» So-netブログ改造ワザ 

久しぶりに So-net ブログ限定カスタマイズネタです。
単に見た目を変えるだけでたいしたものではありません。
ブログのプロフィールペインにあるアイコン画像をランダムに表示させるスクリプトです。

1.前準備

まず表示したいアイコンを72x72ピクセルで作成します。
形式は JPEG、GIF、PNG どれでもかまいません。
作ったアイコンをカスタムペインの編集画面でアップロードしてください。

2.スクリプトの貼り付け

下のコードをカスタムペインの空いているところにもしくは表示しているサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。
ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください

2タイプ用意しました。
●指定した確率で1枚を表示させるバージョン
<script type="text/javascript">
<!--
if( Math.floor(Math.random() * 5) < 1 )
document.getElementById("profile").getElementsByTagName("img")[0].src = "アイコン画像URL";
//-->
</script>

 上の例では1/5の確率で指定したアイコンが表示されてそれ以外はブログ設定で設定したアイコンが表示されます。

表示される確率を変更したい場合は、
if( Math.floor(Math.random() * 5) < 1 )

の 5 と 1 の部分を変更してください。

例えば 3/10 の確率にしたい場合は
if( Math.floor(Math.random() * 10) < 3 )

とします。

●元アイコンを含めた複数のアイコンをランダムに表示させるバージョン
<script type="text/javascript">
<!--
var prof_icon = [ 
"アイコン画像URL1", 
"アイコン画像URL2", 
"アイコン画像URL3" 
];
var rnd = Math.floor(Math.random() * prof_icon.length);
if( rnd != 0 )
  document.getElementById("profile").getElementsByTagName("img")[0].src = prof_icon[rnd - 1];
//-->
</script>

3.アイコン画像 URL の指定

貼り付けたスクリプトに先ほどアップロードしたアイコン画像URLを指定してやります。
とりあえずカスタムペインの編集欄の空いているところに、普段記事に書くときと同じようにそのまま画像の img タグを挿入して、先頭の "/blog" を除いて、必要な部分だけをスクリプトのアイコン画像URLのところに貼り付けて保存すれば完成です。

         ↓/images/~以降の URL
<img src="/blog/_images/blog/xxx/xxxxx/xxxx.jpg" />

 上のソースの例では3つの画像を指定していますが、増やしたい場合はカンマで区切って(最後の行はカンマなしで)同じように追加していけば OK です。

備考

ランダム表示になるのはプロフィールペインのアイコンだけで、コメント欄に表示されるアイコンはブログ設定で登録したアイコンになります。


10日でおぼえる JavaScript 入門教室 新版

10日でおぼえる JavaScript 入門教室 新版

  • 作者: 岡田 克司
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/02/05
  • メディア: 大型本
nice!(2)  コメント(2)  トラックバック(0)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


So-netブログの記事のフッターにバナーを表示させる
» So-netブログ改造ワザ 

[追記]
現在の So-net ブログはこの記事の頃に比べて標準機能でカスタマイズできる箇所が増えているので、この記事のような手法を使わなくても簡単にバナーを追加することができます。


ソネブロ限定ブログカスタマイズ。
記事欄の下にバナーエリアを表示する方法です。
ページの一番下ではなく記事毎にフッター部分に表示されます。

↓こんな感じになります( linkshare バナーを表示した例)。


<script type="text/javascript">
<!--
if (window.addEventListener){
  window.addEventListener("load", bottomBanner, false);
}else if (window.attachEvent){
  window.attachEvent("onload", bottomBanner);
}

function bottomBanner(){
  var divtag = document.getElementsByTagName("div");

  for( i = 0; i < divtag.length; i++ ){
    if( divtag[i].className == "posted" ){
      divtag[i].innerHTML += 'ここに表示したいHTMLを書く';
    }
  }
}
//-->
</script>

  コードをカスタムペインの空いているところにもしくは表示しているサイドーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください
 "ここに表示したいHTMLを書く"に表示したい文字とかタグを書いて保存すれば完了です。

 アップロード済みの画像を表示したい場合は、普段記事に書くときと同じようにそのまま画像の img タグを貼り付けて、先頭の "/blog" を除いた URL を挿入すれば OK です。

 挿入した HTML の途中に改行を入れないように注意してください。
 (BR タグは使えます)



ついでに応用ワザとしてバナーをランダムに表示するバージョン
<script type="text/javascript">
<!--
function bottomBanner(){
  var bnr = [
    'バナー画像URL1',
    'バナー画像URL2',
    'バナー画像URL3'
  ];
  var divtag = document.getElementsByTagName("div");

  for( i = 0; i < divtag.length; i++ ){
    if( divtag[i].className == "posted" ){
      divtag[i].innerHTML += bnr[Math.floor(Math.random()*bnr.length)];
    }
  }
}

if (window.addEventListener){
  window.addEventListener("load", bottomBanner, false);
}else if (window.attachEvent){
  window.attachEvent("onload", bottomBanner);
}
//-->
</script>

 緑の「バナー画像URL*」のところにバナー表示の HTML を挿入してください。上の例では3種類をランダム表示するようになっていますが、同じように行を追加していけば3つ以上でも表示することができます。
 あまりたくさんバナーを追加するとカスタムペインの1000文字制限を越えてしまうので注意しましょう。


どちらのパターンもブログ全体が読み込まれてから表示されるので動作は若干重くなります。



10日でおぼえる JavaScript 入門教室 新版

10日でおぼえる JavaScript 入門教室 新版

  • 作者: 岡田 克司
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/02/05
  • メディア: 大型本

nice!(3)  コメント(5)  トラックバック(0)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


So-netブログのコメント欄のゲストアイコン変更
» So-netブログ改造ワザ 

[追記] 2008/02/29 - システムリニューアルに伴い元アイコンの URL を変更

またまたソネブロ限定カスタマイズ小技です。
コメント欄のゲストアイコンを好きな画像に差し替えるスクリプト。

1.表示するアイコンの作成

まずアイコンを 36x36 ピクセルのサイズで作ります。

たとえばこんな感じで→
画像形式は JPEG, GIF, PNG どれでもよいです。
アニメーションGIFでもかまいません。

2.表示するアイコンのアップロード

アイコンができたらサイドバーのカスタムペインの編集画面でアイコンをアップロードします。

3.JavaScript コードの貼り付け

下のコードをカスタムペインの空いているところ、もしくはサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。
ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください



<script type="text/javascript">
<!--
function changeIcon(){
  var img = document.getElementsByTagName("img");

  for(var i = 0, len = img.length; i < len; i++){
    if(img[i].src == "http://blog.so-net.ne.jp/_img/cmn/profile_guest.gif")
      img[i].src = "/_images/blog/_xxx/xxx/xxx.xxx";    // ←ここに画像ファイルを指定
  }
}

if(window.addEventListener){
  window.addEventListener("load", changeIcon, false);
}else if(window.attachEvent){
  window.attachEvent("onload", changeIcon);
}
//-->
</script>

// ←ここに画像ファイルを指定」の部分はコメントなので消しても結構です。

4.表示するアイコンの URL 抽出

編集エリアの空いているところ(最下行)に、先にアップロードしたアイコンのタグを仮に貼り付けます。
注意: 画像の URL とファイル名はユーザごとに違うので各自変更してください。

<img src="/blog/_images/blog/_b81/sothis/4331441.png" />


5.表示するアイコンの URL 挿入

次に、4.で貼り付けた img タグから赤の部分 (/images 以降)をスクリプトの "/_images/blog/_xxx/xxx/xxx.xxx" のところに書きます。
書き換えができたら、4.で仮に貼り付けた img タグは消してください。


6.JavaScript コードの保存

保存ボタンで完了です。
カスタムペインを「非表示」から「表示」に変えることもお忘れなく。


[追記] 2008/02/28
2/25~2/27のシステムリニューアルでゲストアイコン(profile_guest.gif)の URL が変更されたので、それにあわせてコードを修正しました。

[追記] 2008/10/20
エルティアさんのブログ「エルティアの宝箱」で、システムリニューアル後の新しい管理画面を使った詳しい解説が掲載されていますのでぜひ参考にしてみてください。

[関連サイト]
 エルティアの宝箱 - 2008/10/20: ゲストアイコンを変更しました。


10日でおぼえる JavaScript 入門教室 新版

10日でおぼえる JavaScript 入門教室 新版

  • 作者: 岡田 克司
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/02/05
  • メディア: 大型本
nice!(63)  コメント(124)  トラックバック(7)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


So-netブログの記事の上にフリーエリアを追加する
» So-netブログ改造ワザ 

[追記] 現在の So-net ブログはこの記事の頃に比べて標準機能でカスタマイズできる箇所が増えているので、この記事のような手法を使わなくても簡単にフリーエリアを追加することができます。

ソネブロ限定ブログスキンのカスタマイズです。
記事欄のいちばん上にフリーエリア(バナーエリア)を表示する方法です。

JavaScript コード

↓こんな感じになります( linkshare バナーを表示した例)。


<script type="text/javascript">
<!--
function topFreeArea(){
  if(document.getElementsByTagName("object").length == 0)
  {
    var t = '<div class=articles-top></div><div class=articles>' +
               'ここに表示したい文字とかタグを書く' +
               '</div><div class=articles-bottom></div>';

    document.getElementById("main").innerHTML = t + document.getElementById("main").innerHTML;
  }
}

if(window.addEventListener){
  window.addEventListener("load", topFreeArea, false);
}else if(window.attachEvent){
  window.attachEvent("onload", topFreeArea);
}
//-->
</script>

 下のコードをカスタムペインの空いているところにもしくは表示しているサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください
 緑の部分に表示したい文字やタグを書いて保存すれば完了です。

 アップロード済みの画像を表示したい場合は、普段記事に書くときと同じようにそのまま画像の img タグを貼り付けて先頭の "/blog" を除いた URL を緑の部分に挿入すれば OK です。



スキンの記事枠を表示したくない場合は、div タグを全て省略すれば枠は表示されなくなります。

[追記] 2006/11/20 ランダムバナー表示版

緑の「バナー*」のところにバナー表示の HTML を挿入してください。

 下の例では3種類をランダム表示するようになっていますが、同じように行を追加すれば3つ以上でも指定できます。あまりたくさんバナーを追加するとサイドバーの1000文字制限を越えてしまうので注意。

<script type="text/javascript">
<!--
function topFreeArea(){
  var bnr = [
    'バナー画像URL1',
    'バナー画像URL2',
    'バナー画像URL3'
  ];

  var t  = '<div class=articles-top></div><div class=articles>' +
              bnr[Math.floor(Math.random() * bnr.length)] + 
              '</div><div class=articles-bottom></div>';

  document.getElementById("main").innerHTML = t + document.getElementById("main").innerHTML;
}

if(window.addEventListener){
  window.addEventListener("load", topFreeArea, false);
}else if(window.attachEvent){
  window.attachEvent("onload", topFreeArea);
}
//-->
</script>

ページ全体が読み込まれてから表示されるので動作は若干重くなります。


10日でおぼえる JavaScript 入門教室 新版

10日でおぼえる JavaScript 入門教室 新版

  • 作者: 岡田 克司
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/02/05
  • メディア: 大型本

nice!(1)  コメント(4)  トラックバック(0)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


前の5件 | 次の5件
So-netブログ改造ワザ