Novel テンプレート

このページは、読みやすさを重視して、画像のないプレーンなタイプのテンプレートで表示させています。元のデザインテンプレートに戻るには  Home  をクリックしてください。

   タイトルをクリックすると、記事が表示されます。

【 画像 】 記事一覧 



スポンサーサイト  

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
*Edit TB(-) | CO(-) 

EntryTop
PageTop



テンプレートのコピー・差し替え・名前の変更  

テンプレートについて

Novel テンプレートは、五つの基本設定さえしていれば、ただ記事(小説)を書いていくだけで小説サイトっぽくなるテンプレートですが、DL時の初期設定ではあきたらない方、もう少し手を加えて、自分ナイズにカスタマイズしたい方のために、次ページ以降では、Novel テンプレートの簡単で具体的なカスタマイズの方法も紹介してゆきます。

記事中、設定とあるのは、基本的に菅理ページからの操作だけで変更可能な単純な設定の変更のことですが、記事中で、カスタマイズとあるのは、テンプレートの中身、つまり、HTMLとスタイルシートの一部分を書き換えることを指します。

ご紹介するのは、原則コピペして差し替えるだけの作業としては単純なカスタマイズですが、一行ですむような個所の変更もあれば、コピペとはいえ、かなり長いソースを変更するケースもあります。ブログのカスタマイズに慣れていない方の場合は、失敗をしても安心なように、カスタマイズの前にテンプレートのコピーをとっておくことをおススメします。
わざわざパソコンのドキュメントに保存しなくても、菅理ページで簡単にコピーを保存しておけるので最初にそれをご説明します。

コピーはオリジナルのテンプレート名の末尾に _1とコピー番号が連番でついてゆきます。コピー後のテンプレートの名前が連番の _1も含めて20文字以内でなければコピーができないので、それを超える場合には、コピーの前にまず、テンプレートの名前を変更しなければなりません。(Novelテンプレートは元々の名前がどれも長ったらしくて、申しわけありません。<m(__)m>)

テンプレートの名前の変更方法



