忍者ブログ

grids

[PR]

×

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

チュートリアル

このブログは忍者ブログ用デザインテンプレート『grids(グリッズ)』のチュートリアルです。質問がある場合はコメント欄にお願いします。

テンプレート概要

『grids(グリッズ)』
このテンプレートはグリッドレイアウトで記事および写真を並べることができるブログテンプレートです。記事中の画像を自動で抽出してグリッドレイアウト上に配置します。また、プラグイン等はフッターに配置するようにしたので、写真や文章の閲覧に集中することができます。写真ギャラリー、作品ポートレイトとしての利用に向いています。

画面構成

基本的には、トップページ（一覧）と記事ページ（詳細）の2画面で構成されています。カテゴリーや日付アーカイブをクリックした場合は、トップページと同様にグリッドでの一覧表示となります。

トップページ（一覧）

グリッドで記事を一覧表示。

記事ページ（詳細）

シンプル一段組みで記事を表示

仕様について

HTML5/CSS3を利用

セマンティックな文書構造をつくることのできるHTML5。まだまだこれからの技術ですが、将来的にはきっとSEO的にも有利になると思われます。
また、CSS3を利用することで、装飾の画像を極力利用しないことで、ページ表示の軽量化を目指しました。

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

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

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

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

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

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

ソーシャルボタン

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

  1. 忍者ブログ管理ページでテンプレートの設定をクリック
  2. 利用中のgridsテンプレートの[ 修正 ]をクリック
  3. HTML中の288行目ぐらいにある下記のリンク先を適宜変更。 
    <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を設定済みです。変更の必要はありません。

グリッド表示用のJavaScript:jQuery Masonryを使用

グリッドでコンテンツを綺麗に並べるために、専用のJavaScriptを利用しています。 詳しく知りたい方は下記のホームページを参照してください。

jQuery Masonry

プラグイン分散配置

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

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

更新履歴

  • テンプレート公開中(2012/07/09)
  • ページ送りバグ修正(2012/07/24)



PR