New Pool

The simple and cool theme for livedoorblog.

工事中でござる〜
ブログの書き方 HTMLタグを使った「New Pool」での基本的な記事の書き方

 

 

HTMLで記事を書く

 

 

「コピペだけで使える」という売りの、このテーマです。

もちろん、コピペのあとは普通にブログ投稿画面でカタカタすればいいのですが、
どのブログサービスにも、HTMLで記事を書く方法がありまして、それを使うかどうかで、記事の見え方や、検索のヒットの具合が変わってきます。

文章の見栄えがよくなり、SEO対策にもなるんです。
なので、基本的なことはおさえてほしいです。

もし、HTMLタグの知識がない場合は、入門としてこちらの記事がおすすめです。

初心者ブロガーが最初に覚えておきたいブログでよく使うHTMLタグ18選

とってもわかりやすいです。
さすがLIGさん。

 

ではでは、ブログ初めてのかたは、これを読んでいただけたら、ブログの書き方がザックリと理解できますので、おつき合いください。

 

 

【目次】これだけでオッケー! 基本のHTML

HTMLタグには、早めに慣れてください。かならず必要になります。

ライブドアブログでHTMLタグを使うときは、記事編集画面の右上の「HTMLタグ編集」というボタンを押してください。
これを押さずに、ひたすら文章だけを書いても、自動でタグがつくのですが、それでは見た目もSEOも美しくありません。



ちなみにぼくは、HTMLタグを、PCの辞書に登録して、普通の文章を打つようにスラスラとタグを打てるようにしてあります。

ですから、タグを覚えて、毎回わけのわからない文字列を打ち込む必要はありません。

具体的な方法は、こちらにまとめました。

ブログ執筆能率UP!HTMLタグを高速で楽に打ち込む方法

タグは使えるけど、打つのがめんどいというかたも読んでください。
HTMLタグをストレスなくスムーズに打ち込む方法を紹介しています。

まずは下の記事で基本を理解してくださいませ〜。
途中からでも目次のリンクから飛べま〜す

目次(リンク)
  1. 見出しの使いかた
  2. 本文の書き方
  3. 文字の装飾のしかた
  4. 文字リンクの入れかた
  5. 引用の使いかた
  6. リストの作りかた
  7. 画像を挿入する方法
  8. YouTubeの動画を埋め込む方法
  9. Twitterのツイートを埋め込む方法
  10. HTMLの大事なルール3つ

 

 

【知っておいてもらいたい】「HTMLタグ編集」について

HTMLタグを使った記事の書き方を紹介する前に、知っておいてもらいたいことがあります。
「HTMLタグ編集」という機能のことです。

ライブドアブログの記事編集画面にログインすると、デフォルトではビジュアルモード(タグを気にせずひたすら見えたまま直感的に書きなぐるモード)になっています。
これでは最適なHTMLが使えません。

なので、HTMLを使うために、毎回このボタンを押してください。「もう本当にHTMLわけわからん無理!!!」というかた以外は、HTMLで記事を書いてください。あとでHTMLの大切さに気がついて、全部書き直すのは無理です。めちゃくちゃ時間が掛かります。

頑張って覚えてください!なるべくわかりやすく説明しますので。
いちおうHTML無理なかたのために、ツールボタンを使った編集方法もまとめておきますね。必要な方をご覧ください。

【HTML無理!】ツールボタンで記事を編集する方法livedoorblog

 

 

1.見出しの使いかた

ブログを書く上で、見出しタグは避けて通れません。これはもう覚えていただくほかありません。
記事の見出しは大文字にしただけではGoogleさんに見出しとして認識されないので、なんの構成も作られていないのっぺりとした記事だと誤認されてしまいます。

せっかく長文で質の高い記事を書いても、ただダラダラと書きなぐった記事という扱いをされてしまうのはもったいないですよね。
なので、見出しのタグはもちろん、ほかのHTMLタグも使えるようになってください。

さて、見出しのお話に戻します。
基本的に、大きな見出しから順番に構成してもらえばOKです。
デザインを優先して順番を変えると、SEO的に不利ですし、デザイン的にも美しくありません。

読む上でも、順序立てて、綺麗な道筋で書かれていると、読みやすいですよね。

 

というわけで、見出しは以下のように構成してください。

大見出し1

