無限スクロール

最近はやりの（？）無限スクロールというか、次頁のコンテンツを自動で読み込むというのを
fc2blogでもできるだろうかと思って、ためしにInifinite Scrollというプラグインを
組み込んでみたのはいいけど、どうもうまくいかない。
他に方法がないだろうかと思って、もう配布が終了してしまったautopager.jsを使ってみたら
なんとかうまくいきました。

配布元が終了してしまっているので、不具合のフォローとかできませんが、
一応動いてはいるので、それでも良いという方はお使いください。

ただ、スマホで見た場合を考えて、次頁を自動読み込みにはしないで、
Load moreボタンを押すと読み込むようにしてみました。
あとトップの画像はもちろんお好きに変更できます。

#header-container{
width:100%;
height:250px;
margin:0;
padding:0 10%;
text-align:left;
background-image:url(http://blog-imgs-54.fc2.com/m/y/s/mysticdiary/finland.jpg);
background-position:center bottom;
background-size:cover;
position:relative;
-webkit-animation:headerMotion 1.8s;
-moz-animation: headerMotion 1.8s;
-o-animation: headerMotion 1.8s;
animation: headerMotion 1.8s;
}

上のbackground-imageのリンクを差し替えてください。

ファイルは以下からダウンロードしてください。

その前に読んでね

finland.zip
DOWNLOAD

関連記事

FC2ブログテンプレート 2015/05/06
無限スクロール 2014/11/29
2カ月以上ごぶさたでしたが 2014/11/09

baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

7 Comments

rei says..."テンプレートについて質問です"

はじめまして。
monoというテンプレートを使わせて頂いてます。
素敵なテンプレートでとても気に入っています。
記事の文字をドラッグした時文字の背景色が
現在オレンジなのですが他の色に変えることは可能でしょうか？
可能であればやり方を教えて頂けると幸いです。

evergreen says...""

またまた使わせていただきます。
いつも素敵なテンプレートありがとうございます。

管理人 says..."reiさんへ"

こんにちは。

ドラッグしたときの背景色はＣＳＳで指定できます。

::selection {
background:#cccccc; /* Safari */
}

::-moz-selection {
background:#cccccc; /* Firefox */
}

上のようにＣＳＳに追加します。
#ccccccの部分はお好きな色をご自分で指定してください。

管理人 says..."evergreenさんへ"

こんにちは。

これからもよろしくお願いいたします。

rei says...""

無事変更できました。
ありがとうございました。

sayu says...""

こんにちは。いつも素敵なテンプレートをありがとうございます。
FINLANDを使用させていただきたいの思うのですが、
追記を折りたたみ式に変更して使用するのは可能でしょうか？

ミユキ says...""

私も追記を折りたためるようにしたいのですが
http://rgrg.blog61.fc2.com/blog-entry-174.html
こちらのサイトを活用して折り畳みしてましたが
管理人さまのテンプレートにはどうやって記述すればいいのかわかりません
どうかご教授いただければと思います
お忙しいところ申し訳ありません

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/476-b41850be

その前に読んでね

7 Comments

Leave a reply

Trackbacks