広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

カテゴリー別アーカイブ  :  

ボタンでYouTubeの動画を表示させる

YouTubeは自分も好きですが、ブログの中にたくさん貼ると重いです。ひとつのページにいくつもあると、そのページを開くのが大変です。

本当は、数を少なくするのがイチバンなんですが、どうしてもたくさん貼りたいというときに、ビデオではなくボタンにしたらどうだろう?ボタンを押したものだけ、そのビデオを表示するようにすれば少しは軽くなるのではないか?ということで作ってみました。

これはファンブログだけでなく、どのブログでも使えます。ただ、ビデオが表示されているから、見てみたくなるというのはあると思うので、使わない方がいい場合が多いとは思います。と、身も蓋もないことを言ってみる。

サンプル

船橋市の梨の妖精ふなっしー♪
2000年に一度だけ、この世に現れる、愛の戦士。
今日も元気に、梨汁ブシャー:;.,*+
こころを込めて踊ります♪

ふなっしーのcall me maybeを見る!

使い方

まずはYouTubeへ行き、通常のソースを取ってきます。最初に「共有」をクリック。そして「埋め込みコード」をクリックします。動画のサイズなどの設定をお好みに合わせたら、表示されている「埋め込みコード」をコピーします。

YouTube

埋め込みコード」を取ってきたら、この下の枠に、その「埋め込みコード」を張り付けてください。取ってきたのが正しいコードなら、貼り付け終わると、ボタンにするために「独自に生成されたコード」が表示されます。あとは、それをコピーして自分のブログの表示させたい場所に貼り付ければ完了です。

この下に表示したいYoutubeのソースを張り付けてください。

どなたでも、ご自由にお使いいただいて構いませんが、使ったらコメント欄に「使った」とだけ書いておいてください。

ソースコード

この下は、興味のある方だけご覧ください。生成されるソースコードは次のようになります。

<script type="text/javascript" src="http://api.dwm.me/js/youtube_show.js" charset="utf-8"></script>
<script type="text/javascript">youtube.button(640,480,'http:\/\/www.youtube.com/embed/RI6svNFmRAQ');</script>

1行目のスクリプトで、外部の.jsファイルを読み込んでいます。その中身は以下のとおりです。

var youtube_class=function(){
	this.count=0;
};

youtube_class.prototype.show=function(id,width,height,src){
	document.getElementById(id).innerHTML='<iframe width="'
		+width+'" height="'+height+'" src="'+src
		+'" frameborder="0" allowfullscreen></iframe>';
};

youtube_class.prototype.button=function(width,height,src){
	document.write('<input type="button" value="youtubeを表示" '
		+'onclick="youtube.show(\'youtube_'+this.count+'\','
		+width+','+height+',\''+src+'\');" /><br /><br />'
		+'<div id="youtube_'+(this.count++)+'"></div>');
};

var youtube=youtube?youtube:new youtube_class();

本当は外部ファイルにせずに、そのままコピペしてもらいたいんですが、少し長いだけでヒルんでしまう方がいるので、貼り付けるソースを短くしたかった。それで外部ファイルにしています。

新ブログ「Big Bang」で続きを読む

余白なしで横幅を100%使いたいモジュール

1行貼り付けるだけでリキッドレイアウトになるスクリプトを公開します

多くのブログでは、左右に余白がついています。その余白にしてしまっている部分もフルに使えれば、下のように大きな画像を貼り付けられます。これは、このブログの記事「自宅セルフパーマで勝負まつげ&ルミガン、ケアプロスト、ラティースの秘密」のキャプチャですが、横幅750ピクセルの画像を使っています。

大きな画像も貼り付けられる

下は商品紹介記事「figma 八神はやて The MOVIE 2nd A`s ver.」です。商品の特徴が伝わりやすいと思います。

figma

リキッドレイアウトとは?

このブログは横幅を100パーセント使い切って左右に余白がありません。このままだと、画面によっては表示しきれないのではないか?はみ出してしまうのではないか?と思われるかもしれませんがはみ出さないように作ってあります。

下のキャプチャを見比べて欲しいのですが、ウインドウを小さくすると、真ん中の記事部分が狭くはなりますが、左右はみ出さずに収まっています。ただし、あまりにも狭いと逆に見づらくなるので最小横幅は800ピクセルに設定しています。だから、800ピクセルより小さい場合は、はみ出しますが、それはわざとです。

左は100%のフルサイズで表示、右はウインドウを小さくして表示しています
100%のフルサイズで表示  ウインドウを小さくして表示

今、実際にブラウザのウインドウサイズを変えながら、このページを見てみると意味がわかると思います。こういう風に、幅を自動調整するレイアウトを「リキッドレイアウト」と呼びます。

初心者にリキッドレイアウトを説明するのは大変です。なので、1行張り付けるだけでリキッドレイアウトになるスクリプトを作りました。それを公開します。ただし、ファンブログのスキンでしか動きません。

設置方法

スキンに次の1行を張り付けるだけです。(もし複数行に見えていたら、それは表示幅の都合でブラウザが、そう表示しているだけです。コピーすれば1行になっています)

<script type="text/javascript" src="http://api.dwm.me/fanblog/js/liquid_layout_module.js"></script>

そのために、ファンブログのスキンを編集します。

ボタン

まず、ファンブログの管理画面左の「スタイルの編集」をクリック。
画面が変わると「フリースキンの編集」という項目が画面左にあり、次の一覧になっています。

  • スタイルシート
  • メイン
  • ポータル
  • アーカイブ
  • 1記事
  • プロフィール

この中の「スタイルシート」以外の5つを書きかえますが、作業内容はまったく同じです。

一覧から、まず「メイン」をクリックします。すると、右側に「メイン」スキンの内容が表示されますので、それを編集します。

スキンの終わりの方に、下のように書かれた場所があります。

</div><!-- /container -->
{$BlogAccessCounter$}
</body>

ここに、先程の1行を追加します。結果として下の通りになります。

</div><!-- /container -->
{$BlogAccessCounter$}
<script type="text/javascript" src="http://api.dwm.me/fanblog/js/liquid_layout_module.js"></script>
</body>

間違いなく書き込んだら、保存します。保存したら、もう「メイン」のページは横幅を100パーセント使った、リキッドレイアウトになっています。

後は同じ手順で「ポータル」「アーカイブ」「1記事」「プロフィール」のスキンも修正します。

適用サンプル

2カラムの例

左 Before     右 After
Before  

ガブリエルさんのブログ「イタリアンな日々」を例に使わせていただきました。

3カラムの例

左 Before     右 After
Before  

star lightさんのブログ「美容 美肌 美スタイル専門街」を例に使わせていただきました。

使う幅が広くなる分、今までの古いスキンに合わせて書いた記事には、余白がたくさん出来ます。文字を大きくするなど、見やすくする工夫が必要です。

新ブログ「Big Bang」で続きを読む

コメント欄に絵文字以外の画像を挿入する手順

独自拡張でコメント欄に絵文字以外の画像も入れられるようにしました。その使い方です。

NARUシカ

今回はNARUさんのちぎり絵作品「NARUシカ」を題材にして説明します。

コメント欄に表示する画像はアップロードするのではなくリンクです。すでにインターネット上にある画像しか使えません。たった今デジカメで撮った写真を、このブログにアップロードして表示するようなことはできません。また表示できるのは、末尾の拡張子が.jpg .gif .pngのいずれかのものに限られます。

手順

1.コメント欄のリンクボタンをクリックする。

リンクボタンは下の赤い丸で囲ったチェーンのようなマークです。これをクリックするとURL入力フォームが現れます。

ボタン

2.画像のURLを入力する。

入力フォームの見た目はパソコンによって違いますが、URLを書き込む場所とOKボタンがあるはずです。ここに画像のURLを記入します。先ほども注意しましたが、このURLの末尾が.jpg .gif .pngのものしか表示しません。たとえ画像ファイルであっても末尾がそうなっていないと表示しませんので注意してください。画像表示でなく普通のリンクを貼りたい時は、今までどおりに使えます。

URL入力フォーム

3.OKボタンを押す。

入力フォームにURLを入力したらOKボタンを押します。問題がなければプレビュー欄に画像が表示されます。後は普通にコメントを送信すれば完了です。

プレビュー画面に表示される

注意

使う画像は著作権が自分にあるもののみにしてください。無断で他人のサイトの画像を使わないようにお願いします。アダルト画像など、こちらでふさわしくないと判断したものは断りなく削除します。

このページのコメント欄に実際に入力したサンプルを置いておきます。

新ブログ「Big Bang」で続きを読む

投稿者名に「さん」をつける最新コメントモジュール

このブログのサイドバーの「最新コメント」の表示をカスタマイズしました。ファンブログ専用ですが、ソースコードを公開します。説明どおりに貼れば、このブログと同じ表示形式になります。

以前「サイドバーにもアバター表示モジュール」というのを公開しましたが、違いは次のとおりです。

  • 自分以外のコメント投稿者には「さん」をつけている。
  • 自分の名前とアバターからはリンクを外している。(同じブログに飛ぶだけなので)
  • 表示内容が微妙に違う。(詳しくは見比べてください)

サイドバーにもアバター表示モジュール」では「リンク集」と「最新トラックバック」も一括で改変しましたが、今回は「最新コメント」しか変更しません。

設置はこちらの方が簡単ですが、「リンク集」と「最新トラックバック」も統一デザインにしたいなら「サイドバーにもアバター表示モジュール」の方がオススメです。

ただし、併用は可能です。ガブリエルさんのブログ「イタリアンな日々」では2つのモジュールを併用して使ってくれています。

どちらを使うにせよ、ご自分のスキンのデザインに合わせるためには、スタイルシートで調整する必要があります。このブログで使っているスタイルシートも添付しますが、最終的にご自分で修正出来ないとしてもサポートはしません。

ご自由にお使いいただいて構いませんが、トラブルがあった場合の責任は負いませんのでご了承ください。

需要があるかどうかが知りたいので、使用する際は使う旨だけコメント欄に書き残してください。

再配布、転載はおやめください。

ソースコード

ソースコードは以下のとおりです。
2行だけ変更して使ってください。詳細はソースコードの下に書きます。

<script type="text/javascript">
<!--
var commentsTitle='最新コメント';
var myName='Tom';
var title=document.querySelectorAll('div#sidebar td.side_title');

var get_avater_src=function(href){
  var noImage='http://fanblogs.jp/ayzfqir5/file/384/LXVzci1sb2NhbC1hcGFjaGUyLWJsb2ctaW1hZ2UtcHJvZmlsZS1wcm9maWxlX2RlZmF1bHQxRtQ.gif';
  var freezeTom='http://fanblogs.jp/ayzfqir5/file/384/dG9tUak.jpg';
  var kako='http://0.gravatar.com/avatar/'
    +'c1a65a4a6387efade3f4436a9fa868e7?s=80&d=identicon&r=G';
  var naru='http://image.profile.livedoor.jp/icon/keywordchoice_60.jpg';
  var ettan='http://ettan.up.seesaa.net/image/images-thumbnail2.jpg';

  if('string'!==typeof href){return noImage;}

  if(href.match(/http:\/\/fanblogs\.jp\//)){
    var name=href.replace(/ /g,' ').replace(/\s+/g,'')
        .replace(/^http:\/\/fanblogs\.jp\//,'').replace(/\/.*$/,'');

    if(name.length){
      return name!='ayzfqir5'?'http://fanblogs.jp/'+name+'/file/profile':freezeTom;
    }
  }else if(href.match(/http:\/\/(.+\.)?cocorodesign\.net\/?/)){
    return kako;
  }else if(href.match(/http:\/\/ameblo\.jp\/pamusho\/?/)){
    return naru;
  }else if(href.match(/http:\/\/blog\.livedoor\.jp\/keywordchoice\/?/)){
    return naru;
  }else if(href.match(/http:\/\/ettan\.seesaa\.net\/?/)){
    return ettan;
  }

  return noImage;
};

for(var i=0;i<title.length;i++){
  if(title[i].innerHTML==commentsTitle){
    var td=title[i].parentNode.parentNode.parentNode.parentNode;
    var comments=td.querySelectorAll('div.side_text');
    var src='<table id="comments_table"><caption>'
        +commentsTitle+'</caption><tbody>';

    td.parentNode.parentNode.parentNode.style.display='none';

    for(var j=0;j<comments.length;j++){
      var a=comments[j].querySelectorAll('a');
      src+='<tr'+(comments.length-1==j?' class="last"':'')+'><td>';

      if(2!=a.length){
        src+='<img src="'+get_avater_src(null)+'" /></td>'
          +'<td><span class="guest">'+comments[j].firstChild.nextSibling.nodeValue+'</span>さん';
      }else if(a[0].innerHTML==myName){
        src+='<img src="'+get_avater_src(a[0].href)+'" /></td>'
          +'<td><span class="my">'+myName+'</span>';
      }else{
        src+='<a href="'+a[0]+'" target="_blank">'
          +'<img src="'+get_avater_src(a[0].href)+'" /></a></td>'
          +'<td><a href="'+a[0].href+'" target="_blank">'
          +a[0].innerHTML+'</a>'+'さん';
      }

      a=a[a.length-1];
      src+='から'+a.nextSibling.nodeValue+'<br />'
        +'<span class="small"><a href="'+a.href
        +'#commentPosts">'+a.innerHTML+'</a>へ</span></td></tr>';
    }

    document.write(src+'</tbody></table>');
    break;
  }
}
// -->
</script>

このソースコードを一端メモ帳にコピーして書き換えます。変更するのは次の2行の色のついている部分です。

var commentsTitle='最新コメント';
var myName='Tom';

最新コメントは、ご自分のブログで設定している「最新コメント」のタイトルに変更してください。調べ方は「カテゴリ並び替えモジュール」の時と同じですので、そちらを参照してください。

Tomは、ファンブログTOP > 管理画面TOP > ユーザー設定の「ニックネーム」(自分の名前)に書き換えてください。

あとひとつ、オプションですがURL未入力の投稿、またはファンブログ以外のURLに表示するアバターは下のものになっています。これがイヤなら自分で用意した画像のURLで var noImage= の後の ' と ' の間を書き換えてください。

noImage noImage

以上を間違いなく書き直したら、設置に入ります。

設置方法

書き直したソースコードをサイドバーに貼り付けます。貼り付け方がわからなければ「モジュールの設置方法」を見ながら実行してください。ただし、貼り付ける場所は「最新コメント」の直後でなければなりません。

貼り付け位置は必ず「最新コメント」の真下にする

以上を終えたら、ブログを開いて表示を確かめます。間違いがなければ、新しい状態で表示されています。

カスタマイズ

ただ、まだスタイルシートを書いていないので、美しい表示ではないでしょう。特にアバターの大きさがスゴいことになっていると思います。

スクリプトが正しく設置できたことを確認したら、一度貼り付けたソースを取り外してスタイルシートを書いてください。このモジュールで作成されるHTMLは次のとおりです。

<table id="comments_table">
  <caption>最新コメント</caption>
  <tbody>
    <tr>
      <td><img src="アバターのURL" /></td>
      <td><span class="my">投稿したブログオーナーの名前</span>から&nbsp;(01/02)<br />
        <span class="small"><a href="記事URL#commentPosts">記事タイトル</a>へ</span>
      </td>
    </tr>
    <tr>
      <td><a target="_blank" href="コメント投稿者のブログURL"><img src="アバターのURL" /></a></td>
      <td><a target="_blank" href="コメント投稿者のブログURL">コメント投稿者の名前</a>さんから&nbsp;(月/日)<br />
        <span class="small"><a href="記事URL#commentPosts">記事タイトル</a>へ</span>
      </td>
    </tr>
    <tr>
      <td><img src="noImageのURL" /></td>
      <td><span class="guest">コメント投稿者の名前</span>さんから&nbsp;(月/日)<br />
        <span class="small"><a href="記事URL#commentPosts">記事タイトル</a>へ</span>
      </td>
    </tr>
    (中略)
    <tr class="last">
      <td><a target="_blank" href="コメント投稿者のブログURL"><img src="アバターのURL" /></a></td>
      <td><a target="_blank" href="コメント投稿者のブログURL">コメント投稿者の名前</a>さんから&nbsp;(月/日)<br />
        <span class="small"><a href="記事URL#commentPosts">記事タイトル</a>へ</span>
      </td>
    </tr>
  </tbody>
</table>

新ブログ「Big Bang」で続きを読む

トラックバック一覧コンパクト表示モジュール

ファンブログブログカスタマイズ

トラックバックが送られてくると、表示に場所をとる割に見づらい。
ということで、コンパクトに表示するモジュールを書きました。

ファンブログ専用です。

Before
before

After
before

マウスを乗せると、内容が表示されます。

新ブログ「Big Bang」で続きを読む

記事一覧ナビモジュール

ファンブログ

この記事のカテゴリーは「スクリプト置き場」という名前です。
下は、この記事のカテゴリーを自動で調べて、そのカテゴリーの記事一覧を表示しています。

カテゴリーでなく、公開順の記事一覧を表示する事も出来ます。
自分のブログでなくても大丈夫です。下は、かこさんの最新記事一覧です。

高負荷でサーバーアカウントをサスペンドされました。
現在、対処の途中のため、アナウンスするまで
この記事のスクリプトは使わないでください。

新ブログ「Big Bang」で続きを読む

別ブログの最新記事を自動でリンクして紹介

これはNARUさんのライブドアブログ「キーワードチョイス2」に貼ってあるもののコピーです。
自分の別ブログを紹介しています。

★パパ視点の子育てブログ絶賛公開中!

「あぁ、悩み多きイクメン生活」

NARUのイクメンブログ。気にNARU?NARUよね。

たとえばですが、上のものと下のもの、どちらがより興味を惹かれるでしょうか。どちらも興味がない?それは残念です。

先ほど「お友達の最新記事を表示しよう!」に書いたスクリプトに自分で関数を加えると、このような表示も出来ます。

★パパ視点の子育てブログ絶賛公開中!

「あぁ、悩み多きイクメン生活」

NARUのイクメンブログ。気にNARU?NARUよね。

最新記事「」公開中

[内容]

新ブログ「Big Bang」で続きを読む

お友達の最新記事を表示しよう!

「パート派遣主婦のぐーたら子育て生活」
☆最新記事☆

こんなカンジで、お友達の最新記事をサイドバーに表示できるようにしました。
デザインはスタイルシートで調整できます。

新ブログ「Big Bang」で続きを読む

プロフィール画像をクリックしたらTwitterを開く

A8.netのファンブログ用情報です。

以前「プロフィールの写真は拡大できる」という記事で、プロフィール画像をクリックすると、大きくなると書きました。これは女性の写真が小さい時には非常に有用な情報でした。

しかし、この私のブログのプロフィール画像をクリックして大きくしても意味がありません。

そこで、プロフィール画像をクリックしたら私のTwitterに飛ぶようにしました。

新ブログ「Big Bang」で続きを読む

ソースコード変換エディタ

以前、「性器表現で痴漢エディタ」という記事でソースコードのタグをエンティティに変換する
スクリプトを公開しました。しかし、そこにスクリプトがあることに気がつく方は少ないようです。

実際に使ってくれたみかんさんは、大喜びだったのですが...

多分、記事のタイトルが悪かったのだと思います。
そこで、その記事中の2つのエディタだけ、ここに再掲します。ご自由にお使いください。

参考記事:
ハートマークを表示するの巻 エンティティの説明
タイトルは大事です

新ブログ「Big Bang」で続きを読む