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

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

テンプレート 配布中テンプレート
2021/08/18
31
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWDDarkmode
ordinary_daysテンプレート

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

名称 ordinary_days おぉでねりぃ でいず
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事幅(PC 最大) メイン --- 最大1000px
サイド --- 最大400px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし
Google fonts導入 なし
Font Awesome導入 なし
Lazyloading導入 あり
OSダークモード対応 あり
パン屑リスト表示 あり
固有セクション
  • 最新記事リスト(サムネイル付き)
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Lighthouseスコア
(トップページ平均)
ordinary_days Lighthouseスコア
固有機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン
1カラム
サイドメニュー --- 右ドロワー
タブレット
1カラム
サイドメニュー --- 右ドロワー
スマートフォン
1カラム
サイドメニュー --- 右ドロワー
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.25
  • No imageの設定方法を変更, YouTube縦横比を自動調整
更新履歴 2023.9.12
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ダークモードの切り替えを任意にしました
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • その他UI調整

記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.7.9
  • prefetchの数を調整
更新履歴 2022.1.6
  • 個別記事ページナビ 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;
  }
}
更新履歴 2021.12.29
  • コメントを任意削除できない件修正
「ordinary_days」「wash_ashore」コメント削除できない件を修正しました

「ordinary_days」「wash_ashore」コメント削除できない件を修正しました

コメントを任意削除できない という問題が発生していました。該当テンプレートは以下の2つです。...

本ページの内容は2023年9月7日メンテナンス以降のバージョンが対象です。

サンプル

Samples

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

カスタマイズのコツ

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設定「有効にする」

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

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事ヘッダーの管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  31

-
2021/08/29 (Sun) 17:35

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/08/30 (Mon) 00:48

To ordinary_days 引用ブログカードの表示について 内緒さん

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

-
2021/08/30 (Mon) 11:08

管理人のみ閲覧できます

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

-
2021/11/25 (Thu) 10:25

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/11/25 (Thu) 20:24

To ordinary_days関連記事 内緒さん

こんばんは ('0')/

> マウスオンすると画像が揺れます。これはそのように作成されているのでしょうか?〜

デフォルトではそういった仕様になっていません。念の為デモ画面と比較・確認をお願いします。
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/entry_ordinary_days.html

原因はスタイルシート内に不正な文字列が含まれているためです。
related post
で検索すると1箇所あります。以下のスクリーンショットを参照し、余分なスラッシュを削除してください。

スクショ
https://blog-imgs-136.fc2.com/v/a/n/vanillaice000/sc2021_11_25.png

カスタマイズの際はお気をつけくださいね。現状ではCSS構文エラーのため、これ以降の一部デザインも無効になっています。一度ご確認ください。

お気遣いもありがとうございます :)

----- 別件
混在コンテンツが多く見受けられます。サイドメニュー部ランキングの下部にあるamazonリンクのgif画像が httpスキームです。webパーツ(ウィジェット)だと思いますので、提供サービスのページへ赴いてSSL対応のコードを再取得して書き換えることが可能だと思います。本件は修正必須です。
混在コンテンツについては以下のページをご参照ください。
https://vanillaice000.blog.fc2.com/blog-entry-895.html

-
2021/11/30 (Tue) 11:01

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/11/30 (Tue) 23:23

To ordinary_days ランキングの件 内緒さん

こんばんは ('0')/

> SSL対応ではないようです〜

その場合は残念ですが使用を停止するしかありません。
・検索順位等で不利になること
・セキュリティ意識の高いユーザーからのアクセスを失う可能性があること
を理解した上で使用するならば致し方ありません。

-----
画像がブレる件ですが、カスタマイズで追加したCSSが原因で症状が継続していますので、
.relate_dl a:hover {
で検索し、このルールセットの
text-decoration: underline;
の直下に

position: static;

を追加してください。それで直ります。
広範囲のa要素にposition: relative を指定するのはまぁ良いとして、topやleftを設けるのはあまり良くはない、という点を理解しておいてくださいね。今回の場合は「記事内にあるリンクの全て」に対し指定が行われており、関連記事も「記事内にあるリンク」に該当します。
よろしくお願いします。

-
2021/12/03 (Fri) 17:55

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/12/04 (Sat) 17:35

To ordinary_days 画像ブレの件 内緒さん(完了のご報告)

こんにちは ('0')/

ランキングの件、了解しました。画像ブレ修正も確認できました。お疲れ様でした :)

