スマホで高機能エディタ

今日:1 hit、昨日:1 hit、合計:1374 hit

最高ランク : 8 , 更新： 2023/12/19 3:35:16

23/02/12 一部誤情報を修正
23/12/19 一部誤情報を修正+画像の挿入について追記+YouTubeの動画挿入を追加

こんにちは。スマホでどの程度高機能エディタが使えるのか試してみるためのブログです。
自分の整理用ではありますが、このサイトにはスマホで高機能エディタを使いたいけどわからない……という人が多くいるようでしたので、この記事はウメディア内に限りリンクフリーとしておきます。
お友達が困ってたらこの記事のリンクをぺたっとしてあげてください。私には無断で構いません。

・私はCSSやHTMLについて詳しい知識がありませんので、有識者の人から見るとおかしいと思う点があるかもしれません。そういった場合はご指摘下さると助かります。
・作中で使われている<>は全て[]に置き換えてから使用してください。そうしないとうまく反映されません。

この2点をご了承の上、ご閲覧下さい。

❁❁❁

・文字サイズの変更

文字サイズの変更は
<size=数字>文字</size>
です。

数字の枠には文字通り数字が入りますが、スマホで試したところ1〜7までの半角数字のみ反映されます。
0、8、9は反映されなかったので、最大サイズは7かと思われます。

大きさを確認してみましょう。
サイズ1
サイズ2
サイズ3
サイズ4
サイズ5
サイズ6
サイズ7

ちなみに、デフォルトのこの本文中の文字サイズはサイズ2と同じ大きさで書かれています。

・注意点
途中に改行が挟まれると失敗するみたいです。
例えば、

あいうえおかきくけこ

こちらはちゃんと小さくなっていますが、

[size=1]あいうえお
かきくけこ[/size]

こちらは途中に改行を入れてしまったことで失敗しています。

なお、改行が含まれなければ長文でも成功するみたいです。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

なので、半分中全ての文字のサイズを大きくしたい/小さくしたいという方は根気強く改行ごとにサイズ調整をするか、改行なしで文を書いたあと、空白で改行を調整して書くかのどちらかになると思います。どちらも大変だと思うので、頑張るぞ！という方は頑張って下さい。

【12/19 追記】下で紹介する文字寄せを使用すると文章内の全ての文字サイズがサイズ1よりも小さくならようです。おそらくサイズ0.8。

❁❁❁

・文字色の変更

文字色の変更は
<color=カラーコード>文字</color>
です。

カラーコードのところには文字通りカラーコードを入れてください。カラーコードって何？って方は調べてみるとすぐわかります。

これを使って文字の色を部分的に変えることができます。

これは、
<color=#87ceeb>文字の</color>
<color=#e6e6fa>色を</color>
<color=#4682b4>部分的に</color>
<color=#ffe4e1>変える</color>

こんな風になっています。見やすいように改行しましたが本当は改行は入れてません。

『色を』『変える』の部分はパステルカラーを使用しましたが、ここは背景が白いブログサイトですので、白に近い色はとても見辛いと思います。この文字色で全文書かれてたら読む気が失せますし、逆に全文警戒色なんかのブログもちょっと目がチカチカします。

好きな色を使って書くのが一番ですが、あくまでもブログとは人に読ませるものですので、あまりに読みづらい色は使用しないようにしましょうね。

しかし、これを逆手にとることもできます。
文字色を背景と同色、つまり白（#FFF)にすることで普通に読んでいるだけでは見ることができない状態にすることが可能です。

試しにやってみましょう。

『こんにちは。私は猫と犬が大好きです。』

『』で囲んだ中の文章は普通では真っ白で読めないはずです。
この文章は一般的に反転文字と言われています。
見方は簡単です。その箇所をコピーして、適当なメモ帳などにペーストするだけです。iPhoneでしたらリーダーを表示することでも読めます。
見たい人にだけ見てほしい、そんなネタバレ回避などのために使うと良いでしょう。

なお、見えないからといってこれは検索除けにはならないので、推しの名前を反転して検索除け……とかはできないので注意してください。

❁❁❁

・太字、下線の引き方

太字は
文字

下線は
文字
です。

ここまでの合わせ技で、

文字を大きくしながら太字にしながら下線を引いて色を変えることもできます

引かれる下線は元の記事の文字色に依存するみたいです。

❁❁❁

・合わせ技

さっきの
文字を大きくしながら太字にしながら下線を引いて色を変えることもできます
の部分は、

<size=3><color=#87ceeb>文字を大きくしながら太字にしながら下線を引いて色を変えることもできます</color></size>

こうなっています。
こんな風に、他のものと合わせて利用することもできます。

❁❁❁

・画像の挿入

画像の挿入は、
<img>画像のリンク</img>
もしくは、
<image>画像のリンク</image>
です。

画像のリンク化については

①Imgurやファイルなうなどの外部サイトを使う
②占いツクール内の画像アップローダーを使う
③ウログにアップしたものからリンクを取得する

等の方法があります。
まだ試していませんが、ファイルなうなんかを使えば画像だけでなくgifを貼ることもできるかもしれません。

