FPSと時々らーめんなブログFPSと時々らーめんなブログ色んなFPSやゲーム、ソフトやデバイスに関連することを幅広くネタにしていこうかと思います。ホームゲーム小ネタWeb制作お問い合わせこのサイトは移転しました。https://1nichi-pc.com一部の記事を除き自動でジャンプします。テンプレート0コメント0トラックバック詳細ページ(FC2Blog)初めて共有用のテンプレートを作りました。このテンプレートの説明及び使い方をまとめたので見てみてください。※只今テンプレートが正しく表示されない不具合が生じています。対応中なので少々お待ちください。修正申し訳ありません。公開した以上少しでも快適に利用していただきたいと思っていますのでできる限り修正を加えていきます。更新日以前にダウンロードした方は更新内容を適用するには再ダウンロードが必要です。「blockquote」タグについて既知の問題Operaで公式プラグイン「ユーザータグ」一覧がはみ出すまとめnFlatテンプレートについてこのテンプレートの説明および概要です。コンセプト2カラムでとりあえずフラットデザインを念頭に作成しました。していないシンプルなものに。フラットデザインを目標としているので自然とそうなってると思います。幅は一定サイズの間(極僅か)で可変できるようにしました。最大横幅は1000pxです。この値に意味はないですが文字を目で追う上で見やすいかなと。文字も程よく大きめに。フラットデザインぽさを出すためと、スマホ・タブレットで操作しやすいようにリンクなどのクリッカブルなものはフラットなボタンぽくしています。公式プラグイン(カテゴリ・タグ・最新記事etc)も、使用時にデザインとしっかりマッチするように考慮もしています。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を記述してください。無ければ削除していただいて結構です。記述する場所は以下を参考にしてください。target="_blank">」の「href=""」の部分にURLを記述ヘッダーナビゲーションについて「Category-1」や「Tag-1」などのボタン部分のことです。ヘッダーナビゲーションにはお好みのカテゴリやユーザータグのページを指定してください。HTMLの編集方法です。テンプレート編集画面で「category-1」文字列をページ内検索(Ctrl+F)見つかった文字列の行の「href=""」の部分に好きなカテゴリ(orタグ)のURLを記述してください見つかった文字列の行の「<a></a>タグの間にカテゴリ名(orタグ名)を記述してくださいちなみに特定のカテゴリのURLを知るには公式プラグインの「カテゴリ」などから直接そのカテゴリに飛び、アドレスバーを確認して下さい。ソーシャルボタンについてTwitter、Facebook、Google+、はてなブックマークのソーシャルボタンはテンプレートに組み込まれています。FC2Blogに付属している機能は華麗にオフにしてください。ボタンはトップページでは各記事の上部(水平方向のバルーン型)に表示され、記事の個別ページでは上部と下部(垂直方向のバルーン型)に表示されます。ソーシャルボタンは読み込みに時間がかかりページの読み込みの負担にもなっているのであまりトップページで大量に表示したくないのですが、テンプレートの方向性上こういう仕組みです。最近自分も使いだして便利に感じているPocketボタンの設置も迷ったのですがスペースの都合で見送りました。記事下部のソーシャルボタン部にはスペースが余っているので、Pocketに限らず色々なソーシャルボタンを必要に応じてご自分で配置できます。一応配置箇所の探し方を載せておきます。class="entry-social-f"」という文字列をページ内検索(Ctrl+F)してください。検索した文字列の下に<li>で始まるタグが4つ、ボタン設置文を挟んで存在しているので、その4つめのタグの閉じタグである</li>を探してください。(</script>の下にあるはずです)見つけた</li>の直後に改行して新たに<li></li>タグを記述します。<li></li>の間にソーシャルボタンのスクリプトを記述してください。ヘッダーの背景画像についてデフォルトでは草と空と雲の画像が貼られている部分です。(5分で作ったやっつけ画像)本来テンプレートを作る上では用意する気のなかったものです。共有化するとなると多少なりともそれぞれのユーザーさんに個性を出してもらう余地があったほうがいいのかなと思ったわけです。ヘッダーに背景画像を置けるスペースを用意してみました。サイズは横が「980px」縦が「130px」です。デザイン上この値もしくはそれ以上の画像を用意していただいた方が安心です。画像を使用しなくてもデザイン的に大丈夫なように考慮してありますので、要らない方はテンプレートCSS内の指示にしたがって除外してください。見出しタグの使用についてこのテンプレートではヘッダーのサイトタイトルを「h1」、各記事のタイトルを「h2」としています。記事内で見出しをつけたい場合は「h3」から使用してください。「h6」までの見出しに対応しています。記事内での「h1」「h2」に関しては何も定義していません。今まで記事内で「h2」などの見出しタグを使用していて「h2」使えないと困る!という方はお手数ですがCSSまたはHTMLを編集してお使いください。HTML5では「h1」タグとかを使いまくっても問題ないとどこかで読みましたが念のためオーソドックスに見出しタグを割り振っています。エントリーの画像について記事内の画像(imgタグ)に「entry-img」クラスを指定するとその画像が水平方向の真ん中に表示され、目立つボーダーが付きます。主な用途としては記事のトップ画像(イメージ画像)とするのを想定しています。自由に使ってみたりみなかったりしてください。リンクをボタン風に表示できます。自由に使ってみたりみなかったりしてください。公式プラグインの「アーカイブ」や「リンク」などをサイドバーに表示した場合、そのままだとやたら高さがあり醜いものになってしまいます。これは公式プラグインの仕様上クラスが記述されていないので仕方なくて...。これまた「ul」タグに「list-horizonal」というクラスを指定することで細めの高さ、2段組で表示できます。(申請中)追記:記述ミス・スペルミスですすみません。「li」タグに「list-horizontal」を指定してください。class="list-horizontal">表示例:「blockquote」タグについて引用タグも対応しています。全て問題なく表示できるようにしたかったのですが特定のブラウザで何らかの理由で表示がバグったりする問題です。Operaで公式プラグイン「ユーザータグ」一覧がはみ出す公式プラグインの記述上、自分のコードの書き方ではどうしても修正できなかったのがOperaにて「ユーザータグ」一覧が適切に改行されない問題。今わかっているのは空白を意味する「&nbsp;」の認識の仕方がOperaは他のブラウザとは違うために発生しているということ。解決策としては、公式プラグインの「ユーザータグ」を編集して、HTML内にある「&nbsp;」を削除するだけです。「ユーザータグの設定」の欄で「カスタマイズ(HTMLを編集する場合はこれを選択してください)」をチェックしてください。お手数ですが気になる方はこの方法でお願いします。他のブラウザでは大丈夫です。まとめ少々説明文が長くなってしまいました。今までは自分で使うためにちょこちょこテンプレートを作ってはいたんですが人様に公開できるようなものではなかったので共有に出すことはありませんでした。いうかこのテンプレートも公開できるレベルなのか正直不安なところですが公開してこそわかること・勉強になることもあるかと思うので思いきって申請しました。(何回の最終確認をしたことか・・・)制作を初めてから全部で1ヶ月強くらいかかった気がする・・・。SEOの面やら色々改善した(つもり)理由から共有用に作ったはずのテンプレートの大半を自分でも使ってしまっている状況ですが近々新たに作るかまた元のやつを修正して使うかします。至らない部分も多いですがnFlatを気に入っていただければと思います。お気に召されましたら是非使ってみてください。カスタマイズもご自由にどうぞ。・せっかくHTML5なのでもっとsectionやnavを利用したかった。・申請前に何度も確認をしたが申請を出してから気づいた点や追加したい点が出てきたのでもっと準備すべきだった。これに関してはあとから知識がついたりするのでどうしようもないかもしれない。滑らかな青の壁紙に半透明の背景を用いたすっきりきれいなデザイン。3カラムで左側はメタ情報など。葉っぱを基調とした柔らかな印象のデザイン。トロン風?なデザインで青光りしてます。