*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。
2021-04-14 (Wed)

sunny_resp2c、共有化しました。

昨日『sunny_resp2c』が共有化致しました。早速DLして頂いた方、誠に有難うございます。m(__)m
近日中にエントリー記事1列タイプと全文表示にするカスタマイズ記事を書きますので、今暫くお待ち下さい。
あと、欲しい方は限定されると思いますが…暗色スタイルシートも作ってますので、それも近日公開予定です。

ちょっと色々忙しいため、お時間下さいませ。m(__)m

取り敢えず見本画像(1列タイプ)
エントリー1列

(全文タイプ)
エントリー全文

2021-03-31 (Wed)

sunny_resp テンプレート申請しました。

本日、レスポンシブテンプレート『sunny_resp2c-l,r』共有申請致しました。
今回は右メニュー・左メニューの2種で、3カラム版は無しです。^^;
大きめのディスプレイでドロワーメニューボタンが離れてしまい見落としそうなので、(横1740px以上の)インデックスページのみ自動でスライド表示するようにしました。(個別記事ページやその他のページではボタンで表示します。開閉するページは変更可能です。)

イメージは、学校や会社(その他施設)の日当たりの良い暖かい窓辺。新しく始まる事への明るい期待を込めて名前を『sunny』にしました。日当たり良すぎて居眠りしちゃうのはマズいですけども。(^-^;

以下、一応見本画像です。無事に共有化しますように…。

メニュー格納時
テンプレートsunny見本

wideディスプレイ時の右メニュー版
テンプレートsunny見本-右メニュー

wideディスプレイ時の左メニュー版
テンプレートsunny見本-左メニュー


コメントへの返信用見本です。
取り敢えず事前告知 ←この部分と テンプレート ←この部分
(ユーザータグをリンクにする場合の下線追加css)
.con_body .tagword {
  display: inline-block;
  line-height: 1.2;
  border-bottom: 1px dashed #ff0000;
}
無用の方はお見捨て下さい。m(__)m

2021-03-23 (Tue)

img要素にwidthとheight属性を付けて欲しい

今更感の有る記事ですが、先日(21/03/18)FC2リクエストに『img要素にwidthとheight属性を付けて欲しい』旨のリクエストを致しました。
img要素にwidthとheight属性を付けて欲しい
記事投稿時の画像にwidthとheightを付けて~という要望なのですが、何故これが必要かを記事にしていらっしゃるところは沢山有るのです。(Netで「レイアウトシフトとは」と検索すると色々出てきます。)

画像にwidthとheight属性が付いていないとレイアウトシフトが起きる…って、何?
「レイアウトシフト」とはページ読み込み時などでレイアウトがシフトする(ズレる)事です。 ↓こういう感じ。(見本画像を作ってみました。クリックで動きます。)

回線や画像データ次第で↓こんなだったり
レイアウトシフト見本
↓こんなだったりします。
レイアウトシフト見本-2

文章の間から突然画像が出て来るって一瞬戸惑いません?(^_^;)ココロ穏やかでない画像なら尚更に。
上記のようなガタツキを無くし、表示される部分のスペースを予めwidthとheight属性を付けて確保したのが下記の見本です。

レイアウトシフト見本1

表示される場所がここだと分かっていれば心の準備(?)も出来ますし、何より読み易くなります。(但し、表示に時間の掛かる様な重い画像は、逆にイラつきが増しますので軽量化必須です。)
Googleが設定した Core Web Vitals「品質指標」の中の『CLS』でも言ってます。

『CLS』 ページコンテンツに予期しないレイアウトのずれがどれくらいあるかの指標。
img要素にwidthとheight属性が無いと、PageSpeed InsightsやLighthouseで計測した場合『画像要素でwidthとheightが明示的に指定されていない』とチェックされます。

FC2にリクエストしておりますので、↓是非!ご賛同下さいませ。m(__)m
img要素にwidthとheight属性を付けて欲しい

詳しい解説等は、下記のブログ記事をお勧めします。

blog-image

レスポンシブデザインに於けるwidth, height属性について

最近になってGoogleのテストツールが「画像(img要素)に対しwidth, height属性を明示せよ」という警告を出すようになった、ということで、本件に関する個人的見解を記そうと思います。第三者に修正を義務付けるものではないですし、私個人の意見を強制するものでもありませんので、その点を事前にお伝えしておきます。...

blog-image

Lighthouse や PageSpeed Insights で指摘されるようになった画像表示に起因するコンテンツ移動問題の簡単解消方法

昨今、サイト検証ツールの Lighthouse や PageSpeed Insights の Performance の項で「画像要素で width と height が明示的に指定されていない」と指摘がされるようになったことはご存知でしょうか?スクショで表示すると、こんな具合です。 黄緑色の枠線で囲った表示の 「 画像要素で width と height が明示的に指定されていない 」 がそれですが、その直上に 「診断 - アプリケーションのパフォーマンスに関す...

2021-03-06 (Sat)

テンプレートの修正・更新致しました。21/03/06

先の記事で告知していた分と併せて、本日共有済みテンプレートを全て修正・更新致しました。
テンプレートの表示として見えない部分を直したので、実際には何ら変わらないと思います。なので、今迄使ってたもので問題が無い場合は無理に修正・更新する必要は有りません。
ただ、新規でご利用頂く際や再ダウンロードされた場合、記事表示時に「あれ?なんか変。」と感じる部分が有るかもしれませんので、何故そうなるか・そうしたかをご説明致します。
(テンプレート更新日はスタイルシート上部に掲載。)

1) 記事内に使用した『Pタグ(段落)』の表示について、上下のmarginを初期値に戻しました。

