忍者ブログ

[PR]

×

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

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://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1340457578" /></a></li>
      <li><a href="<!--$g_url-->RSS/" target="_blank"><img src="http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1340457577" /></a></li>
      <li><a href="#" target="_blank"><img src="http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1340457576" /></a></li>
      <li><a href="#" target="_blank"><img src="http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1340457575" /></a></li>
      <li><a href="#" target="_blank"><img src="http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1340457574" /></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)





PR