忍者ブログ

[PR]

×

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

シンプルxシンプル




シンプルなテンプレートエディターをつくったよ。

テンプレートはこちら

※ごめん。詳細は時間が出来たら書くよー。


PR

Leaf

このブログは忍者ブログ用デザインテンプレート『Leaf』のチュートリアルです。

テンプレート概要

『Leaf』
シンプルな日記用のテンプレが欲しいとご要望をいただいたのでつくってみました。プラグイン無し、一段組みのシンプルな構成です。

デモ

デモサイトはこちら

画面構成

シンプルな一段構成で、プラグインはありません。

仕様について

HTML5/CSS3を利用

セマンティックな文書構造にしてあります。将来的にSEOへの効果を期待しています。

レスポンシブウェブデザインに対応

このブログはレスポンシブウェブデザインに対応しています。 スマートフォンの閲覧時に忍者ブログのデフォルトデザインを利用しない様にする設定が必要になります。 下記の手順で調整を行ってください。

  1. 忍者ブログ管理ページでブログ表示の設定をクリック
  2. サブナビのブログ表示の設定をクリック
  3. 「スマートフォン用テンプレート」の項目を使用しないに変更して保存

更新履歴

  • テンプレート申請中(2012/07/27)





shine

このブログは忍者ブログ用デザインテンプレート『shine』のチュートリアルです。

テンプレート概要

『shine』
最近、ボケ画像を使ったキラキラしてるテンプレートが流行ってるようなので、試しに作ってみました。背景画像は好きに変更してOKですよ。

デモ

デモサイトはこちら

画面構成

シンプルな一段構成で、プラグインはフッターに配置しました。

仕様について

HTML5/CSS3を利用

セマンティックな文書構造にしてあります。将来的にSEOへの効果を期待しています。

アルファベットウェブフォントを利用

ブログタイトルとプラグインタイトルの2か所にGoogleウェブフォントを利用しています。 (Lora:700:italic

できるだけ、上記2か所に関してはアルファベットを利用した方が、とてもかっこいい仕上がりになります。※もちろん日本語も利用できます。

プラグイン分散配置

このブログテンプレートでは、プラグインを通常のナビゲーションに利用するだけではなく、headタグ内、記事上、記事下、body閉じタグの直前に配置することで、デザインテンプレートを変更しても、アクセス解析のタグなどを再配置しなくても良い仕組みを導入しています。

プラグイン1
通常のプラグインとして利用します。「Notebook」テンプレートでは、ページ上部のトグルスライドの部分が該当します。
プラグイン2
プラグイン2は、<head>タグ内に配置しています。フリーエリアプラグインで、デザインテンプレートに依存しないCSSや、Googleウェブマスターツールの認証タグを設置して下さい。
プラグイン3 / プラグイン4
プラグイン3は記事の上部。プラグイン4は記事の下部になります。フリーエリアプラグインを利用して、Twitter、Facebookなどのソーシャルメディアのアイコン(忍者おまとめボタンがオススメ)や広告などを張ってください。
プラグイン5
プラグイン5は、</body>タグの直前に配置します。フリーエリアプラグインを利用して、アクセス解析のタグなどを設置して下さい。

レスポンシブウェブデザインに対応

このブログはレスポンシブウェブデザインに対応しています。 スマートフォンの閲覧時に忍者ブログのデフォルトデザインを利用しない様にする設定が必要になります。 下記の手順で調整を行ってください。

  1. 忍者ブログ管理ページでブログ表示の設定をクリック
  2. サブナビのブログ表示の設定をクリック
  3. 「スマートフォン用テンプレート」の項目を使用しないに変更して保存

更新履歴

  • テンプレート申請中(2012/07/27)





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

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

変更内容

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

忍者ブログでページ送りを実装する場合には、このような独自タグを利用します。 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;
}

あとがき

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

Notebook.(ノートブック)

このブログは忍者ブログ用デザインテンプレート『Note.』のチュートリアルです。

テンプレート概要

『Note』
このテンプレートはノートブック形式のデザインテンプレートです。日記やメモ帳、小説などに向いています。

デモ

デモサイトはこちら

画面構成

基本的には見開きで左右に記事が1件づつ配置されます。ブログ詳細設定にて、表示する一覧の記事件数を「2件」に設定変更して頂く必要があります。

仕様について

HTML5/CSS3を利用

セマンティックな文書構造にしてあります。将来的にSEOへの効果を期待しています。

アルファベットウェブフォントを利用

ブログタイトルとプラグインタイトルの2か所にGoogleウェブフォントを利用しています。 (Lora:700:italic

できるだけ、上記2か所に関してはアルファベットを利用した方が、とてもかっこいい仕上がりになります。※もちろん日本語も利用できます。

ソーシャルボタン

フッター部分にソーシャルボタンをつけておきました。 ただし利用して頂くには、テンプレートの編集を行って頂く必要があります。

  1. 忍者ブログ管理ページでテンプレートの設定をクリック
  2. 利用中のgridsテンプレートの[ 修正 ]をクリック
  3. HTML中の下記のリンク先を適宜変更。
    <aside>
        <ul id="social">
          <li><a href="#" target="_blank"><img src="http://file.template.ni-3.net/icon_social_twitter.png" /></a></li>
          <li><a href="<!--$g_url-->RSS/" target="_blank"><img src="http://file.template.ni-3.net/icon_social_rss.png" /></a></li>
          <li><a href="#" target="_blank"><img src="http://file.template.ni-3.net/icon_social_google.png" /></a></li>
          <li><a href="#" target="_blank"><img src="http://file.template.ni-3.net/icon_social_flickr.png" /></a></li>
          <li><a href="#" target="_blank"><img src="http://file.template.ni-3.net/icon_social_facebook.png" /></a></li>
        </ul>  
    </aside>
※RSSボタンはリンクURLを設定済みです。変更の必要はありません。

プラグイン分散配置

このブログテンプレートでは、プラグインを通常のナビゲーションに利用するだけではなく、headタグ内、記事上、記事下、body閉じタグの直前に配置することで、デザインテンプレートを変更しても、アクセス解析のタグなどを再配置しなくても良い仕組みを導入しています。

プラグイン1
通常のプラグインとして利用します。「Notebook」テンプレートでは、ページ上部のトグルスライドの部分が該当します。
プラグイン2
プラグイン2は、<head>タグ内に配置しています。フリーエリアプラグインで、デザインテンプレートに依存しないCSSや、Googleウェブマスターツールの認証タグを設置して下さい。
プラグイン3 / プラグイン4
プラグイン3は記事の上部。プラグイン4は記事の下部になります。フリーエリアプラグインを利用して、Twitter、Facebookなどのソーシャルメディアのアイコン(忍者おまとめボタンがオススメ)や広告などを張ってください。
プラグイン5
プラグイン5は、</body>タグの直前に配置します。フリーエリアプラグインを利用して、アクセス解析のタグなどを設置して下さい。

更新履歴

  • テンプレート申請中(2012/07/20)
  • テンプレート承認済み/公開(2012/07/20)