- 更新
- 2013年03月09日(土)
当サイト管理人が作成した次のfc2ブログ用共有テンプレートの主な機能の説明です。
きれいなコーディング、シンプルな見た目
内部SEO対策済
画像未使用、外部JSファイル未使用で表示が速い
W3Cで Valid
機能満載、実用性重視
かんたんカスタム機能
角丸、配色、サイドバー左右をかんたん切り替え
コメントの装飾を、シンプルもしくは吹き出し風からかんたん選択
HTMLとCSS内にカスタム用説明記述済
編集方法を記載したページのURLも記述済
読者を迷わさない充実ナビゲーション
展開するグローバルナビゲーション、しかもJavaScript不使用(IE6もOK!)
グローバルナビゲーション内で現在ページを背景色でお知らせ
パンくずリスト標準装備
ブログ管理人のコメントはゲストのとは違う背景色で視認性抜群
記事ごとにコメントナンバーを１番から表示
固定表示スペースを目的別に複数設置可能
HOMEページに固定表示スペース
カテゴリーページごとの固定表示スペース
各記事最後に固定表示スペース
各ページ下部に固定表示スペース
サイドバーの背後(下部)の空きスペースを有効活用可能
上記固定表示スペースが不要な場合、CSS編集の冒頭部分で簡単に非表示可能
記事本文がメイン、テンプレートはサブ
テンプレートがシンプル設計なので記事本文に注意を引かせやすい
IE6～8でも崩れず表示可能 (プログレッシブ・エンハンスメント)
わりと自由な使用条件
カスタムOK (むしろ推奨)
アフィリエイトサイトOK
商用利用OK
再配布OK (ただし作者の許可必要)
作者サイトへのリンクの削除・改変NG
アダルト・違法サイトNG
customtemplate との比較
このテンプレート(valid-seo)は、customtemplate(別のテンプレート)に比べてカスタムのしやすさを向上させました。具体的には次のとおりです。追記：現在はcustomtemplateも同じ構造になっています。
- HTMLとCSSを1から設計しなおし、カスタムのしやすさを念頭に置きました。
- カスタムの際に参考になるように、HTMLとCSS内にコメントアウトによる説明を増やしました。
- 横幅・色・サイドバーの配置など、カスタムのニーズが高い部分は説明とともにCSSの最初の部分に掲載しました。
- customtemplate では JavaScript (jQuery) をたくさん使っていますが、これを割愛しました。HTMLとCSSをカスタムするだけです。
HTMLとCSSをこれから覚えていきたい方にも使っていただけると思います。customtemplate とは異なり、再配布OK (ただし作者の許可必要)ですので、すばらしいカスタマイズができましたら、公開してほしいです。
改訂履歴
特記がない限り、valid-seo-2c (2カラム)とvalid-seo-3c (3カラム)に共通する改訂履歴です。
ver1.0.0(2012年4月20日)～
ver1.0.0(2012年4月20日)～ver1.1.2(2012年8月4日)。
| Ver. | 日付 | 主な改訂部分 |
|---|---|---|
| 1.0.0 | 2012年4月20日 | 公開しました。 |
| 1.0.1 | 2012年5月1日 | IE9で角丸(border-radius)やボックスシャドウなどが適用されていなかったのを修正しました。CSSの不要な設定を修正しました。 |
| 1.1.0 | 2012年5月29日 |
|
| 1.1.1 | 2012年6月22日 |
|
| 1.1.2 | 2012年8月4日 |
|
ver1.2.0 (2012年10月15日)
HTMLやfc2変数
グローバルナビゲーションに最新記事,新着コメント,カテゴリ,月別記事をデフォルトで表示するよう改良しました。
コメントフォーム内の
dtやddにidを付与し、不要な項目をCSSでピンポイントで非表示にできるように改良しました。既に投稿されているコメントの
idを、dtから親要素のdlに変更しました。jQueryでコメントを個別に操作する際のコードを、シンプルに書けるようになりました。コメントから
コメントの編集
ページへのリンクにrel="nofollow"属性を追加しました。fc2blogで多言語変数が用意されている部分は、一部をこれに置き換えました。
ページ内移動ボタンを設置しました。ページ内移動時の利便性が上がります。
アクセス解析タグ挿入場所候補を２ヶ所、コメントアウトで例示しました。
カテゴリページ内にそのページの目次が表示される機能を追加しました。
文字コードを
euc-jpからutf-8に変更しました。既に多くのブログサーバーが移設完了していると思われるからです。head内にlink要素でrel="canonical"属性を追加しました。記事ページが検索エンジンに重複して登録されないようになります。具体的には、blog-entry-1.htmlと?no=1では同じページが表示されますが、blog-entry-1.htmlの方だけ検索結果に出れば良いという設定にしました。これにより、googleのウェブマスターツールで重複ページの警告が来るのを未然に防ぎます。
CSS
valid-seo-2c の横幅を800pxから958pxに広げました。valid-seo-3c は変更ありません。
bodyに色名のクラスを指定すると簡単にベースカラーを変えられる部分を改良しました。グローバルナビゲーション内の現在ページへのリンクにもベースカラーが反映されるようになりました。以前のバージョンまでは、ユーザーが設定する必要がありましたが、基本的にこれが不要になりました。ページ送り先頭のすべてのピクトグラムをCSSで挿入するよう統一しました。前のバージョンまでは、CSSで挿入する部分とHTMLで編集する部分が混在していました。(IE8以上対象。IE7以下はピクトグラムが表示されない。)
コメント投稿フォームや検索フォームの
inputやtextareaが入力可能(focus)状態であると背景色が変わるように改良しました。サイドバーのリスト項目(
#sidebar li)のlist-style:none;を削除し、中黒（・）がデフォルトで表示されるように変更しました。CSSの記述方法を少しだけショートハンドで記載するようにしました。具体的には、
background-colorの-colorを削除しました。文字を縁取りできる
classを追加しました。これにより背景画像と文字色の境界を明確に視認できるようになります。
ver1.3.0 (2013年03月09日)
customtemplate ver1.4.0 ～ customtemplate ver1.5.0 までの改訂と概ね同じ改訂を一度にしました（jQueryの項目などcustomtemplate固有の改訂部分は除く）。
HTML内の所定のコメントアウトを解除するだけで、最新記事にNew!や○○分前などの文字を表示できるようにしました。HTML内にその旨も記載しています。
このver以降は、改訂の予定はありません。
_,,.. -―――- ､、 ,. ‐'"´ ｀丶 ､ ／ ,,,,,,_ ｀丶、 / ﾉ '⌒i /,' 3 `っ 丶 ＿ ＿_,,...._ / ‐く !,,,,c,,,.っ ＼ ￣￣ ﾞi j ､__,ﾉ _,,.. -''′ l ﾉ ____ ,. -‐''"7__,,..-─ｧ ,r''"´￣｀`丶 ､ ＿_,. -- .､ |::::::｀／ ／-‐─-='､＞ ,､ ￣￣｀ヽ i ｀ヽ/ ｀＞ﾉ ) ヽ.＞|_ヽ/| _,,..-‐'"´ヽ. ﾉ |/ ＜ ´） Y--‐`''"´:::::::::::::::::／i__,,.. - ､ ,／ /| ｀＞ ､_） |￣V::::::::::::::::::::::::::::＼| ヽ､,ﾉ ,. - ' /::::| ＜ l ) ./___∧:::::::::::::::::::::::::::／|-‐'" ,.. -‐'" l__,∧ ＼ ,ｲ:;:-‐‐-､__,,..--､:::::::::＼|´"'' ｰ､'"｀ヽ -‐ '" /:::::ヽ､ __,＞ｰ-‐＜__ﾌ ｒ'´ i:::::::／| | ノ ￣￣_,,..,,,,_ ｰ‐-‐＜ !､ ゝ__,,..-＜::::::＼/___,,..-‐''" ./ ,' 3 `ヽｰっ_,,.＞ﾌ｀￣|´ヽ. ヽ:／ l ⊃ ⌒_つ く/ /| | `'ｰ---‐'''''" ＼／ ＼/ ┼ヽ -|r‐､. ﾚ | ｄ⌒) ./| _ﾉ __ﾉ
作者の次回作にご期待ください。
質問に関して
作者多忙のため返答できかねます。今までにいただいた質問に対する返答は、質問受付ページ跡地でご覧いただけます。
- 関連記事
-
- テンプレートの各部名称やid/classなどをキャプチャー画像で図解 (2013/04/02)
- dt18_eyecatcherはデザインテーマ「どうぶつ」の応募テンプレート (2013/03/31)
- eyecatcher シリーズの説明や使い方 (fc2blog共有テンプレート) (2013/03/23)
- fc2共有テンプレートeyecatcherのカスタム用CSS(コピペ→値の調整だけ) (2013/03/23)
- customtemplate ver1.4.1からver1.5.1への改訂履歴 (2013/03/02)
- fc2blog共有テンプレート valid-seo の説明 (2012/04/20)
- fc2blog共有テンプレート customtemplate の説明 (2012/01/24)
