エディタの機能解説

この記事では、画像の挿入方法や文字の大小の変更、見出し、目次の作成などをご紹介していきます。

文字の装飾

文字の装飾は、メリハリやリズム、文字の強調、読み手を飽きさせないなどといった目的があります。

文字の装飾することで、見栄えがよくなり統一感も生まれます。
また、読者にポイントをわかりやすく提示できるので、読む負担も下がるというメリットがあります。

それでは、inkrichの文字装飾について説明していきます。

テキストのサイズ

スタイルを変更したい箇所を選択すると、このように候補が出てきます。

一番左の赤い四角で囲われているのは、テキストの大きさを5段階で変更することが出来ます。

サイズ:XS・S・M・L・XL

通常のテキストのサイズは「M」です。

テキストのサイズのイメージはこのような感じになっています。

XS・S・M・L・XL

太字

左から2番目の「B」マークを押すことで、太字に変更することが出来ます。

例)通常 太字

イタリック(斜体)

左から3番目の「I」マークを押すことで、イタリック(斜体)に変更することが出来ます。

例)通常 イタリック(斜体)

下線(アンダーライン)

左から4番目の「U」マークを押すことで、下線(アンダーライン)に変更することが出来ます。

例)下線(アンダーライン)

取り消し線

右から3番目の「S」マークを押すことで、取り消し線を引くことが出来ます。

例)取り消し線

強調

右から2番目の「<>」マークを押すことで、サンプルコードが書けるようになります。

強調は以下のように、インラインのサンプルコードを書くために使います。

<const foo = "bar">

リンク

一番右のマークを押すことで、リンクを付けることが出来ます。

URLを入力してください」の箇所にリンクを入力します。
新規タブでリンクを開く」をチェック入れると新規タブでリンクを開くことが出来ます。
リンクを入力したら、「更新」をクリックしましょう。

このようにテキストに下線が引かれて、テキストをホバーするとリンク先が表示されます。

例)リンク

見出し

見出しはこのようなサイズ感となっています。


見出し レベル1

見出し レベル2

見出し レベル3

見出し レベル4

見出し レベル5
見出し レベル6

見出しの設定は、赤い枠の中をクリックすると、選択画面が出てきます。
選択画面を下にスクロールしていくと、「見出し レベル1」、「見出し レベル2」の表示をクリックすると見出しが反映されます。

クリックするとこのような感じに「見出し レベル1」に変更することができます。

画像の挿入

画像の挿入は、赤い枠の中をクリックすると、選択画面が出てきます。
その中の「画像」をクリックします。次に「クリックして画像を挿入」をクリックします。
アップロード」と「ライブラリ」を選択できます。

アップロードの場合は、「ファイルを選択」または、「ドラッグ&ドロップ」で画像を挿入することが出来ます。

プレビュー

これらが正しく反映されているかを確認するために、「プレビュー」機能を活用しましょう。

右上の赤い四角で囲われている「プレビュー」を押すと公開した時の同じ画面を確認することが出来ます。
プレビュー画面に左上に、「スマホサイズにする」ボタンがあるので、スマホサイズでの確認もできるので、とても便利です。
PCサイズにする」をクリックすれば元の画面に戻すことが出来ます。

目次

目次の設定は、赤い枠の中の「目次」をクリックすると、ブロックを挿入することが出来ます。

h2にはピンクの縦線が付き、h3は●が付き、h4以降は■が付きます。

順序付きリスト・順序なしリスト

赤い枠の中の「順序付きリスト・順序なしリスト」をクリックすると、ブロックを挿入することが出来ます。

例)

  1. 順序付きリスト1
  2. 順序付きリスト2
  • 順序なしリスト
  • 順序なしリスト

引用分

引用文の設定は、赤い枠の中の「引用文」をクリックすると、ブロックを挿入することが出来ます。

引用分はこのように背景が薄グレーになります。

区切り線

区切り線の設定は、赤い枠の中「区切り線」をクリックすると、ブロックを挿入することが出来ます。

区切り線は下記の線になります。


コード

コードの設定は、赤い枠の中の「コード」をクリックすると、ブロックを挿入することが出来ます。

赤い四角で囲んである、「Markup」をクリックすると、「CSS・Java・Kotlin」などの種類が選ぶことが出来ます。
それぞれの言語に合わせたカラーリングになります。

このような感じで「コード」を使うことが出来ます。

Kotlin
var num = 0
while (num < 5) {
println(num)
++num
}

Raw HTML

Raw HTMLの設定は、赤い枠の中の「Raw HTML」をクリックすると、ブロックを挿入することが出来ます。

以下のように直接HTMLを書きたい時に使います。

テキストを真ん中に

テキストを右寄りに


いかがでしたでしょうか。

テキストを変更したり、ブロックを挿入することで見栄えや、統一感が出るのではないでしょうか。
また、直接コードをかけたりするのでとても使い勝手が良さそうです。

この記事を参考にし、色々試してみてください。

inkrichのご登録はこちらから

inkrich
inkrich の管理画面です

前回の記事はこちらから

HP作成について
この記事では、「ホームページを作りたい」方向けで構成しております。元々あるテキストと画像を変更するだけで、とても簡単にホームページを作成することが出来ます。それではホームページを作成手順をご説明していきます。作成手順作成手順について説明していきます。サイト追加まず最初に、上側の赤い枠をクリックして、サイト一覧を表示し、「追加」をクリックしましょう。続いて、赤枠右側の「ホームページを作りたい」をク...

ヘルプ記事一覧はこちら

inkrichヘルプ
inkrichのご利用をお助けします。