Bloggerの欠点

先に欠点を申し上げますと、Blogger純正のエディタは物凄く使いにくいです。書式を維持してコピーしようとするとバグったりします。（HTMLレベルで編集できるようにしてしまった弊害でしょうか？）

そこで、この部活では以下の二つの方法どちらかを使って記事を書いて頂きたいと考えています。

• HTMLで執筆する。
• VSCodeでMarkdownとして執筆する。

HTMLを使える/学ぶ意欲があるなら、HTMLで執筆することも可能です。ちなみに、HTMLとは下のようなものとなっています。

<h1>大見出し</h1>
<h2>小見出し</h2>
<p>パラグラフ(段落)。本文がここに書かれる。</p>
<p>本文中で<b>強調したい場所</b>にはBlodの頭文字である「Bタグ」を使う。</p>

要するに、見出しは<h1>～</h1>や<h2>～</h2>で囲み、その他の段落は<p>～</p>で囲むというルールで執筆を行います。他にもいろいろなタグがあり、またJavaScriptというプログラミング言語を使えばそれらに動きを付ける事も出来ます。
HTMLを勉強したいならこの方法で執筆すると良いでしょう。

いっぽうで「いやあ、そんなの面倒だよ」と思うなら、二つ目の方法「VSCodeを利用」を使いましょう。それぞれの利用方法を解説します。

VSCodeでMarkdownを書こう

1. VSCodeをインストールしよう

まずはVSCodeをインストールしましょう。ここではその方法は省略します。

2. 設定を変更しよう

設定画面を開く

VSCodeをインストールできたら、次はMarkdownを書くために幾つかの設定を行います。メニューバーから「File(ファイル)→Preferences(ユーザー設定)→Settings(設定)」をクリックします。すると様々な項目を設定できる画面になるはずです。

（↓こんなのが表示されると思います）

Markdown Preview Breaksにチェックを入れる

上部にある検索ボックス（Search Settingと書かれている部分）に「Markdown Preview Breaks」とタイプしてください、するとそのままの名前の設定項目が見つかりますので、これにチェックを入れましょう。

3. Markdownについて知ろう

Markdownとは超ザックリ解説すると、「記事の書き方」です。HTMLを知らない人でも記事を書けるをように、HTMLをものすごく簡単にしたもの、とでも言えばいいでしょうか。
GithubやGoogle Colabなどでも使用されている、世界共通の文章の書き方ですので、覚えておいて損はありません。

まずVSCodeで「test.md」というファイルを作ってください。拡張子のmdはMark Downの頭文字でしょう。
続いて以下のスクリーンショットを参考に画面上部のボタンから記事のプレビューを開きます。すると画面が二分割されて左側が編集スペース、右側が記事のプレビューに分割されます。

画面の右上にある「Open Preview to the Side」というボタンを押します

するとこのように画面が二分割されます

これにて編集の準備が完了です！　それでは早速記事を書いていきましょう！

Markdown記法の基礎

1. 見出し

文章の先頭にシャープと半角スペースを書くことで、大見出し、見出し、小見出しを作ることができます。

markdown

# 大見出し
## 見出し
### 小見出し
#### 準見出し

これらの見出しは、Webクローラーによって重要視され、検索エンジンに引っ掛かりやすくなります。例えばこの記事の冒頭には「Markdown記法の基礎」という見出しがついています。検索エンジンはここを見て「なるほど、これがこのページの見出しだな。それじゃあ“Markdown記法”、“基礎”という語句で検索されたときに、このページを表示する事としよう」と考えるわけです。

記事を多くの人に読んでもらうべく、見出し機能は積極的に使いましょう。

2. 本文

markdown

本文です。
ここで一行だけ改行した場合「同じ段落内の改行」と見なされます。

二行改行すれば、「次の段落」と見なされます。

本文に関しては、普通に文章を書くのと同様に記述します。

3. 装飾

markdown

文章中に**強調**や~~取り消し~~を入れる事が出来ます。

このように、*印二個で囲んだ部分は強調表示され、~印二個で囲んだ部分は取り消し線が入ります。取り消し線はともかく、強調表示はよく使うかと思いますので、知っておきましょう。

4. リスト

markdown

+ これはリストです。
+ このように+と半角スペースの後に文章を書くことで
+ 箇条書きになります。
+ 注意点としては
ここでも「一行だけ改行した場合、同じ段落内の改行」
のルールが適応されます。

二行改行があれば次の段落、つまりリスト外判定となります。

既に上で書いていますように、+と半角スペースの後に文章を書くことでリスト（箇条書き）を作成できます。

markdown

1. 次は番号付きリストについてです。
2. このように数字とピリオドと半角スペースの後に文章を書くことで
3. 番号付きの箇条書きになります。

というように、番号付きのリストを作る事も出来ます。

5. 引用

markdown

> これは引用です。
>
> 半角の大なり記号の後に半角スペース、その後ろに文章を書くことで引用された文章と見なされます。
>
> 御覧の通り
ここでも「一行だけ改行しても、同じ段落」
のルールが適応されます。

二行改行（一行の空白行）があれば、新しい段落判定になります。

このようにして「引用」を書く事が出来ます。自分の文章以外（誰かのセリフなど）を添付したいときは、この形式を使うようにしましょう。

6. テーブル

markdown

|言語|難易度|使用場面|
|----|------|-------|
|Python|☆1|AI開発・画像処理・グラフの描画|
|C++|☆5|競技プログラミング・ゲーム開発・機械の制御|

上記のように書くことで、テーブルを作る事が出来ます。
なお、|---|の部分のマイナス記号は何本入れても問題ないですが、最低でも一本は書く必要があります。

7. コードの埋め込み

コードを埋め込みたいときは、`a=b+c;`のように書くか、以下のように書きます。

```Python
import numpy as np
print(np.arange(10))
```

import numpy as np
print(np.arange(10))

8. リンクの埋め込み

markdown

[KUMECホームページはこちら](https://kumec-medical-engineers-club.blogspot.com/)

上記のように[]で文字列を囲った直後に()でURLを書くと、リンクの埋め込みが出来ます。

9. 画像の埋め込み

markdown

![画像の説明](画像のURL)

上記のように!印の後にリンクの埋め込みを行う事で、リンク先の画像が表示されます。

実用上はmdファイルが入っているフォルダと同じ場所に画像を入れておいて、それらをまとめてBloggerの編集者に渡す流れになります。