Pタグの初期値は下記の通りです。

display: block;
margin:上下にそれぞれ1文字(行)分 左右は0;

この度の修正・更新まではリセット(margin: 0;)していました。
ブラウザ間の表示差異を無くすため、とも言いますが…FC2共有テンプレート独自の『昔からの慣例』というか、「利用者の質問」を避けるための製作者の「策」でも有ると、(他の作者様は違うかもしれませんが)私は思っています。

Pタグは初期値で上下に余白が付くという事を知らない方に「何故行間が空くのか?」と訊かれるのを回避するため、marginゼロにしていると言っても過言ではないかと。
逆に、知っていらっしゃる方は「何で段落が変わっているのに行間空かないの?」と思っていたのだろうけど、不思議な事にそういう問い合わせが殆ど無いのです。^^;
それだけPタグ(段落)の使い方が浸透していない、分からないのだと思います。私もそんなに気にして使っていなかったですし。

FC2の新管理画面(β版)がお披露目され、投稿画面も新しくなりました。今迄『書式』の中に入っていたPタグもボタンになって使えるようになり、これから段落として使う方が増えて来ると思います。
なのにテンプレート側でリセットされたままでは、段落としての表示が正しくありませんので、この度の更新で修正致しました。

更新されたテンプレートを利用され、Pタグが初期値である事によって「過去記事の行間が広がってしまった」という弊害が有る場合、そして「(Pタグを使っても)行間は必要無い」という場合は、下記のようにスタイルシートを変更して下さい。

テンプレート管理画面を開き、ダウンロードしたテンプレートの編集をクリック、ページ下段『スタイルシート編集』枠内上部の
/* ---2021/03/06 記事表示部のPタグ上下余白を戻しました。不要の場合は下記con_bodyのpをmargin:0;にして下さい。--- */
という文言に沿って、その下に有る

.con_body p{
  margin:1.8em 0; /* 段落上下余白1行分1.8em */
}
(.con1_body p や .con2_body p の場合も有り)の値 1.8em を削除し margin:0; にして、更新ボタンを押して下さい。
.con_body p{
  margin:0; /* 段落上下余白0 */
}

注意: 『見たまま編集』で初期値に戻したP(段落)タグの改行(<br>)は【Enterキー】では無く【Shiftキー+Enterキー】です。Enterキーではその都度改段落になってしまい、行間の空いた文面になってしまいます。

修正・更新前のテンプレートに適用する場合は、方法が出ていますので下記のページをご覧下さい。

blog-image

重要!当テンプレートでのPタグについて

