忍者ブログ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

忍者ブログのページ送り(ページャー)をいい感じにする方法

忍者ブログのデザインテンプレートでページ送り(ページャー)を挿入する場合のちょっとしたコツをお教えしちゃいます。

変更内容

まずはページ送りの使用について

忍者ブログでページ送りを実装する場合には、このような独自タグを利用します。 pagelink_10でページ数分ループして、$pagelink_10_linkでリンクを表示する(現ページの場合はリンク無し)といった仕様です。簡単ですね。

<ul>
  <!--pagelink_10-->
  <li><!--$pagelink_10_link--></li>
  <!--/pagelink_10-->
</ul>

課題と変更した後のイメージ

この独自タグを利用する場合に、今となってはチョットだけ使いにくい点があります。 それは、ページ送りの現ページを示す部分が、AタグやSPANタグなど何らかのHTMLに囲まれていれば良いのですが、数字をまっさらに表示する仕様になっています。そのため、リンクが存在する場合とmarginやサイズがそろわず、ちょっとレイアウトが使いにくい状態になっています。なので、現ページの部分にAタグをjavascriptで挿入して良い感じになる様に調整をします。

変更方法

変更方法は簡単。わずか3ステップです。

(HTML)ページ送りを入れたい個所に独自タグを入れる

<div id="PageLinkBlock">
    <ul id="PageLink10">
    <!--pagelink_10--><li><!--$pagelink_10_link--></li><!--/pagelink_10-->
    </ul>
</div>

(HTML)BODYの閉じタグの直前に下記のスクリプトをいれる

<!--ページリンク調整-->
<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>

(CSS)CSSに下記を追加する

#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;
}

あとがき

本当は独自タグの仕様を変更できれば良いんだけど、過去のデザインテンプレートにも影響が出てしまうから簡単には変えられないね。

PR

背景に固定画像を入れて透過フィルターをかける方法メモ

ステップ1

bodyタグ直下にこんな感じでdivを入れておく。

<div id="background-image"></div>

ステップ2

CSSタグを追加する。

#background-image {
  background: url(http://file.template.ni-3.net/DSC_0042.jpg) 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の要素に対応させるJavaScript

InternetExplorer7,8でHTML5対応をするには、とりあえず、GoogleCodeでheader、footer、articleなどの新しい要素を読み込める様にするJavaScriptが配布されているので、おまじないとして下記のコードを入れましょう。 今のところ、この対応が一番簡単で楽かな。


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



忍者ブログでパンくずを表示するおすすめ設定

ブログやホームページ上でページの階層をわかりやすく表現するのに最適なパンくずリスト。忍者ブログのデザインテンプレートに設置するおすすめの設定を紹介するよ。

仕様

  • トップページの場合
     ブログ説明
  • 記事詳細ページの場合
     Home > カテゴリー名称 > 記事タイトル
  • カテゴリー一覧ページの場合
     Home > カテゴリー名称
  • 日付アーカイブ(月毎)、日毎一覧ページの場合
     Home > 2012年06月08日の記事
  • 検索結果ページの場合
     Home > 「○○○」の検索結果
  • コメント編集画面の場合
     Home > コメントの編集


忍者ブログのデザインテンプレートでSEOを意識したタイトルタグの設定方法

SEOを考慮する場合、タイトルタグの内容もとても重要になってきますよね。
忍者ブログでのオススメの設定をご紹介しておきます。

仕様

今回用意した忍者ブログテンプレート用の独自タグでは、アクセスしたページによって最適化したタイトルを表示させます。下記の様な条件分岐になります。

  • トップページの場合
  •  ブログ名称

  • 記事詳細ページの場合
  •  記事タイトル|ブログ名称

  • カテゴリー一覧ページの場合
  •  カテゴリータイトル|ブログ名称

  • 日付アーカイブ(月毎)、日毎一覧ページの場合
  •  ○年○月○日の記事アーカイブ|ブログ名称
     ※インデックス無し

  • 検索結果ページの場合
  •  △△の検索結果|ブログ名称
     ※インデックス無し

  • コメント編集画面の場合
  •  コメント編集画面|ブログ名称
     ※インデックス無し