旧投稿画面を楽に操るために「辞書登録の活用」

というわけで、「htmlが出てくるのがウザくて仕方がない」を克服できた方向け記事。旧投稿画面では エディターのツールを使うよりも辞書登録を活用した方が効率が上がります のでそのススメと、登録しておくと便利であろうhtml要素を挙げてみます。ついでにSEOのtips的な内容も少し。

事前説明

辞書登録には バイト数制限 がありますので、やたら長いhtmlタグ(あるいは要素)だと登録できない場合があります。ですから例えば

<p>ここに文章</p>

こうして登録するとどこに文章を書けば良いのかすぐにわかるガイダンス的役割になるのですが、「ここに文章」は消さなきゃいけませんし、バイト数を消費しますので

<p></p>

この形で登録をします。なので最低限「どの部位に」「何を書くか」の知識は必要です。上記サンプルだけで「どこに」はわかると思います。<p> が「開始タグ」で始まりの合図。</p> が「終了タグ」で、終わりの合図。

初級から中級へ脱する際には文章の書き方やその作業手順なども変わってきます。初心者の方へは「文章を先に書いてから変更したい部位をドラッグ選択状態にしてツールバーアイコンをクリック」が絶対手順なんですが、中級〜上級者は「やりたいことをその場ですぐに行う」という感覚に変わってきます。

そうなるとツールバーを利用するのが却って億劫になるんですね。ドラッグ選択とかもめんどくさい。そこでおすすめなのが辞書登録の活用です。

推奨登録名も記しますが、自身が最もわかりやすいものに変更しても構いません。「何で登録したっけ？」とならない、すぐに目星がつくものにしておくと良いでしょう。

テキスト装飾に関連するもの

太字テキスト
登録名: ふとじ

<span style="font-weight: bold;"></span>

斜体
登録名: しゃたい

<span style="font-style: italic;"></span>

サイズ変更
登録名: さいず

<span style="font-size: em;"></span>

数字は em の直前に記します。pxなどの絶対単位ではなく em をおすすめします。この単位は「標準フォントのx倍」という意味です。標準フォントとは記事内のフォントサイズを指し、テンプレートによって様々です。

文字の大きさは単独ではなく他のテキストとの「バランス」を重視するようにしましょう。例えば標準フォントサイズ13pxを利用中に、部分的にサイズを大きめにするつもりで <span style="font-size: 15px;">大きめ文字</span> を記したとします。その後全体的に文字を大きくしようと思い、標準フォントを15pxに変更したとします。その場合「他テキストよりも大きめに」を意図して指定した15pxフォントが他テキストと同じ大きさになってしまう、あるいは標準フォントの指定如何で逆に小さくなってしまう、という結果を招きます。em単位であればそういったことは起こりません。

またあるいはエディターのツールに倣い

• xx-small
• x-small
• small
• large
• x-large
• xx-large

これらを利用してもOKです。こちらも emと同じく相対単位 です。ただし記述する文字数は増えますね。スペルミスの可能性もあります。「だい」「しょう」などで予めサイズ指定済みの内容を登録しておくのも良いですね。

アンダーライン
登録名: かせん

<span style="text-decoration: underline;"></span>

打ち消し
登録名: うちけし

<span style="text-decoration: line-through;"></span>

<del></del>

text-decoration: line-through はただ消すだけです。delの方は 「間違いの訂正」「後になって削除された内容」を示す際に用います。見た目の結果は同じですが意味が違います。del要素の方は「削除するに至った文献のURL案内」などの付加属性があり、htmlというのは本来「定義・意味論」を司るものなので、心配であれば line-through の方を利用すると良いでしょう。こちらは単に見た目を操作するだけで意味論とは関連していません。文字数が少ないから、というだけで利用してはいけない、それがhtmlです。装飾目的ならば迷わずCSS(この場合はstyle属性を利用したインラインCSS)を利用します。

赤色テキスト
登録名: あかじ

<span style="color: red;"></span>

色指定はサンプルの red の部位を希望のカラーコードに変更するだけです。良く利用するカラーをそれぞれ登録しておくと良いでしょう。

エディターのツールバーを利用して様々な色を指定するのは個人的に 危険 だと思っています。何故なら「背景色の変更」を念頭に作業している方はほとんど居ないからです。青や黄のテキストは背景色が反転すれば視認性が著しく低下します。背景色を変更するかどうか今後のことはわからないですよね。ですから色とりどりの文章にするのは避けた方が良い。

