久々にFC2ブログ新投稿画面で記事を書いた感想

久々にFC2ブログ新投稿画面で記事を書いた感想

FC2ブログのあれこれ
2018/12/05
0
vanillaice (Akira)
vanillaice (Akira)
Education

この記事も新投稿画面を利用しています(「HTML表示」の方で書いてます)
いずれは「新」の方に統合というか一本化されるのかなぁ、と思いまして今から練習 (∵`)
というわけで私なりにFC2運営に期待したい点、要望、改善点など。

「本文」と「追記」がわかりづらい

旧投稿画面では見た目にボックスがはっきり分かれています。

【旧投稿画面の「本文」と「追記」】

新投稿画面は別々のボックスになっているのではなく任意の行で「追記を書く」をクリックすることでそこを堺に上下で振り分けるタイプ。

【新投稿画面 通常モード の「本文」と「追記」】
【新投稿画面 HTMLモード の「本文」と「追記」】

あう ( ̄∀ ̄;)
新投稿画面の通常モードはまだ良いとしてもHTMLモードの方は htmlタグで仕切られている んですね。
htmlモードを利用する理由は「記事内でhtmlを書くから」なので、これはかなり不親切です。自分で書いたhtmlに追記の区切り用htmlが紛れるわけですよね。行間を空けるなどしてすぐにわかるようにしておく必要がありそう。

新投稿画面のhtmlモードの方は <hr> というhtml要素が出現していますが、これは通常モードの仕切り線がhrで表示されており、それをそのままhtmlモードでhtml要素として可視化しているだけです。投稿済の記事にhr要素が残される心配はありません。

でもこれすごいことしてるんですよ(笑)
hrというのはいわゆる void element(空要素)といって、終了タグを持っていません。imgなどもそうですよね。終了タグを書いてしまうと構文エラーです。
そのhr要素に対しCSSの before疑似要素 で「ここから追記」のテキストを入れてるんですね。ですが疑似要素というのは原則として終了タグを持たない要素には使えません。
そこでどうなるかというと、ブラウザ側は本来存在しない </hr> という終了タグを無理くりくっつけて疑似要素のテキストを表示しています。従ってガチな構文エラーです。ちょっと無理矢理すぎてウケました(笑)
まぁでも投稿済の記事には影響しませんのでヨシとする ←

本文用ボックスと追記用ボックスは分かれていた方が良いんじゃないかと思います。ますます「追記」を使わない人が増えてしまいそう。

FC2ブログの「追記」の意義と有効活用の考察

FC2ブログの「追記」の意義と有効活用の考察

気づいたのですが、FC2古参ブロガーさんでも 追記 の使い方や意義をご存知ない方が多いようです。 というより旧来の「意義」「必要性」と現在のそれが変化している、と言ったほうが良いのかもしれません。 状況・環境の変化に伴う利用形態の変化と言いいましょうか。 要約タイプのテンプレートをご利用の方はあまり深く考えなくてOKです。 全文タイプテンプレートをご利用の方は今後の方針を熟考した方が良いと思われ。...

ただ悪い面ばかりではなくて、新投稿画面の通常モードの場合には区切りを変更しようと思ったときに簡単にできます。クリックするだけで元の位置から切り替わります。
ボックスが分かれているとコンテンツをコピペで移動させる必要がありますよね。

しかしhtmlモードの画面が若干黄色。目が疲れてるのかと思ってしまいます(笑)
まぁまぁまぁ、これは自分がどちらのモードに滞在中かすぐにわかるようにするための工夫ですよね。はいそうですね。我慢します ( ̄∀ ̄;)

HTML表示にはプレビューが無い

これはもう仕方がないですね。ほとんどのユーザーさんはこちらのモードを使わずに済ませると思いますので中級あるいは上級者向けということでプレビューは無し!!!(笑)

htmlを使うか使わないかはっきり決める必要がありそう

使うなら使う、使わないなら使わない、この方針を最初に決めてから記事を書かないと困ったことになります。
新投稿画面の通常モードというのは要するに旧投稿画面の「改行の扱い『自動』」とほぼ同じなんですね。
ということは…

FC2ブログで謎の空白行ができるのはソースの途中改行が原因です

FC2ブログで謎の空白行ができるのはソースの途中改行が原因です

FC2ブログの 旧投稿画面 をお使いの方向け記事です。 旧投稿画面には 改行の扱い を2種から選択できるようになってます。ひとつは「自動」もうひとつは「HTMLタグのみ」です。 htmlタグのみ設定を利用するのは恐らくhtml中級〜上級者でしょうから良いとして、初心者の方の大半は「自動」に指定してあるのではないかと思います。 記事内で何かしらのhtmlを用いる際、自動指定の場合にはソースコードの書き方に気をつけま...

上記は改行の扱い『自動』の場合にはhtmlを横に繋げて書かないといけませんよ、htmlソースの途中で 改行 してはいけませんよ、という記事内容です。
新投稿画面の通常モードはこれと同じ性質ですから、記事を書いている途中で「ちょっとhtml使おうか…」と思ってHTML表示をクリックすると…

【新投稿画面の通常モード】
【新投稿画面のHTMLモード】

当然このように文章が全て横に繋がっている、と。
こんなだともうどうして良いかわかんないんじゃん。たぶん (´・ω・`)
初心者の方だとどこにカーソル置いて良いかすらわからない気がします。

