The other way round

Welcome to my blog

FC2新エディターの見出しについて

sampleいやー 困った((((笑)
新エディターをいろいろ触ってみまして
旧エディターWYSIWYG(ウィジウィグ)にはなかったツールで
「見出し」
ってのがありますよね (´・ω・`)

そうかー 見出しかー ( ̄∀ ̄;)


見出し
というのはhtmlタグ表記すると

<h1> <h2> <h3> <h4> <h5> <h6>


とこう 全部で6段階あります
<h1>というのは「大見出し」で最上位
以降は小見出しということになります
通常はブログのタイトルが大見出し という形が多いです

で 今html5時代ですよね
見出しの入れ子がどうなのか 同じ位の見出しが同一ページ内に複数あっても良いのか
という点については
Googleのスパム対策チームのボスであるMatthew Cutts(ましゅー かっつ)さんが
「そんなの気にしなくて良いよ!(/・ω・)/」
とおっしゃってます

ただしバリデートサービスの一部では
位の小さい見出しの中に位の大きい見出しが入っとるやないかーい!
的な指摘・エラー判定を下してくることもあります
Lintとかそうですよね (´・ω・`)
個人的にLintは謎サイトです(笑)
なんだか批判のための批判というか
重箱の隅をつつくように「エラーにしてやっぞ m9(*´・∀・`*)」
ってドヤ顔が見える
そしてLintのサイト自体がLintバリデーションで満点どころか50点以下ってのが笑えるね
SNS連携(OGP)書くとすんごい減点くらいますしね
今時FBやTwitterシェアしたらアカンのかい(笑)

話しが逸れましたが
html的に新エディターの見出しがどうこう というのは恐らくないと思います
ここで問題なのは

デザイン(見た目, 装飾)

についてです
上位から順に小さくなるのが見出しなんですけどもね
親要素のフォント指定が100%の16pxだと仮定して
h4が100% (大抵の場合は16px つまり 1em)
h1は200%
h1なんてクソでっかいです (´・ω・`)

新エディターで見出しツールを利用すると
編集中に文字がとても大きく表示されますが
プレビュー画面を見てびっくり
「大きくなってない!emoji
実際に投稿しても
「やっぱ大きくなってないじゃん!emoji
ってなりますね 私のテンプレートでは((((笑)

理由は私がリセットしているからですー
リセット(リセットCSS)というのは
ページデザインをする際にブラウザ間(UA)の表示格差・表示誤差をなくすために
一旦初期化してしまう というものです
さらに デザイナーにとって都合の悪いものを初期化してしまえ というものでもあります(笑)

見出しだからといって必ずしも太くなくて良いですし
すんごい大きくなっていなければいけない なんてこともありません
何故ならhtmlは意味や定義であり 見た目とは無関係だからです

ここから対処
「新エディター使っていきます 見出しもバンバン使います」
という方は CSSソースから以下の項目を削除してください
2箇所あります


h1, h2, h3, h4, h5, h6,



h1, h2, h3, h4, h5, h6 {
font-size: 1em;
font-weight: normal;
margin: 0;
}



削除すると新エディターの「見出し」ツールが使えるようになります
使えるようになるってゆーか
実際は使えてるんですよ
使えてるんだけど文字が大きくならないもんだから使えてない気がして嫌よね って話しです
リセット削除でテンプレート中の文字サイズがおかしくなった方はご申告ください ^^;
よっぽど大丈夫だと思うけど 絶対とは言わない

あと見出しというのは文章の上下に空間ができるようになってます
記事内で使われた見出しも同様で 上下にある文章と距離ができます
それが好ましくない場合には

h1, h2, h3, h4, h5, h6 {
margin: 0;
}


をテンプレートのCSSに入れておいた方が良いかもしれないです
② を削除した場所に差し替えで入れておくと良いですね


んで これはデザイン上・見た目上のお話しなものですから
html構造とはまた別です
見出しを使う際には
それが本当に「見出し」とすべきものであるのか
見出しとはただ単に文字を大きくする・太くするための用途で用いるものではありません
同じく
<strong>

文字を大きくする・太くするためのものではありません
(新旧エディター共に「太字」は
<b>
)
このあたりは記事を書く方が上手にコントロールしてください

といわけでお手数ですが 該当されます方はCSSソース編集をお願いします (*_ _)
関連記事

Comments 6

-  
管理人のみ閲覧できます

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

2016/04/22 (Fri) 00:46 | EDIT | REPLY |   
Akira  
To 新作テンプレートの件 内緒さん

ありがとうございます
来週中に申請できるかと思います。
よろしくお願いします

2016/04/22 (Fri) 08:43 | EDIT | REPLY |   
きろろ  
新FC2エディタの見出し

こんばんは<(_ _)>

Akiraさんの記事で興味を持って新FC2のエディタ、使って見ました。

うーーーーん、見出しがねぇ
見出し1? h1がやたらと大きいですねw

って、なんで今更見出しなのかしら?


で、現在ホームで使われているテンプレート、申請されるんですか?

これって、もしかしてcolorboxを導入するの難しいでしょうか?
自力で頑張れるでしょうか?σ(^◇^;)


ちなみにですね……
今ふと気付いたのですが。
コメントを書いていると、いつもより改行の幅が広い? 感じがするのです。
って、勝手に改行されている? そんな感じです。
一応お知らせまで<(_ _)>

2016/04/24 (Sun) 00:41 | EDIT | REPLY |   
Akira  
To きろろさん

大きいですね(笑)
見出し1はh1ではなくh3ですので、h1はさらに大きいですー。
通常はブログタイトルがh1、記事タイトルがh2、というパターンが多いのでh3以降を使えるように配慮されているようです。

Colorbox導入はいつもと同じ手順で大丈夫ですよ。
ただLife-is以降のテンプレートの場合でColorboxをお使いになる方は、CSSソース末尾に

#cboxOverlay, #cboxWrapper, #colorbox {
z-index: 100005 !important;
}

これを追加してもらった方が良いと思います。
ページ内要素(ナビゲーションやページtopボタンなど)の重なり順が複雑になってますので、モーダルした時にヘッダーなんかが出てしまいます。
これ今個人的にお伝えしましたけれど、記事の方にも書いておきますね。

コメント行間については各ブラウザ依存にしてありました。
今1.5の数値で設定しましたがどげなもんでしょ (´・ω・`)

2016/04/24 (Sun) 11:27 | EDIT | REPLY |   
きろろ  
FC2の新エディタは使わない方針でw

慣れているほうがやはり、書きやすいのでw
見出しとか別にいらないしw

Colorboxの件、了解いたします。

コメントの行間、問題ないです。
昨日は改行すると、一行の幅がなんかひろく感じたんですよねw

2016/04/25 (Mon) 00:31 | EDIT | REPLY |   
Akira  
To きろろさん

FC2から公式にお知らせ出てたー (´・ω・`)
「当面は統合の予定はありませんので云々」
当面ってどのぐらい?
当面を過ぎたら統合ってことですよね(笑)
使いづらい... ( ̄∀ ̄;)けど慣れなきゃ仕方がないと思って少しづつ使っていこうかと (´・ω・`)
まだbeta版って銘打ってあるから少しだけ安心してます ^^;

2016/04/26 (Tue) 09:44 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *