ブログの作り方

【ブログ初心者用】WordPressを使った「っぽいブログ」の書き方!【初投稿・最初の記事に】

WordPress(ワードプレス)を使ったブログの始め方をわかりやすく解説!【ブログ初心者にオススメ!】 昨今色々な方法でブログを始める方が多くなってきました。 その中でもWordPress(ワードプレス)をつかったブログは、テ...

WordPressの設定も完了したのでブログを書いてみたい!

でもみんなはどういう流れでブログを書いているの?

というわけで今回はWordPressを実際に使いながら

とりあえず「それっぽい」ブログを書いてみます。

今回は無料テーマ「Cocoon」を使っています。

テーマって何?という方は

テーマの導入方法が「Cocoon」のリンク先に記載されているのでご参考に。

タイトルを決めよう!

まずはWordPressメニュー欄から「新規投稿」をクリックします。

記事作成欄の「新規投稿を追加」の下のボックスにタイトルを入力します。

今回は

無料ですぐに使える画像(写真・イラスト)サイトをあつめてみた!

というタイトルでブログを作っていきます。

 

「新規投稿画面が違う・・・」という方はいらっしゃいませんか?
こちらの新規投稿画面の方です。

こちらは2018年8月にアップデートされて変更になった投稿欄です。
ダウングレードすることで下のような投稿欄に戻せます。

ダウングレードの方法はこちら!

ダウングレードすると以前のバージョンに戻ります。
こちらのほうが直感的に使えるのでお勧めです!

パーマリンクを変更しよう!

タイトルを決めてエンターキーを押すと

ボックスの下に「パーマリンク」が出てきます。

出てきてないよ?な方は

 

パーマリンクを設定しよう!

 

を参考にしてください。

編集するときは「半角英数」での表記をお勧めします。

今回はパーマリンクを編集して「illustpicture」に変更します。

ブログのタイトル、内容に合わせて適切な文字列を記入しましょう。

 

 

日本語のままでも問題はないのですが
公開した後のリンクの日本語表記の部分が
やたら長くなることがあります。
途中でこの部分を変更することは
SEO(検索)的におすすめできません!

 

画像を貼り付けてみよう!

次に画像をブログに載せてみます。

まずは登録せずに無料で画像をダウンロードできる「Pixabay」へ移動します。

そこでとりあえず「ねこ」で検索してねこ画像をダウンロードしてみます。

 

ねこがたくさん!ねこかわいいよねこ。

お気に入りの画像があったらクリックしてジャンプ、

ダウンロード画面へ移動し「無料ダウンロード」をクリックします。

サイズはブログに合わせて選びましょう。

(大きすぎるとブログに優しくないので最小がおススメです。)

ダウンロードが終わったら早速ブログに載せてみましょう。

画像はダウンロードしたら
ブログごとにファイルで分けておくと便利です。
「ブログ用画像」の親ファイルを作り
その中にそれぞれのブログタイトルの画像ファイルを作って
そこで画像を選別しておくと
後でブログをリライトするときに便利です。

まずはパーマリンクの下にある
「メディアを追加」ボタンをクリックします。

移動したページに画像をアップロードする場所が現れるので

「画像を画面にドロップ」するか「ファイルを選択」して

画像をWordPressにアップロードします。

 

するとアップロードされた画像がアップロード一覧に出てくるので

載せたい画像をクリックし、右のボックスをスクロールして最下部へ

そこで「添付ファイルの表示設定」の「サイズ」を「フルサイズ」にします。

そして「投稿に挿入」をクリックします。

サイズは画像を載せた後でもサイズ変更できます。
フルサイズ以外でブログに載せると変に縮小されてしまうため
画像が荒くなったりぼやけたりする原因になります。

 

画像を載せることができました!

これでブログの途中にも画像を載せることができますね。

画像はクリックすることで画像の大きさを調節できるので

好みの大きさに調節してみましょう。

入手した画像をアイキャッチ(ブログの顔)にしてみよう!

次は先ほどダウンロードした写真を使って

自身のブログ一覧、SNS、他の方のブログで紹介された時に使われる