中見出し1

小見出し1

小見出し2

中見出し2

小見出し3

 

HTMLタグは、一般的な「h2」「h3」「h4」を使用します。

<h2>大見出し1</h2>
  <h3>中見出し1</h3>
    <h4>小見出し1</h4>
    <h4>小見出し2</h4>
  <h3>中見出し2</h3>
    <h4>小見出し3</h4>

 

このタグの使い方をする前提で、デザインを作っていますので、たとえば、「h1」タグを本文中の見出しに使うことはしないでください。それは、SEOの観点からも、オススメしません。

「h1」タグは、一記事に一つがルールです。
記事タイトルにだけ「h1」が使われるようにしてあります。

 

見出しの最適な使い方については、こちらの記事で、とてもわかりやすくまとめられています。

見出しタグの使い方と絶対に知っておくべき注意点

知らずに記事を量産するとSEO的に不利です、あとで全部直すのはしんどいので、最初に知っておくべきことです。

お時間あるときに読んでください。

 

 

2.本文の書きかた

本文は、「p」タグで囲って、「br/」で改行してください。

基本です。

これは、記事の構成を、Googleさんなどの検索エンジンに正しく伝えるためです。

段落を意味するpタグは、通常、ページ内で最も多く使われる。従って、正しく使用すればページの内容を検索エンジンに正確に伝える事ができる。結果としてSEO評価に影響する。

ACラボ -ウェブ集客情報-

 

はじめてブログを書くかたは、とにかく文書を作りたくって、「p」タグなんて気にせずに、「うわあああっ!」って打ち込んでると思います。

そして、おそらく、最初から素晴らしい文章は書けません。

はじめた頃に書いた記事は、ほぼ黒歴史になることが決まっています。

なので、いきなり「p」タグを気にしたところで…っていうのはありますが、一応聞いてください。

 

まずは、「p」タグを使わずに書いた場合の例を見てください。

本文1

このように、見出しを左上のフォントサイズを変更する「文字サイズ」と書いてあるドロップダウンで大文字にして、本文はENTERキーで改行します。



記事投稿画面に入ると、HTMLタグを自分で打たずに記事を書きなぐるモードの画面が表示されます。とりあえず何も考えずにENTERで改行しながら文章を書きましょう。

そして、右上の「HTMLタグ編集」というボタンを押してください。



すると、

本文2

このように、タグが自動生成されているのがわかります。

改行した場所には、「br/」タグが作られていますね。

そうです。基本のHTMLである、「p」タグが作られていません。もちろん見出しの「h2」タグもありません。

それに、ぜんぶの文章が、隙間なく横に並べられるので、あとで文章を書き加えたいときに、この画面で、その場所を探すのは、とーーーっても大変です。

 

では次に、タグを使って書いた場合を見てください

本文4

HTMLタグ編集に切り替えて、直接タグを打ち込んでいます。

段落ごとに改行してあるので、あとで書き加えたいときに、とても見やすい構成になっています。

綺麗ですよね。

なにより、検索エンジンに、「あ、ちゃんとしてるな」と評価してもらえます。

 

タグを使った場合と、使わなかった場合の見た目の違い

タグの有無

こだわらない人からすると、「どっちでもいいじゃん」ってところかもしれません。

ぼくには大きく違って見えますが……。

さきほども言ったように、タグを使ういちばんの理由はSEO対策です。

記事の内容の良し悪しを判断しているのはロボットなので、見た目だけで、文章の構成が整理されているのかや、どの文章がブログの主旨なのかを把握できません。

人間が見て、良い見た目でも、ロボットにはどうでもいいんです。

ですから、タグを適切に使うことで、検索ロボットさんに、大事なキーワードや文章の構成を、しっかりと伝える必要があるのです。

 

人に読んでもらうためには、まず検索エンジンに評価され、たくさん検索に引っかかるようにするのが優先です。

でないと、どれだけ見た目が良くても、読んでもらえません。

 

補足1 「br/」タグの良し悪しについて

ちなみに、「br/」タグは使わない方がいいという意見があります。

スマホが主流の時代ですので、改行が多いと、スマホで表示したときに、文章が読みづらいのです。

詳しくは、「ヨッ!センス」さんの記事にまとめられています。

[HTML] BRタグは使うな! 私が「改行」を一切使わなくなった1つの理由

