忍者ブログで独自ドメイン・カスタマイズ

あっちっち

夏だなぁ

忍者ブログでドメインが選べるようになった

忍者ブログの管理画面に直接入っていたので、2009/08/03から１００種類のドメインから選べるようになっていたのを知りませんでした。
今まで忍者ブログを作成すると、http://xxxxxx.blog.shinobi.jp/というアドレスだったのが、

xxxx.anime-japan.net
xxxx.anime-life.com
xxxx.tosalog.com（土佐ブログ）

など１００種類のドメインを利用できるようです。
サムライファクトリーらしく若干クセのあるドメイン名が多く、使えると思うか思わないかは人それぞれでしょうが、選択肢が広がるのは歓迎です。

背景をランダムに変更するカスタマイズ

定番とも言えるカスタマイズですが、ページを切り換えたり、リロードした際に背景をランダムに選択します。
透過フォト・透過フォト2.0などをご利用の際に使ってみてください。

透過フォト2.0（共有テンプレート）

背景画像を透過して見られるテンプレート「透過フォト2.0」を共有テンプレートに公開しました。
プレビュー
ダウンロードページ　コメント＆★をいただけると励みになります。

以前公開しました透過フォトのバージョン２になります。

透過には今回もアルファーチャンネルを使っていますので、透過部分の色・透過度のカスタマイズも可能になっています。
前回のものとの主な変更点はヘッダー・フッター・プラグインを黒ベースにしたのと、日付とコメントの表示方法、角丸、パンくずリスト、Adminエリア、RSSアイコンです。
なお、各丸は画像ではなく、CSSでborder-radiusを利用しているので、非対応ブラウザ(IE6など)ではスクウェアに表示されてしまいます。

もちろん背景をご自身の画像へ変更してのご利用もＯＫです。（というかそれを前提に作っています）
変更方法はCSSのbodyで、「background-image: url(***)」の***部分に画像のURLを入れてください。
ご自身の画像への変更方法の詳細は透過フォトのカスタマイズ方法をご参照ください。
ただし、テンプレ作者への著作リンクは削除しないでください。

背景画像はいくつか用意しましたのでよかったらご利用ください。
（下記背景画像に関しては、完全なロイヤルティフリーではなく、透過フォト2.0及び透過フォトをご利用の方に限り、当該ブログの背景用として許可するものとします。）
CSSのbody部に下記記載があります。例えば花画像を使いたい場合は、飛行機画像の下の行の文頭に「/*」、文末に「*/」を追記し、花画像の下の行の文頭「/*」と、文末「*/」を削除すれば変更できます。
（CSS内の「/*」－「*/」間はコメント扱いになるのです。）

