自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

FC2テンプレート「Diary_1column」カスタマイズ

FC2テンプレートのカスタマイズの記事をちょうど1年前に書いていますが、フリーブログの中でも動作が安定しておりユーザーも多いことからよく検索されているようです。

今回は以前ご紹介した公式テンプレートのレスポンシブデザイン「Diary_1column」でサイトを作る機会があり、いくつかカスタマイズしたので備忘録的にご紹介します。レスポンシブデザインは、PCとスマホ同じスタイルを簡単に実現できるので、ぜひ挑戦してみてください。

[広告]

以前「FC2のレスポンシブテンプレートカスタマイズ」というエントリーで、右カラムのある「Diary_2column」を例に簡単なカスタマイズをご紹介しているので、未読の方はまずそちらをご覧ください。「Diary_1column」「Diary_2column」ではHTMLやCSSのclass名が多少変わる場合がありますが、手法としてはほとんど同じです。スキルのある方は挑戦してみてください。


こちらがFC2のレスポンシブテンプレート「Diary_1column」です。シンプルなレスポンシブデザインで長く使えると思います。オススメです!

今回作成したサイトは、デバイスはスマートフォン・タブレットからの流入がほぼ100%。サイトはデータ集で、カテゴリ検索とキーワード検索で目的の記事を探してもらうようにしたかったので、この2つがフッターに来てしまうのがサイトの利便性としては致命的でした。


ということでこのようにカスタマイズしました。

色々とカスタマイズしたのですが、このエントリーではこのなかでは以下の5点について、ご紹介いたします。

  1. プラグインの「カテゴリ」と「キーワード検索」をページ上部に持ってくる
  2. 「カテゴリ」を横並びに変更して、テキストリンクでなくボタン装飾にする
  3. キーワード検索のinputとボタンを縦配置から横配置にする
  4. 「続きを読む」のリンクをテキストリンクからボタン装飾にする
  5. フッターの中のプラグインを1/3分割表示から80%表示にする

■プラグインの「カテゴリ」と「キーワード検索」をページ上部に持ってくる


1.「プラグインの設定」より、プラグインカテゴリを設置場所ごとにわけます。(カテゴリは3つまで作成可能です)


2.「テンプレートの設定」>HTML編集をします。

次の場所を見つけてください。

<footer id="footer">
  <div class="inner cf">
  <!--plugin-->
    <!--plugin_first-->
    <div class="footer_plugin">~</div>
    <!--/plugin_first-->

    <!--plugin_second-->
    <div class="footer_plugin">~</div>
    <!--/plugin_second-->

    <!--plugin_third-->
    <div class="footer_plugin">~</div>
    <!--/plugin_third-->
    <!--/plugin-->
 </div>
 (以下省略)
</footer>
<!-- / footer -->

赤字の<!--plugin_first-->というのが、プラグインカテゴリ1です。2,3も同様です。この部分は、見た通りプラグインカテゴリごとにdivブロックで別れているので、移動したいプラグインのみを簡単に移動できます。

移動をしたい<!--plugin_**-->~<!--/plugin_**-->の部分を設置したい場所にカット&ペーストします。例えば上記の例であれば、カテゴリ2と3を上部に持っていきたいので、<!--plugin_second-->と<!--plugin_third-->を移動します。

3.更にのちCSSで装飾しやすいように、それぞれclass名をつけたdivで囲っておきます。

<div class="plugin-3">
<!--plugin_third-->~<!--/plugin_third-->
</div>
<div class="plugin-2">
<!--plugin_second-->~<!--/plugin_second-->
</div>


■「カテゴリ」を横並びに変更して、テキストリンクでなくボタン装飾にする

1までカスタマイズした時点での縦並びのカテゴリリストの1項目のHTMLは次の通りです。深い!!

<div class="plugin-3">
  <div class="footer_plugin" style="height: 346px;">
    <div class="plugin_content">
      <h2 class="plugin_header">カテゴリ</h2>
      <div class="plugin_body">
        <div>
          <div style="text-align:left">
            <a href="#" title="カテゴリ1">カテゴリ1(1)</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


1.まず横並びにしましょう!a要素を囲むdivに対して、「スタイルシートの編集」に新たに次のstyleを書きます。

.plugin-3>.footer_plugin>.plugin_content>.plugin_body>div>div {
  display: inline-flex;  vertical-align: bottom;
}


2.次にテキストリンクをボタン装飾します。細かいところはお好みで!

.plugin-3>.footer_plugin>.plugin_content>.plugin_body>div>div>a {
  color: #FFFFFF;font-size: 12px;font-weight: bold;text-decoration: none;
margin: 0 8px 8px 0;padding: 4px 6px;background: #444444;
border-radius: 2px;font-size: 13px;line-height: 18px;
}


■キーワード検索のinputとボタンを縦配置から横配置にする

1.「プラグインの設定」>「検索フォーム」の「詳細」リンクをクリック>【HTMLの編集】をクリック。<br>を削除して保存します。

2.「スタイルシートの編集」内の次のclassの赤文字の部分をdisplay: inline-block;に書き換えます。inputの長さやボタン幅はそのままではおかしいので適宜調整してください。

.plugin-2 .footer_plugin .plugin_content .plugin_body input[type="submit"]{
  display: block;
}


■「続きを読む」のリンクをテキストリンクからボタン装飾にする

続きを読むリンクは以下のstyleで装飾されているので、テンプレートの設定>「スタイルシートの編集」にて以下の赤文字2行を変更します。

#section .inner .read_more a {
  padding: 0 0 5px 0;
  border-bottom: 2px solid #222222;

次のようにたくさん書いて上書き修正します。

#section .inner .read_more a {
  width: 100%;height: auto;line-height: 20px;color: #FFFFFF;border: none;
  border-radius: 4px; background: #444444;cursor: pointer;padding: 5px 10px;
}


■フッターの中のプラグインを1/3分割表示から80%表示にする

その部分のstyleを定義しているのはこの部分です。

#footer .inner .footer_plugin {
  float: left;width: 33.3%;height: auto;margin: 0 0 45px 0;
}

1カテゴリのプラグインをドンと真ん中に大きく設置したいので、次のように書き換えました。

#footer .inner .footer_plugin {
  width: 80%;height: auto;margin: 0 auto;
}


いかがでしたか?ちゃんと変更できたでしょうか。もし出来ない時は、半角スペースが全角スペースになっていないか、文字の打ち間違いはないかご確認ください。

※今回のご紹介は「Diary_1column」です。冒頭に書いた通り「Diary_2column」の場合はHTMLやCSSのclass名が微妙に違います。

[広告]

body内にstyleを書く ブログTOP スマートフォンのスクショをPCで
Hotentry
Blog Post
Archives
クリックして上に戻る