忍者ブログで独自ドメイン・カスタマイズ http://ninja-blog.com/ 独自ドメインを無料で利用できる忍者ブログでカスタマイズ・テンプレート・アフィリエイトを徹底調査　 ja http://ninja-blog.com/Entry/40/ 忍者よお主もか 2008年11月12日より三ヶ月以上更新がなされていない非アクティブブログに、ブログ上部付近に広告が挿入されるようになりました。 FC2やJUGEMに続いて、非アクティブブログに対するこの仕打ちがまさか忍者ブログにやってくるとは．．． 私もいくつか運営しているブログを引越ししようと検討を始めまし...
FC2やJUGEMに続いて、非アクティブブログに対するこの仕打ちがまさか忍者ブログにやってくるとは．．．

私もいくつか運営しているブログを引越ししようと検討を始めました。

確かに更新しないブロガーが悪いのかもしれないけど、ブログを使って、サイト運営していると毎日更新しなくてもいいサイトは出来るのです。

残念でならないけど引越だぁ（当サイトは忍者を使い続ける予定です）]]> 忍者ブログ日記 2008-11-21T00:48:10+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/39/ ZIP配布のテンプレートの利用方法 リクエストのあったテンプレート（カラーチェンジ等の改変）をベータ版としてZIPファイルにてご利用頂けるようにする場合がございます。 公式テンプレートとして承認されたものではありませんので、自己責任でご利用頂ければと思います。 バグ等はご連絡頂ければ出来るだけ対応致しますが、お時間を頂く場合もあり...
公式テンプレートとして承認されたものではありませんので、自己責任でご利用頂ければと思います。

バグ等はご連絡頂ければ出来るだけ対応致しますが、お時間を頂く場合もありますので、ご了承ください。




利用方法は下記の通り



]]> 忍者ブログテンプレート 2008-08-26T10:12:28+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/33/ 日めくりカレンダーのテンプレート ３ブロック インディゴブルー 日めくりカレンダーを使った3Bインディゴブルーを公開しました。 このテンプレの共有申請に何回か落ちて、忍者ブログテンプレの開発意欲をなくし、半年以上放置していましたが、現在作成中の別サイトで同じようなテクニックを利用したので、試しに申請してみました。 シンプルな可変３...

日めくりカレンダーを使った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配布のテンプレートの利用方法




さて、このテンプレートの特徴は他に下記のものを取り入れています。


・ネガティブマージンを使った幅可変（プラグイン固定・メイン可変）

・記事編集ページへの直接リンク

・パンくずリスト

・カテゴリ・アーカイブページに記事タイトルリスト



]]> 忍者ブログテンプレート 2008-08-05T20:22:49+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/38/ ピンク on ブラック 3ブロック (共有テンプレート) 最近複数のサイトを並行的に立ち上げておりまして、テンプレ開発がおろそかになっていましたが、songriさんより、ピンク on ブラックの３ブロック化が可能かとの問い合わせを頂いたので、３ブロック化し共有申請したところあっさり承認されました。（「あっさり」というのはここのところ、他のテンプレが非承認続... ピンク on ブラック 3ブロック最近複数のサイトを並行的に立ち上げておりまして、テンプレ開発がおろそかになっていましたが、songriさんより、ピンク on ブラックの３ブロック化が可能かとの問い合わせを頂いたので、３ブロック化し共有申請したところあっさり承認されました。（「あっさり」というのはここのところ、他のテンプレが非承認続きでして．．．）

私が承認されたと気づく前にsongriさんから★をいただいてました。ありがとうございました。




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



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


  1. body　フォントサイズ13px→15px

  2. mainBlock　幅770px→780px

  3. PluginBlock　幅200px→165px、フロート右→左

  4. PluginBlockRight 作成

  5. PluginTitle　padding 10→0

  6. PluginContents padding-right　3→0

  7. EntryBlock 幅560px→440px、マージン他調整

  8. EntryTextBox マージン他調整

  9. Plugin_data　マージン他調整


