忍者ブログ

テンプレにいさん

[PR]

×

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

shine

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

テンプレート概要

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

デモ

デモサイトはこちら

画面構成

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

仕様について

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>タグの直前に配置します。フリーエリアプラグインを利用して、アクセス解析のタグなどを設置して下さい。

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

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

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

更新履歴

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

PR