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

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

テンプレート
2021/08/18 3
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD Darkmode
ordinary_daysテンプレート

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

名称 ordinary_days
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Lighthouseスコア
(トップページ平均)
Lighthouseスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
サイドメニュー --- 左ドロワー サイドメニュー --- 左ドロワーサイドメニュー --- 左ドロワー

おぉでねりぃ でいず
承認されました。ありがとうございます。

先回のリリースから1年以上経過しています。これまでのテンプレートの仕様にいくつかの改善を加えていますので、興味のある方はこの下にある折りたたみ部位を開いてご覧ください。以降の内容は通常通りテンプレートの仕様説明です。

  1. head要素内 meta description の書き方を変更し、新機能の「SEOアドバイザー > title・descriptionタグチェック」での検査を容易にしました。
  2. lazyload適用img要素のダミーをdataURIから透過gifに変更し、新機能の「SEOアドバイザー > 記事内リンクチェック」での検査を容易にしました。
  3. カスタマイズが予想される箇所のガイダンスを増やし、英文ガイダンスも追加しました。
  4. 多言語対応を強化しました。
  5. ページ送りのサイズを大きく、押しやすくしました。
  6. 12px未満のフォントの使用を排除しました(個人の記事への影響はありません)
  7. ヘッダー内ナビゲーションのカテゴリリストで現在リンク(カレントリンク)をわかりやすくしました(カテゴリページのみ)
  8. 記事が「子カテゴリ」に属する場合に親カテゴリも表記するようにしました。
  9. ドロワーサイドメニュー展開時に背面のメインコンテンツ(body)がスクロールしないよう調整しました。
  10. 記事の横幅を変更しやすくしました(グリッド表示のページへの影響はありません)
  11. カスタマイズを前提にダブルクォーテーションの省略・終了タグの省略を廃止しました。
  12. カテゴリページでのパンくずリストカテゴリ名表記(親子)を改善しました。
  13. コメント本文投稿時、入力に応じて高さを広げるようにしました。
  14. トラックバックURLにコピーボタンを追加しました

1. head要素内 meta description の書き方を変更し、新機能の「SEOアドバイザー > title・descriptionタグチェック」での検査を容易にしました

テストはしやすくなりましたが、htmlでの見た目が非常に複雑・難解になりました。アドバイザーテストでの「FC2からの推奨」内容と比較しやすくした結果、こういう弊害となりました。meta要素自体をカスタマイズすること自体は稀だろうと思います。

その代わりにhead部位に「何かを追加する」際のガイダンスを増やしてあります。必ずガイダンスに従って作業を行ってください。

2. lazyload適用img要素のダミーをdataURIから透過gifに変更し、新機能の「SEOアドバイザー > 記事内リンクチェック」での検査を容易にしました

こちらもテストを優先しました。dataURIは 通信リクエストが発生しない ため、テストが結果を「リンク切れ」として返してきます。実際はリンク切れではなくそもそもリンクではない、ということなんですが、実際のリンク切れが存在している場合にこのdataURIの結果が邪魔になると思いますので、通信リクエストの発生するgif画像へと変更しています。

dataURIの利点を取りたい、という方は

https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif

を全て

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

と差し替えてください。

6. 12px未満のフォントの使用を排除しました。

