Fall - FC2ブログテンプレート

Fall - FC2ブログテンプレート

テンプレート
2019/09/26 21
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD
Fallテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正
名称 Fall
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大860px
サイド --- 最小300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.11.22
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.10.16
  • コメント受付停止(コメント受け付けない + コメント表示)を選択した際にコメント投稿フォームが非表示にならない件を修正。
  • サイドメニュー部プロフィール画像の縦横比が崩れる件修正

再ダウンロードが困難な方はお手数ですが自主修正をお願いします。申し訳ございません。

id=comment_form で検索するとhtml内に2箇所ありますので2箇所とも id="comment_form"変更。こちらが投稿フォームの修正です。

#side-prof-pic { で検索するとスタイルシート内に1箇所ありますので、ルールセット内 height: 100%; の直下に object-fit: cover;追加。こちらはプロフ画像縦横比の修正です。

ふぉーる
承認されました。ありがとうございます。今回は超シンプル。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE 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

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

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

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

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

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

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

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

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

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

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

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

ナビゲーションの「ABOUT」リンクについて

You can change or delete ABOUT link in navigation.

ヘッダー下グローバルナビゲーション内の ABOUT は予備リンクです。遷移したい特定のページがあれば「ABOUT」のテキストを適切な文言に書き換えた上でリンクを登録。不要の方は削除してください。空リンクのまま放置しないよう注意。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { で検索するとスタイルシート内に 3箇所 あります。3つ目 のルールセット内 justify-content: space-between; の直下に flex-direction: row-reverse;追加

続きましてそのすぐ下にある #primary { のルールセット内 margin-right: var(--gap); の緑部位right を left変更

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。表示位置の変更は可能です。

補足事項

Handouts

  1. ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲です。

複製したhtml内容は以下の作業してから希望の位置へペーストしてください。

html冒頭の <div class=pager-wrapper id=pager-wrapper><div class=pager-wrapper> に修正(id属性の取り除き)

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

Cautions before asking for something.

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

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

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

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

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

 21

There are no comments yet.
nadeshikobuta

はじめまして。

Pinboardを気に入って使わせて頂いてます。ありがとうございます。
今は年月日しか出ませんが投稿時間やコメント時間が入れられたらと思いますが可能でしょうか?
どこをどのようにすればいいのかお時間のある時に教えていただければ幸いです。
こちらはPCの素人なので宜しくお願いいたします・。
私のブログのurlです。
https://haijitaga.blog.fc2.com/

2019/11/12 (Tue) 17:23
vanillaice (Akira)
Akira
To nadeshikobutaさん

こんばんは。

こちらはFallテンプレートの記事ですが、Pinboardの件をお尋ねでしょうか。
該当テンプレートの専用記事に於いてのみご質問を受け付けていますので正しい記事でお尋ねくださいね。
よろしくお願いします。

テンプレート一覧
https://vanillaice000.blog.fc2.com/blog-entry-283.html

2019/11/12 (Tue) 19:19
はんのすず
いつもお世話になっております。

こちらのテンプレートがシンプルで、ステキだと思いました。
色調などは、VeryMerry のような雰囲気にしたくて、できる範囲でカスタマイズしました。
今回、個別記事下部の、entry-footer-sns の表示を丸いタイプで中央に揃えたいのですが、どのように変更したらよいかわかりません。お時間あるときでかまいません。お手数おかけしますが、どうぞよろしくお願いします。

2020/02/23 (Sun) 17:57
vanillaice (Akira)
Akira
To はんのすずさん

こんばんは ('0')/

まずFallのスタイルシート内
/* sns on article footer */
から(上記文字列含む)
/* author */
の直前まで(上記文字列含まず)を削除。

VeryMerryを
/* sns */
で検索すると2箇所ヒットします。最初の方は
/***------------------------------------------
related post, trackback list
------------------------------------------***/
の直前までを、2箇所目は

.c-facebook,
省略

のルールセット1つ分を、それぞれFallのスタイルシート末尾へコピペ。
注) ルールセットは以下を参照

例)
.xxx {
内容
}

{ から } までの一括のことを言います。