また、エディターのツールもそうですし、今辞書登録でおすすめしている内容もそうなんですが、これは インラインCSS といって 優先度の高い指定 です。「強制力」と言い換えれば伝わりやすいかもしれません。簡単に言えば 修正困難 な内容です。実際に白背景から黒背景に変更し「青いテキストが読めなくなっちゃった。どうしよう (；ωq｀)」というご相談もよくあります。その場合「全部手打ちで書き直す」か「JSでカラーコードの文字列を強制変換する」かのいずれか。いずれも悪手です。インラインCSS利用時には大抵の場合クラス属性がありませんのでこういった方法を取るしか無いんです。

背景色変更時に一番困るのは「任意変更したテキスト色」です。実際にその場面が巡ってきたときに泣かずに済むよう、使う色は厳選するようにしてください。反転しても読めるかどうかの確認をする、ぐらいの気概で。それが中〜上級者です。

例) 青テキストのサンプル

このテキストは青、背景色は白です。

このテキストは青、背景色は黒です。

テキストの中央揃え
登録名: せんたー

<div style="text-align: center;"></div>

<p style="text-align: center;"></p>

文章をp要素でマークアップしている方は下の方。右揃えにするには center を right に変更。左寄せはデフォルト指定ですから何も指定しなければ勝手に左寄せになります。

文章構造などに関するもの

改行
登録名: あ

<br>

せっかく旧投稿画面を利用するのですから「改行の扱い『HTMLタグのみ』」をおすすめします。その場合は改行したい文末に改行タグが必要ですから、小指ですぐに押せる「あ」での登録をおすすめ。

段落(p要素)
登録名: い

<p></p>

頻繁に利用しますので押しやすいキーでの登録をおすすめします。もっと言えばp要素は終了タグ省略可能ですから <p> だけの登録も可。ただし正しい構文が書ける、という前提で。p要素は構文ミス(入れ子のミス)が発生するとブラウザが能動的に本来あるべき箇所に勝手に終了タグを付加しますので意図しない結果を生む場合があります。とはいえ元々ミスがあった、ということにほかなりません。

強意
登録名: きょうい

<strong></strong>

強意を示すstrongタグは文字を太くするために使うものではありません。
意味を強調するのが strong です。ただ文字を太くするだけならばCSSの font-weight: bold を使います。

strongは全体観で「ここぞ」という文章に使いましょう。記事で最も強調したい内容に利用するのが適切です。

特定要素に関するもの

画像の掲載(img要素)
登録名: がぞう

* サイズ指定不要の場合

<img src="" alt="">

* サイズ指定が必要な場合

<img src="" alt="" style="width: px; height: auto;">

画像には width属性 height属性 があるんですが、レスポンシブ時代に於いてはあまり意味が無いというか。CSSのwidth, heightプロパティとの違いは、画像そのもののサイズ指定ではなく、画像を掲載する領域の確保をするのがwidth, height属性です。

サイズ指定を行わない場合には領域(記事範囲)に収まる場合は原寸のまま、収まらない場合は記事横幅に対し最大100%のサイズで掲載されます(が、記事範囲内に収まるかどうかはテンプレートによります)
サイズ指定する場合のはheightプロパティではなくwidthプロパティへの値を指定すること、heightは原則 auto です。数値指定はpxの直前に入れます。

画像のアドレスはsrc属性の値として代入。 src="ここに画像アドレス"

alt属性 は 必須属性 ですから必ず書かなければいけません。とはいえ絵文字や単なる装飾など、文脈に特に関連が無いという場合には空の値が認められています。

alt属性無し

<img src="https:xxx.jpg">

alt属性に空の値

<img src="https:xxx.jpg" alt="">

クローラー(検索ロボット)はalt属性をちゃんと見ています。前後のテキストとの関連及びalt属性の値(なにが記されているか, 画像を表現するにどんな説明をしているか)などを見分け、画像検索結果や通常のページ検索結果のサムネイルに採用することもあります。ただしサムネイル選出に関しては 横最小 1200px が条件です。

