Nefert : Tag [ カスタマイズ ]

【2015年12月16日更新】

1. 編集箇所を探す

「HTMLの編集」から、以下の部分を探してください。

</head>

2.バージョンに合わせてベースHTMLを追加

この直前に、バージョンに合わせて次の記述を追加してください。

・ Day-out ver.2.2以上
・ Aquaria ver.1.1以上

  <script type="text/javascript">
   var imglist = new Array(
      "画像のurl@1",
      "画像のurl@2" );
   var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
   var output = '<style>#HeaderInner { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
   document.write(output);
  </script>

・ Day-out ver2.11以下
・ Aquaria ver1.0
・ bird-call
・ herba

  <script type="text/javascript">
   var imglist = new Array(
      "画像のurl@1",
      "画像のurl@2" );
   var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
   var output = '<style>.header-container { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
   document.write(output);
  </script>

3.画像ファイルの設定

画像のurl@1、画像のurl@2という部分には使用したい画像のurlを入れます。使用したい画像が3個以上ある場合は、画像のurl@1の方の行をコピー・ペーストで増やしてください。このスクリプトでは画像は100個まで使用可能です。

4.注意

• javascriptを使わないように設定されている環境で閲覧した場合はランダムにならず、スタイルシートで設定されている画像が表示されます。
  ※スタイルシートで設定できる画像は一枚のみです。
• 「画像差し替え時の注意」もご確認ください。

対象テンプレート
・ Day-out
・ Aquaria

スタイルシートを編集します。お使いのテンプレートのバージョンに合わせて編集箇所を探してください。
スタイルシートで該当する箇所を探す場合は、ナンバリングを参考にどうぞ。

---

・ Day-out ver.2.2以上
・ Aquaria ver.1.1以上

/*[3.3-a]*/
#Title ,
#Intro {
  width : 100%;
  background-image : url("http://blog-imgs-16.fc2.com/r/i/m/rimse/birdcall_title_alpha.png");
  background-repeat : repeat;
  background-position : 0 0;
}
/*[3.3-b:for IE5-IE6]*/
.ltIE7 #Title ,
.ltIE7 #Intro {
  filter : Alpha(opacity=75);
  background-color : #000;
  background-image : none;
}

・ Day-out ver.2.11以下
・ Aquaria ver.1.0

/*[3.3-a]*/
#title ,
#introduction {
  width : 100%;
  background-image : url("http://blog-imgs-16.fc2.com/r/i/m/rimse/birdcall_title_alpha.png");
  background-repeat : repeat;
  background-position : 0 0;
}
/*[3.3-b:for IE5-IE6]*/
.lt-ie7 #title ,
.lt-ie7 #introduction {
  filter : Alpha(opacity=75);
  background-color : #000;
  background-image : none;
}

---

赤字部分と青字部分を、以下の一覧を参考に変更してください。
初期設定では、透過率は25%です。

	透過率：100% 赤字部分： background-image : none; 青字部分：0
	透過率：90% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_90.png"); 青字部分：10
	透過率：80% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_80.png"); 青字部分：20
	透過率：70% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_70.png"); 青字部分：30
	透過率：60% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_60.png"); 青字部分：40
	透過率：50% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_50.png"); 青字部分：50
	透過率：40% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_40.png"); 青字部分：60
	透過率：30% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_30.png"); 青字部分：70
	透過率：20% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_20.png"); 青字部分：80
	透過率：10% 赤字部分： background-image : url("http://blog-imgs-36.fc2.com/r/i/m/rimse/alpha_000_10.png"); 青字部分：90
	透過率：0% 赤字部分： background-color:#000; 青字部分：100

★ この記事はNefertにて作成されているテンプレート専用の記事です。

追記開閉スクリプトを導入してるテンプレートに対して、追記の最後尾に「追記を閉じる」を追加するカスタマイズです。

一般的に使われている追記開閉スクリプトでは、追記を閉じても表示位置が変わらず、結局手動でスクロールするということがありますが、このカスタマイズでは追記部分の大きさだけ自動でスクロールするようにしています。
カスタマイズ方法は追記部分に記述してありますが、実際にこのカスタマイズを適用していますので、追記下部に[ 追記を閉じる ]と表示されているハズです（個別の記事のページでは表示されません）。
どのような動作をするか、一度試してみてください。

意外といい感じに仕上がった気がするので、共有中のテンプレートにも導入するかもしれません…が、かなり不確定です。ご意見ご感想、動作報告などをいただけるととてもありがたいです。

追記
最近更新されたテンプレートには、デフォルトで追記を閉じる機能がついています。

新着記事に対して、記事タイトル横にの画像を表示させるカスタマイズです。
FCafeのDanielさんの「新着マーク」という記事を参考にしています。ありがとうございました。

HTMLの編集を行います。

</head>

の直前に、以下の記述を追加してください。

<script type="text/javascript">
//<![CDATA[
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=24; //新着マークを表示する時間
var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="http://blog-imgs-1.fc2.com/i/image/e/303.gif" class="emoji" style="margin-left:0.3em;" />')}
}
//]]>
</script> 

次に、

<div class="entry-title"><h2 class="entry-title">
<a href="<%topentry_link>"><%topentry_title></a></h2></div>

という部分を、次のように書き換えてください。

<div class="entry-title"><h2 class="entry-title">
<a href="<%topentry_link>"><%topentry_title>
<script type="text/javascript">
//<![CDATA[
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
//]]>
</script></a></h2></div>

細かい編集を行いたい場合は、Danielさんの記事をご覧になったほうが早いかと思います。

対象テンプレート
・ Ad-astra

HTMLの編集を行います。
HTMLの編集から、以下の部分を探してください。（上の方にあります）

</head>

この直前に、次の記述を追加してください。

<script type="text/javascript">
var imglist = new Array(
   "画像のurl@1",
   "画像のurl@2" );
var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
var output = '<style>#header { background-image : url("' + imglist[selectnum] + '");background-position : 50% 50%; }<\/style>';
document.write(output);
</script>

画像のurl@1、画像のurl@2という部分には使用したい画像のurlを入れます。使用したい画像が3個以上ある場合は、画像のurl@1の方の行をコピー・ペーストで増やしてください。このスクリプトでは画像は100個まで使用可能です。

なお、javascriptを使わないように設定されている環境で閲覧した場合は、ランダムで表示させることはできません。
そういった環境で閲覧した際にはスタイルシートで設定されている画像が表示されます。
スタイルシート側の編集に関しましては、スタイルシート上部に記述されている「簡易カスタマイズ」中にタイトル画像の設定部分がありますので、そちらを参照してください。
※スタイルシートで設定できる画像は一枚のみです。



■古いバージョン用（Ver.2.0未満）のスタイルシート編集方法
編集箇所はナンバリングを参考に探してみてください。

/*[3.1]*/
#header {
  background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/adastra_title.jpg");
  background-repeat : no-repeat;
  background-position : 100% 0;
  padding : 170px 0 110px;
  color : #fff;
}

下線部分を、javascriptがオフの状態に表示させたい画像のurlに置き換えてください。