link rel=preload とFC2画像URLの -origin とDevツールの warning

訳の分からない長ったらしいタイトルでスミマセン。Google の Lighthouse や PageSpeed Insights で、下記のような項目が出る事が有り、色々テストしてみた事を書き留めておきます。

キーリクエストのプリロード

<link rel="preload"> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

<link rel="preload"> をヘッダー内に記述する事で画像やJS,CSS等を先読みし表示を高速化するもので、検索すると使い方は彼方此方に沢山出ています。

Link types: preload - HTML: HyperText Markup Language | MDN

The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance.

FC2ブログ無料プランでの link rel="preload" の使い方

当方のテンプレートでも、トップ画像に対して上記の文言が出たので、テンプレートのHTML<head> 内に入れてみました。
(この記事内のURLは当方ブログのものです。あくまでも例なので、URLをご自身のものに読み替えて下さい。)

<link rel="preload" href="https://blog-imgs-144.fc2.com/s/o/r/sorauta1/dsk.jpg" as="image">

ところが、文言が消えないのです。URLはファイルアップロードのURL欄のものと同じはずなのに。で、GoogleChrome のデベロッパーツールの下段「Console」で見てみると下記のような warning が出現。

akamai-origin-1-s

The resource https://blog-imgs-144-origin.fc2.com/s/o/r/sorauta1/dsk.jpg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

ん?-origin が付いてる。あ そっか。無料プランだから -origin が(自動で)付くんだな。…という事で、環境設定→ブログの設定にある『画像高速表示の設定』をオンにして -origin が付かないようにしたら warning は無くなりました。

…が、問題はその後です。画像高速表示設定を使った事で弊害が発生!