というわけですから「今日は見出しの装飾を使うぞ!」だとか「あのサイトからコピペしたCSSを使ってみようかな」という場合には モード切り替えを利用せず最初から最後までHTMLモードで書く ぐらいの意気込みが必要かもしれませんね。
HTMLモードで書く場合にはソースの可読性を考えてソース内改行OKです。その代り改行したい文末には逐一 <br> の記述は必要です。

新投稿画面の通常モードで書いた記事のhtml構文はめちゃくちゃ

もう一度「あいうえお」のサンプルを。

通常モードを使う人の多くが初心者だと仮定すると、正しい改行の仕方をご存じない可能性が高いです。 何度も繰り返し書いていますが、Enter/ Return キー押下は改行ではなく 改段落 です。
改行は Shift + Enter/ Return キーです。
改行だと思って改段落した場合には上記スクリーンショットのようなdiv要素がたくさんできてしまいます。
正しく改行すると以下の内容になります。

Shift + Enter での正しい改行】

とはいえdiv要素は特に意味を持たないhtml要素ですから、過剰に心配する必要はありません(かといって良くはないが)
これがp要素だと問題あるんですけどね。通常の改段落はそのものズバリ「段落」を意味するp要素になりますが、FC2ではdiv要素です。

HTMLモードのフォントがmonospace

これなー。どうかなー ( ̄∀ ̄;)
新投稿画面htmlモードのフォント指定は

font-family: Inconsolata, Consolas, Courier, 'Courier New', sans-serif;

これらは 等幅フォント であり、プログラミング言語を扱う際にはよく用いられるフォント種です。
htmlモードはhtmlを扱うためのモードですから本来はこれで良いですし上級者には歓迎できる点ではあるのですが。

初心者の方がhtmlモードを利用する際には等幅フォントだと 全角と半角の区別がつけづらい んですね。非常にわかりづらいと思います。特に スペース
スペースは空白ですから目に見えません。等幅フォントの半角スペースの空白は一見すると全角スペースのそれと同じに感じてしまいます。

htmlの絶対的NGそれは「全角の利用」

htmlの絶対的NGそれは「全角の利用」

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。 htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...

自分でhtml構文を組むことはできなくともサイトからコピペで利用することがある、という場合には旧投稿画面の「改行の扱い『HTMLタグのみ』」をおすすめしていますが、旧投稿画面が今後も使えるとは限りません。
新投稿画面がデフォルトになった際には今まで以上に注意しなければいけませんね。

画像の扱いにもっと工夫が欲しい

結論を言えば「新投稿画面」は次世代用といいますか。パソコンを開いてhtmlとかごチャゴチャいじるとかではなく、ともかく簡単に投稿ができること、「簡単は正義」のwebのためといいますか。
ですからもう「htmlなんてごくごく一部のユーザーしか使わないでしょ」という感じ。これからはそうなっていくのかもしれませんね。

なので新投稿画面も「できるだけスッキリ」「できるだけ簡単に(多機能にしない)」「できるだけ直感的に」を目指しているのだろうと思います。
とはいえまだまだ文章を書くにはスマホよりパソコンの方が断然楽なんですよね。閲覧はスマホ、記事を書くのはパソコン、という層はかなり多いのではないかと思います。

で、今のところ画像の掲載が簡単じゃないわな (´・ω・`)

  • ドラッグ&ドロップで放り込める(アップロード画面を経由せずに掲載できる)
  • マウスで簡単にサイズ変更できる(またはサイズ変更のツールを付ける)

これらの機能はやっぱり欲しいところではないでしょうか。
はてなブログはドラッグ&ドロップができますね。Yahoo!ブログはマウスでのサイズ変更と縦横比を維持した上で値変更によるサイズ調整が可能です。

まとめ

正直上級者はなんとでもなると思うんです。必要があるとすれば「慣れる」ことだけ。
そして初心者の方は基本的には通常モードのみを利用し、htmlは使わない、と。
中級者の方が一番困惑すると思うなー。たぶん (´・ω・`)

今回新投稿画面のhtmlモードを利用して記事を書きましたけれど、そんなに悪くはないですよ。ただ画面が黄色っぽいのが苦になって仕方がありません(笑)
あとは下部に余白を取って頂けると嬉しい。長文書いてると画面の下の方ばっか見てなきゃいけないので疲れます。htmlモードですから自分で空白行入れておけば良いんですが、それは余計な手間ですしふとしたときに書く位置間違えちゃう ^^;

あまり進化していないというか、本気でリリースする気あんの?って感じの新投稿画面ですが、私自身はなるべく使っていこうと思います。たぶん。や、どうだろう(笑)

あ、あとですね、終了タグを省略できる要素がhtmlにはいくつかあります。liとかtrとかtdとか。
これらを省略して投稿しておくと編集時に開いたときには終了タグが補完されてます。
これは中級者の方は勉強になるかもしんない。
え?そんなとこに?という感じになるかもしれませんが、補完の基本は後続要素の開始タグの直前です。html豆知識(?)として。
もしかしたらレイアウト崩れの原因に自力で気づける機会が増えるかも、と個人的に期待(笑)

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)