コピペした内容の
.entry-footer-sns-ul

#entry-footer-sns
に全て変更
.entry-footer-sns-ul li

.sns-list
に全て変更。
.entry-footer-sns-ul li a

.sns-list a
に全て変更。
.c-facebook

#e-facebook
に。この要領でブランドカラーは全て頭が
.c-
になっているものを
#e-
に変更します。ただしlineだけはコピペ内容にはありませんので

#e-line {
background-color: rgb(235,226,217);
border-radius: 100% 80% / 80% 85% 80% 90%;
color: white;
font-weight: bold;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
#e-line:hover {
background: rgb(22,207,1);
color: white;
}

を追加してください。
何かを移植する際、例えば今回は ul要素 で、移植元も移植先もhtmlはほぼ同じで装飾用のクラス名やアイディー名だけが違いますので、そのすり合わせをして(class, idを移植先の正しい名称に修正すること)くださいね。
よろしくお願いします。

2020/02/25 (Tue) 01:04
はんのすず
ありがとうございました。

お忙しいなか、すぐに返信いただき本当にありがとうございました。
プレビューで確認しながら作業しました。
今回全体のBGカラーをピンクっぽく設定したので、#e-line:hover {
background: rgb(22,207,1);
color: white;
} にすると、ほとんど見えなかったので、hover時の色変更は削除しました。
SNS brand colorの丸いSNSマークが並びました。ありがとうございました。
又、わからないところでお世話になるかと思います。これからもよろしくお願いします。

2020/02/25 (Tue) 22:42
vanillaice (Akira)
Akira
To はんのすずさん(完了のご報告)

こんばんは。お返事遅くなりました (*_ _)

うまくいったようで安心しました。SNSボタンのとプロフィールの間に余白を取ると良いかもしれませんね。

#entry-footer-sns {
margin-bottom: 15px;
}

数値は任意です。お疲れ様でした :)

2020/02/29 (Sat) 04:04
はんのすず
見ていただいてありがとうございました(お返事不要)

SNSボタン下に余白が入り、安定した感じになりました。
いろいろお世話になり、ありがとうございました。

2020/03/01 (Sun) 17:29
ねね
プロフィールについて

Akiraさん、こんにちは
Fallテンプレートを使わせていただいています。

とても初心者な質問で申しわけないのですが、
プロフィールについて
サイドバーのプラグインで「プロフィール」を削除しても消えません。

また記事の最後にもプロフィールが出てくるので、自己主張の強い人みたいになって困っています。
スマホ版もプラグインの「プロフィール」を削除したのですが、出てきてしまいます。

なにか設定を間違えてしまっているのでしょうか。
お忙しい中お手数ですが、回答いただけますとありがたいです。

どうぞよろしくお願いします。

2020/04/14 (Tue) 15:50
vanillaice (Akira)
Akira
To ねねさん

こんばんは ('0')/

確認ですが、テンプレートにはプロフィール出力が2箇所あります。サイドメニュー部最上部にあるものと、個別記事下にあるものです。

> サイドバーのプラグインで「プロフィール」を削除しても消えません。〜

とあるんですが、プラグインは表示されていませんので、今あるサイドメニュー部のものはテンプレートhtmlに書いてあるものです。
なので削除するにはテンプレートのhtml修正が必要です。

注)プロフィール不要の方ここから削除
で検索すると該当箇所が出てきますのでガイダンスに従って削除してください。本記事内に説明のある通り、カスタマイズが予想される箇所はあらかじめガイダンスを入れてありますので、事前に確認を行ってくださいね。

個別記事下のプロフィール削除も必要でしたらその旨お伝えください。
(ただしこの部位はプロフィール画像が記事編集用のリンクになっていますので、削除すると機能を失います)

よろしくお願いします。

2020/04/14 (Tue) 20:35
ねね
To Akiraさん

返信ありがとうございます。

そうだったのですね。
ちゃんと見ておらず、お手数をおかけして申しわけありませんでした。
指示いただいたとおりに削除をしたら無事に?プロフィールは消えました。
本当にありがとうございました。

(解決のため、返信不要です)