ただ、こちらの記事で紹介されている、「スマホから見た時だけ、「br/」が打ち消される方法」を、このテーマに使っているので、安心して改行してください。

 

補足2 行間を多く取る方法について

ぼくは、文章の切れ目の空白を作りたいとき、つまり、行間を多めに取りたいときに、

<p>&nbsp;</p>

このタグを使っていますが、これはオススメできない方法です。

かといって、「br/」タグを連続してうつのもよくありません。

いちばん推奨される方法は、「margin」を指定する方法です。

「もう嫌だ……めんどい…」というかたは、ここはスルーしてください。

ぼくもこの方法はめんどくて、使っていません。

徹底的にやりたいという猛者は、別の記事でまとめておきましたので、こちらをご覧ください……。

【SEOに最適】記事本文の段落間をマージンで指定する方法

 

 

3.文字の装飾のしかた

部分的に強調したいときに、太字にしたり、文字のサイズを変えたり、色をつけたりする方法を紹介します。

 

strong/font size/span styleを使って文字を装飾する

ぼくはマウスを使ってポチッとするのが面倒なので、太字にするタグと文字の大きさを変えるタグ、それと色を変えるタグを辞書登録してあります。
下にHTMLタグで装飾した例と、タグの使い方をご説明します。

 

⑴太字にする

HTMLタグで、文章を太字にします。(デフォルト)

HTMLタグで、文章を太字にします。(太字)

<strong>HTMLタグで、文章を太字にします。</strong>

 

⑵文字のサイズを変更する

フォントサイズ【6】はこの大きさです

フォントサイズ【5】はこの大きさです

<font size="5">フォントサイズ【5】はこの大きさです</font>

 

文字をデフォルトより小さく表示したいケースは少ないと思います。
著作権の表記とか、注釈を示すときは、<small>を使うといいです。

©️ 2018 New Pool

<small>@ 2018 New Pool</small>

 

⑶文字に色をつける

文章をピンク色にしてみましょう。

文章を緑色にしてみましょう。

文章を青色にしてみましょう。

<p><span  style="color: #ff3a7b;">文章をピンク色にしてみましょう。</span></p>
<p><span  style="color: #00ac97;">文章を緑色にしてみましょう。</span></p>
<p><span  style="color: #4496d3;">文章を青色にしてみましょう。</span></p>

 

色は、#◯◯◯◯◯◯の部分を変えるだけで、自由に変更できます。

洋色大辞典からお好きな色を見つけて、カラーコード「#◯◯◯◯◯◯」をコピペして入れ替えてください。

 

 

以上がHTMLで文字を装飾する方法です。
毎回HTMLタグを打ち込んで指定するのは大変なので、辞書登録する方法がオススメです。
くわしいやり方はこちらからどうぞ。↓

ブログ執筆能率UP!HTMLタグを高速で楽に打ち込む方法

ぼくの場合は、それぞれのタグを、このように辞書登録して、スピーディーに引き出しています。

「1ふ」「0ふ」<strong></strong>=太字
「さ」<font size="6"></font>=文字のサイズを変える(数字で指定)
「0あか」「す」<span  style="color: #ea5550;"></span>=文字の色を指定する

ヒント1

※「ふ」は「太字の【ふ】」 「1、0」はタグを左右で囲うので、位置的に覚えやすいため。

※「さ」は「サイズの【さ】」基本的に連想させやすい文字にするといいと思います。
数字の大きさで文字のサイズが変わるので、試しに使ってみて、だいたいどのくらいの大きさになるのか覚えておくと次回からスムーズです。

※「0」は「あか」とすると「赤」が先に変換されてしまうのを防ぐため。「す」を「</span>」に登録してるのは、他の「<span>」タグを使うときの閉じるタグとして使えるので。
色の指定は#◯◯◯◯◯◯(#と6桁の半角英数字)というように指定します。
好きな色を洋色大辞典で見つけて、#◯◯◯◯◯◯この部分にペーストしてから辞書登録して使ってください。

 

ヒント2

このテーマの文体は明朝体なので、太字にしてもあまり太く見えません。
「こんにちは」(太字)  「こんにちは」(デフォルト)

こんなふうに。でも、さりげない強調なので、注目させたい一文に使うと効果があり、主張しすぎず、おしゃれなので、ぼくは気に入っています。

 

