ordinary_daysテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | ordinary_days |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | なし (Vanilla JSのみ) |
| Font Awesome導入 | なし (インラインSVG) |
| Lazyloading導入 | あり |
| OSダークモード対応 | あり |
| 構造化マークアップ | 個別記事のみ BreadcrumbList(パン屑リスト) BlogPostiong |
| 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カラム |
| サイドメニュー --- 左ドロワー | サイドメニュー --- 左ドロワー | サイドメニュー --- 左ドロワー |
- prefetchの数を調整
過去の更新一覧
- 個別記事ページナビ iOS14でサムネイルが時折表示されない件修正
- コメント関連ボタンツールチップ調整2点「コメントの投稿」の表示位置を右基点に調整 + コメンテーターの名前文字制限
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。
<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>script要素を1つから3つ分割に変更しています。
【コメント関連ツールチップ修正】
マウスホバーで「To xxxさん」とツールチップ表示されるボタンにおいて、ハンドルネームにとても長い文字列を記載された場合、ツールチップの横幅によって画面超過が起こりますので、文字数の制限(末尾省略)と併せてツールチップ表示の基点を中央から右に移動させました。
<footer class="comment-info"> で検索するとhtml内に1箇所あります。このfooter要素の内容を最新バージョンからコピペしてください。
続いてスタイルシートの末尾(最終)に以下の内容を追加。
@media screen and (min-width: 769px) {
/* comment btn */
.btn-a .info-tooltip {
display: inline-flex;
max-width: 150px;
}
.tooltip-name {
flex: 1;
min-width: 0;
margin: 0 .3em;
overflow: hidden;
text-overflow: ellipsis;
}
.comment-btn-item:last-of-type .info-tooltip {
right: -8px;
}
.comment-btn-item:last-of-type .btn-a .info-tooltip::before {
right: 20px;
left: auto;
}
}- コメントを任意削除できない件修正
「ordinary_days」「wash_ashore」コメント削除できない件を修正しました
コメントを任意削除できない という問題が発生していました。該当テンプレートは以下の2つです。...
おぉでねりぃ でいず 
承認されました。ありがとうございます。
先回のリリースから1年以上経過しています。これまでのテンプレートの仕様にいくつかの改善を加えていますので、興味のある方はこの下にある折りたたみ部位を開いてご覧ください。以降の内容は通常通りテンプレートの仕様説明です。
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
* 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設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
IE非対応
This theme is incompatible with Internet Explorer.
全バージョンの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内容を変更しました。...
vanillaice000.blog.fc2.com
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.