他微調整多数



そうそう。こういうときテキスト比較ソフトが便利です。

変更前のCSSと変更後のCSSのどこが変わったのか一目でわかるのです。

私はhtmlで配信される会議資料で前回からの変更点をチェックするのに友人から教えて貰って使い始めたのですが、CSSやhtml編集でも結構使えます。（そもそも会議資料をwebで配信するくらいなら、変更点くらい解るように箇条書きするか強調・色分けなどせいっと叫びたいですが。その点ブログ以前からHP作ってる人は更新履歴をしっかり作る癖があって話が合います。）

私は「ちゃうちゃう」、「DF.exe」なるフリーウェアを使ってます。]]> 忍者ブログテンプレート 2008-02-27T22:46:56+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/34/ 忍者ブログで記事編集ページへの直接リンク 私のブログは日記的要素が少なく、さかのぼって古い記事を見直して編集することが多くあります。 そんなときにブログから直接記事編集ページに移動できるリンクがあると便利です。 ブログに関するメインサイトをSEESAAで運用していて、そのようなリンクを設置しています。（SEESAAの場合は管理画面の移動...
そんなときにブログから直接記事編集ページに移動できるリンクがあると便利です。

ブログに関するメインサイトをSEESAAで運用していて、そのようなリンクを設置しています。（SEESAAの場合は管理画面の移動が遅いのも必要な理由の一つですが）
記事編集ページへの直接リンク

このninja-blog.comも少しずつ記事が増え、そろそろ該当する記事を編集するにも探すのが面倒になってきたので、独自構文解説書／構文辞典INDEXを参考に、ブログから直接記事編集ページへアクセスできるリンクを設置してみました。



当ブログの各記事フッターに「Edit」というリンクがありますが、そこをクリックすると当該記事の編集ページに移動出来ます。

ただし、ログインしていないと移動できませんので、当然ID・パスワードを知らない人は記事編集出来ません。



同様にカスタマイズしたい方は参考にしてください。

＜記事編集画面へのリンク設置方法＞

「管理画面」－「テンプレート設定/編集」で現在使用中のテンプレートの「修正」をクリック

記事のフッター部分（標準的には<div class="EntryFooter">を探してみてください）に下記のタグを追加

（私は記事フッターに置きましたが、<!--entry-->から<!/--entry-->の間であればどこでも設置可能）


<A href="<!--$g_url-->hoge/EditEntry/<!--$entry_no-->/" target="_blank">Edit</a>


「target="_blank"」は好みに応じて削除しても結構です。

アンカーテキスト「Edit」も「記事編集」など使いやすい文字に変更下さい。「.」や「_」など目立たない文字にするのも一つの方法です。





＜参考：利用したタグ＞

記事番号

ブログのURL]]> カスタマイズ 2007-11-27T13:42:01+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/32/ スノーマン（共有テンプレート） スノーマン（雪だるま）のテンプレートを共有テンプレートにアップしました。 まだ、京都では紅葉が真っ盛りの時期ですが、北から冬将軍が近づいてきています。 一足早く冬気分にしたい方は是非使ってみてください。 ※当サイトで使っているものは、背景など詳細が若干異なる...







スノーマン（雪だるま）のテンプレートを共有テンプレートにアップしました。

まだ、京都では紅葉が真っ盛りの時期ですが、北から冬将軍が近づいてきています。

一足早く冬気分にしたい方は是非使ってみてください。



※当サイトで使っているものは、背景など詳細が若干異なる部分がございます。





プレビュー

ダウンロードページ　コメント＆★をいただけると励みになります。






]]> 忍者ブログテンプレート 2007-11-20T16:19:02+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/31/ 雪だるまのテンプレに変えてみました。 今朝はようやく冬が近づいてきたという感じの朝でした。 当サイトのテンプレートは長らく同じものを使ってきましたが、冬の到来に合わせて冬らしいものを作ってみました。 私自身は背景が白で、シンプルなのに立体感のあるデザインが好きで、共有にＵＰしているものとはかけ離れた細かい...






