【サンプル有り】記事作成、ブログ執筆のテクニックやデザインを徹底解説！

今回は記事を執筆する際のテクニックやデザインを紹介したいと思います！

これから紹介するデザインは当サイトの執筆機能を使う場合や、webサイトを作る際に使えるかもしれないので、

参考になったら幸いです。

(※ 以下のデザイン内の「サンプル」や「例」という文字は、レイアウトを保つ目的やコピペ用のためにあるものです。)

`

Ⅰ. ◆テクニック&デザイン紹介 ＿

• ▼ 見出しと横線の組み合わせ

① ― 見出し × 横線

---

サンプル

---

`

② ― ノート風横線

---

例

---

---

例

---

---

例

---

---

例

`

`

③ ― 文章区切り

例

例

`

`

• ▼ 見出しと箇条の組み合わせ

④ ― 見出し × リスト

• 例

• サンプル

`

⑤ ― 段差見出し

サンプル

• 例

  例

`

⑥ ― 箇条 × 見出し

• 例

  例

• 例

  例

`

⑦ ― 箇条 × 段差見出し

• 例

  サンプル

  例

  • 例

    例

  • 例

⑧ ― 段差見出し × 箇条

例

• サンプル

  • 例

    例

  • 例

⑨ ― 二重見出し

例

サンプル

例

例

`

⑩ ― 段差箇条

• 例

  • サンプル

  • 例

    • 例

    • 例

  • サンプル

  ````

⑪ ― 見出し × 段差箇条

• 例

  • サンプル

  • 例

    • 例

    • 例

  • 例

``

⑫ ― 見出しグリッド

例

サンプル

例

例

例

``

⑬ ― 見出しグリッド × 段差箇条

• 例

  • サンプル

  • 例

• 例

  • 例

`

⑭ ― 見出しの段差ボーダーライン

---

サンプル

---

サンプル

---

サンプル

例

例

`

⑮ ― 箇条の段差ボーダーライン

---

• 例

  ---

  • 例

    ---

    • 例

      ---

      • 例

      ---

    • サンプル

    ---

  • サンプル

  ---

• サンプル

---

`

Ⅱ. デザインの作成方法について ＿

非常に申し訳ないですが、記事の文字数の関係で、詳細な全てのデザインの手順を解説できませんでした。

しかしながら、上記のデザインは全て、コツさえ覚えれば簡単に作ることができるので、以下のⅢ. 大体の作成手順で紹介していきます！

また当サイト以外でHTMLからデザイン、レイアウトを作成したい方は、パソコンのブラウザ(chrome等)で、検証するを押し、コピペすることで全デザインを、使うことができます！

(詳しく知りたい方は、コメントなどで番号を教えて頂ければ、リプライや別記事で解説します。)

執筆機能 ＿

▼デザインの作り方及びツールバーの使い方

今回、紹介したデザインは全て以下の、青枠のボタンである、

見出し , 箇条 , 横線 を、押すことで作成することができます。

Ⅲ. 大体の作成手順 ＿

⑤～⑮ の作成手順のコツ

🌟→ コピペを利用する

ー具体的な手順ー

手順1. 段差を作りたい場所と違う場所で、箇条 + 文字(サンプル1) を作成し、コピペする。

サンプル1. (

• 何か文字を書きこれ全体←をコピペする

手順2. コピペ元の他にもう一つ箇条を作成し、サンプル2のように二つ目以降の箇条を作った後、エンターを押し消す。

サンプル2. (

• 適当な文字

• ここをエンターで消す

  (↓この後に)

• 適当な文字

  ここに入力マークが浮いてる状態で成功

手順3. 手順2で消した部分にコピペした元の箇条(見出し)を、別の箇条(見出し)にペーストする。(サンプル3)

サンプル3. (

• あ

  • サンプル1がペーストされていたら成功

以上で基本的なコピペによるデザイン作成の手順は完了です。

`

いかがだったでしょうか？

これらのデザインが少しでも参考になったなら幸いです。

またパソコンのクロームなどのブラウザでは、左クリック ＞ 検証する を押すと、全デザインがHTML要素としても表示されるので、

様々な記事をHTML要素として表示して、プログラミングやデザインの参考になるかもしれないです。

デザインの幅は広いと思うので、皆さん是非マイデザインを原稿に執筆してみてください！

お読み頂きありがとうございました。