随分前から有る共有テンプレートの習慣というか、問い合わせの多い案件故の説明簡素化というか、綺麗事無しで『製作者の怠慢』というか…多くの古いテンプレート同様、私の作ったテンプレートもPタグの上下marginをゼロにしています。 HTMLのタグをご存知の方であれば、Pタグは段落を意味するもので...

2) 追加された『SEOアドバイザー』機能によるおすすめタイトルタグに変更しました。

2021/03/02 FC2ブログの追加機能『SEOアドバイザー』のおすすめtitleタグを、テンプレートのtitleタグ部分に導入しました。
今迄のテンプレートにも同様のページタイトルを出し分ける機能を付けておりましたが、より詳細なページ分けで綺麗な出力をするFC2ブログおすすめタグに変更致しました。

blog-image

【ブログ】SEOアドバイザー機能が追加されました

平素は FC2 (fc2.com) をご利用いただき、誠にありがとうございます。FC2ブログではSEOに強いブログ作りを目指し、このたび「SEOアドバイザー」という機能を追加いたしました。①現在適用中のテンプレートのtitleとdescriptionの内容をチェックする機能確認方法1.ブログ管理画面にログイン2.左側のメニュー「ツール」→「SEOアドバイザー」を開く3.画面上部の「title・descriptionタグチェック」タブを開く4.「おすすめの記述」と「...

ご利用中テンプレートのtitleタグをお勧めtitleタグに変更する場合は、HTML編集枠内上部に記述して有る <title> から </title> までを全て貼り換えして下さい。
また descriptionタグは、現在の記述抽出が他ページ分を見分けてくれないようなので、そのまま変更しない事をお勧めします。(FC2のおすすめdescriptionタグよりも当テンプレートの方が詳細です。)

3) ビューポートの設定を一般的なものに修正しました。

世間一般にweb掲示されている、

<meta name="viewport" content="width=device-width, initial-scale=1">
へ変更しました。詳しい経緯は下記をご覧下さいませ。
blog-image

ビューポートが設定されていません

随分前に明けておりますので今更ですが…本年も宜しくお願い致します。m(__)m今年の初投稿が、『昨年末にGoogle Search Consoleで「ビューポートが設定されていません」というエラーが表示された話』ってのもどうかと思いますが、この度無事に修正されたので一応(備忘として)記事にしておきます。Search Console を使って自分のブログを調べるようになったのは昨年なので、あまり詳しくありません。申し訳ございませんが質問はご...

以上、ご不明な点がございましたらコメントをお願い致します。

2021-02-22 (Mon)

pタグとbrタグの使い方って、どうしてます?

FC2の新管理画面(β版)投稿画面がお披露目されて<p>タグを使う方も増えて来ると思われるので、テンプレートのスタイルシート修正が終わり次第更新をしようと作業中ですが、その前に<p>タグと<br>タグの使い方について「私の」考えを書いておこうと思います。(異論は有るでしょうが、あくまで私的な意見です。m(__)m)

簡単に説明だけ。

<p>タグはもともと英語の「paragraph(パラグラフ)」に由来する「段落」を意味するhtmlのタグで、<p>~</p>のように、コンテンツを囲って使用します。
<br>タグは「line break(ラインブレーク)」の略で、挿入した位置で改行を行うタグです。終了タグ無しで使います。

段落(<p>タグ)…1つの主題を持った文章の切れ目
改行(<br>タグ)…長い文章を途中で区切って行を新しくする事。

なので、私的には<p>タグ内の長い文章を「読み易くするために」<br>で改行、は有りだと思います。

色んなサイトの解説で「<br>はGoogleに嫌われる」と書かれているのですが、使い方次第だと考えます。
改行を目的として「空の<p>タグ」が使用されていれば、文章のまとまりであるはずのものが無いのですから、クローラーも正しく認識できません。かと言って余白を設けるための<br>タグ乱用等も、デバイスによってはレイアウト崩れを起こす原因になるので、控えるべきだと思います。
しかし、段落内の文章が長ければ「読み易いように」改行を加えても良いと思います。 読み難くて飛ばされるより、読んでもらった方が良いですから。

