BeginnerEngineerBlog

記事投稿ドキュメント

公開: 2021-09-13 23:53
更新: 2025-01-04 17:36
本サイトで記事を投稿する際のガイド的な記事です。参考にしてください。


こんにちは!

本サイトでの記事投稿について紹介します!
なお、記事を投稿するにはログインする必要があります。
また、記事投稿ページのArticleフォームほか、一部のフォームにjavascriptライブラリのQuillを利用しています。詳細な使用方法についてはDocumentation - formatsをご覧ください。

20241214追記
※ 本サイトで利用しているquill.jsはversion1.x系です

変更履歴
20211203
JUMP TOの説明を更新しました。
20230302
リミットアイコン追加
20230406
JUMP TOの仕様を変更しました。

記事の投稿


1.記事のTitle,Tag,Summary,Articleをそれぞれお好きに入力してください。
(Title,Articleは入力必須です。Articleは画像、動画のみの登録はできません。)



2.「登録」または「仮登録」で保存
登録は一般へ公開します。
仮登録はご自身のマイページでのみ表示されます。




サムネイルの登録


1.Articleフォームの一行目にカーソルを合わせ、画像アイコンをクリックして画像を選択(またはドラッグアンドドロップ)

20250104仕様変更


画像の投稿に記載していますが、画像urlでも登録できるように修正しました
詳しくは「画像の投稿」をご覧ください







2.登録、または仮登録をクリックして保存(Arricleは画像、動画のみの投稿はできません。)
3.完了



JUMP TOの設定


1.Articleフォームヘッダーの「H1 ~ H3」をクリック



2.ジャンプ対象の文字を入力


3.登録、または仮登録をクリックして保存


4.入れ子の設定

Hの数字が先に入力したHよりも大きい場合入れ子に設定できます




4.入れ子の仕様

H2だからと必ず真ん中に位置するわけではなく、H3だからと一番下層になるわけではありません。

先に入力したHの数字より大きいHはその子になります

以下サンプル

サンプル1



最初のH2は親がいないため必ずトップに位置します
次のH1はトップのH2より数字が小さいのでH2の子にならずトップに位置します
次のH2はH1より数字が大きいためH1の子になります

サンプル2



トップのH3,H2,H1はサンプル1の通りです。
その下のH3はH1より数字が大きいのH1の子になります
その下のH2はH3より数字が小さいですが、親のH1より数字が大きいためH1の子になります
以下同様の仕様でJUMP TOが設定されます


太文字、イタリック、下線、取り消し線


1.Articleフォームヘッダーの各アイコンをクリック
2.文字入力


なお、アイコンによっては同時に選択することも可能です。

3.解除


エフェクトを解除したい文字をドラッグし、画像のアイコンをクリック、または対応したアイコンを再度クリック


文字色、文字背景色の変更


1.Articleフォームヘッダーの各アイコンをクリック
2.文字入力




左寄せ、右寄せ、中央寄せ


1.Articleフォームヘッダーの画像のアイコンをクリック



タブの入力


1.Articleフォームヘッダーの画像の各アイコンをクリック



リストの表示


1.Articleフォームヘッダーの画像の各アイコンをクリック



blockquoteの設定


1.Articleフォームヘッダーの画像のアイコンをクリック


2.解除
再度画像のアイコンをクリック


codeを設定


1.Articleフォームヘッダーの画像のアイコンをクリック
2.文字入力(編集時はコードハイライトされません。)


3.解除
再度対応のアイコンをクリック

リンクを設定


1.文字入力
2.リンク設定したい文字をドラッグ
3.Articleフォームヘッダーの画像のアイコンをクリック
4.表示されたフォームにリンクurlを入力してsave


5.解除
入力したリンクurlを全て削除し、save


画像の投稿(20250104変更)


1.Articleフォームヘッダーの画像のアイコンをクリック



2. 画像urlかファイルを登録
※ ファイルは画像を選択すると自動でアップロードされます


または投稿したい画像をドラッグアンドドロップ

3.削除
デリートキーで削除

※ 登録・仮登録を行なっていない画像は一定時間後に削除されます
登録・仮登録を行なった記事内の画像は削除されません


画像のリサイズ


1.画像を投稿する
2.リサイズしたい画像をクリックして選択状態にする


3.選択された画像四隅いずれかをホールドしてドラッグ



動画の登録


1.Articleフォームヘッダーの画像のアイコンをクリック
2.表示されたフォームに動画urlを入力してsave


3.削除
デリートキーで削除


リミット



入力可能なパーセントをリングで表示します


クリックすると入力できる残りのキャパシティを表示します


キャパシティを越えると登録できません。

※ 画像ファイルは登録する前はbase64で表示されています。
サーバーに送信後画像ファイルに変換しているため、保存前と保存後のキャパシティが違う場合があります。
キャパシティオーバーした場合、画像等を投稿している場合は、登録、仮登録で一度保存するとキャパシティの容量を空けることができることができます。(仕様なので許してね)

20250104追記

ヘッダーの画像アイコンからの画像投稿はストレージにアップロードするように仕様を変更しました
ドラッグアンドドロップでの画像投稿は以前base64で表示されます


文字登録


1.Articleフォームヘッダーの画像のアイコンをクリック

2.フォームに入力して送信で登録

3.文字を挿入したい場所にカーソルを合して、登録した文字をクリックして挿入

4.登録した文字を削除する場合はゴミ箱のアイコンをクリック


結局


適当にぽちぽちしながら記事を投稿して、ご自身で操作を確認してください!

今後もBeginnerEngineerBlogをよろしくお願いします!





【広告】