grids http://grids.blog.shinobi.jp/ 忍者ブログ用デザインテンプレート『Grids(グリッズ)』のデモブログ。 Wed, 06 Mar 2013 10:40:48 GMT ja © Ninja Tools Inc. チュートリアル

このブログは忍者ブログ用デザインテンプレート『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)



]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB Mon, 09 Jul 2012 05:52:30 GMT grids.blog.shinobi.jp://entry/13 さくら
花を観賞する園芸品種として好まれたため、さまざまな姿の花が見られる。花びらは五枚から百数十枚までさまざまであり、多くのものが白から桃色である。サクラに限らないが用語を挙げる。花弁が五枚までのものを一重、五枚から十枚のものを半八重、十枚以上の花弁をもつものを八重と言う。また、花弁が非常に多く、一枚一枚が細長い場合、菊咲きと称する。さらに萼、花弁、雄蕊の中にさらに萼、花弁、雄蕊のある二重構造のものも見られ、これは段咲きと呼ばれる。花弁の枚数の増え方には雄蕊が花弁に変化するものと、花弁や雄蕊そのものが倍数加する変化が見られる[8]。同じサクラ属のモモやウメは花柄が短く枝に付くように咲くが、サクラはこれらと違って長い花柄をもっており、枝からはなれて咲く。]]> カテゴリー１ http://grids.blog.shinobi.jp/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%EF%BC%91/%E3%81%95%E3%81%8F%E3%82%89 Mon, 09 Jul 2012 05:28:31 GMT grids.blog.shinobi.jp://entry/12 子宝湯
「千と千尋の神隠し」のモデルになったともいわれる銭湯。元は足立区千住に存在していたが、現在は「江戸東京たてもの園」に移築し保存されている。取り壊しにあいそうなところをまぬがれることができたようだ。]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/%E5%AD%90%E5%AE%9D%E6%B9%AF Mon, 09 Jul 2012 05:20:22 GMT grids.blog.shinobi.jp://entry/10 ジオラマみたいだ
写真を取るときにティルトシフトレンズという特殊なレンズを使用すると、実物の風景を、まるでミニチュアの世界の様に撮影することができる。まるでガリバー気分。]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/%E3%82%B8%E3%82%AA%E3%83%A9%E3%83%9E%E3%81%BF%E3%81%9F%E3%81%84%E3%81%A0 Mon, 09 Jul 2012 05:16:45 GMT grids.blog.shinobi.jp://entry/9 枯山水
枯山水は水のない庭のことで、池や遣水などの水を用いずに石や砂などにより山水の風景を表現する庭園様式。例えば白砂や小石を敷いて水面に見立てることが多く、橋が架かっていればその下は水である。石の表面の紋様で水の流れを表現することもある。
抽象的な表現の庭が室町時代の禅宗寺院で特に用いられ発達した。従来の庭園でも技法として庭園の一部に用いられ、寝殿造庭園でも枯山水の部分を含み大名屋敷に造られていく回遊式庭園も枯山水を含んでいることがあったが、禅宗寺院で用いられて以降、独立した庭園として造られるようになった。日本庭園は水を得られる場所に築くものであったが、枯山水様式の登場後は必ずしも水を使わなくとも造園が可能になった。]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/%E6%9E%AF%E5%B1%B1%E6%B0%B4 Mon, 09 Jul 2012 04:58:14 GMT grids.blog.shinobi.jp://entry/8 青空がまぶしい
サクラは、バラ科サクラ属サクラ亜属に分類される落葉広葉樹である。春に白色や淡紅色から濃紅色の花を咲かせる。花は日本では鑑賞用途としては他の植物に比べ、特別な地位にある。果実を食用とするほか、花や葉の塩漬けも食品などに利用される。日本国外においては、一般的に果樹としての役割のほうが重視された。]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/%E9%9D%92%E7%A9%BA%E3%81%8C%E3%81%BE%E3%81%B6%E3%81%97%E3%81%84 Mon, 09 Jul 2012 04:55:24 GMT grids.blog.shinobi.jp://entry/7 サクラ
サクラは、バラ科サクラ属サクラ亜属に分類される落葉広葉樹である。春に白色や淡紅色から濃紅色の花を咲かせる。花は日本では鑑賞用途としては他の植物に比べ、特別な地位にある。果実を食用とするほか、花や葉の塩漬けも食品などに利用される。日本国外においては、一般的に果樹としての役割のほうが重視された。]]> カテゴリー１ http://grids.blog.shinobi.jp/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%EF%BC%91/%E3%82%B5%E3%82%AF%E3%83%A9 Mon, 09 Jul 2012 04:54:37 GMT grids.blog.shinobi.jp://entry/6 シアトル
イチロー選手が活躍するシアトルマリナーズがあることでも有名なシアトル。アメリカ北西部に位置し、夏は涼しく冬も緯度の割に寒くない。そのため、避暑地としても人気が高い。また、マイクロソフトとニンテンドーオブアメリカがシアトル近郊のレドモンドに本拠地を置いていることもあり、IT産業でも有名である。
]]> カテゴリー２ http://grids.blog.shinobi.jp/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%EF%BC%92/%E3%82%B7%E3%82%A2%E3%83%88%E3%83%AB Mon, 09 Jul 2012 04:53:20 GMT grids.blog.shinobi.jp://entry/5 Welcome!

ウェルカム(welcome)は英語で歓迎という意味。しかし、なぜ「You're welcome!」は、「どういたしまして」という意味になるのであろうか。なんとも不思議だ。調べてみると、元々welcomeは『喜びをもたらす来訪者』という意味だったようだ。それが転じて、「どういたしまして。こちらこそありがとう」みたいな使われ方をしているのですね。

]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/welcome- Mon, 09 Jul 2012 04:48:41 GMT grids.blog.shinobi.jp://entry/4 下町のオアシス
昔は家の前に鉢植えを並べた民家が多かった。道端に所構わず鉢植えを並べ、自分だけの庭を作ろうとしていたのだろうか。この風習は世界的に見ても稀である。私有地が狭く、庭を持てない日本だからこそ広まった。そこまでして緑を愛する日本人の心はすばらしい。
]]> 記事 http://grids.blog.shinobi.jp/%E8%A8%98%E4%BA%8B/%E4%B8%8B%E7%94%BA%E3%81%AE%E3%82%AA%E3%82%A2%E3%82%B7%E3%82%B9 Mon, 09 Jul 2012 04:34:39 GMT grids.blog.shinobi.jp://entry/3