テンプレート「nFlat」の説明・使い方

  • このエントリーをはてなブックマークに追加
  • Pocket



詳細ページ(FC2Blog)

初めて共有用のテンプレートを作りました。
このテンプレートの説明及び使い方をまとめたので見てみてください。

※只今テンプレートが正しく表示されない不具合が生じています。対応中なので少々お待ちください。
*2013-12-9 解決しました。FC2さんに問い合わせたところ、申請時の動作に不具合が発生していたとのことでしたので、修正していただきました。

更新履歴


公開後の修正申し訳ありません。
公開した以上少しでも快適に利用していただきたいと思っていますのでできる限り修正を加えていきます。
更新日以前にダウンロードした方は更新内容を適用するには再ダウンロードが必要です。

*2013-10-13
・最大横幅を1300pxから1000pxに変更
・基本フォントサイズを16pxから15pxに変更
・ヘッダーの枠を削除・高さ変更
・その他細かな修正

*2013-10-23
・HTMLのインデントの修正
・ソーシャルボタンスクリプトの読み込み方法修正(読込速度向上)
・ブログタイトルの文字サイズを小さくしました
・その他細かな修正

*申請中
・サイドバー2段組の指定方法の修正

目次





nFlatテンプレートについて


このテンプレートの説明および概要です。


コンセプト


2カラムでとりあえずフラットデザインを念頭に作成しました。今流行りですね。
なるべくガチャガチャしていないシンプルなものに。フラットデザインを目標としているので自然とそうなってると思います。
また、幅は一定サイズの間(極僅か)で可変できるようにしました。最大横幅は1000pxです。特にこの値に意味はないですが文字を目で追う上で見やすいかなと。文字も程よく大きめに。

フラットデザインぽさを出すためと、スマホ・タブレットで操作しやすいようにリンクなどのクリッカブルなものはフラットなボタンぽくしています。

公式プラグイン(カテゴリ・タグ・最新記事etc)も、使用時にデザインとしっかりマッチするように考慮もしています。


対応ブラウザについて


現在最新のGoogle Chrome、Mozilla Firefox、Internet Explorer 10、Operaで動作をチェック済みです。
IE8以下についてもHTML5を認識させるスクリプトを読み込ませるようにしているので大丈夫なはずです。MacOS環境は持っていないので確認できていません。
なお、Operaでは一部表示のバグがあります。記事内下方の「既知の問題」を御覧ください。


カスタマイズについて


ご自分でのカスタマイズは可能です。ただし再配布はご遠慮願います。
HTML、CSSが見にくかったらごめんなさい。


プラグインの表示位置について


FC2Blogにはプラグインカテゴリと称して設置場所が3箇所用意されています。どのプラグインをどこに表示するかは各テンプレート毎に様々なのでユーザーとしてはテンプレートを変更するたびにプラグインの位置を変更したりと大変ですね。
恐らくこのテンプレートも例に漏れず、というかもしかしたら特殊な配置です。

プラグインカテゴリ1:サイドバー(右側)
プラグインカテゴリ2:トップページの先頭記事の上部。インデックスでのみ表示(個別記事ページ等では非表示)
プラグインカテゴリ3:フッター(最下部)

となっています。まとめて各プラグインカテゴリ間で配置を変更したい場合はHTMLを直接編集したほうが早いかもしれません。


テンプレートの表示形式について


ブログ形式のサイトには少なくとも2つのタイプが存在します。1つは、トップページで各記事の全文が読めるタイプ。もう1つは、トップページでは記事の見出し文のみ読むことができ、全文は各記事のページヘジャンプしなければ読めないタイプです。
このテンプレートは前者の使い方を想定しています。自動で見出し文と本文を分けて表示することはありません。もちろん後者の使い方をしても構いませんが、その場合は記事を書く際に見出し文を「本文の編集」に、本文を「追記の編集」に書いてください。そうすることで見出し文のみトップページに表示され、残りを読むには「記事を読む」ボタンを押す必要があり、押すと個別記事ページへジャンプします。


コメント機能について


このテンプレートのコメント入力欄には「名前」の入力欄と「本文」の入力欄しかありません。
通常記事に対して何かコメントするときに「URL」や「E-Mail」の項目は必要ないと考えているからです。