[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く

例えば、【 novel-template-sepia】の名前を変更する場合は、
変更するテンプレートの名前【 novel-template-sepia】の欄の
編集 】 をクリック

このように表示されます。 ↓
[ novel-template-sepia ] のテンプレート名変更
novel-template-sepia   【 更新 】


名前を template-sepiaと変更します。
(注意:使用できる文字は半角英数字およびハイフン(-)アンダーバー(_)のみ・20文字以内)
template-sepia     【 更新 】

変更する名前【 template-sepia】を記入して
更新 】 をクリック

このような表示がでればOK ↓
novel-template-sepiaの名前を変更しました。
template-sepiaのHTML、CSSを更新しました。



コピーと保存の方法



[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く

PCテンプレート [ template-sepia ] 適用中

【適用 】  テンプレート名/プレビュー   プラグイン 
対応
 HTML 
CSS
 複製  削除 
   template-sepia  〇  編集  複製  

上のようなリストがあると思います。他のテンプレートをDLした事がある場合は、そのテンプレートもリストに並んでいます。

template-sepia の欄にある 【 複製 】をクリックします。

するとこのような表示がでます ↓  
template-sepia_1を追加しました。
 
【適用 】   テンプレート名/プレビュー   プラグイン 
対応
 HTML 
CSS
 複製  削除 
   template-sepia  〇  編集 複製  
 〇  template-sepia_1  〇  編集 複製  ☓ 


リストにコピーが追加されました。
これでもし、オリジナル(template-sepia)のカスタマイズに失敗しても、カスタマイズ前の状態のテンプレート(template-sepia_1)がそのまま残っているので安心です。カスタマイズして失敗した場合は、テンプレートをこのコピーに差し替え(取り替え)ます。

テンプレートの差し替え方


カスタマイズの失敗などで、現在表示されているブログ画面に乱れが生じた場合などはカスタマイズ以前の状態のコピーにテンプレートを差し替え(取り替え)ます。

template-sepia_1 】の欄の
】をチェックして【 】 にしたら、
適用 】をクリックします。


【適用 】   テンプレート名/プレビュー   プラグイン 
対応
 HTML 
CSS
 複製  削除 
   template-sepia  〇  編集 複製  
 template-sepia_1  〇  編集 複製  ☓ 


この表示がでればOKです。 ↓
PCテンプレート [ template-sepia_1] 適用中

【 適用 】   テンプレート名/プレビュー   プラグイン 
対応
 HTML 
CSS
 複製  削除 
  〇  template-sepia  〇  編集 複製  ☓  
 template-sepia_1  〇  編集 複製 

ブログの画面が、カスタマイズ以前の乱れのない状態に戻っているか確認しましょう。
もし、もどっていない場合は、ブラウザの更新ボタン(アドレスの横にある矢印)を
クリックしてください。
画面が更新されて、差し替えたカスタマイズ以前のテンプレートでの表示に戻るはずです。

カスタマイズを続ける場合は、もう一度同じ手順で、今度は、template-sepia_1のコピーをとります。

template-sepia_1 の 【 複製 】をクリック

この表示がでたらOK ↓
template-sepia_1_1を追加しました。

【 適用 】   テンプレート名/プレビュー   プラグイン 
対応
 HTML 
CSS
 複製  削除 
  〇  template-sepia  〇  編集 複製  ☓  
  template-sepia_1  〇  編集 複製 
 〇  template-sepia_1_1  〇  編集 複製  ☓ 



関連記事
スポンサーサイト
Tag List  画像 |
*Edit TB(0) | CO(3)

EntryTop
PageTop

この記事にコメン卜するこの記事にコメン卜する



新作テンプレート申請しました!  

その他お知らせなど

新作テンプレート2点を本日申請いたしました。

novel-10-black1 2011.11月 改訂→novel-Gf-black1



見目麗しく艶かしい麗人でありますが、性別は♂であります…(^^ゞ
Mako'sさまのお宅の、麗しいびせーねんをお借りしたいが為につくったテンプレートだったりします。
BL系作品に似合うのではないかしらん。
表紙ページは髪の色が違う三枚の画像がランダムに表示されます。
画像をクリックすると一番最初の記事に飛びますますが、
画像やクリック後のリンク先を変更する方法は こちら


novel-10-black2 2011.11月 改訂→novel-G-black2



こちらは同じくMako'sさまのお宅の、妖艶な美女と薔薇の饗宴を目指しました。
表紙画像をクリックすると一番最初の記事に飛ぶのは[black1]と同じですが、[black2]は、NovelListと目次ページは、美女が薔薇に化けたり?薔薇が美女に化けます。
表紙ページと個別記事ページは、色違いの画像がランダムに変るんですよん♪

それぞれのページのサンプルは共有テンプレート一覧ページでご覧になれます。

拍手くださった皆様、ありがとうございます!
どういうタイミングでお礼を申し上げたらよいか迷っているうちにこんなに遅くなってしまって、申しわけございません。
唯香さま、ふじやまさま、ふみさま、その他無記名でコメントくださった皆様ありがとうございます。
お役にたてて、とても嬉しいです。
また無記名で直リンクについて、アドバイスくださった方もありがとうございました。
記事の方も補足説明を足させていただきました。
これからも、Novelテンプレートをよろしくお願い申しあげます。
Novelテンプレート管理人 拝
関連記事
Tag List  画像 |
*Edit TB(0) | CO(0)

EntryTop
PageTop

この記事にコメン卜するこの記事にコメン卜する



中華風新作テンプレート申請しました  

その他お知らせなど


今回は中華風のテンプレートです♪

novel-10-china12011.6月 改訂→novel-G-china1


双子屋工房さまの美しい花精のイラストに一目ぼれして作成したテンプレート。個別記事ページと通常ブログ画面の記事には、三種類の背景がランダムに表示されます。


novel-10-china22011.6月 改訂→novel-G-china1


こちらは龍が表紙の色違いパージョン。MiraclePageさまからも背景とテキストボタンをお借りしました。個別記事ページの追記の背景には透かし彫りの龍の姿が表れます。


画像をクリックすると表紙のサンプルページが開きます。それ以外のページのサンプルは共有テンプレート一覧でご覧になれます。
関連記事
Tag List  画像 |
*Edit TB(0) | CO(1)

EntryTop
PageTop

この記事にコメン卜するこの記事にコメン卜する



[novel-10-mono2] リニューアル  

バージョンアップや改訂内容

EGPさまのサイトに新しくアップされた、中世の面影を残す街並みと河を写した作品がとてもすてきです。高い窓(鐘楼?)から撮影されたせいか、窓枠で切り取られたような風景が実にいい雰囲気で、ぜひともNovelテンプレートにお借りしたくなりました。表紙画像だけを差し替えて申請するのは不承認になる可能性がある、でも、どうしてもお借りしたい…ということで、今回、[novel-10-mono2]の表紙を、今までのお城の画像だけが表示される形式から、お城と風景、二つの画像が、ランダムに表示される形に変更しました。

変更箇所は二箇所です。本日、2009.4.25以前にDLなさった方が今回のリニューアル版と同じようにランダムに表示させたい場合、あるいは、本日以降にDLなさった方が、リニューアル以前のように固定画像に変更したい時はご参照ください。

①画像の変更箇所



リニューアル前

<!-- ▽ 左カラム表紙ページ -->
<!--index_area-->
<a href="<%url>blog-entry-1.html" title=" Welcome! ">
<img src="http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/s50-arch3.jpg" alt="" width="810" border="0" /></a><br />

<!--/index_area-->
<!-- ▽ 左カラム小説一覧ページ -->



リニューアル後

<!-- ▽ 左カラム表紙ページ -->
<!--index_area-->

<script language="JavaScript">
var images = new Array();

/* 使用するタイトル画像を好きなだけ記述 */
images[0] = "http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/s50-arch32.jpg";
images[1] = "http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/s50-river2.jpg";


var rnd = Math.floor((Math.random() * 100)) % images.length;
document.write('<a href="<%url>blog-entry-1.html" title="Welcome!" alt="Welcome!"><img src=',images[rnd],' border="0"></a>');
</script>

<!--/index_area-->
<!-- △ 左カラム表紙ページ -->



①菅理ページへのリンクの変更


画像とのバランスをとるために、菅理ページへのリンクもサイトナビゲーションの上に移します。HTMLから以下の箇所を探します。


<!--▲▲▲▲ ヘッダー(タイトル部分)▲▲▲▲-->
<tr><td>
<!--not_category_area--><!--not_tag_area-->
<!--not_titlelist_area--><!--not_permanent_area-->
<!--▼管理ページリンク-->
<div class="introduction"><ul class="admin">
<li><a href="<%server_url>control.php" title="管理ページトップ">*<b><i>Admin</i></b></a> | </li>
<li><a href="<%server_url>control.php?mode=editor&process=new" title="新しく記事を書く">*<b><i>Write</i></b></a> | </li>
<li><a href="<%server_url>control.php?mode=control&process=entry" title="過去の記事の管理">*<b><i>Edit</i></b></a> </li>
<!--▲管理ページリンク-->
<!--▼ページナビゲーション-->  <!--not_index_area--><!--not_date_area--><!--not_search_area-->
<li><!--nextpage--><a href="<%nextpage_url>">««<b>前ページ</b></a><!--/nextpage--> </li><!--/not_search_area--><!--/not_date_area-->
<li> <!--prevpage--><!--date_area-->««<a href="<%prevpage_url>"><b><%now_year>年<%now_month>月前ページ</b> </a><!--/date_area--><!--search_area-->««<a href="<%prevpage_url>"><b>前ページ</b> </a><!--/search_area--><!--/prevpage--></li>
<li><a href="<%url>"> <b>HOME </b></a></li>
<li><!--nextpage--><!--date_area--><a href="<%nextpage_url>"><b> <%now_year>年<%now_month>月次ページ</b>»»</a><!--/date_area--><!--search_area--><a href="<%nextpage_url>"><b>次ページ</b>»»</a><!--/search_area--><!--/nextpage--> </li><!--not_date_area--><!--not_search_area-->
<li> <!--prevpage--><a href="<%prevpage_url>"><b>次ページ</b>»»</a><!--/prevpage--></li><!--/not_search_area--><!--/not_date_area--><!--/not_index_area-->
<!--▲ページナビゲーション-->
</ul></div>
<!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_tag_area--><!--/not_category_area-->


</td></tr>

<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">



赤字の部分を削除して青字の部分を以下の場所に写します。

<!--/category_area-->
<!--▲ヘッダー(Index作品目次<カテゴリ>ページ)▲-->

----ココに持ってくる-----


<!--▼▼サイトナビゲーション①▼▼-->
<!--not_permanent_area-->

関連記事
Tag List  画像 |
*Edit TB(0) | CO(0)

EntryTop
PageTop

この記事にコメン卜するこの記事にコメン卜する



特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする  

目次ページ

カスタマイズの難易度4 カスタマイズの難易度4

osirase-ani02.gifこの記事でご紹介しているカスタマイズは少々複雑で、初心者の方は手が出し辛いようでしたので、でご紹介している画像表示のためのカスタマイズが、予め施してある、イラストリスト(Illust List)付きテンプレートを作成致しました。詳しくは「イラストリストの説明」イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる」をご覧ください。



関連記事

この記事にコメン卜するこの記事にコメン卜する



特定のカテゴリの目次ページのカスタマイズ (4)カタログのように飾り枠付きの画像と説明文を添えて表示する  

目次ページ

カスタマイズの難易度4 カスタマイズの難易度4

まずはどういう風になるのかサンプルの目次をごらんください。 コチラサンプル

以前、NovelListに画像も表示させるカスタマイズとして、追記部分にリストのための小さめの画像と説明を追加する方法をご説明しましたが、こと、画像のある記事に、説明文をつけて作成するのであれば、これからご紹介するカスタマイズの方がはるかに簡単です。


このカスタマイズはどりーみー様のアイディアをお借りしました。本当にスマートですばらしいカスタマイズです!
どりーみー様ありがとうございます。
(どりーみー様は画像メインのサイト様にぴったりの、実に個性的かつ機能的なテンプレートを数多く公開なさっておられますので、イラストサイトさま、写真サイトさまにはおススメです。詳しくはコチラコチラ


osirase-ani02.gifこの記事でご紹介しているカスタマイズは少々複雑で、初心者の方は手が出し辛いようでしたので、でご紹介している画像表示のためのカスタマイズが、予め施してある、イラストリスト(Illust List)付きテンプレートを作成致しました。詳しくは「イラストリストの説明」イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる」をご覧ください。
関連記事

この記事にコメン卜するこの記事にコメン卜する


H O M E


 難易度別カスタマイズ ▼


 よくあるご質問


 カスタマイズの手引き


 テンプレートマニュアル ▼

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。