ブログの顔ともいえるアイキャッチを作ってみましょう。

まずは投稿の編集ページの右上にある「表示オプション」をクリックします。

 

次に表示オプション内のボックスにある

「アイキャッチ画像」にチェックを入れます。

 

次に投稿の編集ページをスクロールすると

右側に「アイキャッチ画像を設定」が出てくるのでクリックして移動します。

 

移動したら先ほど入手した画像を選択して

「アイキャッチ画像を選択」をクリックします。

 

これでアイキャッチ画像が設定されました。

プレビュー画面で見てみましょう。

 

2匹!

下が先ほどブログに載せた画像で

上が今設定したブログの顔、アイキャッチ画像になります。

ブログ中の画像は画像をクリックして出てくる×ボタンを押すことで消せます

アイキャッチ画像はアイキャッチ画像設定ボックスにある
「アイキャッチ画像を削除」から消すことができます。

このアイキャッチ画像が

自身のブログ一覧、SNS、ブログに載った時に表示されます。

 

アイキャッチ画像は色んな方の目に留まる画像になるので

慣れてきたらペイントで文字を入れたりしてどんなブログか分かるように

アイキャッチ画像を作ってみましょう。

フリー素材の中には
使用は大丈夫でも加工はNGといったものがあります。
画像のライセンスなどは配布元にて定められていますので
加工、編集を目的とする際は配布元のサイトをご確認ください。

 

吹き出しを作ってみよう!

うさみみ
うさみみ
吹き出しを作ってみたいぞ我が友よ!
よんちゃん
よんちゃん
それじゃあ今から作り方を説明していくね!

 

Cocoonにはデフォルトで何種類か吹き出しが用意されています。

それ以外の吹き出しも「正方形の画像」を用意すれば新規作成できるので

新たに作ってみましょう。

まず先ほどダウンロードした猫の画像をペイントで正方形に切り取ります。

 

かわいい。

次にWordPressメニューのCocoon設定内にある「吹き出し」をクリックします。

ブログの内容をWordPress右側の
「公開」ボックス内の「下書きに保存」で保存すれば
WordPressメニュー欄の投稿欄の「投稿一覧」から
いつでも戻ってくることができます。

 

吹き出しページに移動するので「新規作成」をクリック後、

各項目を入力していきます。

「タイトル」

吹き出しを選ぶときに選択に使用する名前です。

「名前」

吹き出しを導入したときにアイコンの下に表示される名前です。

「アイコン画像」

アイコンに使用する画像です。正方形のものを選びましょう。

「吹き出しスタイル」

吹き出しの種類を選択できます。

まずはデフォルトで試してみた後に色々と試してみましょう。

「人物位置」

アイコンをブログの左右どちらに設置するかの設定です。

「アイコンスタイル」

アイコンの表示方法です。色々試してみて選びましょう。

 

設定し終わったら保存します。

今回は「タイトル」「名前」「アイコン画像」だけ設定して使ってみます。

ビジュアルエディタのボックスから「吹き出し」の「ぬこ」を選択します。

 

すると

ねこ
ねこ
にゃー!

かわいい。

ビジュアルエディタの表示だと吹き出しが大きく見えますが

プレビュー、公開画面だと文字に合わせた大きさになっています。

以上で新しく吹き出しアイコンを作る方法は終了です。

目次をつくってみよう!

次にWordPressでの目次の作り方です、こういう感じですね。

2種類の方法があるので好きなほうを選んでみてくださいね。

では早速作ってみましょう。

Cocoonに標準搭載されてる目次

Cocoonは見出しを設定するだけで自動的に目次を作ってくれます。

実際にやってみましょう。

まず段落ボックスから「見出し2」を2つ用意します。

 

そしてそこに目次となる文を記入してみます。

 

これで自動で目次ができます!

・・・変化がないのではって?(筆者も最初思った)

投稿の編集画面右上にある「プレビュー」をクリックして

プレビュー画面をみてみましょう。

 

