Francescaテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
- ページ送りのJSを修正
| 名称 | Francesca |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | なし (Vanilla JSのみ) |
| Font Awesome導入 | なし (インラインSVG) |
| Lazyloading導入 | あり |
| OSダークモード対応 | あり |
| 構造化マークアップ | 個別記事のみ 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非対応
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 1カラム サイドメニュードロワー | 1カラム サイドメニュードロワー | 1カラム サイドメニュードロワー |
| サイドメニュー(ドロワー) --- 右 | サイドメニュー(ドロワー) --- 右 | サイドメニュー(ドロワー) --- 右 |
ふらんちぇすか 
承認されました。ありがとうございます。
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。
カスタマイズのコツ
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設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
IE非対応
This theme is incompatible with Internet Explorer.
全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。
IEユーザーへの注意書きが必要な方は以下のページをご参照ください。
ぼっちんさん に教えて頂きました。「こんなのあるぜ？」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...
vanillaice000.blog.fc2.comダークモード対応について
Supporting Dark Mode - how it works
本テンプレートはOSのダークモードに対応しています。詳細についてはお手数ですが下記リンク先の ダークモード対応について の章をご確認ください。
El-zigzagテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
全体幅の調整
How to change width
グリッドレイアウトのページ横幅は最大 1300px、個別記事などグリッド以外のページ横幅は最大 900px に設定してあります。
カスタマイズの必要が有る方は、グリッドの横幅は メイン最大横幅、グリッド以外の横幅は 記事最大横幅 でそれぞれ検索し、適切な数値に変更してください。
ヘッダー画像変更
How to change images of header
3枚 設定できるようにしてあります。枚数の増減は表示秒数など計算が必要になりますので、自身で算出するか、どうしてもわからない場合はお問い合わせください。
また、スマートフォンでは 縦長、パソコンでは 横長 になり表示範囲が固定されていませんので、アスペクト比が変更されても意味のわかる画像を選択するようにしてください。被写体が上下左右の中央付近に位置するものが適しています。
負荷軽減のためスマホ用とパソコン用で画像のサイズを変更しています。スマホ用は横約800px、スマホ用は横約1600px程度をおすすめします。複数サイズを揃えるのが困難な方は 横1600px 程度で準備し、スマホ・パソコン共に同じURLを記載してください。スマホ用は スマホ用 ヘッダー画像、パソコン用は パソコン用 ヘッダー画像 で検索すると変更該当部位が出てきます。
ダークモード時の画像について
About image grayscale in darkmode
ダークモード時は画像の彩度を若干抑えています(その方が好ましいという統計結果が出ているため)が、不要と思われる方は以下の部位を削除してください。
filter: grayscale(20%); を目印に検索し、これを含む
img {
filter: grayscale(20%);
}
を削除。すぐ下にある } を巻き込み削除しないよう注意。
ダークをデフォルトにする場合
How to remove darkmode
ダークモード用スタイル(暗色背景)をデフォルトにしたい場合にはダークモード対応自体が不要になります。ダークデフォルト化 で検索すると複数箇所出てきますので各ガイダンスに従ってください。
記事編集リンクについて
Location of edit icon
個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。
スピード強化について
Behavior about navigation
Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。
prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください。記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。
「新着記事リスト」について
About recent list
プラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。
- 画像遅延読み込み(スピード対策)
- 高dpiデバイスでの画像ぼやけ対策
- バリデートエラー無し(htmlが正確)
できればプラグイン側を非表示にされた方が良いと思います。
補足事項
Handouts
- ページ内スクロールボタンの位置について
現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。
本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
