Top Page › Template › テンプレ修正等 › 重要!当テンプレートでのPタグについて
2021 · 02 · 20 (Sat) 03:05

重要!当テンプレートでの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を追加、使用時は初期値(上下余白有り)になるように変更致します。
(余白不要の場合は削除可能です。)

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

記事に段落を正規表示する場合は、オレンジの部分をスタイルシート編集枠の最下に追加して下さい。
下記テンプレート以外は上記のものを追加して下さい。

al_responsive2c-l,r
.con1_body p:not(.moji-c):not(.right-txt):not(.mask):not(.title-list):not(.all_day):not(.all_boutou):not(.all_cate){
margin:1.8em 0; /* 段落上下余白 */
}
.entry_state p{margin:0 !important;}

al_responsive3c
.con2_body p:not(.moji-c):not(.right-txt):not(.mask):not(.title-list):not(.all_day):not(.all_boutou):not(.all_cate){
margin:1.8em 0; /* 段落上下余白 */
}
.entry_state p{margin:0 !important;}

lace-al2,al3 lace-d2c,d3c
.con2_body p:not(.moji-c):not(.mask):not(.title-list):not(.all_day):not(.all_boutou):not(.all_cate){
margin:1.8em 0; /* 段落上下余白 */
}
.entry_state p{margin:0 !important;}
[Tag] * 重要 * 事前告知 * Pタグ
最終更新日 : 2021-03-06

Comments

No Subject

p要素、div要素、span要素。
むずかしいですね~
私のような文才の無い者にとっては何れも改行と思うのですが。
β版の管理画面(投稿画面)にpボタンが付いている事を初めて知りました。
(<p>タグの上下marginゼロ)を修正されるのでしたら、併せて(<p>タグがついたら字下げ)する事を御指導いただければと思いましてコメントしました。
2021-02-20-15:36 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

<p>タグは段落として使いますが、<div>や<span>タグはそれ単体では意味を持たないタグで、<div>は囲った部分をブロックレベル要素とし、<span>はインライン要素として使います。
(なので、どれも「改行のために使う」ものでは有りません。)
しかし、HTML5からはそれまでのブロックレベル要素とインライン要素という考え方はなくなり、もっと細かい「コンテンツカテゴリ」という文類に分けられました。
ただ、HTMLタグはブロックレベル要素の性質もしくはインラインレベル要素の性質を持ち合わせています。扱い方もほぼこれまで通りです。
呑兵衛あな様は色々カスタマイズされていらっしゃいますので使い方はご存知だと思いますが、詳しくはお調べ下さいね。

「<p>タグがついたら字下げ」の件ですが、字下げはあくまでも個々の感覚で必要とする方が限定されると思いますので、修正・更新では付けません。申し訳ございません。m(__)m(ただ、記事内にカスタマイズとして掲載したいと思います。)
「字下げしたい」という場合は、記事にある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; /* 段落上下余白 */
text-indent: 1em; /* 一文字字下げ */
}

これで最初の一文字が下がる表示になります。お試し下さいませ。
2021-02-20-19:47 aki
[ 返信 * 編集 ]

お疲れ様です

akiさん、こんにちは。
作業お疲れ様です。
FC2が新しい試みをする度、テンプレート作者さんたちは対応に追われて大変だと思いながら動向を見守っております。

現在、新管理画面の見たまま投稿で表示されるpタグは、きっと何かの手違いで勝手に挿入されるものと思っているので、以前のように挿入する、しないは利用者が判断できるようになるのでは?と個人的に思っています。
今までも同じように投稿画面にpタグボタンはあったのですからね。
(私も運営さんにリクエストしています。)

確かアメーバブログは、作成文内に勝手に挿入されるような仕様のようで、タグを知らない人が知らないうちに使える仕組みは初心者には有難いのかも知れません。
FC2のそのあたりが難しくて、移行したのちに他社ブログに再引っ越しした人も少なくないですから。

-----

今日はその話がメインではなく、akiさんのブログ、スマホからもPCからもとても見易くて、読みやすくて素晴らしい!
それが言いたくて、一言コメントさせていただきました。

ちなみに、私も配偶者のことを「旦那」や「相方」と記載したことが何度もあります。嫌う人がいるのですね。
旦那という呼び方は主人と呼ぶよりも格上で尊敬の念があるのですが…。
近年では丼父さんと記載するようにしています。

…と、長々とつまらない話をごめんなさい。
良い週末をお過ごしください。

2021-02-21-10:02 そふぃあ
[ 返信 * 編集 ]

Re: そふぃあ 様へ

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

テンプレートの<p>問題については、いつかは直した方が良いのだろうなぁと思っていました。^^;
問題から目を逸らしていた作者の怠慢の結果ですから…逆に(修正ばかりで)ユーザーの方々には申し訳無いです。

昔と違って今や文章にもSEOやアクセシビリティが求められるようになってきて、文章の段落に<p>タグが付く事は「正しい」と思っています。
『セマンティックHTML』という考えで「HTMLに”意味”を持たせたマークアップをする」というものです。
記述するものの意味に合ったタグを使う事で、検索エンジンの最適化(SEO)になります。マークアップする事で機械が理解し易くなるからです。
そして、スクリーンリーダーなどのツール利用者にとっても、見出しや段落等を適切に付ける事によって(ツールが)解析し易くなり、アクセシビリティの良いコンテンツ提供が出来ます。

まぁ、書く人用というよりは『機械用』ですね。そして、それによって検索結果が上がったり、閲覧者のためにもなるという…そういうものです。
旧投稿画面利用者が面倒になっても、FC2のエディタがそのよう(タグを自動付与する形)に変わっていくのであれば「慣れるしかない」んでしょうね。
旧管理画面だって何時かは無くなると思うし、沢山エディタが有ってもFC2も管理が大変ですし、皆が納得できなくても新規ユーザー獲得のためには何処かで無理やり折り合いを付けるでしょう。
古参が「時代の流れに沿わなくてはならない」という感じですかね。(;^_^A

-----

それと、とても有難いお褒めの言葉を頂き恐縮です。m(__)m
古いテンプレートで見比べると、随分と文字サイズや余白を大きく取るようになりました。
これって実は「自分が読み易いため」だと思います。^^;
色々老化・劣化してきてますので致し方無いというか…もうFC2歴14年半超ですし。
次期更新でフォントサイズも少し見直そうかな~。

呼び名の件、私も気にした事無かったのですが、今は色々言われるので。(どこに問題を見出されるか判らないし。^^;)
揚げ足取りや言葉尻を問題にされても…まぁ、私は一般人なのでそこまで気にする必要は無いかもしれませんが(でも言われたんですよ(。-ε-。)ボソッ)。
でも書きますけどね。また注釈付けておこうかと。

こちらこそ、良い週末をお過ごし下さい♪
2021-02-21-13:00 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-27-04:44 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。コメント有難うございます。(^-^)
後程そちらでお返事致しますね。
2021-02-27-19:18 aki
[ 返信 * 編集 ]






非公開コメント