この度の修正案件で、今迄自分が記事を書く際かなりいい加減だった事を認識しました。
HTMLをセマンティクスにマークアップする(タグを正しく使い、意味や目的を持たせる)事で、機械が理解し易いようになり、SEOやアクセシビリティも良くなります。

折角の機会、これからは正しく記述していこうと思います。

↓とても分かり易い記事リンクを頂きましたので是非ご訪問下さい。

blog-image

日本語における段落とパラグラフについて考えてみた。

えっ!? どうしたの? なんか変なモノでも食べた? 縦書き・横書きと字下げについて。 今日は日本語の「段落」と「字下げ」について書いてみます。先日とある事をキッカケに、日本語における「段落」とその始まりを表す「字下げ」という形式について考える機会がありました。そもそも「段落」とは何なのか?どうして「字下げ」を行うようになったのか? 日本語を用いた文章をただWeb世界に垂れ流しているだけの個人ブログで...

2021-02-20 (Sat)

重要!当テンプレートでのPタグについて

随分前から有る共有テンプレートの習慣というか、問い合わせの多い案件故の説明簡素化というか、綺麗事無しで『製作者の怠慢』というか…多くの古いテンプレート同様、私の作ったテンプレートも<p>タグの上下marginをゼロにしています。

HTMLのタグをご存知の方であれば、<p>タグは段落を意味するもので<p>~</p>で囲まれた範囲が段落として表示される事を知っています。

投稿画面に文字を打つ分には問題無いのですが、<p>というタグの特性を知らずに利用すると、初期値である「margin(余白)が上下に各1行分, 左右は0」が付いてしまいます。
例えそれが<p>タグの正しい表示で有っても、利用者の意図しない行間が出来てしまい「記事を入力しているだけなのに何故?」とか「テンプレートに問題が有るのでは?」と言う問い合わせが時々ございましたので、スタイルシート内でリセット(余白ゼロ)しています。

通常の文字入力(簡易見本なので、改行をShift+Enterで<br>タグにしています。)
p-tag1
Pタグ(段落)を利用した文字入力
p-tag2

<p>タグ(段落)を使った入力での当方テンプレートの見え方は、リセットCSSによってmargin(余白)をゼロにしているので下記のようになります。

p-tag3
↑青い矢印部分に余白は有りません。
しかし、<p>タグの本来の表示なら↓この形が正しいのです。
p-tag4

管理画面(β版)も記事投稿画面も新しくなりましたので、今後<p>タグ(段落)を使って記事を書かれる方も増えて来ると思われます。
また最近は「<p>タグ(段落)を使用しているので上下余白が欲しい」という正規の表示を求める方も居りますので、この機会に記事部分の段落表示を初期値に戻す事にしようと思います。

今迄ご利用頂いていて、このまま(<p>タグの上下marginゼロ)で不便の無い方は変更無くお使い下さいませ。
これからの記事投稿で「<p>タグを使っていきたい」という場合は、現在ご利用のテンプレートのスタイルシート編集枠内の一番下に、下記のcssを追加して下さい。

.con_body p:not(.moji-c):not(.mask):not(.title-list):not(.all_day):not(.all_boutou):not(.all_cate){
margin:1.8em 0; /* 段落上下余白 */
}

al_responsive2c-l,r al_responsive3c
lace-al2,al3 lace-d2c,d3c は少し異なるので下段『ReadMore』をお読み下さい。

過去のテンプレート分まで遡ると、表示枠のclass『.con_body』内に<p>タグを幾つか使用してきましたので、それらを含めて初期値に戻してしまうとデザインが崩れてしまうため、上記のようにclassを除外しています。
表示枠内にclassを持っている場合にのみ:notが適用されますので、当方の古いテンプレートでも利用出来ます。

今後の修正・更新として、現在共有化しているテンプレートのリセットCSSを見直し、<p>についてもmarginを戻すCSSを追加、使用時は初期値(上下余白有り)になるように変更致します。
(余白不要の場合は削除可能です。)

これらは、テンプレートの修正・更新が完了致しましたら改めて更新内容を記事にしたいと思います。