出来てる!やったね(*´ω`*)

見出しは階層順になるので

2の下に3、3の下に4と見出しを降順していくことで

階段状に目次が生成されていきます。

Cocoonの目次のカスタマイズは
「スタイルシート(style.css)」を使えば可能です。
今回は簡単に「っぽいブログを作る」のが目的ですので
説明すると長くなる(っぽく無くなる)ので今回は省略します。

プラグインを使って作る目次

筆者が使っている目次作成プラグインです。

目次のテーマが数種類用意されています。

(Cocoonに目次作成機能が標準装備されてたことを知らなかったなんて言えない)

Cocoon標準搭載の目次で十分だよ、という方は飛ばしてくださいね。

↓次の工程(見出しをっぽくする)へジャンプ↓

 

まずWordPressにプラグイン「Table of Contents Plus」を導入し有効化ます。

プラグインの導入方法はコチラ

導入するとWordPressメニューの「設定」欄に

「TOC+」が追加されているのでクリックします。

 

「Table of Contents Plus」の設定画面に移動し、設定を変えていきます。

  • 表示条件

見出しが何個あると目次が出るかの設定です。

「2」にしておけば問題はないですが、ここは好みで選びましょう。

  • 以下のコンテンツタイプを自動挿入

目次を自動挿入するタイプを指定します。

「post(投稿)」にチェックを入れましょう。

  • 見出しテキスト

目次ボックスに表記されるテキストです。

デフォルトで英語表記になっていますが

日本語に変更するかデフォルトのままにしておくかはお好みで。

  • プレゼンテーション

目次のデザインです、好きなデザインを選びましょう。

  • 高度な設定

高度な設定を表示して実際に設定するのは「見出しレベル」だけです。

画面をスクロールして「見出しレベル」の項目から

「heading h1」だけはチェックを外しておいて下さい。

他のチェックは運用状況に応じてチェックを付けます。

 

以上の設定が終わったら画面をスクロールして

下部の「設定を更新」をクリックします。

 

更新が終わったら早速目次を作っていきましょう。

やり方はCocoonと同じく見出しを使いプレビューすれば見ることができます。

 

出来てる!やったね(*´ω`*)

以上でプラグインを使った目次の作成方法は終了です。

見出しを「っぽく」してみよう!

・・・さて、なんか物足りないですよね。

そう、見出しが「味気ない」というか「可愛くない」というか。

見出しは「sccをつかってコードを書き換えることでデザイン変更できる」のですが

お、おぅ・・・ってなりますよね。

そこで「今ある機能だけで『っぽい』見出しに変更」してみます。

方法は簡単、

変更したい文章を全選択して『スタイルから好きなボックスを選択』

そのあと

「変更したい文章を全選択して『見出し化』」

実際に操作してみましょう、まず「ボックス化」から

今回は

「スタイルのボックスから『ボックス(付箋風)の青色』」を選択してみます。

 

できました!

次はボックスの中身を「見出し化」します。

 

さて、プレビューで目次ができてるか確認してみましょう。

 

っぽい!

これで「っぽい見出し」の作り方は終了です。

 

※スタイルによっては文字の大きさに対応していないものもあるので

(ボックス(案内)シリーズでは見出し2の文字の大きさに対応できないなど)

色々と触って試してみてくださいね。

「見出し」→「ボックス」の順番で操作すると
ボックスのプログラムが
見出しの目次を作るプログラムを消してしまいます。

必ず「ボックス」→「見出し」の順で作業してくださいね。

※「ボックスを使用するときの注意!(重要)」
ボックスを作成して中で文章を打ち込んだときに
「Shift+Enter」で中で改行、「Enter」で外にでるのですが
Enterで外に出て文章を続けた時「行間が短くなります

回避方法は

https://mataneteta.com/wordpressstylebox/
で説明させてもらってます。合わせてお読みいただければ幸いです。

ブログの記事に「っぽいリンク」を貼ろう!

次にブログの記事にリンクを貼ってみましょう。

 

Pixabayのサイトへといった感じのリンクですね。

このリンクの編集にはテキストエディタを使います。

 