-
2022/08/06 (Sat) 13:26

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/08/07 (Sun) 00:14

Re: サムネ画像のトリミングについて

こんばんは ('0')/

まず、「デザイン」についてご理解を頂きたいのですが、ordinary_daysテンプレートは一般的に「グリッドレイアウト」あるいは「カードレイアウト」と呼ばれるものです。このデザインの最大の特徴であり良さというのは「全てのアイテムが整然と並ぶ」という点にあります。
そのため、どのような形状(特にアスペクト比 *縦横比のことです)の画像でも表示サイズを統一する、という処理が必須です。でないと全アイテムが同じサイズにはならないですよね。

一方これまでご利用頂いていたMochaテンプレートは一般的に「メイソンリーレイアウト」と呼ばれ、アイテム内の特に「画像」については各アイテムごとにサイズを違えます、というかオリジナルのアスペクト比に準じます。そのため、各アイテムの頭もお尻も揃いません。各アイテムがバラバラのサイズで、それぞれ前後の隙間を詰める形で配置が行われます。

ここまでの大前提をご理解頂いて、内緒さんのご希望が「画像は全てオリジナルのアスペクト比を遵守したい」とお考えであるならばordinary_daysを始めとするグリッド系のレイアウトはおすすめできません。お選びになるならばメイソンリー、あるいは「全文表示タイプ」のテンプレートが適しています。

ordinary_daysの画像表示領域を変更したい、という場合は以下の記事をご参照ください。
参考記事: トップページに縦長サムネイルを利用したい方向けカスタマイズ
https://vanillaice000.blog.fc2.com/blog-entry-1102.html

ordinary_daysの編集箇所は

.grid-image-wrapper::before

のルールセット内にある

padding-top: 100%;

太字部位 100 の数字を増減させてください。ただこれを行ったところで全アイテムの画像表示領域がそれに倣いますので、オリジナルのアスペクト比で表示されるわけではありません。

---------
メイソンリーレイアウトのテンプレートを検索してみたのですが、私がリリースした「Mocha」以外には無いようです。「Behavior」「Lilting」もメイソンリーですが、これらは「全ての画像アスペクト比を統一している方もメイソンリーが楽しめる」という意義で制作していますので、やはりオリジナルアスペクト比は無視されてしまいます (∵`)

参考記事: テンプレート選びの注意点
https://vanillaice000.blog.fc2.com/blog-entry-913.html

-
2022/08/12 (Fri) 23:54

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/08/13 (Sat) 00:13

To サムネイルの件 内緒さん

こんにちは ('0')/
ちょっとよくわからないので逆質問で申し訳ないのですが

> 短いほうの辺を100%とした正方形をセンタリングで生成する手法

これはもしかして「表示領域の調整」ではなく「サムネイルそのものを生成」という意味でしょうか。だとすると、サムネイル生成(トリミング)が許可されるのはFC2ブログ運営だけで、規格も決まっており

・ 72 × 72 の正方形
・ 300 × 200 の横長
・ 760 × 420 の横長
・ オリジナル原寸をそのまま表示

のいずれかです。正方形については72px四方の極小しかないのでほぼ使い物になりません。
ただ、これらのサムネイルは必ず「センターを基準」として作成されますし、テンプレートでの表示領域もデフォルトでは「センターを基準」にしていますので、構図自体は継承されているのではないかと思うのですが。
正方形サムネイルの生成を求める場合はFC2リクエストで提起しても良いかもしれません。

リクエストのページ
https://request.fc2.com/ja?service_id=5



ということで、現時点での解消策につきましては「ご自身がアップロードする画像を全て予め正方形でトリミングした上で、テンプレートの表示領域も正方形にする」しか無いのです (∵`)

これまでの内緒さんの画像を総合的に見て察するに、正方形よりも逆に横長にした方が良いような気がします。
.grid-image-wrapper::before

padding-top: 100%;

padding-top: 56%;
などに変更して様子を見られてはいかがでしょうか。

BAR72
2022/08/16 (Tue) 22:01

To vanillaice (Akira)さん

