この記事の内容は動画とも連動していますの、そちらもご覧ください。
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
タイトルの入力
今回もWordPressのダッシュボード画面(管理画面)から始めます。
投稿にマウスオーバーし、新規追加をクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_14h54_56-300x132.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_14h54_56-300x132.jpg)
こちらの+新規でも同じです。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_15h03_10-300x137.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_15h03_10-300x137.jpg)
ここでは『超初心者のゼロから始めるブログ作り 5 投稿記事の作成』が記事のタイトルになります。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_08h57_07-300x68.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_08h57_07-300x68.jpg)
自分の記事のタイトルを入れてください。
次は見出しを入れます。
見出しの入力
Enterキーで改行するとブロックの追加が出ますので、そのあと⊕マークをクリックしてください。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_09h12_34-300x67.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_09h12_34-300x67.jpg)
クリックするとブロックが出ますのでH見出しを選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_09h24_09-300x167.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_09h24_09-300x167.jpg)
見出しの入力欄は色が付いています。色やデザインは選択しているスキンによって違います。
見出しの大きさは通常H2ですが変更も出来ます。見出しの重要度によって変えますが、デフォルトで良いでしょう。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_09h29_13-300x79.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_09h29_13-300x79.jpg)
見出しは目次になります。長文などの場合は分かりやすくなりますが、入稿段階では見られませんので、確認したい場合はプレビュー画面で見てください。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h56_25-300x216.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h56_25-300x216.jpg)
段落入力と改行
次は段落を選んでみます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_17h59_53-300x169.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_17h59_53-300x169.jpg)
今書いている文が段落になります。
通常段落は文を書いていくと自然に改行されますが、区切りの良いところで改行したい事もあると思います。しかし、ここで改行しようとEnterキーを押すと、新しい段落になってしまいます。
このような感じです。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_18h17_25-300x145.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_18h17_25-300x145.jpg)
今は同じ段落内で改行しました。
これはShiftキーとEnterキーを同時に押す(①Shiftキーを押したままで②Enterキーを押す)と改行できます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/14431-2-300x110.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/14431-2-300x110.jpg)
次に見出しですが、通常Enterキーで改行していくと自然に段落が作成されていきます。
段落を見出しに変える
『段落を見出しに変える』にはその文をクリックします。そうするとブロックタイプまたはスタイルを変更が出ますのでクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h06_28-300x51.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h06_28-300x51.jpg)
変換が表示されるので、見出しを選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h08_39-300x131.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h08_39-300x131.jpg)
これで見出しに変更できました。
文字装飾
書いた文字の色や大きさなどの変更は上に出る編集タブからできます。(フォントの変更はCocoonの初期設定を確認してください)
例えば色と太さを変える場合は変えたい部分をドラッグして選択し、Aをクリックして色や太さを変えます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_18h25_03-1-300x153.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_18h25_03-1-300x153.jpg)
鉛筆のマークはアンダーラインやマーカーになります。方法は同じで選択してから鉛筆のマークをクリックします。
解除する場合はもう一度クリックします
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_18h33_28-300x109.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_18h33_28-300x109.jpg)
バッジは選択した色で文字を囲みます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h24_49-300x165.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h24_49-300x165.jpg)
T↕は文字の大きさを変更します。やり方は同じで大きくしたい文字を選択してからT↕をクリックしてポイントを選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h30_38-300x134.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h30_38-300x134.jpg)
</>は新規記事一覧、人気記事一覧、プロフィールボックス、Amazonリンク、楽天のリンクなど様々あります。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_21h06_41-300x227.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_21h06_41-300x227.jpg)
ただし、こちらのリンク例えばAmazonリンクを入れても
[amazon asin="ASIN" kw="キーワード"]となり
『Amazon APIのアクセスキーもしくはシークレットキーもしくはトラッキングIDが設定されていません。「Cocoon設定」の「API」タブから入力してください。』となりますので、Cocoon設定のAPIの設定が必要となりますので、この設定は後で紹介します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h38_54-300x150.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h38_54-300x150.jpg)
テンプレートについてはWordPressのfunctions.phpの編集になります、$マークもアフィリエイト関係になりますのでここでは省略します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h52_04-300x70.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h52_04-300x70.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h52_54-300x74.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h52_54-300x74.jpg)
Bは太文字になります。範囲を選択してからクリックしてください。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h56_15-300x72.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_20h56_15-300x72.jpg)
斜めのIはイタリックでアルファベットを斜め文字にします。ABCD abcd
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_21h14_29-300x69.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-01_21h14_29-300x69.jpg)
文字色の変更は▼の中にあります。
クリックしてA 文字色を選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_09h52_00-300x106.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_09h52_00-300x106.jpg)
カラーパネルが開きますので、希望の色を選択します、
この時も変更したい文字を事前に選択していきます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_09h58_40-300x167.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_09h58_40-300x167.jpg)
リンクの設定
リンクの設定は鎖マークで設定します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h23_33-300x67.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h23_33-300x67.jpg)
リンクしたいサイト画面のURLをコピーしておきます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h26_57-300x136.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h26_57-300x136.jpg)
ここでは『超初心者のゼロから始めるブログ作り 1』にリンクを貼ります。
① 文字をドラッグして選択します。
② 鎖のマークをクリックします。
③ URLをペースト
④ Enterキーをクリック
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h48_43-300x103.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_10h48_43-300x103.jpg)
以上でリンク完了です。
確認してみましょう。
ここで一度下書き保存しておきます。右上の『下書き保存』をクリックします。
右上のプレビューをクリックしてみます。
どうでしたか?書いてきた記事が確認できリンクも出来ていましたでしょうか。
先ほどの場合は今のページ画面がリンク画面に変わる設定でした。
しかし、別ページで開きたいこともあると思います。そのようなときは今のリンクを編集します。『超初心者のゼロから始めるブログ作り 1』をクリックすると編集が出ますので、新しいタブで開くにチェックを入れます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h19_16-300x102.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h19_16-300x102.jpg)
そうすると別ページが開いて今のページと二つになります。他のサイトにリンクをした場合、行ったきりにならない様になります。
保存して確認してみましょう。別ページが開いたと思います。
設定により最初新しいタブで開くが出ていない場合もあります。
その場合は①∨をクリックし②Open in New Tabをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-08_16h13_05-300x147.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-08_16h13_05-300x147.jpg)
画像の挿入
画像の挿入はブロックの画像をクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h27_04-300x198.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h27_04-300x198.jpg)
ここで3種類のアップロード方法が出ますが、良く使うのは自分で保存してある画像だと思いますので①と②になります。
①アップロードは自分の保存先フォルダ内の画像を選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h31_22-300x118.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h31_22-300x118.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h48_46-300x195.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h48_46-300x195.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/20190324_121237-300x225.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/20190324_121237-300x225.jpg)
②メディアライブラリは自分でアップロードして置いた、画像からの選択になりますので最初は何もないので①のアップロードで溜まったものがメディアライブラリになります。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h54_44-300x139.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h54_44-300x139.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/20190323_124817-1-300x225.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/20190323_124817-1-300x225.jpg)
他にもアップロード画面にフォルダから直接ドッラグする方法もあります。
私はこの方法が楽で一番使っています。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h31_22-300x118.png)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_11h31_22-300x118.png)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_12h03_08-300x176.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_12h03_08-300x176.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/20191009_124716-300x169.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/20191009_124716-300x169.jpg)
ギャラリーを選択して何枚か並べることも出来ます。
ギャラリーを選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h30_25-300x177.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h30_25-300x177.jpg)
メディアライブラリを開き配置したい画像を選びます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h35_22-1-300x160.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h35_22-1-300x160.jpg)
選択した画像が並びますので、『ギャラリーを作成』をクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h32_46-300x130.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h32_46-300x130.jpg)
選択した画像が並びます。
画像の並びを変更したい場合は、画像を選択し<>ボタンで移動します。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h47_56.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_14h47_56.jpg)
以上で
■ タイトル入力
■ 見出し入力
■ 段落
■ 文字装飾
■ 画像挿入
の説明が終わりました、これで投稿記事はかけると思いますが、記事が完成したら最後にパーマリンクの変更をしておきます。公開変更するとブックマークされた場合などリンク切れになりますので、早めにしその後は変更しないようにしてください。
パーマリンクの変更
画面の右側にパーマリンクの項目があります。
今は
https://hoshino-blog.com/超初心者のゼロから始めるブログ作り-5-投稿記事の作成
となっていてタイトルがそのまま付いています。記事の内容は分かりやすくていいのですが、もっと短くアルファベットにしておく方が良いと思います。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_15h07_52-300x144.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_15h07_52-300x144.jpg)
この記事は連続して作っているので以前のページに合わせcreate5としますので、URLスラッグを書き換えます。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_15h26_47-300x137.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-02_15h26_47-300x137.jpg)
これでこのページのURLがhttps://hoshino-blog.com/create5となりました。
投稿の公開
ここで、下書きの保存をしておき、
公開してみましょう。右上の『公開する』をクリックしてください。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h21_39-300x140.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h21_39-300x140.jpg)
確認のメッセージが出ますので『公開』をクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h23_58-300x152.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h23_58-300x152.jpg)
これで公開されました。
投稿のアドレスも(https://hoshino-blog.com/create5)になっています。
投稿を表示をクリックして確認してください。
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h31_04-1-300x109.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/05/02-05-04_10h31_04-1-300x109.jpg)
お疲れ様でした、これで初めてのブログの投稿が完了しました。
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)