ちなみに、こんなふうに、テーマの文字をゴシック体に変更すれば、クッキリとした太字にすることができます。
ブログのフォント(字体)を変更する方法については、トップメニューの「カスタマイズ」にまとめてあります!ガラッと雰囲気変わりますよ〜

 

 

4.文字リンクの入れかた

つぎは、文字リンクの方法です。
記事の途中で、他サイトを参考にしてほしいときや、自分の書いた別の記事を読んでほしいときがあります。

外部リンクと、内部リンクです。

 

aタグを使ってリンクを貼る

↓こちらのタグを使ってください。

<a href="記事URL" target="_blank">記事タイトル(別ウインドウで開く)</a>
<a href="記事URL">記事タイトル(同じウインドウで開く)</a>

「記事URL」と「記事タイトル」の部分を書き換えて使ってください。
「target="_blank"」というのが、別ウインドウで開くという意味のタグです。

ヒント

《記事タイトル》
ここには記事のタイトルを書きます。場合によっては「詳細はこちら」のように書くのもいいと思いますが、リンク先の記事の内容がパッとわかるテキストのほうが親切かなと思います。

《記事URL》
間違えないように、リンクしたい記事のURLをコピペしてください。

《別ウインドウor同じウインドウ》
臨機応変に使い分けます。ぼくは記事の途中で関連記事をリンクする場合は「別ウインドウ」で、記事の最後についでに読んでほしい記事へのリンクは「同じウインドウ」に指定しています。
記事の途中で別サイトに飛ぶと、戻るときにまた読み込まないといけないので、スマホから読んでいる場合、結構ストレスですよね。
それから、このサイトはHTMLやCSSのコードをコピーしてもらうことが多いので、作業のしやすさを考えると別ウインドウがいいかなと考えています。

 

 

5.引用の使いかた

ブログを続けていると、引用はかなり頻繁に使うことになると思います。自分の主張の根拠を示したり、説得力を持たせるために、公的な文章や、広く認知されている知識を、信頼できるサイトから引用することが、多々あります。

 

blockquoteを使って引用する

↓こちらのHTMLタグを使ってください。

<blockquote>引用文</blockquote>

New Poolで引用を使う方法については、ザックリと記事にまとめたので、こちらも読んでくださると助かります。

「New Pool」に最適でおしゃれな引用デザインをHTMLタグだけで使う

 

 

6.リストの作りかた

リストもよく使います。
記事の冒頭で、目次を箇条書きにしたり、オススメの商品やサービスを順番に並べたりします。

ul/ol/liタグを使ってリストを作成する

New Poolでは、このようなリストのデザインを使えるように、コーディングしてあります。

  • リストA
  • リストB
  • リストC
  • リストD
  • リストE
  • リストF

コードはこちら。

<ul>
<li><span style="color: #404040;">リストA</span></li>
<li><span style="color: #404040;">リストB</span></li>
<li><span style="color: #404040;">リストC</span></li>
<li><span style="color: #404040;">リストD</span></li>
<li><span style="color: #404040;">リストE</span></li>
<li><span style="color: #404040;">リストF</span></li>
</ul>

こちらをコピペして使っていただけます。

「ブログ設定」の「定型文」から、このコードを保存しておくことで、記事編集画面のツールバーから、サクッと引っ張り出すことができます。

この方法については、詳しくまとめた記事を用意しましたので、ご覧ください。

関連記事:記事冒頭の目次リストを定型文に保存しておきワンクリックで挿入する方法

リストにリンクをつけて、記事の各見出しに一瞬で飛べるようにできるリストもご用意しましたので、上の記事をよく読んでください。長文の記事の時は、読者に長〜くスクロールさせずにすむので、ストレスがずいぶん減らせられると思います。

 

 

7.画像の埋め込みかた

やっぱりブログの中にセンスのいい画像とか動画が埋め込まれていると、かっこいいじゃないですかあっ

imgタグで画像を挿入する

Mac

 

①PCの好きな場所に画像を保存する

ぼくはWindowsとMac、どちらも使うのでクラウドに保存しています。Dropboxです。

使いたいなと思った写真やイラストは、とりあえずDropboxに入れまくってます。

 

②ツールバーの「画像」から「画像を選択」しアップロードする