<a href=”ここにURL” target=”_blank”>ここに文字</a>
といった感じで
リンクの名前とリンクのURLを設定すればリンクは完成です。
筆者のテキストボックスにある<p></p>タグは
プラグイン「TinyMCE Advanced」
の影響で可視化されています。

このプラグインを入れていなければ可視化されていないので
<p></p>タグが無くても大丈夫です。

ここでタグの説明を。

「<a href=”ここにURL” >ここに文字</a>」
「ここに文字」をクリックすると「ここにURL」に移動するよ。
とういうプログラムです。
href=””というのがリンク先に移動させる命令プログラムで
<a>の中に他のプログラムを追加することで機能が追加できます。

「target=”_blank”」
移動するとき新しいタブを開くよ。というプログラムです。

 

ワードプレスのテーマをお引越ししたため
ここから下のリンクボックスの説明が
少々食い違うことがあるかもしれませんが(特に色が・・・)
説明を書いているときはCocoonで確認しながら書いているため
手順通りに設定すればリンクボタンは作れます。

また、Cocoonのビジュアルエディタのボックス内のスタイルを応用して

こんなボタンも作ることができます。

Pixabayのサイトへ

「スタイル」→「ボタン」→「ライトブルー(大)」を使い作成しました

それでは早速作り方を説明していきますね。

まず「スタイル」→「ボタン」から好きなボタンを選択します。

今回はライトブルー(小)を選択

次に中にリンクさせたい文章を書き込みます。

Pixabayへ移動

次にテキストエディタからリンクさせたい文章を見つけ出します。

<a class=”btn btn-light-blue”>Pixabayへ移動</a>

という文字列を見つけました。

しかしこのプログラムの中には <a>の中に

「href=”ここにURL”」と「 target=”_blank”」がないので加えます。

<a class=”btn btn-light-blue”href=”ここにURL”target=”_blank”>Pixabayへ移動</a>

実際に変更してみましょう。

テキストエディタからビジュアルエディタに戻ってくると、

Pixabayへ移動

出来てる!やったね(*´ω`*)

以上で「っぽいリンク」の作成方法は終了です。

リンクを作成したらまず

「リンク先にちゃんと移動するか」を確認しましょう。

コピー&ペーストで作成すると違うサイトに移動する可能性があります。

トップページのヘッダーの画像を変更してみよう!

さて何回かプレビューを使いブログの状況を見てみましたが

トップページのブログのヘッダーが

 

さみしいですね・・・

というわけでブログのトップページのヘッダーを変えてみましょう。

まず画像を用意します。

画像の大きさの目安は横が900~1000、縦が200~300くらい

今回は最小目安の900×200で作ってみましょう。

またぬこ画像

 

かわいい。

次にWordPressメニューのCocoon設定内にある

「Cocoon設定」をクリックします。

 

Cocoon設定に移動後「ヘッダー」を選択し

画面をスクロールして「ヘッダーロゴ」へ、

ヘッダーロゴのボックス横にある「選択」をクリックして

作成した画像を選択します。

 

ヘッダーロゴに反映させたい画像が出てきたら

「変更をまとめて保存」をクリックします。

 

するとヘッダーページのプレビュー欄にプレビューが載ります。

これで反映は終了です、トップページで確認してみましょう。

 

出来てる!やったね(*´ω`*)

あとはフリー素材やペイントを使って

ヘッダー画像をカスタマイズしていきましょう。

(筆者はこの後ペイントを使って別のロゴを作ってヘッダーにしました。)

文章を書き終わったら公開してみよう!

あとは上記で説明した方法を駆使し、それっぽいブログを作っていきます。

え?内容はどうやって決めて書くのって?

(*´ω`*)

 

というわけで作成したブログがこちら

 

無料ですぐに使える画像(写真・イラスト)サイトをあつめてみた! 今回は会員登録が必要なく無料で画像が使用できる お勧めのサイトを紹介していきたいと思います。 「Pix...

 

っぽい!

 

という訳で「っぽいブログ」の書き方は以上になります!

ブログを書くのに慣れてきたら次は様々なプラグインやcssを導入し、試してみて

「自分なりのブログ」を書いてみましょう。

 

それでは楽しいブログライフを!