パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる
今年に入ってからも「週刊 マクロス・クロニクル」が創刊されるなど、依然人気の高いマクロスです。
超時空要塞マクロスから最新作マクロスFB7まで週刊マクロス・クロニクル
劇場版「マクロスＦＢ７ オレノウタヲキケ！
」がBlu-rayとDVDで4月24日に発売される事が決定しました！
内容
西暦2059年、新天地を目指し銀河を航行中の第25次超長距離移民船団「マクロス・フロンティア」は未知の敵(バジュラ)と交戦状態となる。
バジュラと最前線で戦うS.M.Sスカル小隊隊長のオズマ・リーは、ある日バジュラとも違う謎の生命体と出会う。その謎の生命体は、ある船団の記録映像を置いていった。その映像を見たオズマ、ランカ、シェリルは…。
Blu-ray（初回限定版）には豪華な映像特典ディスクが付いています！
さらに、BANDAI VISUAL CLUB（BVC）で予約すると限定特典が付属！
その他の場所で予約するなら、下の一覧からどうぞ！
R
楽天市場
今年はPullip（プーリップ）が10周年ということで、いろいろ企画されておりますが、「ベルサイユのばら」来ました (*゜▽゜*)♪ 細部がよくわかるアップの写真をつけて、ご紹介します。プーリップ / マリー・アントワネット(Marie Antoinette)プーリップ / オスカル・フランソワ(Oscar Francois)テヤン / アンドレ・グランディエ(Andre Grandier)悲劇の王妃、マリー・アントワネット。大きな羽根飾り、くるくるのカールヘア、ピンク色の耳飾り、リボンがたくさんあしらわれた貴族らしい可憐なドレスなど原作のマリーをそのままにプーリップ化しています。
今年はPullip（プーリップ）が10周年ということで、いろいろ企画されておりますが、「ベルサイユのばら」来ました (*゜▽゜*)♪ 細部がよくわかるアップの写真をつけて、ご紹介します。
© 池田理代子プロダクション
画像をクリックすると、通販の商品予約ページへ移動します。その他の場所でご予約なさる場合は下の一覧からどうぞ！
R
楽天市場
悲劇の王妃、マリー・アントワネット。大きな羽根飾り、くるくるのカールヘア、ピンク色の耳飾り、リボンがたくさんあしらわれた貴族らしい可憐なドレスなど原作「ベルバラ」のマリーをそのままにプーリップ化しています。
男装の麗人、オスカル・フランソワが軍服で登場です。メイクは男装した女性軍人らしく、上がり眉・上向きアイラインで、力強く格好良い印象。オスカルの特徴である大きくウェーブがかったブロンドヘアも再現しています。
オスカルを支え続けた男、アンドレ・グランディエが登場！原作同様、衣装は赤と白の飾りが入った軍服に、髪は黒い癖毛。アンドレが左目を黒髪で覆い隠す様子を再現出来ます。
前の記事「記事の先頭にアイコンを挿入する方法」の最後で、記事の文字数を切り詰める方法を簡単に書きました。この記事では、その部分だけ詳しく説明します。
普通に、文章を指定文字数で切り詰めるなら次のようにすれば実現できます。
function hoge(str,len){
return str.length>len?str.slice(0,len)+'…':str;
}
第１引数strには文字列、第2引数lenに切り詰めたい長さを指定します。lenより長ければ、len文字で切り詰め、その後に「…」を加えます。ただしマルチバイト文字列の場合、どの文章も同じ文字数で切られない可能性があります。その場合は文字数ではなく、バイト数で切られていると思います。
文章と、文字数を入れて実行ボタンを押してください。
文章:
文字数：
HTMLの場合はタグを消去しないと表示が崩れる可能性があります。文字列を切り詰めた結果、終了タグがなくなってしまったり、タグの途中で切れてしまったりするからです。
<p>こんにちは。</p>
-> <p>こんに…  終了タグがなくなってしまった！
<p>こんにちは。<span style=”color:#0000ff;”>今日はいい天気ですね！</span></p>
-> <p>こんにちは。<span style=”col… タグの途中で切れてしまった！
そこで、文字を切り詰める前にHTMLタグを正規表現で消去します。
str.replace(/\<script.*?\>.*?(\<\/script\>)|\<style.*?\>.*?(\<\/style\>)|\<.+?\>/g,'');
<と>のエスケープは正規表現自体には必要ないかもしれませんが、JavaScriptをHTML内に書いた場合にトラブらないようにエスケープしておきました。たとえば、よくdocument.write(‘<scr’+’ipt’というような記述をしますが、これはdocument.write(‘\<script’でも大丈夫です。
HTMLに対応した修正版
function hoge(str,len){
str=str.replace(/\<script.*?\>.*?(\<\/script\>)|\<style.*?\>.*?(\<\/style\>)|\<.+?\>/g,'');
return str.length>len?str.slice(0,len)+'…':str;
}
このブログでは、下のキャプチャのように記事のカテゴリーごとに違うアイコンを表示しています。その実現方法です。このブログはファンブログというサービスに書いているので、ファンブログを例にとりますが、他のブログでも応用できます。
先に結論を書くと、このブログで使っているアイコンはFree Icon set – Icon Edenからダウンロードした無料アイコンセット「iCandies」です。
インターネットを探すと、無料で使えるアイコンは沢山見つかります。今回、自分はGIGAZINEの記事「フリーでハイクオリティな「IconEden」による商用利用可能な無料アイコンセットいろいろ」で、このアイコンを見つけました。GIGAZINEを見ると関連記事で、まだまだたくさん色々なアイコンを紹介してくれています。
他にもPhotoshop VIPの「RESOURCE/Icon まとめ記事/アイコンまとめ」など、アイコンを画像付で紹介してくれているサイトは沢山見つかるので、そういうところで探すと、お気に入りのものが見つかると思います。
自分の使うアイコンを入手できたら、それをサーバーにアップロードします。ファンブログの場合、記事の中にアップロードするしかないのですが、ひとつの記事にアップロードできる画像は5個までです。何十個もアップロードする場合は、とても大変な作業になります。
なので、私は自分の契約している別サーバーにFTPでアップロードしました。私は使ったことがないので、わかりませんが無料で使えるファイルサーバーはいくつかあるようです。
今回は、カテゴリーごとに違うアイコンを表示させるため、まずその設定をします。つまり、どのカテゴリーでどのアイコンを表示させるかの設定です。具体的にはJavaScriptのオブジェクトを使って連想配列で処理します。このブログの場合は次のようになります。
var categories={
"category_5":"37_64x64.png",
"category_28":"43_64x64.png",
"category_6":"41_64x64.png",
"category_7":"51_64x64.png",
"category_27":"50_64x64.png",
"category_30":"45_64x64.png",
"category_34":"40_64x64.png",
"category_35":"36_64x64.png",
"category_33":"44_64x64.png",
"category_20":"42_64x64.png",
"category_13":"2_64x64.png",
"category_32":"55_64x64.png",
"category_24":"34_64x64.png",
"category_18":"25_64x64.png",
"category_15":"26_64x64.png",
"category_26":"9_64x64.png",
"category_16":"56_64x64.png",
"category_19":"48_64x64.png",
"category_25":"54_64x64.png",
"category_29":"5_64x64.png",
"category_31":"19_64x64.png"
};
左側の “category_xx” がキーで、右の “xx_64x64.png” が、呼び出すファイル名です。
キーは、カテゴリーごとのURL「http://fanblogs.jp/ユーザー名/category_xx/」の最後「category_xx」を記入します。たとえば、カテゴリー「超初心者HTML入門」のURLは「http://fanblogs.jp/ayzfqir5/category_28/」なので「category_28」になります。
私はアイコンを、すべて同じディレクトリにアップロードしたので右側はファイル名だけですが、ファンブログにアップロードした場合は、ファイル5個ごとにディレクトリ構成が違うので、フルパスで記入する必要があります。
今、このブログのスキンは完全自作でファンブログのものとは違う構成なのですが、ファンブログのスキンなら下のようになっていると思います。
<BlogEntries>
<div class="entry">
<div class="entryDate">{$BlogEntryDateformat="%Y年%m月%d日" language="jp"$}</div>
<h2 class="entryTitle"><a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a></h2>
<div class="entryBody clr">{$BlogEntryBody$}</div>
<BlogEntryIfExtended>
<div class="entryContinue"><a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend">続きを読む...</a></div>
</BlogEntryIfExtended>
<div class="entryInfo">
投稿者：<a href="{$BlogEntryWriterUrl$}" target="_blank">{$BlogEntryWriterName$}</a>｜{$BlogEntryDate format="%H:%M"$}
<BlogEntryIfCategory>｜<a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a></BlogEntryIfCategory>
<BlogEntryIfAllowComments>｜<a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments>
<BlogEntryIfAllowPings>｜<a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a> </BlogEntryIfAllowPings>
</div>
</div><!-- entry -->
</BlogEntries>
この最後の「</BlogEntries>」の直後に次のコードを追加します。それがスクリプトの本体です。書き換えるスキンは「メイン」「アーカイブ」「1記事」の３つです。
<script type="text/javascript"><!--
(function(){
var categories={
"category_5":"37_64x64.png",
"category_28":"43_64x64.png",
"category_6":"41_64x64.png",
"category_7":"51_64x64.png",
"category_27":"50_64x64.png",
"category_30":"45_64x64.png",
"category_34":"40_64x64.png",
"category_35":"36_64x64.png",
"category_33":"44_64x64.png",
"category_20":"42_64x64.png",
"category_13":"2_64x64.png",
"category_32":"55_64x64.png",
"category_24":"34_64x64.png",
"category_18":"25_64x64.png",
"category_15":"26_64x64.png",
"category_26":"9_64x64.png",
"category_16":"56_64x64.png",
"category_19":"48_64x64.png",
"category_25":"54_64x64.png",
"category_29":"5_64x64.png",
"category_31":"19_64x64.png"
};
var icon_url='ここにアイコンのディレクトリへのPATHを記入';
var entries=document.querySelectorAll('div#entries div.entry');
for(var i=0;i<entries.length;i++){
var a=entries[i].querySelectorAll('div.entryInfo a');
var icon=categories[a[1].href.replace(/^.+?\/(category_[0-9]+).*$/,'$1')];
var img='string'==typeof icon?'<img src="'+icon_url+icon+'" alt="" class="category_icon" />':'';
var body=entries[i].querySelector('div.entryBody');
body.innerHTML=img+body.innerHTML;
}
})();//-->
</script>
var categories の中身は自分のブログに合わせてください。
「ここにアイコンのディレクトリへのPATHを記入」と書いてある場所には、アイコンセットをアップロードしたサーバーのディレクトリへのPATHを記入します。ファンブログにアップロードしている場合は、アイコンのファイル名にPATHも含まれているので、空文字列にします。
a[1]の部分は、スキンがデフォルトの場合です。スキンを改造している場合は、添字の1を適切なものに訂正してください。
表示されるアイコンには、すべて「category_icon」というクラス名がつけられています。間隔などの調整はスタイルシートで行なってください。
ここまでで、スキンは完成しています。ただ、うちのブログの様に、本文を切り詰めて、最後に「この記事を読む」と付ける場合は、上のスクリプトを一部変更します。
この行を削除して、下のソースに差し替えます。
body.innerHTML=img+body.innerHTML;
差し替えるソース
var str=body.innerHTML.replace(/\<script.*?\>.*?(\<\/script\>)|\<style.*?>.*?(\<\/style\>)|\<.+?\>/g,''); body.innerHTML=img+(str.length>150?str.slice(0,149)+'…':str)+'<p class="read_more"><a href="{$BlogEntryPermalinkUrl$}">この記事を読む</a></p>';
上は、文字数を150字にする場合です。150字より長ければ、149文字で切って、150文字目に「…」を入れます。文字数は自分の都合に合うように調整してください。
もちろん、この最後の処理は「1記事」には適用しません。1記事の場合、アイコンを先頭に挿入することで、表示のバランスが狂うことがあります。それはレイアウト的な問題ですので、各自で修正してください。このブログでは「1記事」のみ、アイコンを記事本文でない場所に配置して解決しました。
MicroAdも今月で終了、CM-Clickも終わったし。テキスト広告のクリック報酬型がほとんどなくなってしまった。忍者AdMaxにもテキストのみの設定はあるけど実質、楽天しか出ない。
でも実は、隠れた便利なASPがあるんだな。それが「Live!Ads」
Twitter対応つぶやきアフィリエイトならLive!Ads
下のが「Live!Ads」のクリック報酬型広告です。サイズや表示個数はいろいろ変えられます。
「Live!Ads」の場合は、クリック報酬型だけではなくて、成果報酬型広告もある。クリック報酬型しかないi-mobileや忍者AdMax、成果報酬型のみのA8.netなんかとは違うところだ。
Twitter対応もしているので、つぶやいても報酬を稼げる「つぶやきアフィリエイト」というシステムがある。「Live!Ads」にログインして、宣伝したい商品を検索。みつかったら「つぶやく」をクリック。商品名とリンクは勝手に入力されているけど、説明には「商品名をいろんなつぶやきに書き換えることも可能です。」と書いてある。だから、あんまり無関係だったり、露骨なトリックを使わなければ、変えていいと思う。
そして、ここのいちばん面白いのは、すごい沢山あるウィジェット。
スライドウィジェット
ぺらぺらウィジェット
デコレーションウィジェット
これもデコレーションウィジェット
ぽよよんウィジェット
設定も簡単！
ウィジェットの数は本当に沢山あるので、紹介しきれません。「Live!Ads」は入って損のないASP（アフィリエイト・サービス・プロバイダー）だと思います。