Lighthouseでは12px未満のフォントが用いられると指摘が行われます。ところが実際はスマートフォンでは11px程度なら割とフツーに見れてしまうんですよね (∵`)
とはいえ12px未満のフォント利用は今後は個人の(自己責任の)カスタマイズ、という扱いにしたいと思います。みなさんが作成した記事内で意図的に指定した12px未満フォントサイズが強制的に補正されることはありません。

13. コメント本文投稿時、入力に応じて高さを広げるようにしました。

特にスマートフォンでは自身が記入したコメントの全体をボックススクロール無しで見られる方が便利だと思いますので調整しました。

14. トラックバックURLにコピーボタンを追加しました。

個人的には「トラックバックはもう必要ない」と考えています。恐らくFC2運営もその予定のようで、お気づきの方もいらっしゃると思いますが、新管理画面では「トラックバックの管理」が分類移行されています(「設定」分類から「ツール」分類へ)
とはいえまだ存在する機能ですから無視はできません。

現状ではFC2ブログ以外のブロガーさんがトラックバックを スマホから 利用したい場合、トラックバックURLを取得するinput要素が機能しませんので非常に苦労している状態です。そのためクリックでコピーできる機能を追加しています。ただ利用頻度はそんなに高くはないと思います。

サンプル

Samples

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

* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。

カスタマイズのコツ

A few tips on customizing

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

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

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

4. 色調変更に注意
色調(フォント色や背景色)の変更を行った場合、Lighthouseのスコアが著しく低下する可能性があります。自己責任の上、視認性に注意して変更を行ってください。

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

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利用者への啓蒙オーバレイ表示

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

Lighthouseスコアについて

About 'Lighthouse' score

仕様表中のスコアの一番左「Performance」は主に通信状態やサーバー状態の指標です。FC2ブログサーバーは調子の良いときは95点以上出ますが、場合によって50以下、ひどいときは10程度を記録することもあります(20を下回る場合のほとんどはサーバーに障害が出ている場合です)

他には「画像」についてwebpなど次世代拡張子の利用を推奨されますが、FC2ブログでは未サポートです。あとDOMの大きさ。これも基本は自動出力ですし、1ページあたりの記事掲載数などは個人設定で開放されていますので制限するのもどうかと(さすがに上限50件は過剰な掲載だとは思いますが)
「制限するのはどうか」というのは「私(Akira)が指図するべきでない」という意味であって、みなさんが個々に熟考して決めてね、という意味です。

テストを行ったときはたまたま98が出ましたが、流動的な数値ですから過剰に気にしないというか、しても仕方がない(ユーザーではどうしようもない)という点を事前にお伝えしておきます。

また、その他のスコアについてもカスタマイズ内容や記事の書き方によって大きく数値が変わることがあります。主に

  • JSウィジェット(アクセス解析, RSS表示, Twitterタイムライン など)の導入
  • 色調(フォント色, 背景色 など)の変更によるコントラスト比(contrast ratio)の低下
  • フォントサイズ変更(デフォルトよりも小さくする場合, 特にサイドメニュープラグイン)
  • 行間の変更(デフォルトよりも狭くする場合)
  • 掲載プラグインの内容
  • 記事やサイドメニューへの掲載画像の容量を削減していない
  • コメント欄で使用されたフォント色

などお気をつけください。ただあまりスコアを気にしすぎると対策に時間を使ってブログ更新が滞ったり、ブログの運営自体嫌になってしまったりするもこともありますので、ほどほどに、という感じで ^^;

例えば「コメント欄での色使用」は訪問者がコメントツールバーを利用するかどうか、するならばどんな色を使うのか、まで管理することはできませんし、使用された色に目くじらを立てるのもアレなので。気になって仕方がない(コメント内容のせいでスコアが落ちるのが気になる)という方はコメントツールバーを削除する、といった極端な方法を取るしかありません。

他にもSNS系各社のブランドアイコン色によって減点される、というトホホなこともあります(笑)
あとはねー、タグに使うワードなんかも指摘・減点されること結構あります。どうせーっちゅーの、ねぇ? (´・ω・`)