/*飛行機画像*/
background-image: url(http://file.template100.blog.shinobi.jp/jta3.jpg);
/*花画像*/
/*background-image: url(http://file.template100.blog.shinobi.jp/bbg_fl2.jpg);*/
/*林画像*/
/*background-image: url(http://file.template100.blog.shinobi.jp/bbg_026.jpg);*/
/*山画像*/
/*background-image: url(http://file.template100.blog.shinobi.jp/bbg_mountain.jpg);*/

http://file.template100.blog.shinobi.jp/jta3.jpg	http://file.template100.blog.shinobi.jp/bbg_fl2.jpg
http://file.template100.blog.shinobi.jp/bbg_026.jpg	http://file.template100.blog.shinobi.jp/bbg_mountain.jpg

ワイドディスプレイを考えると幅が1000PX以上の画像をお使いになると見栄えがいいと思いますが、最近のデジカメで撮影した10Mピクセル以上の写真をそのまま使うと重くなるので、Photoshop・GIMPなどフォトレタッチソフトなどで画像サイズを圧縮・画質も抑える修正ができると表示が軽くなります。

自分なりに背景画像をいろいろ試してみたのですが、南国らしい抜けた空の色とマッチングがいいようなので、石垣空港でＪＴＡ機（B737-400だったかな）を撮影した画像をデフォルト（初期設定の背景）として使ってみました。
フワッと浮かぶ雲を海や草原などで撮影しても綺麗に見えます。
北海道の美瑛や富士山などの山岳、ビーチなどの写真をマイピクチャや素材集から捜してみてください。

その際、画像左側がゴチャゴチャしていない写真の方が記事投稿日部分が見やすくより見栄えすると思います。
下記画像のように元画像は左側にヤシの木があったのをPhotoshop等で左右反転し、左側の背景をシンプルにして利用するなどの工夫すると見やすくなります。
残念ながら下記画像は版権があり、配布できないのでご了承ください。

下記サイトなど大きな画像のフリー素材を利用するのもいいでしょう。
（リンクが必要になるなど各サイトの著作権の扱いをご確認の上ご利用ください。）
画像サイズ・画質の調整をして大きくても80KB程度のサイズにすることをオススメします。

ゆんフリー写真素材集
http://public-domain-photos.com/（商用可英文）
http://www.imageafter.com/（商用可英文）
Large Pictures（英文）
http://www.sxc.hu/（商用可英文要登録）
http://www.freerangestock.com/（商用可英文要登録）

<09.01.26 修正>
公開後発見したツメの甘い部分を若干修正しました。
修正箇所は管理者コメントの色、コメント入力部分の背景色、IEでの表示修正他です。
なお、デフォルトの背景画像も飛行機画像に変更しました。

<09.01.27 修正>
マージン設定により投稿日をポコっと左に突き出るようにしました。
コメントNO.を表示するようにしました
ヘッダー・プラグインにグラデーションを設定しました。
<09.01.29 修正>
記事部分にボーダーを設定
パンくずリストのマージン・高さ微調整

<09.02.05 修正>
カレンダー部分のフォントカラー
コメント編集画面のレイアウト
記事・プラグインタイトルのボーダー
記事・プラグイン部分のマージン
ヘッダー下部のマージン

リンククラブで不当課金

独自ドメインを格安で取得できるリンククラブが20000人のユーザに無断で10000円を課金し、銀行引き落としやクレジットカードに請求する事件が2008年の年末から発生しました。
当サイトでも格安レジストラとして紹介しておりますが、その様な事態が発生したことは非常に残念でなりません。当サイトで利用しているninja-blog.comも最初はリンククラブで取得して、現在はバリュードメインにドメイン移管したものですし、私自身まだ複数のドメインをリンククラブで管理しています。

今回はLC、LI、LHS、LPPが課金対象だったので、ドメインパーキング（LDP）のみを利用されている方には実害は無いと思います。
また、告知が不十分だったとして、１月末までなら返金するとのことです。

詳しくはこちら　→　リンククラブが予告無しで2万人のユーザから10,000円を課金（１月中に返金対応）

忍者よお主もか

2008年11月12日より三ヶ月以上更新がなされていない非アクティブブログに、ブログ上部付近に広告が挿入されるようになりました。
FC2やJUGEMに続いて、非アクティブブログに対するこの仕打ちがまさか忍者ブログにやってくるとは．．．
私もいくつか運営しているブログを引越ししようと検討を始めました。
確かに更新しないブロガーが悪いのかもしれないけど、ブログを使って、サイト運営していると毎日更新しなくてもいいサイトは出来るのです。
残念でならないけど引越だぁ（当サイトは忍者を使い続ける予定です）

ZIP配布のテンプレートの利用方法

リクエストのあったテンプレート（カラーチェンジ等の改変）をベータ版としてZIPファイルにてご利用頂けるようにする場合がございます。
公式テンプレートとして承認されたものではありませんので、自己責任でご利用頂ければと思います。
バグ等はご連絡頂ければ出来るだけ対応致しますが、お時間を頂く場合もありますので、ご了承ください。

利用方法は下記の通り

日めくりカレンダーのテンプレート３ブロックインディゴブルー

日めくりカレンダーを使った3Bインディゴブルーを公開しました。
このテンプレの共有申請に何回か落ちて、忍者ブログテンプレの開発意欲をなくし、半年以上放置していましたが、現在作成中の別サイトで同じようなテクニックを利用したので、試しに申請してみました。

シンプルな可変３ブロックを作りたかったのですが、画像を使わないとなかなか共有に承認してもらえそうにないので、日めくりカレンダーを使ってみました。

プラグインカテゴリー１－３が左、４と５が右サイドバーになります。

カレンダーについて
アメリカのブログを見ていると、記事投稿日が日めくりカレンダーになっているものが多く、MovableTypeのプラグインでもPHPカレンダーなどが出ています。忍者ブログでPHPを使った動的なページというのも難しいし、JavaScriptを使うのもテンプレートとしてはカスタマイズ性が落ちるので、とりあえず下記サイトなどを参考にCSSで作ってみました。
brainstormsandraves.com
Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly
mahud's blog

個人的には月の表示を「Dec」のように英語表示したかったのですが、忍者ブログの独自構文ではないようなので、brainstormsandraves.comとは多少レイアウトを変えて上の帯の部分に投稿月、日めくり部分に「曜日(英語)」「投稿日」「投稿年」の順番で表示しました。ブラウザの文字表示を大きくするとレイアウトが崩れ、はみ出してしまうのが課題ですが、まずは使ってみようとUPしてみました。
カレンダ部分は月日別ページへのリンクとなっていますが、個人的にはこのページはあまり使わないので、記事ページへのリンクの方がいいかなとも思っています。

悩みはフォントサイズの指定方法です。
配布したものはピクセルで指定しましたが、上記参照サイトではemや%で指定しています。いろんな環境できちんと収まって欲しいのですが、どのように指定すべきかまだ自分の中で結論が出ていないのです。

実は既にチャコールシルバー・ラズベリーピンク・フォレストグリーンと合計４色作成済みですが、このインディゴブルーで初期トラブルがあった場合を考えて申請はしていません。
使って頂くのは構いませんので、ご希望があるようでしたらコメント等で連絡ください。
　　　

チャコールシルバーはこちらからダウンロード出来ます。
http://file.ninja-blog.com/CharcoalSilver.zip
設定方法の詳細はこちら　→　ZIP配布のテンプレートの利用方法

さて、このテンプレートの特徴は他に下記のものを取り入れています。
・ネガティブマージンを使った幅可変（プラグイン固定・メイン可変）
・記事編集ページへの直接リンク
・パンくずリスト
・カテゴリ・アーカイブページに記事タイトルリスト

ピンク on ブラック 3ブロック (共有テンプレート)

最近複数のサイトを並行的に立ち上げておりまして、テンプレ開発がおろそかになっていましたが、songriさんより、ピンク on ブラックの３ブロック化が可能かとの問い合わせを頂いたので、３ブロック化し共有申請したところあっさり承認されました。（「あっさり」というのはここのところ、他のテンプレが非承認続きでして．．．）
私が承認されたと気づく前にsongriさんから★をいただいてました。ありがとうございました。

プラグイン部分は１～３が左サイドバー、４、５が右です。

songriさんはもしかしたら、ご自分でカスタマイズされたかったのかもしれませんが、説明するのも大変でしたので、３ブロックで公開したものをベースにカスタマイズして頂ければと思います。２ブロックからの変更点を抜粋しておきますので参考になれば幸いです。

body　フォントサイズ13px→15px
mainBlock　幅770px→780px
PluginBlock　幅200px→165px、フロート右→左
PluginBlockRight 作成
PluginTitle　padding 10→0
PluginContents padding-right　3→0
EntryBlock 幅560px→440px、マージン他調整
EntryTextBox マージン他調整
Plugin_data　マージン他調整

他微調整多数

そうそう。こういうときテキスト比較ソフトが便利です。
変更前のCSSと変更後のCSSのどこが変わったのか一目でわかるのです。
私はhtmlで配信される会議資料で前回からの変更点をチェックするのに友人から教えて貰って使い始めたのですが、CSSやhtml編集でも結構使えます。（そもそも会議資料をwebで配信するくらいなら、変更点くらい解るように箇条書きするか強調・色分けなどせいっと叫びたいですが。その点ブログ以前からHP作ってる人は更新履歴をしっかり作る癖があって話が合います。）
私は「ちゃうちゃう」、「DF.exe」なるフリーウェアを使ってます。

忍者ブログで記事編集ページへの直接リンク

私のブログは日記的要素が少なく、さかのぼって古い記事を見直して編集することが多くあります。
そんなときにブログから直接記事編集ページに移動できるリンクがあると便利です。
ブログに関するメインサイトをSEESAAで運用していて、そのようなリンクを設置しています。（SEESAAの場合は管理画面の移動が遅いのも必要な理由の一つですが）
記事編集ページへの直接リンク
このninja-blog.comも少しずつ記事が増え、そろそろ該当する記事を編集するにも探すのが面倒になってきたので、独自構文解説書／構文辞典INDEXを参考に、ブログから直接記事編集ページへアクセスできるリンクを設置してみました。

当ブログの各記事フッターに「Edit」というリンクがありますが、そこをクリックすると当該記事の編集ページに移動出来ます。
ただし、ログインしていないと移動できませんので、当然ID・パスワードを知らない人は記事編集出来ません。

同様にカスタマイズしたい方は参考にしてください。
＜記事編集画面へのリンク設置方法＞
「管理画面」－「テンプレート設定/編集」で現在使用中のテンプレートの「修正」をクリック
記事のフッター部分（標準的には<div class="EntryFooter">を探してみてください）に下記のタグを追加
（私は記事フッターに置きましたが、から<!/--entry-->の間であればどこでも設置可能）

<A href="hoge/EditEntry//" target="_blank">Edit</a>

「target="_blank"」は好みに応じて削除しても結構です。
アンカーテキスト「Edit」も「記事編集」など使いやすい文字に変更下さい。「.」や「_」など目立たない文字にするのも一つの方法です。

＜参考：利用したタグ＞
記事番号
ブログのURL