ありがとうございます。表現が難しくて、なかなかコミュニケートできなくすみません。
掲載した写真の真ん中のところだけが表示されるサムネが嫌なだけでして・・・、写真はすべて、端まで映ってこその構図です。でもグリッドで正方形が並ぶのは見ていてすっきりしますし、テンプレを変えたかったのですが、以前のmochaのほうが自分が意図するビジュアルになるのであれば、、、と、元に戻すことにしました。

お騒がせして、なんだか申し訳ありません。

-
2022/09/14 (Wed) 00:42

管理人のみ閲覧できます

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

-
2022/09/14 (Wed) 00:53

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/15 (Thu) 12:22

To ordinary_days ヘッダーカテゴリ 内緒さん

こんにちは ('0')/

確認なんですが、ご質問(ご要望)は
・ナビゲーション(ページ最上部)にあるマウスオーバー表示される「categories」の削除
・個別記事下「同カテゴリページナビ」の削除

の2つでしょうか。タイトルには
> 個別記事ヘッダーのカテゴリ削除について
とあり、本文は
> コメントの下に前の記事と次の記事が表示されますが
の内容しか無いので念の為の確認です。

-----
【ナビゲーション内カテゴリ削除】

注)カテゴリリスト不要の方ここから削除

で検索するとhtml内に1箇所ありますのでガイダンスに従ってください。

【カテゴリページナビ削除】

個別記事ページナビ 同カテゴリ(page navi for article) 不要の方ここから削除

で検索するとhtml内に2箇所ありますのでガイダンスに従ってください。

よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2022/09/15 (Thu) 12:35

To ordinary_days サイドメニューの順番の件 内緒さん

<!-- 注)最新記事リスト不要の方ここから削除(recent posts list, delete from here...) -->

で検索するとhtml内に1箇所あります。この近接(下の方)には

<!-- /最新記事リスト不要の方ここまで削除(... to here) -->

というコメントアウトがあり(<!-- から -->までをコメントアウトと言います)、この2つの行に挟まれた部位が recent の対象部位です(コメントアウト含む)ので、この範囲をカット(切り取り Ctrl + X)し、

今後は

<!--plugin-->

で検索するとhtml内に1箇所ありますので、そのすぐ上の行にペースト(Ctrl + V)します。
ペーストした後に 全角スペースでインデントの調整を行わないよう注意 してください。
わかりにくいかもなので、以下のスクリーンショットを参照して確認をしてくださいね。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-09-15.png

-
2022/09/17 (Sat) 13:42

管理人のみ閲覧できます

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

-
2022/09/17 (Sat) 14:02

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/17 (Sat) 14:56

To ordinary_days サイドメニューの順番の件 内緒さん

こんにちは ('0')/
まず、コメントの件は対処しました。

-----
> 順番を自由に変える事は〜

できますよ。
まずプラグイン表示の仕組みを理解しないと難しいと思いますので説明します。
まず、本テンプレートの recent は「プラグインではない」点に注意してください。公式プラグインで「最新記事一覧(サムネイル画像付き)」というのが提供されていますが、わざわざテンプレートに別途で recent を設けている理由は本記事中の『「新着記事リスト」について』の章に書いてあるとおりです。
テンプレートの recent のhtml(先日コピペで移動させた範囲がそれにあたります)を削除してプラグインに切り替えれば簡単に順序指定できますがデザインは現在のものと同じにはなりません。

FC2プラグインは3つのカテゴリに分けることができます。そしてそれぞれのカテゴリ内で表示順序を指定できます。

プラグイン管理ページ
https://admin.blog.fc2.com/control.php?mode=plugin

このカテゴリ分けを上手く利用してください。例えば現在カテゴリ分けをしておらず、プラグイン名称が以下の通りだとします。

例)
【プラグインカテゴリ 1】
AAA
BBB
CCC
DDD
EEE

仮に「AAA」の下に recent を持って来たい場合は

【プラグインカテゴリ 1】
AAA
【プラグインカテゴリ 2】
BBB
CCC
DDD
EEE

と分類し、recent のhtml内容をテンプレートhtmlの
<!--/plugin_first-->
のすぐ下の行に移動

など、カテゴリのグループの「上」あるいは「下」に recent を移動させればOKです。そのためにはカテゴリ分けを上手く利用してください。
スクリーンショットを参照しながら仕組みを理解してくださいね。色づけ範囲の各々「上」か「下」に移動可能です。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-09-17_1800.png

