SHIDEN DESIGN BLOG

thumnail_20171024

FC2ブログでカテゴリーをグローバルナビゲーションとして設置する方法

SponsorLink

個人のブログであってもWordPressで構築する人が増えてきましたが、まだまだ敷居が高いと感じている人や、そもそもドメイン代やサーバー代含め完全無料で始めたいと思っている人も多くおられるようで、そんな人達に人気のブログサービスとして「FC2ブログ」「はてなブログ」「アメーバブログ」などがあげられるかと思います。
 
その中でもテンプレートのカスタマイズが、わりと簡単な「FC2ブログ」を使ってカテゴリーをグローバルナビゲーションとして設置する方法を紹介しようと思います。
 
 
 

カテゴリーをグローバルナビゲーション化したコード

 
 

 
 
上記のコードをブログのナビゲーションを表示させたい場所に貼り付けてください。
コード内の<!–category–>の部分はコメントアウトのように見えますが、エリア変数と言われるFC2のタグで、これがないと<%category_name>でカテゴリーを表示させることが出来ませんので、削除しないようにしてください。
 
 
また<!–index_area–><–permanent_area–>など特定のページを指定するエリア変数があり、特定のページを指定したエリア変数の外に貼り付ける必要があるのですが、どのようにエリア変数が使用されているかはテンプレートによって様々です。
 
よくわからない内は全ページ共通で利用される可能性の高いheadercontainerなどのクラス名・ID名を持ったタグを探して、その直前か直後に貼り付けるといいかと思います。
 
 
あとは好みでスタイルをあてれば完成です。
 
とりあえず横並びで中央に配置されるようにだけスタイリングするCSSを載せておきます。横幅や高さはアイテムの数や見た目の好みで調節してください。
 
 

 
 
 

FC2ブログのレスポンシブデザイン

 
 
最後に、せっかくですのでレスポンシブデザインに対応する方法も紹介して終わりにしたいと思います。
先ずは「環境設定」>「ブログの設定」と進み「スマートフォン版の表示設定」を「無効」にします。

image_20171024_02
 
 
次に「テンプレートの設定」からPC用のテンプレートを追加します。
レスポンシブデザインに対応したテンプレートは説明欄に書いてありますので、レスポンシブデザインに対応したテンプレートを追加してください。
公式にも共有にもレスポンシブデザインに対応したテンプレートはありますので、お好きなデザインのテンプレートでいいかと思いますが、ご自身で手を加えたい場合は公式の「Diary_2column」「Diary_1column」辺りがシンプルで手を加えやすいのではないかと思います。

image_20171024_01
 
 

SponsorLink

Related Articles