画像高速表示の代わりに表示される個別記事下の広告による数多くの問題点が、Lighthouse の点数下落によって分かりました。(問題点へ移動する

無料プランをご利用で画像高速表示の設定をOFFのまま link rel="preload" を使いたい方は、<head> に入れるリンク要素は

<link rel="preload" href="https://blog-imgs-144.fc2.com/s/o/r/sorauta1/dsk.jpg" as="image">

として、スタイルシート側のURLに -origin を入れて下さい。(URLは自分の画像に置き換えて下さい)

.topimg{
  position:relative;
  overflow:hidden;
  padding-top:30.00%;  /* 画像の高さpx÷画像の幅px×100で導いた数値%。数値増減で高さを調整する */
  background:url('https://blog-imgs-144-origin.fc2.com/s/o/r/sorauta1/dsk.jpg'); /* 表示したい画像URL */
  ~~~省略~~~
}

因みに、個別記事ページにトップ画像が無いテンプレートは下記のようにエリア変数で括るとお小言が減ります。

<!--not_permanent_area-->
<link rel="preload" href="https://blog-imgs-144.fc2.com/s/o/r/sorauta1/dsk.jpg" as="image">
<!--/not_permanent_area-->

有料プランに変更されたら、スタイルシート側に追記した -origin を削除して下さい。(画像高速表示が標準になるので、-origin が不要になります。)

アカマイCDNを使った画像高速表示(-origin 無し)についての分かり易い説明は下記をご参照下さい。m(__)m

FC2ブログの【アカマイ】画像表示高速化の仕組み

FC2ブログの【アカマイ】画像表示高速化の仕組み

超いまさらで多くの方はご存知かとは思うのですが。「アカマイ」って何なの?から始まって仕組みまでを、私のわかる範囲で記そうと思います。間違ってるところがあればご指摘頂けると助かります ^^;...

画像高速表示設定をオンにすると下記のように広告リンクが表示されます。

akamai-adb

因みに下記のようになっている場合は、ブラウザの『広告ブロック』で非表示になっています。

akamai-adb2

広告表示で Lighthouse の点数が大きく下がる診断理由

点数の下がった『パフォーマンス』『アクセシビリティ』の2つを画像にしてみました。(画像は縮小していますので、クリックして表示して下さい。)

【パフォーマンス】

アカマイツールバー付き1-s

(アカマイCDNを利用する)画像高速表示設定をONにすると記事下段に文字広告が表示されます。その表示のための JavaScript で、画像の薄赤く塗った部分の問題を指摘されます。(薄青い枠はコメントツールバーによる部分。)

「document write() 」の使用だったり、広告のJSだけに掛かる時間を考えたら、記事内数枚の画像のために『画像高速表示設定』をONにする意味が無いんじゃないかと思います。(画像が沢山有るのなら恩恵は有るのでしょうが…。)

(薄青部分のコメントツールバーとは↓これです。)

コメントツールバー

【アクセシビリティ】

アカマイツールバー付き2-s

表示される広告やツールバーは iframe を使って表示されるのですが、どれも「要素にタイトルが有りません」や「画像に alt が有りません」等の不合格を貰ってしまいます。

広告もツールバーもFC2側での出力なので、これらのお小言を避けたい場合は「画像高速表示設定をOFFにする(但し消えるまで1週間掛かる)」「テンプレートのコメントツールバー出力用JSを削除する」という方法しか有りません。

[コメントツールバーの削除方法]

PCのキーボードで『Ctrl+Fキー』を押して開いた窓に↓を入れて検索します。

<script type="text/javascript" src="<%template_comment_js>"></script>
若しくは
<script src="<%template_comment_js>"></script>

すると、2ヵ所(テンプレートによっては1ヵ所)見付かりますので、その文言を削除(末尾に<br>が有る場合はそれも一緒に削除)し『更新』ボタンを押して下さい。

画像高速表示とコメントツールバーを辞めた結果、同じページが下記のようなスコアになりました。

アカマイツールバー付き3-s

色々書きましたが、個人的なまとめ

  • FC2ブログが無料プランの場合、トップ画像に link rel="preload" を使う時はスタイルシート側に -origin を入れる。
  • アカマイCDNを使って画像高速表示機能を使えば -origin は不要だが、個別記事に広告が出て、Lighthouse や PageSpeed Insights で色々指摘される。
  • ページ内の掲載画像が少なければ画像高速表示機能の恩恵は少ない。画像の無いページでは広告表示分が無駄なだけ。ページの問題を減らすならコメントツールバーも削除する方が良い。
  • 有料プランなら標準でCDN経由( -origin 無し)なので広告も無くそのまま表示が早い。(ただ、コメントツールバーが有ると Lighthouse 等で指摘されるのは有料も無料も一緒。)

…という事かなと思います。無料プランでトップ画像に link rel="preload" をお考えの方は -origin が付く事をお忘れなく。

この度、検証も兼ねてコメントツールバーを外してみました。

使う方も少ないですし、私がコメントでソース表示用に文字色を変更するだけなら専用のタグを使えば良いので、外しておこうかなと思います。m(__)m(共有テンプレートには標準でコメントツールバーが付いています。不要な場合は削除して下さい。)

[Tag] * Google * Lighthouse * PageSpeedInsights * FC2 * origin * preload

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-16-10:25 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。お名前拝見してましたが「初めまして」ですよね?
コメント有難うございます。(^^)

とても興味深いお話です。
よく読んで、改めてお伺い致しますね。(^-^)
2021-06-16-13:18 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-17-09:06 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。コメント有難うございます。

私に分かるかどうか…^^;
何か分かったらお伺い致しますので、暫しお時間下さいませ。m(__)m
2021-06-17-15:34 aki
[ 返信 * 編集 ]

akiさん、こんにちは。( ^-^)/

ご無沙汰の嵐(?)のSuper源さんです。【><】

このブログの下にあるページナビですが、ページ75、つまりpage-74を表示しようとすると、画面が乱れるようです。

https://sorauta1.blog.fc2.com/page-72.html OK
https://sorauta1.blog.fc2.com/page-73.html OK
https://sorauta1.blog.fc2.com/page-74.html 拡大表示(?)になる

ぱっと見たところ、CSSが効いてないような感じですね。
あるいは…、表示してはいけない秘密のページを表示している?

(^-~)ヾ(^^;)オイオイ、ソレハ ナイダロウ。

以上、偶然気づいたので、ご報告まで。(^^)/
2021-06-18-11:24 Super源さん
[ 返信 * 編集 ]

お久しぶりです

いつもありがとうございます
参考になる記事を拝見し、さっそく試してみましたところ

スタイルシートに
-origin
を追加しても、更新したら(-originが)消えてしまう気がするのですが
気のせいでしょうか(いえ、消えておりますが😭)
それともそういう仕様なのでしょうか

ちなみに無料プランの高速表示なしです



追記
そういえば以前
DNS Prefetch Generatorなるもの(ブックマークレットで使うものらしいです)
で、勝手にprefetchやらpreconnectやらを追加していたので
効果がなかったのかもしれません
お騒がせしてすみません
2021-06-18-15:06 徳川たぬこ
[ 返信 * 編集 ]
aki

Re: Super源さん 様へ

こんばんは。こちらこそご無沙汰しております。m(__)m

う~ん、申し訳無いのですが私のブラウザではキチンと(拡大されず)表示されております。
GoogleChrome Edge Firefox Sleipnir Opera で確認致しましたが症状が出ませんでした。^^;
(因みにiPhone iPad でも問題有りませんでした。)
お手数ですが、今一度ご確認頂きたく 宜しくお願い致します。m(__)m
2021-06-18-21:49 aki
[ 返信 * 編集 ]
aki

Re: 徳川たぬこ 様へ

こんばんは。ご無沙汰してしまってますが、時々見に行ってました。^^;

…追記見て、先程お伺いして勝手ながらLighthouseで見たら「preload して~」のお小言無いですね。(^^)
ファーストビューに必要なCSSをインラインで記述してますので、link rel=preloadで非同期にする必要は無いかと。
そしてご指摘のように prefetch や preconnect で画像も先読みされているようです。
問題も指摘されていませんし、追加の必要は無いようですね。(^-^)

貴重な情報、有難うございました。
また遊びに伺いますね~。
2021-06-18-21:58 aki
[ 返信 * 編集 ]
aki

Re: Super源さん 様へ

今スマホで状況を確認いたしました。
何故か最後のページだけ、当方がDLした他者テンプレートが表示されました。
(昨日・一昨日の夜、他者テンプレートでのDevツールwarningを確認するため、自分のブログに一時適用していました。)
が、確認後は自分のテンプレートに戻したんですけどね。(・・?)
現在はその他者テンプレートを削除したので、取り敢えず暫し様子を見てみます。
(まだスマホは直っていないようです。)
2021-06-19-06:39 aki
[ 返信 * 編集 ]

出ました

akiさん、こんにちは ^^

私のiPhone Xでの閲覧で、ナビの「75」をタップしてみましたら
https://blog-imgs-148.fc2.com/o/o/p/oops0011/2021-06-19-iphone-400-comp.png
こんなふうにCSSが適用されていない表示になりました。
昨日何回か同じ操作をしておりましたが、こうはならなかったですけどね。
ナビの他の部位は問題は起きていないんですが……

一応スクショが撮れましたので、とりあえずお知らせ致します ^^

■ 追記です 14:54
不思議です、先ほどの私のこのコメント時に、akiさんの「2021-06-19-06:39 」のコメントは表示されておらず、投稿後に表示されました (^_^; アハハ…
う~ん、何が起きているんでしょう???
2021-06-19-12:59 ぼっちん
[ 返信 * 編集 ]
aki

ナビの亡霊(?)について

Super源さん様,ぼっちん様、今現在の不具合って、スマホだけに限定されていませんか?(iPhone,Android共)
PC表示だと問題無いようです。
で、試しに環境設定で1ページ表示数を変えてみたのですが、PCでは問題無く全ページ送りで崩れる事は無いのですが、SPのみ亡霊が残ります。
1ページ4記事にして全112ページにすると、PCでは問題無しSPだと112ページにCSSが適用されていない
(ここで履歴・cookie・キャッシュを一度削除)
1ページ8記事にして全56ページにすると、PCでは問題無しSPだと56、55,54ページ、そして何故か54ページでのリンクが全112ページになっていて、
57と(58はCSSが効いているけど記事表示なし)…をクリックすると85ページに飛んでCSSが適用されていない(86と次の…はCSSが効いているけど記事表示なし)
112ページでCSSが適用無し(111と110以下はCSSが効いているけど記事表示なし)
~~~等々…
他にも変な表示になっていて、表示数弄りで逆に問題悪化してるような気が…。^^;
なので、元の1ページ6記事「75」にして、それ以外手を加えずにSP表示の様子を見てみる事にします。m(__)m
2021-06-19-15:21 aki
[ 返信 * 編集 ]
aki

Re: ぼっちん 様へ

スミマセン。「2021-06-19-06:39 」の投稿は、もっと簡略したコメントで存在していました。^^;
で、コメントの中身は「2021-06-18-21:49」のコメントに追記として載せたのですが、それを「2021-06-19-06:39 」の投稿に被せて編集し直しました。

なので、これは正しい表示でFC2は関係無いのです。
変な投稿して失礼致しました。m(__)m
2021-06-19-15:27 aki
[ 返信 * 編集 ]

akiさん、こんばんは。(^^)/

症状、スマホで確認できましたか。
何か複雑怪奇なことになっているようで、ここまで来ると確かに”ナビの亡霊”という感じですね。

>今現在の不具合って、スマホだけに限定されていませんか

ええと、PCも、ブラウザにVivaldyを使うと同じ現象が出ます。
ホント、何なんでしょうね、これ。(? ?)

また何か分かりましたらお知らせください。

こうなると、また何かFC2がやらかしてる気も…。(^x^)モゴモゴ
2021-06-19-18:23 Super源さん
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-19-20:14 -
[ 返信 ]
aki

Re: Super源さん 様へ

こんばんは。私も先程Vivaldy、入れて確認してみました。
しかも手持ちのブラウザGoogleChrome以外(Edge Firefox Sleipnir Opera +Vivaldy)で全滅になってしまいました。(・。・;
(1ページ6記事、割り付け75の時の)75をクリックして開くと記事無し・ページネーションが最終ページ56になる。(多分56になるのは1ページ8記事にした時の最後が56)
56をクリックすると(1ページ4記事、割り付け112ページの時の56)に飛ぶ。しかもスタイルシートの名前が現行のものと違う。
…ページ割りもスタイルシート名もおかしくなってます。あ、SPで見てもダメでした。(-_-;)
一体何故?
様子見て直らなかったら、ダメもとでFC2に訊いてみようかなぁ?

色々お騒がせしております。お知らせ頂き有難うございます。
2021-06-19-21:11 aki
[ 返信 * 編集 ]
aki

Re: - 様へ

こんばんは。そちらでお返事しますね。(^^)
2021-06-19-23:24 aki
[ 返信 * 編集 ]

Re: aki 様へ

たいへんありがとうございました。
2021-06-20-09:11 呑兵衛あな
[ 返信 * 編集 ]
aki

直ったように思うのですが…

自分のPC・SP上では、ページネーション75もCSSも直ったように思うのですが…
もし表示がおかしい方がいらっしゃいましたら、教えて頂けると有難いです。m(__)m
2021-06-20-13:55 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-20-23:45 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。お返事有難うございます。
気が付いた点が有ったので、先程コメントに伺いました。(^^)

お返事はお気になさらず。m(__)m
2021-06-21-00:37 aki
[ 返信 * 編集 ]

No Subject

おはようございます。
先日のpreloadの件ですが、私の見解なりを記事にしてみました。
https://onta0001.blog.fc2.com/blog-entry-479.html
2021-06-21-10:45 遠太
[ 返信 * 編集 ]
aki

Re: 遠太 様へ

こんにちは。考察記事大好きです。
後程ゆっくり拝見しに伺いますね。(^-^)
2021-06-21-13:50 aki
[ 返信 * 編集 ]

Re:直ったように思うのですが…

akiさん、こんばんは。( ^-^)/

直ったようですね。
私の環境でも問題なしです。(^^)v

>色々お騒がせしております。お知らせ頂き有難うございます。

いえいえ。こちらこそ変な物を持ち込んでしまい、恐縮です。【><】
2021-06-21-18:25 Super源さん
[ 返信 * 編集 ]

IE終了に関連した対応は?

御承知と思いますが、「Internet Explorer」は、2022年6月15日でサポート終了が発表されました。併せて、IEの開発は、Windows 10 v21H1の公開(21/05/19)をもって終了との事です。
また、WordPressは21/07に公開されるv5.8以降IE 対応は完全に打ち切るとの事。
FC2ブログ用テンプレートでも「IE非対応」とする物が見受けられます。
そこで御尋ねします。
*Essence 様が提供するテンプレートに関し、「IE非対応」とする方針は如何でしょうか?

[ct_responsive3c] 改造版を利用させていただいている私の場合、「IE非対応」は大歓迎です。更に言えば、「IE除け」とした方が嬉しいです。
マイクロソフトは既に「Internet Explorer 11」未満は放棄していますから、せめてそれだけでも非対応にできれば嬉しいですね。

追伸:私のブログがMFIに認定されたなら、robots.txtの設定でIEのユーザーエージェントを遮断しようかとも考えています。
2021-06-21-19:07 呑兵衛あな
[ 返信 ]
aki

Re: Super源さん 様へ

こんばんは。ご確認有難うございます。m(__)m

結局FC2サーバー側の問題…だったのでしょうか?「全滅~」と言った後何もしていないのですけども。^^;
まぁ、確かに1ページの表示件数を変えるとページ割りも変わってしまいますし、作業のためにテンプレートを何度も更新してるとCSS名もその都度変わってサーバーがエラー起こした…なんて事もありますかね。
分かりませんが。(;^ω^)

普段見てない所だったので、教えて頂き感謝致します。
また何かお気付きの点が有りましたらご連絡下さいませ。m(__)m
2021-06-21-20:59 aki
[ 返信 * 編集 ]

Re: 呑兵衛あな 様へ

横から失礼致します。
呑兵衛あなさん。
ちょっと弊ブログをIEで眺めてみてください。
「IEブロック=IE撲滅運動」こんな表示でよろしかったら、Akiraさんの記事
https://vanillaice000.blog.fc2.com/blog-entry-797.html
を参考にして、ご自身で表示内容をカスタマイズされたら良いと思いますよ、簡単ですし。

> 追伸:私のブログがMFIに認定されたなら、robots.txtの設定でIEのユーザーエージェントを遮断しようかとも考えています。

う~ん、それは意味ありませんから、触らない方が無難かと思います。
2021-06-21-21:41 ぼっちん
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。コメント頂き有難うございます。

> *Essence 様が提供するテンプレートに関し、「IE非対応」とする方針は如何でしょうか?

…いいえ、「IE非対応」テンプレートは考えておりません。
というか「IEでも崩れずに閲覧できる」テンプレートで良いと思っています。
「IE非対応」と考えるのではなく、IE独自のものは使っていない=「IEでもGoogleChromeでもFirefoxでも見れる」という形です。
ただ、今後IEから他のブラウザへ変えてもらうような啓蒙活動はしようと思っています。

1年後にサポートが打ち切られたからと言って、IEで閲覧する方がゼロになる事は暫く無いでしょうし、IEに限らずクロスブラウザで閲覧できる方が良いと考えます。
もし貴殿ブログにIEで訪問されるのが嫌であれば、お気遣いは無用ですので「IE非対応」のテンプレートに変更すれば良いと思います。

私が「そのうちに…」と考えている方法は、「他のブラウザ使いましょう」と促すためのオーバレイ表示を行う方法です。
詳しくは下記の記事をどうぞ。

弊ブログでのIE閲覧のブロック効果は着々と上がってますよ~ ‐ Webテク倉庫 ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-312.html

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示 - The other way round Akira様
https://vanillaice000.blog.fc2.com/blog-entry-797.html

今後はこの方法を参考に「啓蒙活動」しようと考えています。
但し、共有テンプレはそのまま「IEでも閲覧可」で、IE牽制のためにわざとIEで表示が崩れるテンプレートを作る事は致しません。
…それが私の考えです。m(__)m

-----追伸
あ、ぼっちんさんに先に書かれてしまった。^^;
横レス有難うございます。オーバーレイ表示、良い方法ですよね。
2021-06-21-21:58 aki
[ 返信 * 編集 ]

Re: aki 様へ

>…それが私の考えです。

よくわかりました。
回答いただきありがとうございます
2021-06-22-08:22 呑兵衛あな
[ 返信 * 編集 ]

Re: ぼっちん 様へ

>触らない方が無難かと思います。

アドバイスありがとうございます。
追伸
以前、「忍者バリア」が使えた頃に、古いUEの遮断を行いましたが、それなりに満足できる結果でしたよ
2021-06-22-08:27 呑兵衛あな
[ 返信 * 編集 ]

Re: 呑兵衛あな 様へ

> 以前、「忍者バリア」が使えた頃に、古いUEの遮断を行いましたが、それなりに満足できる結果でしたよ

意図が伝わらなかったようで、表現不足だったこと申し訳ありません。
そのような「強攻策」で、今までIEで閲覧出来ていた「無無無庵2」さんが、ある日突然シャットアウトされてしまったら、同閲覧者さんはとても不快な思いをさせられることになるでしょう。
それよりも「他ブラウザの利用」に誘導してあげることの方が、閲覧者さんに親切なのではないかと思われます。

是非にご一考を (•‾⌣‾•)にこ♪
2021-06-22-08:54 ぼっちん
[ 返信 * 編集 ]

Re: ぼっちん 様へ

>意図が伝わらなかったようで、表現不足だったこと申し訳ありません。

こらこそ。
>同閲覧者さんはとても不快な思いをさせられることになるでしょう。
認識の相違です。
私は、自分のやり方に沿わない人に閲覧して欲しいとは思いません。
閲覧を望む人には閲覧できる条件を提示しますが、それを実行するか否かは閲覧者の勝手です。「誘導する」ほどの親切心は持ち合わせません。誘導されて行うような心がけの人は、誘導しなくとも事前に行っているべき...という主義です。また、どこかのだれかが、我が家の流儀に従わない事が原因で不快になろうと、2度と来るかと思おうとも、一向にかまいません。私のやり方から外れる人は問答無用でネット遮断したいと考えます。
そちらから殊更の事が無かったら、この件について議論するつもりはありません
2021-06-22-13:04 呑兵衛あな
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-22-14:28 -
[ 返信 ]
aki

Re: 呑兵衛あな 様へ

こんにちは。お返事頂き有難うございます。

一つ付け加えさせて頂きますと、啓蒙活動に考えているオーバーレイ表示は、ブログのどのページにアクセスしても表示され 中身が見えない位に大きいものです。しかもクリックで消す等も出来ません。
(押せるのは、一緒に表示されるGoogleChromeへのリンクのみです。)
そしてこのオーバーレイは、トップページだけでなく個別記事への訪問や、他サイト(ブログ)Google等にインデックスされているリンクからの訪問も、IEならば表示される「かなりウザイ」タイプのものです。
IEで訪問した場合にデカデカと表示される(しかも外せない)ので退散するか・他ブラウザを利用するかの2択になると思います。

私もぼっちんさんも「IEでは閲覧させない」という意味でも叶うものなので「こういう方法が有るよ」と提案致しました。
ただ、ご自身のお考えが有っての事ですので、これ以上お勧めする事はございません。
大変失礼致しました。m(__)m

追伸:
因みに先程、当方ブログにもオーバーレイ表示を入れてみました。(とは言ってもIEでしか見れませんけども。)
2021-06-22-17:11 aki
[ 返信 * 編集 ]
aki

Re: - 様へ

こんにちは。コメント有難うございます。
後程お伺い致しますね。(^^)
2021-06-22-17:14 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-22-22:13 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。コメント有難うございます。

お返事の件了解致しました。(^^)
今後とも宜しくお願い致します。
2021-06-22-23:19 aki
[ 返信 * 編集 ]

akiさん、初めまして❣

素晴らしいテンプレートを見つけちゃったので、ブログを始めようかとSAMPLE作りました。まだまだ、これからですがお尋ねいたします。1.タイトルのフォントサイズを少し大きくしたいのですが、変更しても良いのでしょうか?方法も教えて下さい。今後ともよろしくお願いいたします。
2021-06-27-14:09 写游暇人Ⅱ
[ 返信 * 編集 ]
aki

Re: 写游暇人Ⅱ 様へ

こちらこそ初めまして。コメント・ご質問、有難うございます。m(__)m

ご質問の件です。
サイズの変更をされたい『タイトル』とは、ブログのタイトル部分でしょうか?それとも記事のタイトル部分でしょうか?
勿論変更して頂いて構いませんが、変更するタイトルによってスタイルシートの箇所が違います。

ブログタイトルの場合は、テンプレート管理 (PC用)ページ [serene_resp2c-r] の編集画面を表示、PCのキーボード『Ctrlキー+Fキー』を押し /* ブログタイトル */ と入れて検索して下さい。
スタイルシート内に1ヵ所見付かるので、その8行下に有る h1 に font-size:2.5em; と加えて下さい。
(↓このような感じで)

h1{
top:0;
padding:0 40px;
line-height:1.5;
font-size:2.5em;
}

オレンジ部分を追加して下さい。また、2.5emというのが文字の大きさですので、この数値を調整して下さい。

記事のタイトル部分を大きくする場合は、単体での設定をしていないので、スタイルシートの一番下に下記を追加して下さい。
(違う場合は追加不要です。)

.entry_title h2 a {
font-size: 1.5em;
}
@media only screen and (max-width: 480px) {
.entry_title h2 a {
font-size: 1em;}
}

後は更新ボタンを押すと反映します。

-----

ご質問の件とは違うのですが、SAMPLEを拝見しまして気付いた点を不躾ながら申し上げます。
「掲載する画像のサイズ及び容量を是非削減して下さい。」
滝の画像のサイズは 3331 x 2221 pixels となっています。
パソコンで表示する場合、せいぜい縦横サイズ半分以下のピクセルしか表示できません。
また、画像の容量(データ量)も1枚 1.67 MB 有るようです。
画像のサイズ・容量が大きいとPCでの表示が遅くなりますし、それ以上にスマホで閲覧される方の負担になりますので、縦横寸法の見直し・画像の圧縮をご検討下さい。

当方ブログのリンク先に、分かり易く解説されていらっしゃる方が居りますので、是非記事をご覧下さいませ。(^^)

「ブログなどのWEBサイトでの画像の容量にはこんなことに注意されてはどうでしょう」 戯れ言葉 -- hige 様
https://blgid1974.blog.fc2.com/blog-entry-1511.html

大変失礼致しました。m(__)m
2021-06-28-00:07 aki
[ 返信 * 編集 ]

akiさん、おはようございます!

手取り足取り?ご指導ありがとうございました。
喜寿を迎えての挑戦で四苦八苦(-_-;)状態です。
趣味は道東をメインに野鳥撮影をしていますが
今は自粛真只中で寂しいかぎりです。
二回目のワクチン接種も終わりましたので、少し
づつ活動開始出来ればと、老体に鞭打って頑張り
たいと思います。
いい写真を見ていただきたいですね~
2021-06-28-10:49 写游暇人Ⅱ
[ 返信 * 編集 ]

To aki さんへ

私の拙いブログ記事をご紹介戴きありがとうございます。
汗顔の至りであります。

で、先ほど読み直し、他の方の反応とかを見させていただいて、画像のサイズと容量の違いや処理の方法がまだ判ってもらえてない様な気がして、ソフトによる具体的な方法を追記しました。

画像の容量を減らすと書くより、品質を落とすと書く方が処理の名前としては判りやすいのかと。
2021-06-28-13:19 hige
[ 返信 * 編集 ]

To 写游暇人Ⅱ さんへ

 横から失礼いたします。

 画像の件、縦横のサイズを小さくされたようですが容量の方がまだ大きいようです。当方の記事を見ていただけたようですが、当方の記事の書き方がもう一つ悪いようですね。
 具体的なソフトを取り上げての指定方法を追記しました。

 写游暇人Ⅱ さんの記事を拝見して、画像のサイズをそれほど小さくしなくても今よりも容量を下げる事が出来ますのでお暇な時にでも拙ブログの記事をもう一度お読み戴けたらと思います。

 まことに不躾な事を申し上げ、申し訳ありません。

 ブログ楽しみに拝見させて戴きます。
2021-06-28-13:33 hige
[ 返信 * 編集 ]

Re: hige 様へ

ありがとうございました。
ブログの方にコメントさせていただきました。
先ずはお礼まで!
2021-06-28-14:29 写游暇人Ⅱ
[ 返信 * 編集 ]
aki

Re: hige 様へ

こんばんは。コメント有難うございます。

風景画像等についてはやっぱりhigeさんの記事が分かり易いな~と思いまして、勝手にリンクさせて頂きました。(^^;
で、今ほど更新された記事を拝見致しました。
ソフトでのリサイズ・圧縮方法、画像なのでより分かり易いですね♪(^^)
きっと他の方にも有益な記事だと思いますので、また(勝手に)薦めさせて頂きます。
2021-06-28-22:27 aki
[ 返信 * 編集 ]
aki

Re: 写游暇人Ⅱ 様へ

こんばんは。コメント頂き有難うございます。

タイトル文字、大きく出来たようで何よりです。また何かございましたらお声掛け下さいませ。
画像の件、不躾におすすめして大変失礼致しました。
喜寿を迎えての挑戦との事、新しい事を始めるのはとてもワクワクします。
ブログに載せる画像は、カメラやスマホで撮ったままを利用するとビックリする程大きいので、閲覧される方のためにも是非この機会にリサイズ・圧縮の方法を知って頂くと良いと思います。
(画像容量が大きいと表示に時間が掛かってしまう・スマホの場合は閲覧時にデータ通信量を沢山使ってしまう、等の弊害が有ります。)
是非、素敵な画像を沢山飾ってブログを楽しんで下さい。(^^)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。
2021-06-28-22:50 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-06-30-21:13 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。お返事遅れて申し訳ございません。m(__)m
彼方に参りますね。
2021-07-01-14:45 aki
[ 返信 * 編集 ]





非公開コメント