まとめ機能を使用すればこのタグを使わなくても画像を複数枚挿入できますが、画像と文章を交互に書こうと思うと文字数の壁が迫ってきてなかなか難しかったかと思います。

画像を挿入しながら文章を多く書きたい！という方は是非。

【12/19 追記】
画像のリンク化ができないという声があったので追記。
①ウログの記事作成画面で「画像を選択」というボタンを押し、「ファイルを選択」から画像をアップロード。
②すると下の方に正方形で過去アップロードした写真がずらっと並んでいると思うので、それを長押ししてコピー。すると画像のリンクがコピーできているので↑の方法で挿入。
③たまにコピーしたリンクがとても長くなってることがあります。そのとき、何故かリンクにamazonという文字列が入ってることがあります。その場合はうまく表示されませんので、もう一度載せたい写真をアップロードして再度お試しください。

❁❁❁

・テキストリンク

テキストリンクのやり方は、
<url=リンク>文字</url>
です。

文字寄せ、見出しのタグを使っていない場合はこんな感じで自動的に下線が引かれるようです。こんな感じ、の部分を押すとウログのトップページに飛ぶようにしてみました。

なお、文字寄せや見出しを使っている場合はこんな風に、下線が引かれず普通の文字列と同じになってしまったので（リンク部分の直前に謎の空白は生まれましたが）、併用する場合はテキストリンク部分の色を変えるなど工夫をしないと見辛いかもです。

・注意点
リンク先はhttp://のリンクだと表示されないみたいです。

試しにやってみると、

ウログ
ウログ

こんな感じに、上のウログの文字列はただの文字になっています。

編集画面では、

<url=http://ulog.u.nosv.org/>ウログ</url>
<url=https://ulog.u.nosv.org/>ウログ</url>

こうなっています。http://ではなくhttps://ということだけが違います。

これを悪用してウログへのリンクだよ〜と言いながら変なサイトのリンク踏ませるとかそういう悪戯は本当にやめてくださいね。そもそもここって外部サイトへの誘導はグレーだったと思いますので、これを使って外部サイトのリンクを貼るのはあまりよろしくないでしょう。
自分の占いツクールでの作品を宣伝するとか自分のウログ内の投稿へ誘導するとか、そういった用途で使ってください。

❁❁❁

・文字寄せ

右寄せは、
<right>文字</right>
左寄せは、
<left>文字</left>
中央寄せは、
<center>文字</center>
です。

・注意点
使用すると何故かそのタグを使用して以降の文字が全てサイズ1で統一されるみたいです。
【12/19 追記】どうも文字寄せをするとサイズ1より小さいサイズで表示されてるようです。たぶん0.8くらいだと思われます。

対処法として、
文字寄せを使った以降の文全てのサイズを2に調整する（元の大きさに戻してみる）というものを試したのですが、

このように、編集画面ではサイズ2なのに実際表示されているものはサイズ1にされてしまいました。

ではひと回り大きいサイズ3にしてはどうか？

↓検証結果

小さくはないですが、若干普段の文字より大きいです。

これに関しては対処法が思い浮かばなかった為、何かアイデアのある方は教えてくださると助かります。

❁❁❁

・見出し

見出しは、
<h数字>文字</h数字>
です。

数字の部分には1〜3の数字が入ります。
サイズの比較はこんな感じです。

おそらくh1=文字サイズ5、h2=文字サイズ4、h3=文字サイズ3なんだと思います。
【2/13 追記】こちらの情報おそらく間違ってるのでアテにしないでください。

・注意点
使用するとこれもまた、何故かそのタグを使用して以降の文字が全てサイズ0.8で統一されるみたいです。文字寄せと同じく対処法は不明です。

❁❁❁

・改行

改行は、
文字
です。

使用してみると、

上の太字の方がpを使用した改行、下が普通の改行です。普通の改行に比べて、下方向に少し隙間があるのがわかりますね。

・注意点
使用するとこれもまた、何故かそのタグを使用して以降の文字が全てサイズ0.8で統一されるみたいです。上二つと同じく対処法は不明です。

❁❁❁

・YouTubeの動画挿入

YouTubeの動画挿入は、
<youtube>文字列</youtube>
です。

文字列の部分は、動画のリンクをコピーしたときに後ろについている部分です。
例えば米津玄師のlemonのリンクはhttps://youtu.be/SX_ViT4Ra7kです。この場合は SX_ViT4Ra7k の部分を文字列の箇所に入れます。

<youtube>SX_ViT4Ra7k</youtube>

となるわけですね。
今回はYouTubeアプリ内から共有を押して取得したリンクですが、WEB版のURLで一番最後の=の後ろに表示されている文字列を使用しても挿入は成功しました。

・注意点
使用するとこれもまた、何故かそのタグを使用して以降の文字が全てサイズ0.8で統一されるみたいです。上二つと同じく対処法は不明です。

❁❁❁

現状私が知っているものは以上です。また何か判明次第追記します。
やってみたけどうまくいかない！とか、質問がある！とか、文字寄せなどの対処法についてアイデアがある！という方は是非私のボードに書き込んでください。私の力の及ぶ範囲であればお答えします。

この記事が誰かの役に立ちましたら幸いです。