理にかなったぷよキャン編集 文章力を装飾で誤魔化していく世界線

最終更新：2024/12/19

ぷよキャンって、記事書くのが難しいですよね。ぷよキャンというかCKEditor？

ツールが使いづらい、挙動がよく分からない、装飾が出来ない…
書きたい内容はまとまっているのに、編集段階で躓いて萎える人も多いでしょう。

という事で今回は、ぷよキャンでの編集テクニックについて適当に書き殴っていこうかと思います。
それでは、やっていきましょうか。 ぷよキャンの公式下書き機能、罠です。(ひろゆき並感)

なんと、下書きを作成したタイミングが記事の作成日時となるイカれた仕様です。
投稿は作成日時順に掲載されるため、頑張って書いても他記事の下に埋もれた状態で投稿されます…
 
そこで代替案としてオススメするのが、下書き用の非公開記事の用意です。
これならば下書きを作成しつつ、投稿時のデザインを確認する事も可能です。

投稿する際は、非公開記事から新規投稿のページにソースをコピペするだけ。 使い回す装飾をコピペするための、装飾用非公開記事を用意しましょう。
装飾に限らず、よく使用する色のコードや、表記揺れしやすいワードをまとめておくのも良いかも。 「検証」とは、右クリックで出てくるメニューの多分一番下にあるアレです。
Chromeだと「検証」、Edgeだと「開発者ツールで調査する」、Firefoxでは「調査」らしい。他は知らん。

どうせみんなChromeだと思うので、Chromeの画面で進めます。
  皆さんは、携帯端末での記事の見た目を確認する際はどうしているでしょうか。
スマホでぷよキャンにログインして、自分の下書きを確認する？

実は、そんな面倒な事をしなくとも確認出来ます。
やり方は簡単。検証中に1クリックするだけ。
  なんて思った事はないでしょうか。
そういった時にも「検証」が役立ちます。

デザインにカーソルを乗せ右クリック、からの「検証」を押してみましょう。
すると、該当箇所のHTMLテキストが丸見えです。
 
HTMLテキストをコピーする事も可能です。
自分の巣(装飾置き場)へと持ち帰りましょう。 「横幅を制する者はぷよキャンを制す」
と言っても過言ではありません。

記事の横幅を把握すれば、計算してコンテンツを配置出来ます。 検証中に見えるHTMLテキスト上で「Ctrl + F」を押し、「detail_main」を検索してみましょう。
コイツは、ぷよキャンにおける記事の本体です。
 
カーソルを合わせると、「1000 × ****」と画面に出て来ます。
つまりぷよキャンにおける記事の横幅は1000px…なのか？(続くよ) まず携帯端末の定義ですが、画面の横幅が768px以下のものです。
携帯端末の場合、画面のサイズがそのまま横幅になります。

軽く調べた感じ、360pxを想定して作っていくのが無難そうですね。
Galaxy系のスマホだと、更に小さい画面(320pxとか)も存在するので注意です。 と、思うじゃないですか。実は違うんですよね。

結論を申しますと、先ほど導き出した横幅から62pxを引いた値が最終的な横幅です。
PCだと938px、360px想定のスマホだと298pxとなります。 左右に各31px分の詰め物がされているからです。
スマホでも容赦なく62px持っていかれます。
  最後に、ぷよキャンで使えるコンテンツの配置テクニックを紹介します。 コンテンツの比較をしたり推移を見る際は、横に並んでいた方が分かりやすいですよね。
そういう時は「flex」を用いましょう。

並べたコンテンツの合計横幅がスマホ画面の横幅を超えていても、これなら横並びが崩れません。
  細かなコンテンツを横に並べると、スマホで見た時に小さくなって分かりづらくなりますよね。
そういう時は「flex-wrap」を用いましょう。

PCではコンテンツが横並びに、スマホではコンテンツが横幅に合わせて折り返されます。
検証でスマホ画面を確認したり、ブラウザの横幅を縮めて確認してみましょう。