なお、入力必須項目はコメント本文のみとなっています。名前が未入力の場合はブログで設定した名無し表示名が表示されます。コメントの編集機能もなしにしてあります。

また、コメント一覧の部分ではブログ全体のコメントの通番ではなく、記事ごとに1から連番が表示されるようになっています。


パンくずリストについて


親・子関係のある2階層のカテゴリの記事はGoogle検索結果でカテゴリ名がパンくずとして表示されます。

どうでもいいけど「パンくず」って響きすき。




nFlatテンプレートの使い方


このテンプレートを快適にお使いいただくためにいくつか注意事項があります。お手数ですが読んでいただけるときっと快適に使用できます。


ヘッダーのTwitterボタンについて


ヘッダーのTwitterボタンはユーザーさんのTwitterアカウントへのリンクのためのものです。
HTMLを編集しご自分のTwitterアカウントのURLを記述してください。無ければ削除していただいて結構です。

記述する場所は以下を参考にしてください。

  1. テンプレート編集画面で「header-twitter」文字列をページ内検索(Ctrl+F)

  2. 見つかった文字列の下の行の「<a href="" title="Twitter" target="_blank">」の「href=""」の部分にURLを記述



ヘッダーナビゲーションについて


「Category-1」や「Tag-1」などのボタン部分のことです。
ヘッダーナビゲーションにはお好みのカテゴリやユーザータグのページを指定してください。

HTMLの編集方法です。

  1. テンプレート編集画面で「category-1」文字列をページ内検索(Ctrl+F)

  2. 見つかった文字列の行の「href=""」の部分に好きなカテゴリ(orタグ)のURLを記述してください

  3. 見つかった文字列の行の「<a></a>タグの間にカテゴリ名(orタグ名)を記述してください


ちなみに特定のカテゴリのURLを知るには公式プラグインの「カテゴリ」などから直接そのカテゴリに飛び、アドレスバーを確認して下さい。タグも同様です。


ソーシャルボタンについて


Twitter、Facebook、Google+、はてなブックマークのソーシャルボタンはテンプレートに組み込まれています。FC2Blogに付属している機能は華麗にオフにしてください。
ボタンはトップページでは各記事の上部(水平方向のバルーン型)に表示され、記事の個別ページでは上部と下部(垂直方向のバルーン型)に表示されます。
ソーシャルボタンは読み込みに時間がかかりページの読み込みの負担にもなっているのであまりトップページで大量に表示したくないのですが、テンプレートの方向性上こういう仕組みです。

最近自分も使いだして便利に感じているPocketボタンの設置も迷ったのですがスペースの都合で見送りました。ただし、記事下部のソーシャルボタン部にはスペースが余っているので、Pocketに限らず色々なソーシャルボタンを必要に応じてご自分で配置できます。

一応配置箇所の探し方を載せておきます。

  1. テンプレート編集画面で「ul class="entry-social-f"」という文字列をページ内検索(Ctrl+F)してください。

  2. 検索した文字列の下に<li>で始まるタグが4つ、ボタン設置文を挟んで存在しているので、その4つめのタグの閉じタグである</li>を探してください。(</script>の下にあるはずです)

  3. 見つけた</li>の直後に改行して新たに<li></li>タグを記述します。

  4. <li></li>の間にソーシャルボタンのスクリプトを記述してください。



ヘッダーの背景画像について


デフォルトでは草と空と雲の画像が貼られている部分です。(5分で作ったやっつけ画像)
本来テンプレートを作る上では用意する気のなかったものです。ですが、共有化するとなると多少なりともそれぞれのユーザーさんに個性を出してもらう余地があったほうがいいのかなと思ったわけです。なのでヘッダーに背景画像を置けるスペースを用意してみました。
サイズは横が「980px」縦が「130px」です。デザイン上この値もしくはそれ以上の画像を用意していただいた方が安心です。

もちろん画像を使用しなくてもデザイン的に大丈夫なように考慮してありますので、要らない方はテンプレートCSS内の指示にしたがって除外してください。


見出しタグの使用について


このテンプレートではヘッダーのサイトタイトルを「h1」、各記事のタイトルを「h2」としています。なので、記事内で見出しをつけたい場合は「h3」から使用してください。「h6」までの見出しに対応しています。記事内での「h1」「h2」に関しては何も定義していません。
もし今まで記事内で「h2」などの見出しタグを使用していて「h2」使えないと困る!という方はお手数ですがCSSまたはHTMLを編集してお使いください。