2020/04/15 (Wed) 16:53
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/03/19 (Fri) 09:37
UI
すみません(汗)

先程コメント投稿についてのお問い合わせをしたUIです。
シークレットモードの意味が分からず、投稿をシークレットにして質問してしまいました。
大変申し訳ありませんでした、すみません(汗)

1.コメントを投稿するところの文字を太字にする等のボタンの表示が崩れてしまいました。
2.個別記事下のプロフィールの表示を削除したい
の2点、教えていただけると有難いです。
お手すきの時で大丈夫です。
どうぞよろしくお願い致します。

2021/03/19 (Fri) 09:51
vanillaice (Akira)
Akira
To UIさん

こんばんは ('0')/

まず、シークレットコメントの件はどうぞお気になさらず :)

> ボタンの表示が崩れてしまいました〜

コメント装飾ツールのことかなぁ、と思うんですが、「崩れている」というのが私の方では目視確認できません。
なので、もしかするとFC2ブログの一時的不具合かもしませんし、私が見る部位を間違えている可能性もあります。
今一度ご確認頂いて、やはりおかしいという場合にはスクリーンショットをご提示頂けないでしょうか。お手数おかけします。
(症状が今も確認ができ、かつスクリーンショットの撮り方がわからない、という場合はPCのOS名(windows または macなど))を併せてお知らせください。)

> 個別記事下のプロフィールの表示を削除したい〜

<div id=author-block>
で検索するとhtml内に1箇所ありますので、この行を含め、近接の
</footer>
の上まで(</footer>は含めず)を削除してください。

よろしくおねがいします。

2021/03/19 (Fri) 23:12
UI
To Akiraさん

早々にお返事有難うございます。
コメント欄ですが、直っている記事もあれば崩れている記事もあり、、、

が、画像の送り方がわからなくて…

規則性が分からないのですが、
どうもカテゴリから記事を選んだ場合のみ崩れているような気もします…。
お手数おかけして申し訳ありません。

プロフィールの件、有難うございました!

2021/03/21 (Sun) 08:20
UI
To Akiraさん

何度もすみません、「コメント欄」というブログの記事に画像を載せました。
パスワードは 1234 です。
よろしくお願い致します。

2021/03/21 (Sun) 08:51
vanillaice (Akira)
vanillaice (Akira)
To UIさん

お返事遅くなりました (*_ _)

なるほどー。全ページではない、ということですよね。その場合は直接ジャンプできるように該当ページのURLをお知らせ頂けると確認作業がスムースです。
いくつか開きましたが私の方では目視確認が叶いませんでした。

で、ページを確認できない以上原因の特定というのもできないんですが、ひとつお伝えすべきことは「wordでの下書きはブログ投稿に向かない」という点です。wordに限らず、power point, pages(mac)なども同様です。

参考記事: Wordで記事を書くとテンプレートが崩れることがあります
https://vanillaice000.blog.fc2.com/blog-entry-906.html

wordなどのアプリケーションはweb上での公開を目的としていません。印刷やスライドなどで完結させれば良い類のものですから、独自フォント(そのアプリケーションでしか使えないフォント)や、独自タグ(webの正規html構文ではないもの)などが含まれます。
もしかするとそれらがいたずらしている可能性も。

特に
<o:p></o:p>
といった内容が点在していて、これは一見htmlタグのようですが正規には実在しないものです。なのでword利用ページの平均エラー数は90から100あまりあります。こうなるとご自身で「何が問題になっているのか(構文エラーの発見・修正)」が非常に困難ですし、私でも100近いエラーから特定の原因を探すのはなかなか厳しい ^^;

他にもフォント指定(通常のwebでは表示できないフォント)とともに、サイズ指定が pt という単位になっており、このptという単位も主に印刷用に用いるものであって、web上ではよほど特殊な場合を覗いては px を使うことになっています。
とまぁ、色々と弊害がありますので、できればwordでの下書きはやめた方が良いと思います。

アプリでも「メモ帳(windowsのテキストエディター)」のように文章を書き留めるだけのもの(実際はhtmlを利用して書くものではありますが、htmlを使わなければいけないものではありません)であれば影響は出ません。