例)
<!--plugin_first-->
省略(プラグインカテゴリ1)
<!--/plugin_first-->
<!--plugin_second-->
省略(プラグインカテゴリ2)
<!--/plugin_second-->
recent のhtml
<!--plugin_third-->
省略(プラグインカテゴリ3)
<!--/plugin_third-->

の場合はプラグインカテゴリ2と3の間に recent が表示されます。

-
2022/09/17 (Sat) 21:22

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/21 (Wed) 22:42

To ordinary_days サイドメニューの順番の件 内緒さん(完了のご報告)

ご希望通りになったようで良かったです。お疲れ様でした :)

-
2023/09/21 (Thu) 15:15

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/09/22 (Fri) 22:35

To ordinary_days最新記事の件 内緒さん

こんばんは ('0')/

> 横並びにして表示させたいですが、どうしても横並びにできません。〜やり方をご教授していただけると大変ありがたいです。〜

申し訳ないんですが、カラム変更や表示形状変更などデフォルトを変えてしまう個人カスタマイズのお手伝いはお断りしています。
表示位置はhtmlの表示したい位置へカット&ペーストで移動し、横に並べるスタイリング(CSS)については flex あるいは grid などで検索し、ご自身でお願いします。

あるいはプラグイン(最新記事リスト)を利用し、プラグイン1〜3のうちいずれかのカテゴリがメインカラム下に表示されるタイプのテンプレートへの変更もご検討くださいね。

ベリーズ
2023/10/30 (Mon) 17:29

No title

テンプレートをお借りしています。ダークモードについて一つ質問があります。

「ordinary_days」テンプレートをPageSpeed Insightsで測定したところ、毎回ではないですが以下のパフォーマンスエラーがたびたび出てしまいます。

「Largest Contentful Paint(LCP)に該当するコンテンツがページに表示されていません。ページに有効な LCP 要素があることを確認してから、もう一度お試しください」

そこで、CSSのアニメーション --animation-page: fadeIn .8s;/* ページアニメーション, 不要ならこの一行削除 */

の行を削除するとLCPエラーは出なくなるのですが、その代わりにダークモードでブログページを更新するとページが変わる時にライトモード背景色が一瞬だけ表示されてしまいます。これではダークモードでの閲覧がまともにできなくなってしまいますが、この現象はしょうがないことなんでしょうか?

-
2023/10/31 (Tue) 15:57

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/10/31 (Tue) 21:49

To ベリーズさん

こんばんは ('0')/

解決済ということで良いでしょうか。お疲れ様でした :)

-
2023/11/29 (Wed) 16:26

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/11/30 (Thu) 16:37

To ordinary_daysの件 内緒さん

こんにちは ('0')/

> PageSpeed Insightsで計るとエラーが出る場合があり、サーチコンソールにもインデックスされない〜

Lighthouse及びPagespeed insightsで『ページ全体に表示アニメーションがかかっていると計測エラーになる』件については既知の問題(ツール側の問題)として多くの報告があがっています。今後解消されるかもしれませんし、Googleが表示スピードにこだわるあまり事実上の禁止にされるかもしれません(それは暴挙なので無いと思いますが)
サーチコンソールにインデックスされないというのはあり得ないのでインデックス除外にされているならば他に問題があります。

参考記事: Google search consoleで気にした方が良いこと 気にしない方が良いこと
https://vanillaice000.blog.fc2.com/blog-entry-1136.html

> そこでアニメーションがかかるのをやめたのですが、これだとダークモードで使用した時にページ切り替え時に一瞬ちらつき(ライトモードが一瞬表示してしまう)が生じてしまいます〜

<!-- 注)ダークモード切り替え 2/3 -->
で検索するとHTMLの下の方に見つけられます。上記を含めた行から
<!-- ここまで -->
をカットし、
</head>
の直前にペーストしてください。ただしJSの実行がHTMLの描画を阻害するため、ページ構成速度自体は低下します。これはHTML, JS記述のいわば物理的法則なのでどちらかを優先させる以外に対処法はありません。
比較対象にされたテンプレートの解析はしていませんが恐らく同じ構造(JSをHTMLの上位(記述順)に実行)ではないかと思います。

一度お試しください。

-
2023/11/30 (Thu) 18:35

管理人のみ閲覧できます

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

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)