[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
忍者ブログのデザインテンプレートでページ送り（ページャー）を挿入する場合のちょっとしたコツをお教えしちゃいます。
忍者ブログでページ送りを実装する場合には、このような独自タグを利用します。 pagelink_10でページ数分ループして、$pagelink_10_linkでリンクを表示する（現ページの場合はリンク無し）といった仕様です。簡単ですね。
<ul>
<!--pagelink_10-->
<li><!--$pagelink_10_link--></li>
<!--/pagelink_10-->
</ul>この独自タグを利用する場合に、今となってはチョットだけ使いにくい点があります。 それは、ページ送りの現ページを示す部分が、AタグやSPANタグなど何らかのHTMLに囲まれていれば良いのですが、数字をまっさらに表示する仕様になっています。そのため、リンクが存在する場合とmarginやサイズがそろわず、ちょっとレイアウトが使いにくい状態になっています。なので、現ページの部分にAタグをjavascriptで挿入して良い感じになる様に調整をします。
変更方法は簡単。わずか３ステップです。
<div id="PageLinkBlock">
<ul id="PageLink10">
<!--pagelink_10--><li><!--$pagelink_10_link--></li><!--/pagelink_10-->
</ul>
</div><!--ページリンク調整-->
<script>
var pagerEmts=document.getElementById("PageLink10");
var contents = "";
for(var i in pagerEmts.childNodes){
var emt=pagerEmts.childNodes.item(i).innerHTML;
if(emt !== undefined){
if(!emt.match(/<("[^"]*"|'[^']*'|[^'">])*>/))
{
contents = contents + "<li class=\"active\"><a href=\"#\">"+emt+"</a></li>";
} else {
contents = contents + "<li class=\"noactive\">"+emt+"</li>";
}
}
}
pagerEmts.innerHTML= contents;
</script>#PageLinkBlock {
margin:60px;
text-align:center;
}
#PageLinkBlock ul {
text-align:center;
}
#PageLink10 {
text-indent:center;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:120%;
}
#PageLink10 li {
margin:0.4em;
font-weight:bold;
display:inline;
}
#PageLink10 li a{
background-color: #373C38;
padding:0.7em 1.0em;
font-weight:normal;
text-decoration:none;
color: #FCFCFC;
/* 角丸 */
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
/* 影 */
-moz-box-shadow: 2px 2px 2px #B9B8B5;
-webkit-box-shadow: 2px 2px 2px #B9B8B5;
box-shadow: 3px 3px 3px #B9B8B5;
}
#PageLink10 li.active a{
background-color: #FFDB4F;
color: #333333;
}
#PageLink10 li a:focus,
#PageLink10 li a:hover,
#PageLink10 li a:active {
background: #FFDB4F !important;
color: #333333;
}
<div id="background-image"></div>
#background-image {
background: url(http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1339390586) center center fixed;
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
※画像URLと透過率（opacity）は適宜修正してくださいな。 InternetExplorer7,8でHTML5対応をするには、とりあえず、GoogleCodeでheader、footer、articleなどの新しい要素を読み込める様にするJavaScriptが配布されているので、おまじないとして下記のコードを入れましょう。 今のところ、この対応が一番簡単で楽かな。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
ブログやホームページ上でページの階層をわかりやすく表現するのに最適なパンくずリスト。忍者ブログのデザインテンプレートに設置するおすすめの設定を紹介するよ。
SEOを考慮する場合、タイトルタグの内容もとても重要になってきますよね。
忍者ブログでのオススメの設定をご紹介しておきます。
今回用意した忍者ブログテンプレート用の独自タグでは、アクセスしたページによって最適化したタイトルを表示させます。下記の様な条件分岐になります。