はい!これでアップロードできました。最後に記事の中に挿入しましょう。
入れたい場所にカーソルを合わせて、入れたい画像をクリックするだけでも挿入されますが、ゴチャッとしたタグが自動で作られるので、ぼくは自分でタグを打っています。

ちなみに、このとき、大きすぎる画像をアップロードすると、ものすごく時間がかかります。
フリーのサイトを使って、画像を最適な大きさにトリミングして、圧縮する方法をご紹介しますので、こちらの記事も合わせてお読みください。

 

③画像を挿入したい場所にimgタグを打つ

こんな風に。

↓のコードを使って、画像の挿入ができます。

<img src="URL" alt="画像の説明" width="100%">

画像の上下に続けて文章を打つことが多いので、画像を段落の一部としてpタグで囲う癖をつけています。

 

④貼り付けたい画像のURLをコピーする

ツールバーの「画像」から、使いたい画像のサムネの「右上の歯車ボタン」をクリックすると、ポップが表示されます。

そのポップの中のサムネ画像にマウスを合わせて、右クリックし、「リンクのアドレスをコピー」します。

このとき、サムネ画像の周りの余白にマウスを合わせて右クリックしても、リンクのアドレスをコピーできません。矢印のカーソルが画像の上で手のカーソルになった状態で右クリックしてください。

 

⑤imgタグの「URL」の部分に、コピーしたアドレスを貼り付ける

このようなタグが出来上がります。


ペンギンを見る人

画像はこのように表示されます。

画像を小さく表示して、中央に置く方法などは、別の記事にまとめましたので、こちらもどうぞ。

【HTML】ブログの記事画像の表示方法(サイズや位置)をタグで指定する方法

ヒント

【altとは】
imgタグの中に、altという文字があります。これは、画像の説明です。グーグルさんに画像の内容を正しく知ってもらうためのものです。SEO的にやっておくといいですが、ぼくは滅多に使いません。たとえば↑の画像なら「alt="ペンギンを見ている人"」みたいに指定しておくといった感じです。

【widthについて】
これは記事本文を表示する幅に対して、どの大きさに画像を表示するかを指定するタグです。px(ピクセル)で指定してもいいですし、%(パーセント)で指定してもOKです。
ぼくはいつも画面最大幅にしたいので、100%としています。ただ、小さい画像の場合は、大きく表示させると画像が荒く見えるので、小さめにして画面の中央に表示されるように指定します。
この方法は別の記事にまとめましたので、ご覧ください。

 

 

8.YouTubeの動画を埋め込む方法

旅の記録的なブログや、グルメ紹介、ペットブログなど、動画をバシーン!!っと見せる方がリアルに伝わることがあります。そういうときには、YouTubeに動画をアップロードして埋め込むなんてこともチャレンジしてみましょう。

孤独のグルメみたいな動画撮りたいなあ…。

好きなアーティストの曲とか、紹介したい映画の予告とかも、埋め込みたい時絶対ありますよね。そんな時に記事の中にYouTubeの動画を埋め込む方法を、こちらの記事にまとめましたので、ご覧ください。簡単です。
埋め込むときに、ひと手間、特別なコードを使ってもらうだけで、どんなブラウザサイズでも記事の幅にピッタリに動画を表示させられます。

YouTubeを記事の幅いっぱいに埋め込む方法

 

このテーマNew Poolでは、YouTubeを埋め込むときに、こちらのコードを使ってください。

<div class="movie-wrap">埋め込みコード</div>

埋め込みコードを任意の場所にコピペするだけでも、動画は埋め込まれますが、ブラウザの大きさが変わると、表示される動画の幅が小さすぎたり、ピッタリ記事の幅に合わなかったりします。

それを、どんなブラウザの大きさの場合でもピッタリ記事の幅にフィットするようにCSSを指定してあります。
その効果は、このコードを使うことで得られます。

このように記述します。

するとこのように、記事幅にピッタリ表示されます。スマホで見ても、同じです。

 

 

9.Twitterのツイートを埋め込む方法

Twitterでつぶやいたことをまとめて記事にしたいときや、誰かのつぶやきを引用したい時があると思います。

Twitterの鍵がついていないアカウントのツイートに関しては、投稿者の許可なく埋め込みすることが、Twitterの規約で認められています。投稿者はTwitterを使うのなら、これに同意したものとみなされています。