今朝はようやく冬が近づいてきたという感じの朝でした。

当サイトのテンプレートは長らく同じものを使ってきましたが、冬の到来に合わせて冬らしいものを作ってみました。

私自身は背景が白で、シンプルなのに立体感のあるデザインが好きで、共有にＵＰしているものとはかけ離れた細かいグラデーションを積み上げたアメリカのWebデザインに感動しています。自分の勉強ついでにこんなの出来ないかなぁと遊びながら作ったテンプレートが多いので、自分の趣味とはいつも離れていってしまうのです。

当ブログで使えそうなものを１から作ってみたいなぁと前々から考えていたのですが、グラフィックデザインが下手すぎて、なかなか気に入ったものが出来なかったかったのです。



このテンプレは、私がはじめてFlashのアクションスクリプトに挑戦して作ったもので、素人Flashですいません。何で雪の結晶は落ちないの？という突っ込みを浴びそうです(笑)

ランダム関数を使って、揺らぎの幅・スピード、落下スピード、雪の粒の大きさなどを変化させて、奥行き感やフワッとした雰囲気を出しています。

Flashアクションスクリプトはhttp://www.tutorio.com/の記事を参考にアレンジをしたのですが、何故か該当ページが削除されてしまい、ご紹介出来ません。

Flash講座さんのサイトにほぼ同じ設計のアクションスクリプトがありましたので参考にしてください。ちょこっとプログラムをかじった方なら基本的なものしか使っていませんので簡単ですね。

ブログでFlashを使うのもナローバンドな（通信速度が遅い）訪問者には、表示に時間がかかるなどの負担をかけてしまうので、本来はよろしくないのでしょうが、初物なのでファイルサイズを小さめにして使ってみました。



因みにPhotoshopでの画像作成は下記サイトを参考にさせて頂きました。

試行錯誤を繰り返すうちに全く似ていないものになりましたが．．．

Create a Holiday Card with Snowman



07.11.20 共有テンプレートの承認がおりました。

詳しくはこちら → スノーマン（共有テンプレート）
]]> 忍者ブログ日記 2007-11-17T19:05:44+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/36/ カテゴリ・アーカイブページの記事一覧表示 ブログのカスタマイズページとアーカイブページに記事一覧を加えました。 以前読んだhttp://customize.blog.shinobi.jp/さんのページにあったタグを使わせて頂きましたが、当該ページは削除されてしまっていますので、引用しご紹介します。 メイン部分の&amp;#60;!--e...


以前読んだhttp://customize.blog.shinobi.jp/さんのページにあったタグを使わせて頂きましたが、当該ページは削除されてしまっていますので、引用しご紹介します。



メイン部分の<!--entry-->を探し、その上に下記htmlを挿入します。

テンプレにsnowmanを使っている場合、

<!--/plugin5-->

■ここに下記htmlタグを追記■

<!--entry-->




【HTML】


<!-- タイトル一覧【カテゴリページ】 -->

<!--if_category-->

<div class="TitleListBox">

<div class="TitleListTitle">■<!--$g_page_title--></div>

<div class="TitleListText">

<!--entry-->

[<!--$entry_year-->/<!--$entry_mon-->/<!--$entry_day-->] <a href="<!--$entry_link-->"><!--$entry_title--></a> (No.<!--$entry_no-->)<br />

<!--/entry-->

</div>

<div class="TitleListPageLink">

<!--if_prev_page--><a href="<!--$pagelink_prev_link-->">≪</a> <!--/if_prev_page-->

<!--pagelink_10-->

[<!--$pagelink_10_link-->]

<!--/pagelink_10-->

<!--if_next_page--><a href="<!--$pagelink_next_link-->">≫</a> <!--/if_next_page-->

</div>

</div>

<!--/if_category-->

<!-- /タイトル一覧【カテゴリページ】 -->

<!-- タイトル一覧【アーカイブページ】 -->

<!--if_date-->

<div class="TitleListBox">

