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

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

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さんのブログ「美容 美肌 美スタイル専門街」を例に使わせていただきました。

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

“余白なしで横幅を100%使いたいモジュール” の続きを読む

最新記事だけ日付を消す新スクリプト -お知らせ枠の設置-

先ほど「querySelectorとquerySelectorAll」という記事を書きましたが、実はあれ、この記事の前フリです。

楽して稼ぎたい」のマスクドライダー17号さんなんですが、ブログを開くと最新記事を「お知らせ」欄として使っています。

最新記事を未来の日付にすれば、一番上に表示されるので、「お知らせ」を書いて常に表示できます。

問題なのが、しばらくの間「2017年05月27日」と表示されているんですね。待っていれば消えるんですけど。

どうやって消しているのかというと、スクリプトを使っています。そのソースを変えれば、もっと早くに、すぐ消えるんじゃないか?と、思ってソースを見てみました。実にドンくさいソースコードでした。

でもよく考えたら、これは私が書いたものでした

そのソースコードが、これですが、無駄に長い。「記事の日付を消したい」より

<script type="text/javascript">(function(){var entries=document.getElementById('entries');if(!entries){return;}var div=entries.getElementsByTagName('div');if(!div){return;}for(var i=0;i<div.length;i++){if(div[i].className=='entry'){var child=div[i].getElementsByTagName('div');if(child){for(var n=0;n<child.length;n++){if(child[n].className=='entryDate'){var date=child[n].innerHTML.replace(/^\s+|日\s*$/g,'').replace(/年|月/g,'/').split('/');var entrydate=new Date(date[0],date[1]-1,date[2]);var today=new Date();if(today.getTime()<entrydate.getTime()){child[n].style.display='none';div[i].className='entry future';break;}return;}}}}}})();</script>

これを、先ほどの記事「querySelectorとquerySelectorAll」を使って書きかえます。

まずは、古いコードをスキンから削除してください。もういりません。そして、この下のコードを使います。

新しいソースコード

<script type="text/javascript">date=document.querySelector('div.entryDate');if(date)date.style.display='none';</script>

すごく短くなった。querySelector恐るべし!

ただし、手を抜いています。最新記事の日付は常に未来である。その記事は必ず先頭に表示される。そういう前提で作りました。

設置方法

これを、スキンではなく、「2017年05月27日」の日付の記事の中に付け加えます。

張り付けるのは、記事の最初でも最後でも構いません。
問題がなければ、「2017年05月27日」の日付はソッコーで消えます。


追記

実際にマスクドライダー17号さんが設置したところ、ある事情でうまくいきませんでした。
(上のソースは、うまくいくように修正済みです)

それに関して別の記事「ソースのバグの作り方 -if文のカッコ-」で説明しています。

1行追加するだけで絵文字が増える-コメント絵文字スクリプト2のカンタン設置方法-

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

ファンブログ専用スクリプト

これは昨年公開したスクリプト「スキンに1行追加するだけで絵文字が増える-コメント絵文字スクリプト2劇速Ver.-」の設置をカンタンに済ませるための記事です。すべて昨年の記事に書いてあるので、よく読んでもらえば出来るはずなんですが、初心者が迷わず設置出来るようにまとめました。

スキンに次の1行を貼り付けるだけで下の絵文字が使えます。
サンプルは、このブログのコメント欄を見てください。

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

使う場合はこの記事の最後に書いてある使用条件を必ず守ってください。

携帯未対応です。携帯で見ると絵文字の場所に{e:100}のようなコードが表示されます。
それでも構わない方のみご使用ください。

カンタンな設置方法

ボタン

まず、ファンブログの管理画面左の「スタイルの編集」をクリック。

画面が変わったら「フリースキンの編集」と言う項目から「1記事」を選択。

「フリースキンの編集」は画面左にあり、次の一覧になっています。

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

今回編集するのは「1記事」だけです。他は変更の必要はありません。

「1記事」の画面になったら画面右のタイトルが「1記事テンプレートの編集」になります。
この右側の枠の中を編集します。

1記事テンプレートの編集で一番最後から数行以内</body> と書いてある行があるので、その直前に先ほどの1行を貼り付けてください。

つまりこうなります。

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

これで保存すれば終了です。絵文字が設置できています。

スキンを編集するのが怖い場合

もし、どうしても自信が無い場合は、追加するコードをサイドバーに貼り付けても動きます。

サイドバーに追加する方法がわからなければ、別記事「モジュールの設置方法」を見てください。

ただし、使っているスキンによってはサイドバーに貼り付けても動かない事があります。その場合は、上に書いてあるとおりにスキンを編集する以外にありません。

取り付け方法、削除方法に関する、すべての情報は、「スキンに1行追加するだけで絵文字が増える-コメント絵文字スクリプト2劇速Ver.-」に書いてあります。

使用条件

スクリプトは私が作ったものなので、自由にお使いいただいて構いません。
ただし絵文字は下のサイトのものを使用しています。

このスクリプトの使用条件として、必ず下記サイトに登録してください。

登録は無料で、グーグルのgmailやYahooメールだけで登録できます。
お断りしておきますと、下のバナーから入会されると私に100円報酬が入ります。ご了承ください。

もし入会せずに使用して、著作権等法的な問題が発生しても当サイトは一切関知しません。

エモジバ

絵文字の配布元に確認しましたところ、以下のお返事をいただいています。
回答メールを転載してもよいということなので掲載します。

件名:(エモジバ)お問い合わせありがとうございます。
2012年08月21日 19:35

ご連絡ありがとうございます。
エモジバ運営局です。

いつもエモジバをご利用下さり、誠にありがとうございます。
さっそくご連絡いただいたブログツールに関してのお話になります。
弊社としましてはこのような場合、二次利用的な部分がありますので通常禁止し
ておりますが、今回に限り絵文字の利用の方を承諾したいと思います。

理由としましては、きちんとご連絡を下さったことと、独自にスクリプトを書い
ていただき、ファンブログにて弊社絵文字を使えるようにしていただこ とをう
れしく思うことの2点です。

アフィリエイトに関しても特に問題ございません。


ただ1点お願いがあるのですが、エモジバは投稿サイトになりますので、
著作権の侵害になる恐れのある絵文字が上がってしまうことがあります。

こちらに関しては、監視及び削除対応のほうを随時行っておりますが、そのよう
な絵文字を「エモジバの絵文字」として紹介されますと少し問題があり ますの
で、明らかに何かのキャラクターの絵文字であるといったものはサイトにアップ
ロードしないようにお願いできればと思います。


こちらの文章をサイト内に転載することも問題ございません。

-- 
エモジバ http://emjb.jp

エモジバさんに感謝。
このページのスクリプトを使う際は、下のコメント欄にその旨を書き残してくれるとうれしいです。

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

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

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

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

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

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

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

ただし、併用は可能です。ガブリエルさんのブログ「イタリアンな日々」では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='/dwm/wp-content/uploads/2013/08/384_2.gif';
  var freezeTom='/dwm/wp-content/uploads/2013/08/384_3.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>

“投稿者名に「さん」をつける最新コメントモジュール” の続きを読む

絵文字一覧表作成スクリプト

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

同じようで、少しだけ違うものを繰り返し表示するにはスクリプトで書き出すのが便利です。

一つ前の記事「絵文字URL対応表 -ファンブログ-」で使った一覧表作成スクリプトのソースコードです。
絵文字のURLだけ知りたい方は「絵文字URL対応表 -ファンブログ-」をご覧ください。

<script type="text/javascript">
<!--
var images1='';
var images2='';
var br_flag=1;

for(var i=0;i<220;i++){
  var img='<img src="http:\/\/fanblogs.jp/image/emoji/'+i+'.gif" alt="'+i+'" title="'+i+'" />';

  images1+=img+'&nbsp;&nbsp;';
  images2+=img+'&nbsp;は&nbsp;<span style="color:#0000ff;">http:\/\/fanblogs.jp/image/emoji/'
    +'<span style="color:#ff0000;">'+i+'</span>.gif</span>&nbsp;です。<br />';

  if(br_flag==12){
    br_flag=1;
    images1+='<br />';
  }else{
    br_flag++;
  }

  if(i==144){
    i=199;
  }
}

images2+='<span style="font-size:90%;">(145から199は欠番です)</span>';

document.write('<p>'+images1+'</p>');
document.write('<p>'+images2+'</p>');
// -->
</script>

絵文字は横1列12個で改行しています。12個の個数を変更するには
if(br_flag==12){
の行の12の数を変更してください。

絵文字一覧だけが必要で、その下の
0 は http://fanblogs.jp/image/emoji/0.gif です。
の一覧が不要なら、
document.write(‘<p>’+images2+'</p>’);
の1行を削除します。

絵文字一覧が不要で、その下の
0 は http://fanblogs.jp/image/emoji/0.gif です。
の一覧だけ欲しいなら、
document.write(‘<p>’+images1+'</p>’);
の1行を削除します。

注意:自動改行を有効にして書いた記事の中に、このソースコードを貼り付けても動きません。

表示結果