しかしですね、これはあくまでTwitterの規約のお話で、鍵をつけずに公開しているからといって、そのTweetの文章や画像、動画などに著作権はしっかり存在します。

ですから、他人のTweetを埋め込みたい時には、許可を取ることをオススメします。
特にイラスト、音楽、動画などの創作物は、「作者が鍵のないアカウントで公開しているから、無許可でシェアしてもいい」なんてことはありません。ので注意です。

 

①埋め込みたいTweetの埋め込みコードをコピーする

Tweet右上の矢印をクリックし、「ツイートをサイトに埋め込む」をクリックして、

埋め込みコードをコピーします。

これは僕のツイートです。

 

②コピーしたコードを、任意の場所にペーストする

はい。このように表示されます。

こちらに関しては、YouTubeの動画と違って、特別なコードを使う必要はありません。
埋め込みコードをコピペするだけです。

それだけで記事の中央に表示されるようにCSSを指定してあります。
もし中央に表示されないという場合は、コメントくださいませ。

 

 

10.HTMLの大事なルール3つ

知ってる人には当たり前のことですが、念のため書いておきます。HTMLのルール。

前と後ろをしっかり閉じる

HTMLタグは基本的に<A>〜</A>のように、前後を同じ属性のタグで閉じます。
これをしないと、「どこからどこまで」という指示がブラウザに通りません。

例えば文字を赤色に指定するタグの後ろを閉じ忘れたら、その後ろに並ぶ全ての文字が赤色になるとか…。

もちろんプレビューで確認しながら記事を書くことと思いますが、同じような現象が起きた時は、いちど手を止めて、タグの閉じ忘れを確認してください。

後ろを閉じる</A>のスラッシュが抜けてるだけでもダメなので、、、気をつけてください。
やっぱりタグ打ちは辞書登録かアプリでやるべきですね。こちらの記事読んでください。

ブログ執筆能率UP!HTMLタグを高速で楽に打ち込む方法

 

 

半角英数字で書く

全角でタグを打っても、HTMLタグだと認識されません。かならず半角英数字で書いてください。特に数字は間違えることが多いです。最初のうちは。
フォントのサイズを指定するHTMLとか、数字が全角になってるだけでデフォルトのサイズのままになってしまうので、なぜだなぜだと戸惑った経験がありました。

 

 

一字でも間違えてたら無視される

文章だったら、1字くらいのタイプミスは、前後の文脈から推測できますよね。

でもHTMLは機械に伝える言語なので、ミスってると無視されます。

例えば文章を中央に表示させるHTMLタグ、

<div align="center">中央表示したい文章</div>

このタグの「center」を「senter」と打ち間違えるだけで、完全にスルーされます。

 

色々と厄介なところがありますね。うまく表示されない時には、この三つのルールをまず疑ってみてください。
辞書登録してあるタグでも、登録の段階でミスタイプしてしまうと、ずーーっと間違い続けるので、注意してください。

 

 

さいごにまとめをば!

お疲れ様でした……本当に。

10000字を超える文章に、お付き合いくださって、ありがとうございます。
初めてブログを始める方は、わからないことだらけで、「自分が何をわかってないのかすらわからない」という人もいらっしゃると思います。ぼくがそうでしたので…。

いろんなサイトを検索しまくって、ようやく少しずつ頭の中にある知識だけでブログが書けるようになりました。最初はみんなとにかくググってるのだと思います。

このテーマを作ると決めた時に、「せっかくだからブログを書くための必要な基礎知識とかも、このサイトだけで大体把握できるように作りたいな」と考えていました。

まだ知らないことだらけですが、追って書き足していきます。
足りない部分を教えてくださるコメントなど大歓迎です。間違いの指摘も遠慮なくどうぞ。
皆さんで知恵を共有しあって、ブログの書き方はここみとけば大体つかめるというサイトにしていきたいです。

ご協力、よろしくお願いいたします。

 

習得には根気と努力が必要なHTMLですが、使えるようになれば楽しいですよっ。「自分でブログ書いてる〜〜っ!」っていう感覚に浸れます。

 

では!最後までお付き合いいただき、ありがとうございました!

お疲れ様でした〜!!!

 

 

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット