[fc2]自作テンプレートを作成して共有登録申請してみよう – その5

[fc2]自作テンプレートを作成して共有登録申請してみよう – その5

だらだらと長くなり「その5」まで来てしまいましたので、今回で完結します。

結論から言いますと・・・ 採用されました!!

作成したテンプレートの情報については本記事の最後に記載します。

 

前回の記事で記載したテンプレートの各パーツごとの説明をしていきます。

 

ヘッダー

必要最低限だと以下のようになります。

<%xxx>と記載されている変数については以下のページを参照してください。

テンプレート用 変数一覧

 

しかし、SEO的なことを考えるとh1が常にブログタイトルに設定されることは避けたい。

h1が複数存在することは避けたいので個別記事の場合には記事のタイトルにh1を設定するようにしなくてはいけない。それと同時に個別記事の場合ブログタイトルからh1タグを削除するように設定。

あと検索結果のページも「〇〇〇〇〇〇の検索結果」という表示を見出しにしたいので、個別記事および検索結果ページを同じ扱いにして以下のように変更。

ここで注目したいのは<!–xxxxxxx–>~<!–/xxxxxxx–>という記述。

こちらは条件分岐の記載となります。

まず、ブログタイトルにh1を記載した部分(上記3行目~7行目)。

こちらにある以下の条件分岐はそれぞれこのような意味になります。

  • <!–not_search_area–>~<!–/not_search_area–> → 検索結果表示ページではない
  • <!–not_permanent_area–>~<!–/not_permanent_area–> → 個別記事ページではない

 

notをとった場合には肯定の条件です。

2つの条件を設定することにより、トップページ、アーカイブページ(カテゴリ別、月別)とうのページでのみh1が付いたブログタイトルがヘッダーに表示されます。

そして検索結果表示ページ、個別記事ページの場合は9行目~15行目のようになります。

(否定の時のようにまとめたら正しく動作しなかったので別々の条件にしました。原因をご存知でしたら教えてください。。。)

 

メインカラム

こちらは前述通り3カラム構成にしているので左から順に記載していきます。

 

左カラム


こちらには「プラグインカテゴリ1」を指定

この場合、「plugin_first」という変数を使用します。

<!–plugin_first–>~<!–/plugin_first–>までがプラグインの表示領域です。

その中にシンプルに「プラグインタイトル」「プラグインコンテント」のみを記載しています。

またプラグインごとにCSSを指定する必要があることも考えて要素(div)のクラスに<%plugin_first_tag>を設定。またプラグインの管理画面で設定可能な文字寄席の設定に対応できるようにstyle=”text-align:<%plugin_first_talign>と追記しました。

 

中央カラム


長いですが、割とシンプルです。

2行目~5行目の<!–search_area–>~<!–/search_area–>には検索結果表示ページの見出し「〇〇〇〇〇〇の検索結果」を表示しています。前述のとおり、h1を付けてます。

そして<!–topentry–>~<!–/topentry–>が本題となります。

fc2の変数一覧ページには「エントリーを繰り返し表示させるブロック」との説明があります。

要するにこの変数を記載しないと記事一覧(検索結果含む)や個別記事の表示ができません。

 

14行目~15行目に記事のタイトルを記載。

  • <!–not_permanent_area–><h2>~</h2><!–/not_permanent_area–>
  • <!–permanent_area–><h1>~</h1><!–/permanent_area–>

個別記事にはh1を設定、それ以外にはh2を設定しています。

 

18行目~21行目には記事情報(投稿日、カテゴリー、コメント数)を記載

(各変数については前述のfc2の変数一覧ページを参照してください。)

 

30行目はサムネイルの表示

 

31行目~42行目が、記事の表示になっています。

個別記事ページ以外は抜粋を記載するようにしています。

(私が記事を書く際に追記として分けて書くのが面倒なためこうしました。)

<%topentry_description> 本文の要約(200文字)を表示

31行目~34行目がこれにあたります。

要約+続きを読む

 

35行目~40行目が個別記事ページの記事表示です。

<%topentry_body>だけだと追記部分が表示されないので追記も表示するようにしています。

 

46行目~55行目がページャーです。

記事一覧ページ、個別記事ページどちらもこれで表示されるようになっています。

fc2って標準では「前のページ」「次のページ」しか出来ないんですね。

「最初のページ」「最後のページ」「何ページへ」みたいのはjqueryを使用すればできるそうですが、今回は初めての共有申請なので見送り。標準ページャーだけにしました。

 

そして、59行目から最後までが、コメント、トラックバックになりますが、割愛します。

ぶっちゃけますと、htmlについては公式テンプレートからパクっています。

CSSでオリジナリティを出してみました。

 

右カラム


こちらは変数を「plugin_second」にしただけで左カラムと全く同じですので省略。

 

フッター

こちらにはテンプレートには必ず入れなくてはいけないfc2の広告タグを入れています。

絶対に削除しないでください!! とは言ってもこのタグなしでは更新ができないと思います。

 

あとはお約束の「CopyRight 〇〇〇 All Rights Reserved.」と「Design by 〇〇〇」です。

 

そして、デザインはどうしようかと考えました。熟考の上、某LDブログのまとめサイト用のテンプレートを参考にすることにしました。(よく見かける青系のやつです。)

露骨にパクリ過ぎていると承認されないと思ったので、完コピではない程度にしています。

 

CSSについてはテンプレートを追加して頂ければ分かると思いますのでこのブログでは触れません。

 

公開情報

テンプレート名は「nichmtm-blu 」です。以下のページで公開しています。

テンプレ研修所

興味がありましたらぜひダウンロードしてください。

 

また、テンプレートについての不具合報告・お問合せ等はこのブログのコメント欄に頂ければと思います。

後日、まとめサイトには必須のブログロール(Livedoor RSS)や左右カラム下部に追従する広告を設置するカスタマイズ方法を記事にする予定です。

 

 

Leave a Reply

最初のコメントを頂けますか?

avatar
  Subscribe  
更新通知を受け取る »

fc2ブログテンプレートカテゴリの最新記事