「トップページサムネイルやOGP画像は横1200px以上」を推奨しているのは、Googleが1200pxをボーダーにしているからです。Google discover, AMPなど総じて横最小1200pxという明確な規定があります。

2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解

OGP画像 というのがありますよね。 各記事の「代表的画像」と表現しても良いかもしれません。 各種SNSシェアなどでもこのOGP画像がサムネイルとして表示されます。 FC2ブログ的に言い換えると トップページや関連記事リスト、新着記事リストなどで表示されるサムネイル画像 = OGP画像 その画像のサイズは一体どのぐらいが適切なのか。 2018年4月現時点で最低でも 横1200px が回答ということで良いと思います。...

vanillaice000.blog.fc2.com

記事に掲載する際の「表示サイズ」とは関係ありません。画像の原寸が重要になります。横1200pxの画像を width: 600px としてCSSで調整して掲載するのは問題ありません。画像の原寸(オリジナルサイズ)は常に「横1200px以上」を意識してアップロードすると良いでしょう。

サムネイル対象以外の画像でも重要と思わるものは1200pxを意識してください。検索結果にサムネイルつきで表示されることがありますが、OGP画像と同じものが対象になるとは限りません。記事のタイトル、文脈、そしてalt属性など、代表とするに的確と思われるものをGoogleのアルゴリズムが解析して選出しています。そして横300〜500px程度しかない解像度の低い画像はほぼ無条件で対象外にされてしまいます。

結局今「パソコンよりモバイル(スマホ)」という状況になっているんですが、スマホは高dpiなので画像のサイズ(容量ではなく縦横の寸法)が小さいとぼやけてしまうため、最低でも1200pxは必要だ、ということでしょうね。あくまでも縦横寸法のことです。容量については適切な処理(ロスレス圧縮など)で削減を行ってください。

テキストハイライト
登録名: まーく

<mark></mark>

目立たせたいテキストに用います。ブラウザのデフォルトは「黄色背景 + 黒文字」ですが、テンプレートに指定があればそれに倣います。

引用
登録名: いんよう

<blockquote></blockquote>

<blockquote><p></p></blockquote>

<blockquote cite=""><p></p><cite><a href=""></a></cite></blockquote>

文章をp要素でマークアップする方は2つ目。完璧に行いたい(引用元の明示など)方は3つ目。

引用は大抵の場合テンプレート側で装飾指定が行われています。だからといって 装飾目的に利用しない よう注意してください。他者の文章であることを示すためのhtmlです。個人の装飾のためではありません。

弊テンプレートに関連する事項

YouTubeレスポンシブ
登録名: つべ

<div class="box-for-video" style="max-width: 動画横幅px; margin: 0 auto;"></div>

YouTubeに限定したのは、FC2動画などには利用できないためです。YouTubeは iframe を直貼り、FC2動画はscript(JS)でiframeを生成、という形で表示方法が違います。

FC2エディターのYouTube掲載用アイコンからアクセスすると YouTubeからダイレクトではなく一旦FC2サーバーを経由 しますので、動画の選択肢が非常に狭くなってしまいます。なのでご本家YouTubeのサイトで埋め込みコードを取得すると良いですね。記載箇所は </div> の直前です。

見出し
登録名: みだし

<h2 class="xxx"></h2>

各テンプレートに見出しの装飾用CSSをデフォルトで記載してあります。内容をチェックし、xxx の部位を指定クラス名に置き換えてください。見出しの位については適宜変更。

画像ドロップシャドウ
登録名: しゃどう

<img class="shadow-attachment" src="" alt="">

まとめ

よく利用しそうなものをまとめてみました。エディターのツールバーを利用するより遥かに作業効率は良くなるはずです。今回旧投稿画面をメインにしていますが、新投稿画面は「なんでもなるべく自動」を理想とするエディターですよね。ところがそれ故に「すべきことが為されない」という問題点も。特に画像のalt属性なんかがそうです。FC2では自動でファイル名がalt属性に指定されますが、ファイル名が画像の説明になるとは限らない、というよりもほぼならない。ただGoogleはファイル名も見ているらしい。でもこちとら日本人やしな(お前は言えないじゃんと言われればそれまでだが)英単語と日本語には深い溝が (∵`)

というわけで、マークアップなんだかんだ、作業効率なんだかんだを意識し始めた方向け記事でございました。
* 本記事は予約投稿です。