ココログフリーのカスタマイズ 無料ブログサービスを行く
@niftyの運営する無料ブログサービスのココログフリーのカスタマイズに関する話。
ココログフリーのカスタマイズに関する制約
カスタマイズをする前に、ココログフリーの制約を知っておく必要がある。
- HTMLテンプレートのカスタマイズ
HTMLテンプレートの変更は出来ない。
- マイフォト
横幅 500px以上のファイルをアップロードすると、500pxにリサイズされる。縦長の最大値は未確認。
マイフォトはあくまでもフォトギャラリー用のスペースの様なので、大きな画像や、その他のファイルをアップロードする時は「管理ページトップ > コントロールパネル > ファイルマネージャー」から行う。
- ファイルマネージャ
ココログフリーをカスタマイズする場合、ファイルマネージャは非常に便利である。
サイトのトップディレクトリからファイルのアップロードとディレクトリの作成が可能であり、faviconの配置や、googleウェブマスター ツールのサイト確認用ファイルの配置、オリジナルページの作成なども可能である。
しかしトップディレクトリに静的なトップページを配置しようと「index.html」や「index.htm」ファイルをアップロードしてみたが、期待した動作はしなかった。
ココログフリーで jQueryを使用する。
上記の通りココログフリーでは、HTMLテンプレートの変更が出来ないので、カスタマイズを行う場合は JavaScriptを使ったカスタマイズ方法しかない。
ここでは簡単かつ強力な JavaScriptクラスライブラリである jQueryを使って、ココログフリーのインデックスページに表示中の投稿の目次と、各投稿の抜粋末尾に「トップへ戻る」リンクを追加する方法を記載する。
.jsファイルのアップロード
jQueryの公式サイトからjQueryのファイルをダウンロードする。この記事を執筆中はjquery-1.2.6.min.js だったので、以後ファイル名をjquery-1.2.6.min.js とする。
ダウンロードしたjquery-1.2.6.min.js を、前述のファイルマネージャーでアップロードする。
先に「misc」フォルダなどを作成して、そのフォルダへアップロードすると良い。
「管理ページトップ > マイリスト」から「マイリストの新規作成」を作成。リストのタイプは「メモ」。リストの名前は何でも良い。
作成したマイリストに「項目を追加」する。ここで注意する点は、JavaScriptを記述するマイリストは一番最後に並んでいるマイリストの一番最後の項目にした方が良い。
ラベル名は入力してもしなくてもよい。備考にJavaScriptの構文を記述する。
簡単なサンプル
以下のコードは、ブログの上部にページ内目次の追加。各投稿の末尾に「ページ先頭へ戻る」リンクの追加。外部リンクへ属性「class='a-blank'」を追加する JavaScriptである。
<script type="text/javascript" src="http://haz.cocolog-nifty.com/misc/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
(function($){
$.fn.contentMenu = function(o){
if(this.length < 1) { return this; }
o = $.extend({
&qout;head&qout; : &qout;<h2 class=\&qout;module-header\&qout;>Index of<br />this page</h2>&qout;,
&qout;beforeLink&qout;: &qout;&qout;,
&qout;divClass&qout; : &qout;contentMenu&qout;,
&qout;aClass&qout; : &qout;inPage&qout;,
&qout;insertMethod&qout; : &qout;before&qout;,
&qout;insertTarget&qout; : this.eq(0) }, o || {});
$.cm = ($.cm) ? $.cm : [];
var $list = $(&qout;<ul>&qout;),
lastInd = this.length-1,
lis = '',
s = $.cm.length,
menu = $.cm[s] = $('<div class=&qout;'+o.divClass+'&qout;></div>').append(o.head,$list);
menu[0].serial = s;
o.insertTarget[o.insertMethod](menu);
return this.each(function(i){
this.id = this.id || &qout;menu&qout;+s+&qout;-el&qout;+i;
lis += '<li><a href=&qout;#'+this.id+'&qout; class=&qout;'+o.aClass+'&qout;>'+o.beforeLink+$(this).text()+'</a></li>';
if (i==lastInd){ $list.append(lis); }
} );
};
})(jQuery);
$(document).ready(function(){
var insertmenutag = { "head" : "<h3>このページのインデックス</h3>" };
var contentTag = "h3";
if( window["CCAX_ID"] ) {
var uqid = CCAX_ID.split("&")[2];
switch(uqid.charAt(0)) {
case 'i':
insertmenutag = $.extend(insertmenutag, {"insertTarget" : $("#front-contents-menu") } );
break;
case 'd':
case 'c':
break;
default:
contentTag = "h4";
insertmenutag = $.extend(insertmenutag, {"insertTarget" : $(".entry-body-top") } );
break;
}
}
$(".entry " + contentTag).contentMenu(insertmenutag);
$('<a name=\"content-top\"></a>').appendTo(".content-top");
$('<div class="navigate-js"><ul><li><a href=\"#content-top\" class="navi-goto-top">ページ先頭へ戻る</a></li></ul></div>').appendTo("#center .entry-bottom");
$('.entry-body-text a[@href^="http"]').not('[@href^="http://haz.cocolog-nifty.com"]').attr("target","_blank").addClass("a-blank");
}); // EndOf: $(document).ready
//-->
</script>
1行目の「http://haz.cocolog-nifty.com/misc/jquery-1.2.6.min.js」を、アップロードした jsファイルへの URLへ変更する。
30行目の「http://haz.cocolog-nifty.com」を貴方のココログの URLに変更する。