と、そんなこんなで「スコアよりも重要視すべきもの」というのは意外とありますので、あまりガチガチに構えない方が良い、と個人的には思っています。気にしすぎると何もできんからさー (´・ω・`)

全体幅の調整(グリッドレイアウトページ)

How to change width in grid layout

メイン + サイド を合わせた横幅は最大 1200px、記事部位最大横幅は 850px です。記事幅を直接指定する箇所はありませんので、最大幅の数値を調整してください。

--width-whole: 1200px;/* 全体横幅(the total width) */ という箇所がありますので、緑部位 1200 を希望のサイズに書き換えます。

記事幅の調整(個別記事ページ)

How to change width in article

記事の最大横幅をダイレクトに指定できます。--width-entry_max: 900px;/* 記事最大横幅(specific width for an post) */ の緑部位 900 がデフォルトで、最大1200まで指定可能です。

補助カラムが必要な方

You can use optional column

アフィリエイトなど、サイドメニュードロワー内に格納されたくない場合はオプションのカラムをご利用ください。

注)第2カラムが必要な方ここから で検索すると記載すべき部位が出てきます。

<!-- 注)第2カラムが必要な方ここから(if you need 2nd column(below main column), from here...) -->
<!-- この行削除(remove this line to activate optional column)
<div class="optinal-column">
ここに掲載したいhtml
</div>
この行削除(remove this line to activate optional column) -->
<!-- /第2カラムが必要な方ここから(... to here) -->

横に最大3つ並ぶよう調整してあります。ASP各社からレスポンシブタイプのコードを取得するようにしてください。また、横いっぱい(ブラウザ横幅ではなくメインカラムと同じ横幅)を利用したい場合は <div class="optinal-column"> の緑部位を削除し <div> と修正してください。

ガイダンスに従って然るべき部位を削除(コメントアウトの解除)を行うまで有効になりませんので、処理し忘れないよう注意です。

SNS関連ボタンについて

About sns buttons

全ページのフッターにはブログ管理人の各SNSタイムラインあるいはウォール, チャンネルなどへのリンクを掲載するためのアイコンを設けています。そして個別記事フッターには当該記事のシェア用アイコンがあります。

それぞれ 必要の無いものは削除 を行うようにしてください。放置する方が結構な割合でいらっしゃるようなんですが、ほかっておくとLighthouseスコアが下落するのはもちろんのこと、それ以前に空のリンクは訪問者が戸惑います。削除の際のガイダンスはhtml内にコメントをつけていますので参照してください。リンク設定のガイダンスも入れてあります。

逆に「増やしたい」という場合は 追加アイコンの準備はこちらではできません ので、ご自身で準備をし、デフォルト掲載htmlを参照しながら法則に則って追加を行ってください。

ブログタイトルがヘッダーに収まらない場合

How to adjust blog title length

ブログタイトル部位は2行まで表示可能です。パソコンではよほど大丈夫だと思いますが、タイトルが非常に長い場合はスマホ現行機種最小の320pxデバイス(iPhone SE系列など)で収まらないことも予想されます。2行を超える場合は省略されますのではみ出てしまうことはありませんが、ブログタイトルが省略されること自体避けたいので フォントサイズ調整 による対策をおすすめします。

該当箇所は /* ブログタイトルフォント大きさ, スマホ(font size of blog title in smartphone) */ で検索すると出てきますので、1.8 の数値を 1.7 や 1.6 など小さな数値に変更して様子を確認してください。
* 1.8 = 18px相当

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソルをデフォルト(pointer(指マーク)ではない、という意味)にしてあります。

タグについて

About tag page

記事ヘッダー下にあるタグは 自身のブログ内タグページへ の遷移です。

記事フッター上にあるタグは FC2ブログ タグポータルページへ の遷移です。

ポータルの方はハッシュが付いていますので、いわゆる「ハッシュタグ」として外部への遷移です。一般の閲覧者さんにも意味はわかるのではないかな、と思います。

自身のブログ内タグページは必要だとして、外部遷移(ハッシュタグの方)が不要な場合は 注)タグポータルリンクここから で該当部位が出てきますので、ガイダンスに従って削除してください。

スピード強化について

Behavior about navigation

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

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください(自身のブログページ以外のリンクはprefetch対象外です)
記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

lazyloadに関して、大手ブログサービスのほとんどが画像掲載に対し独自スクリプトによるlazyloadを採用していますけれども、FC2の場合は真逆の preload を採用しています。いずれも「アクセス直後の表示をできるだけ速く」という試みなんですが方法が真逆。

本来は「above the fold(ファーストビュー)内画像はpreload、below the fold(ファーストビュー外)の画像はlazyload」というのが理想だけれども両得というのはシステム上無理なので、個人的な好みのlazyloadは併せて採用することにしています (∵`)

「新着記事リスト」について

About recent list

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

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

できればプラグイン側を非表示にされた方が良いと思います。

補足事項

Handouts

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

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

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

弊ブログ提供ブログカードについて

About 'blogcard' provided on my website

弊ブログが提供している ブログカード をご利用の方で 引用文にシャドウが付いてしまう という方は、お手数ですが以下の内容をスタイルシート末尾(あるいはブログカード関連スタイルの最終)に以下の内容を追加してください。

.blogcard blockquote {
  box-shadow: none;
}

古くからご利用頂いている方は該当すると思います。比較的最近導入された方はデフォルトCSSに既に記載されていますので追加の必要はありません。

FC2ブログのエディターツールで挿入した引用はクラス名等の付加が無く、詳細な識別はできませんので、自由の効くブログカード側の操作をお願いします。

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

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

Cautions before asking for something.

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

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

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

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

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

 3

There are no comments yet.
-
管理人のみ閲覧できます

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

2021/08/29 (Sun) 17:35
vanillaice (Akira)
vanillaice (Akira)
To ordinary_days 引用ブログカードの表示について 内緒さん

こんばんは。お知らせありがとうございます。
対処法を追記しましたので御覧くださいね。「弊ブログ提供ブログカードについて」の項目です。
よろしくお願いします :)

2021/08/30 (Mon) 00:48
-
管理人のみ閲覧できます

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

2021/08/30 (Mon) 11:08

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

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

テンプレート