まだ原因不明ですが、「今後は」と捉えて頂ければ、と思います。
ページ特定ができるようでしたら再確認しますのでお知らせくださいね。よろしくおねがいします :)

2021/03/22 (Mon) 23:08
UI
To Akiraさん

早々にお返事ありがとうございます。
個別記事ページのURLは例えばこのページ
https://survivor2021.blog.fc2.com/blog-entry-21.html
などです。
やはり普通に表示されるページと直っていないページの法則性が分かりません(; ;)

wordの件、wordで下書きした記事だけタグがやたらに多いなと不思議に思っていたので大変勉強になりました。
有難うございます!

2021/03/23 (Tue) 13:39
vanillaice (Akira)
Akira
To UIさん

こんにちは ('0')/

複数ページで見受けられる場合は比較対象のためにサンプルが多い方が正確な検証ができます。
全て同じ原因とは限りませんが、とりあえずこのページだけで原因「かもしれない」ものをお伝えします。というのは私の環境ではやはり視覚的な問題は出ていないためです。

----- 記事内に記したリンク(a要素)の構文エラー

・トラッカー:詳しくはこちらで書きます。

とある部位、html内容が以下のようになっています。
(注: 変換を避けるためURLに ** を含めていますが実際には存在しません)

・トラッカー:詳しくは<a href="h**ttps://survivor2021.blog.fc2.com/?preview_entry=&editor=&key=ebb1bc262c25fef9a45027d5764d722ef576624a7a69060ab27ea25503f972eb&t=1616019809" title="トラッカー" target="_blank"><a href="h**ttps://survivor2021.blog.fc2.com/blog-entry-12.html" title="トラッカー" target="_blank">こちら</a></a>で書きます。

赤字部位は不要です。こちらはクリティカルエラー(致命的エラー)なので修正必須
(a要素の中にa要素を含めることはできません)

同じく、

・日記:詳しくはこちらで書きます。

・日記:詳しくは<a href="h**ttps://survivor2021.blog.fc2.com/?preview_entry=&editor=&key=3a20d14daef7eba4dff5b5660030e403fbba4b088b10489e052a287d00fc9f0d&t=1616020605" title="デイリーログ" target="_blank"><a href="h**ttps://survivor2021.blog.fc2.com/blog-entry-20.html" title="日記" target="_blank">こちら</a></a>で書きます。

-----
この2箇所です。a要素のエラーというのは視覚的影響が出やすいんですが、カラムが崩れたり、「見た目に気づきやすもの」ではなくて、表示されるべきものがされていない、マウス反応範囲がおかしい、など「見た目では気づきにくいもの」が多いです。
そして「私の環境では確認できません」とお伝えしましたが、ブラウザやOSによって見た目に影響が出たり出なかったりするのもa要素エラーの特徴です。

作業する際a要素は必ず赤字の方を削除してくださいね。こちらに指定されている遷移先は「記事作成中の一時的ページ」のアドレスなので正しく遷移できません。

他のページは検証できませんが、恐らく同様のエラーが原因ではないかと思います。一度お試しくださいね。

2021/03/23 (Tue) 16:23
UI
To Akiraさん

有難うございます!赤字部位を削除したら直りました!

>クリティカルエラー(致命的エラー)なので修正必須
>ブラウザやOSによって見た目に影響が出たり

色々と注意しなければいけない事があるのですね…。
気軽に始めたブログですがタグについて等々、もっと勉強しながらやっていこうと思いました。
お忙しいところ何度もお手数おかけして申し訳ありませんでした。
有難うございました!

2021/03/23 (Tue) 21:10
vanillaice (Akira)
vanillaice (Akira)
To UIさん(完了のご報告)

こんばんは ('0')/

修正できたということで安心しました。
私の方こそなかなか時間が取れず、解決までに時間がかかってごめんなさいね。
お疲れ様でした :)

2021/03/24 (Wed) 22:16
UI
To Akiraさん

とんでもないです、色々と細かく教えて頂いて感謝です。
わざわざ返信頂いて恐縮です。有難うございました!

2021/03/25 (Thu) 20:48

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

テンプレート