Fields - FC2ブログテンプレート(配布終了 2020年4月31日)

Fields - FC2ブログテンプレート(配布終了 2020年4月31日)

配布終了・旧作
2016/01/08
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD

2020年4月31日 配布終了致しました。ご利用頂きありがとうございました。

Fieldsテンプレート

Fieldsテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

最終更新 2020.4.6
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
名称 Fields
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大818px
サイド --- 230px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.1)
Font Awesome導入 あり(v5.6.3 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 スライダーにはページ内OGP画像設定済みの記事のみ表示されます。
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 左右 サイドメニュー --- 下 or 左右
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.10
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 41px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2019.1.14
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • UA判別のJSを削除しCSSに変更
  • Pinterest, はてなブックマークのシェアアイコンを追加
  • SNSホバー時の背景色を各社ブランドカラーに変更
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • パンくずリストを導入
  • 構造化マークアップを導入

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、パンくずリスト・構造化マークアップの導入など比較的大きな追加変更が含まれます ので是非アップデートをご検討ください。

更新履歴 2017.12.20

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

Fields大規模メンテナンスのお知らせ - テンプレ不具合・修正など

Stoicテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

最終更新 2017.9.22

SSL化に伴うURL正規化

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

ページ内画像拡大スクリプト(Darkbox)を導入しました
独自クラスですので 使い方は仕様表にあるリンク先でご確認ください
テンプレート固有機能説明

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.10.10

メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- スライダー動作が若干軽快になりました
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

更新履歴 2016.9.9

リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

更新履歴 2016.6.30

・ブログタイトルが短い時ラベンダー画像の左右が見切れる問題を修正
・サムネイル(FC2, RSS新着共に) No image画像変更を簡単にしました
・主要公式プラグインの整形

参考記事
Fields修正のお知らせ

本ページの内容は2019年1月14日メンテナンス以降のバージョンが対象です。

この3ヶ月でざっと300万ほど支出が生じて一気にボンビーあきらでございますー (´・ω・`)

ふぃーるず
初の3カラムです。スライダーの付いている3カラムが見当たりませんでしたのでつけときました。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
FAQ
DOWNLOAD

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(全文表示から要約表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数・配置変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

左右カラム内容について

Classification of plugins

左カラムにはプラグイン1が、右カラムにはプラグイン2と3が収まります。バランスにつきましてはテンプレートソース内容の操作ではなく、ブログ個人設定にてプラグインカテゴリの振り分けで行ってください。

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

上記を目印にガイダンスに従って削除。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

配布終了・旧作