HTML5では「h1」タグとかを使いまくっても問題ないとどこかで読みましたが念のためオーソドックスに見出しタグを割り振っています。


エントリーの画像について


記事内の画像(imgタグ)に「entry-img」クラスを指定するとその画像が水平方向の真ん中に表示され、目立つボーダーが付きます。
主な用途としては記事のトップ画像(イメージ画像)とするのを想定しています。自由に使ってみたりみなかったりしてください。

記述例:
<img src="hogehoge.jpg" class="entry-img">


表示例:



記事内でボタンを作りたい場合


「a」タグに「button」クラスを指定することで リンクをボタン風に表示できます。
自由に使ってみたりみなかったりしてください。

記述例:
<a href="hogehoge.html" class="button">


表示例:




公式プラグインの「アーカイブ」や「リンク」などをサイドバーに表示した場合、そのままだとやたら高さがあり醜いものになってしまいます。これは公式プラグインの仕様上クラスが記述されていないので仕方なくて…。
これまた「ul」タグに「list-horizonal」というクラスを指定することで細めの高さ、2段組で表示できます。
(申請中)追記:記述ミス・スペルミスですすみません。「li」タグに「list-horizontal」を指定してください。

記述例:
<li class="list-horizontal">


表示例:




「blockquote」タグについて


引用タグも対応しています。

表示例:



既知の問題


全て問題なく表示できるようにしたかったのですが特定のブラウザで何らかの理由で表示がバグったりする問題です。


Operaで公式プラグイン「ユーザータグ」一覧がはみ出す


公式プラグインの記述上、自分のコードの書き方ではどうしても修正できなかったのがOperaにて「ユーザータグ」一覧が適切に改行されない問題。
今わかっているのは空白を意味する「&nbsp;」の認識の仕方がOperaは他のブラウザとは違うために発生しているということ。
解決策としては、公式プラグインの「ユーザータグ」を編集して、HTML内にある「&nbsp;」を削除するだけです。そして「ユーザータグの設定」の欄で「カスタマイズ(HTMLを編集する場合はこれを選択してください)」をチェックしてください。お手数ですが気になる方はこの方法でお願いします。

他のブラウザでは大丈夫です。


まとめ


少々説明文が長くなってしまいました。

今までは自分で使うためにちょこちょこテンプレートを作ってはいたんですが人様に公開できるようなものではなかったので共有に出すことはありませんでした。
というかこのテンプレートも公開できるレベルなのか正直不安なところですが公開してこそわかること・勉強になることもあるかと思うので思いきって申請しました。
(何回の最終確認をしたことか・・・)

制作を初めてから全部で1ヶ月強くらいかかった気がする・・・。

SEOの面やら色々改善した(つもり)理由から共有用に作ったはずのテンプレートの大半を自分でも使ってしまっている状況ですが近々新たに作るかまた元のやつを修正して使うかします。


まだまだ至らない部分も多いですがnFlatを気に入っていただければと思います。
お気に召されましたら是非使ってみてください。
カスタマイズもご自由にどうぞ。

「何か問題を見つけた」「表示がおかしい」「ここをこうしてほしい」などありましたらコメントまたはページ最下部の「お問い合わせ」から教えてくれてもいいんだからね!


早急に対処したい問題


記事内見出し(h3~h6)の余白の修正
ナビゲーションボタンのリンク修正
プラグインで1段組表示の高さが細めのリスト表示もクラスで指定してできるようにする
hrタグの色変更


個人的な反省


・せっかくHTML5なのでもっとsectionやnavを利用したかった。
・申請前に何度も確認をしたが申請を出してから気づいた点や追加したい点が出てきたのでもっと準備すべきだった。しかしこれに関してはあとから知識がついたりするのでどうしようもないかもしれない。
・スポイラー機能を付けたかった
関連記事

Amazon.co.jpアソシエイト

  • このエントリーをはてなブックマークに追加
  • Pocket

また新しいデザインに次の記事

3級ウェブデザイン技能検定の受験結果前の記事

comment iconコメント

コメントの投稿



trackback iconトラックバック

トラックバックURL:

この記事にトラックバックする(FC2ブログユーザー)