ordinary_daysテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | ordinary_days おぉでねりぃ でいず |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅(PC 最大) | メイン --- 最大1000px サイド --- 最大400px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | なし |
| Google fonts導入 | なし |
| Font Awesome導入 | なし |
| Lazyloading導入 | あり |
| OSダークモード対応 | あり |
| パン屑リスト表示 | あり |
| 固有セクション |
|
| 構造化マークアップ | 個別記事のみ 「BreadcrumbList(パン屑リスト)」 「BlogPostiong」 |
| Lighthouseスコア (トップページ平均) |
|
| 固有機能 |
|
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
|
- パソコン
-
- 1カラム
- サイドメニュー --- 右ドロワー
- タブレット
-
- 1カラム
- サイドメニュー --- 右ドロワー
- スマートフォン
-
- 1カラム
- サイドメニュー --- 右ドロワー
- 公式タグプラグインの位置ズレの対策
- サムネイル付き関連記事リストを全体リンクに
- No imageの設定方法を変更, YouTube縦横比を自動調整
- Twitter名称・ロゴ変更に対応
- カスタムプロパティ加増
- ダークモードの切り替えを任意にしました
- ユーザビリティの最適化
- コメント削除アラート追加
- その他UI調整
記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。
カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。
FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。... Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処 表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか？」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...
vanillaice000.blog.fc2.com
vanillaice000.blog.fc2.com
過去の更新一覧
- 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つです。...
本ページの内容は2023年9月7日メンテナンス以降のバージョンが対象です。
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
カスタマイズのコツ
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設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
テンプレート共通カスタマイズ
Common customization.
ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。
テンプレート共通カスタマイズ * FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。
2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...
vanillaice000.blog.fc2.com
記事編集リンクについて
The position of edit link.
記事編集リンクは 個別記事ヘッダーの管理人アイコン をクリックすると別タブで開きます。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.