<div class="TitleListTitle">■<!--$g_page_title--></div>

<div class="TitleListText">

<!--entry-->

[<!--$entry_year-->/<!--$entry_mon-->/<!--$entry_day-->] <a href="<!--$entry_link-->"><!--$entry_title--></a> (No.<!--$entry_no-->)<br />

<!--/entry-->

</div>

<div class="TitleListPageLink">

<!--if_prev_page--><a href="<!--$pagelink_prev_link-->">≪</a> <!--/if_prev_page-->

<!--pagelink_10-->

[<!--$pagelink_10_link-->]

<!--/pagelink_10-->

<!--if_next_page--><a href="<!--$pagelink_next_link-->">≫</a> <!--/if_next_page-->

</div>

</div>

<!--/if_date-->

<!-- /タイトル一覧【アーカイブページ】 -->



【CSS】

次にCSSの一番下などに下記を貼り付け。ご自分のテンプレに合わせてカラーなど変更。


/*-------------------------------------------------------

記事タイトル一覧部分 > 全体

-------------------------------------------------------*/

.TitleListBox {

font-size: 95%; /* フォントサイズ */

width: 542px; /* 枠の幅 */

text-align:left; /* テキスト位置 */

background-color:#E6E6FA; /* 背景色 */

border:1px solid #CCCCCC; /* 枠線の設定 */

padding:5px; /* 内側余白 */

margin: 0px 0px 15px 0px; /* 外側余白 */

}

/*-------------------------------------------------------

記事タイトル一覧部分 > タイトル

-------------------------------------------------------*/

.TitleListTitle {

font-weight: bold;

}

/*-------------------------------------------------------

記事タイトル一覧部分 > テキスト

-------------------------------------------------------*/

.TitleListText {

font-size: 95%;

text-align:left;

margin: 0px 0px 0px 10px;

}

/*-------------------------------------------------------

記事タイトル一覧部分 > ページリンク

-------------------------------------------------------*/

.TitleListPageLink {

font-size: 95%;

text-align:center;

}



]]> カスタマイズ 2007-11-02T21:15:23+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/29/ フラワー（共有テンプレート） ピンクの花と若草色のさわやかなテンプレート「フラワー」をＵＰしました。 本当はカスタマイズのベースとして使えるとてもシンプルなテンプレートにしたかったのですが、一度忍者ブログ様のテンプレート承認で落ちてしまい、「もう少し工夫を」とのことでしたので、ラウンドコーナーや、プラグイン部分のHover処理... ピンクの花と若草色のさわやかなテンプレート「フラワー」をＵＰしました。

本当はカスタマイズのベースとして使えるとてもシンプルなテンプレートにしたかったのですが、一度忍者ブログ様のテンプレート承認で落ちてしまい、「もう少し工夫を」とのことでしたので、ラウンドコーナーや、プラグイン部分のHover処理など当初考えたものより手の込んだものになってしまいました。

とはいっても、カスタマイズしやすいように設計してありますので、今後のカスタマイズ記事においてこのテンプレートをベースに解説を進めていく予定です。




プレビュー

ダウンロード　コメント・★をいただけると励みになります。



]]> 忍者ブログテンプレート 2007-10-31T21:22:19+09:00 がりんぺいろ NINJA BLOG がりんぺいろ http://ninja-blog.com/Entry/28/ 黄昏（共有テンプレート） 海のサンセットを背景にして秋色の落ち着いた色合いで黄昏を作成しました。 画像は無料素材として写真を提供しているfree pictures photos からお借りしております。 プレビュー ダウンロードページ　コメント・★をいただけると励みになります。 ...
海のサンセットを背景にして秋色の落ち着いた色合いで黄昏を作成しました。



画像は無料素材として写真を提供しているfree pictures photos
からお借りしております。


プレビュー

ダウンロードページ　コメント・★をいただけると励みになります。




]]> 忍者ブログテンプレート 2007-10-31T14:00:51+09:00 がりんぺいろ NINJA BLOG がりんぺいろ