忍者ブログ

[PR]

×

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

grids(グリッズ)

新着テンプレができたよ。
■デモ:http://grids.blog.shinobi.jp/
■チュートリアル:http://grids.blog.shinobi.jp/Entry/13/


PR

ギャラス

新作。写真集、ギャラリー用テンプレートです。
写真が大好きな方ご利用ください。

名称

ギャラス

「ギャラリー」から適当につけました。

デモ

Demo

画面

トップページ

トップページは、投稿されている画像をでっかくスライドショー形式で表示します。キレイに表示させるコツは、出来るだけ大きなサイズの画像を利用し、JPEGmini形式を利用するなどして容量を小さく抑えるようにすると良いです。

一覧ページ

一覧ページでは画像を縦に並べます。また、右ナビのプラグインは利用できますので、カテゴリーやアーカイブ、検索などを設置するなどして、写真を絞りやすくしておくと良いと思います。

詳細ページ

詳細ページは一段組みです。写真をでっかく表示できます。コメントあり。

仕様

  • スライドショー対応
  • 写真をでっかっく表示。ギャラリー用。
  • HTML5に対応

更新履歴

  • テンプレート公開(2012/07/02)
テンプレート一覧はこちら

チュニス

ちょっと報告が遅くなりましたが新作です。

名称

チュニス

チュニスは、チュニジアにある都市の名前で、旧市街は世界遺産になってるところの事。色合いがそれっぽいので名づけました。(完全に後付け)

画面

今回はシンプルな構成に戻しました。記事を表示するメインエリアを幅600pxにしてあるので、大概のコンテンツは入るかなと。日記用にオススメですが、画像を幅100%にしてあるので写真を掲載するのにも向いてます。

デモ

デモの確認はこちら

仕様

  • 2カラム右ナビのシンプルな構成
  • 記事エリアがゆったり600px
  • HTML5に対応

更新履歴

  • テンプレート公開(2012/06/22)
テンプレート一覧はこちら

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

ステップ1

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

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

ステップ2

CSSタグを追加する。

#background-image {
  background: url(http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1339390586) 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)は適宜修正してくださいな。

ストラタ

新しいデザインテンプレートを公開しましたぞー。これまでの忍者ブログテンプレートには無い構造にして見ました。なかなか良い出来だと思います。
ぜひ使ってみてくだされ。

名称

ストラタ
ストラタ(地層/層/階級の意味)は、ページ構造が階層化された忍者ブログのデザインテンプレートです。トップページ、一覧ページ、詳細ページ毎にデザインを最適化しています。

デモ

Demo

画面

トップページ

中央のスライダーバーは記事中の画像を自動で抽出し切り替え表示しています。また、下部に新着ブログを表示しています(管理ページで設定した記事数)。このとき、記事に画像が含まれる場合は画像を表示しています。

一覧ページ

一覧ページでは、記事の一覧を表示しています。記事中の画像(サムネイル風)と記事の概要(100文字)の一覧になります。上部に、記事カテゴリーのメニューを掲載しているので、カテゴリーを切り替えて閲覧してください

詳細ページ

記事詳細を表示し下部にコメント欄を掲載します。※掲載される画像は、記事幅いっぱいに表示されます

仕様

  • トップページ、一覧ページ、詳細ページの階層構造
  • トップページにスライダーバーを表示(記事中の画像を切り替え)
  • HTML5に対応

更新履歴

  • テンプレート公開(2012/06/19)


テンプレート一覧はこちら