WEBサイト制作

ホームページ作成したい人向け。WordPressでページ追加する方法

2020年6月19日

固定記事の作成方法

悩んでいる人
「ワードプレスでホームページ作成したい。 でも、ページの作り方がわからないよ。 誰か教えて~!」

 

ワードプレスは誰でもホームページが作成できる便利なツールです。

とは言っても、初心者にとっては複雑で使い方は分かりませんよね?

 

 

でも、安心してください。

私も3年前は、WEB初心者でワードプレスの使い方を知りませんでした。

そんな私でも、今ではホームページ制作で月30万円稼げるようになりました。

 

今回は、ワードプレスのページ追加方法について紹介します。

ワードプレステーマは、ホームページ作成で使いやすいLightning Proを使って説明しますね。

【Lightning Pro】の公式サイトはこちら

 

ホームページ制作のエディタはGutenbergがおすすめ

ホームページ作成のエディタは、Gutenberg(グーテンベルク)がおすすめです。

エディタとは、文章や画像を入力する画面を指します。

 

ワードプレスのエディタは標準であれば、Gutenbergになっています。

Gutenbergとは、直感的に文章や画像を挿入できるエディタです。

ブロック方式と呼ばれていて、ホームページ作成に向いたエディタです。

 

 

しかし、私はブログ記事の作成には使いにくいと考えています。

記事は基本的に文章が多いため、シンプルなエディタの方がやりやすい。

 

記事作成をしたい方は、『Classic Editor』というプラグインをオススメします。

『Classic Editor』は、『Gutenberg』以前のエディタに戻すプラグインです。

『Classic Editor』については、こちらの記事をご覧ください。

【ワードプレスで記事が書けない】classic editorの使い方

ワードプレスで記事作成するときに何だかやりにくいと思ったことはありませんか? 実は最新版のエディター、Gutenberg(グーテンベルク)はブロガーに不評なんです。 なぜなら、以前の仕様がブログに適し ...

続きを見る

 

フォトショップで画像作成

ホームページ制作には、画像が加工が必須です。

画像加工ソフトと言えば、Adobe社のフォトショップが有名です。

 

フォトショップは、画像の明るさや色彩の変更はもちろん、

画像サイズ変更・モザイク・色変更・不要な物体の除去などがあります。

 

 

正直、使い切れないほど様々な機能を備えています(笑)

フォトショップのダウンロードはこちらからどうぞ

 

 

もし、画像加工ソフトを無料で使いたい方は、こちらの記事で紹介してます。

よろしければ、ご覧ください。

サムネイル作成
【ロゴ&サムネイル画像を作るならコレ!】おすすめの作成ソフト3選

『ブログのサムネイルって、どうやって作ればいいの?』 『ロゴのデザインって、センスが必要?』   ブログを始めると、分からないことがたくさん出てきます。 特に初心者にとっては、どうやって画像 ...

続きを見る

 

ページの作成方法

ブログの場合、投稿記事を作成するのが一般的です。

しかし、ホームページの場合は固定記事から作成しましょう。

 

なぜなら、投稿記事は時系列を意識しているからです。

それに対して、ホームページの会社概要やお問い合わせなどは、

時系列にする必要がありませんよね?

 

 

ですから、固定記事でページを作成するほうが良いのです。

スタッフのブログやお知らせ情報などは、日付記載のある投稿記事がオススメです。

 

まずは、『タイトル』を『会社案内』とします。

そして、『見出し』を挿入しましょう。

見出しの挿入

 

ここでは、『H2』に設定します。

H2の見出し

 

次にカラムの追加をします。

カラム

 

カラムとは、2~6個までの部屋分けをする仕組みです。

今回は、2個のカラムで画像と文章を構成します。

カラムの仕分け

 

まず、左側に画像を挿入します。

画像の挿入

 

そして、右側には見出し3と段落を挿入します。

見出しと段落

 

 

 

次に、同じ形式で画像と文章を挿入する場合、

画像と文章の位置を反対にしてみましょう。

 

ケース・バイ・ケースですが、

この方がデザイン的に見た目が良いのがポイントです。

画像と文章を反対にする

 

それでは一度、プレビューしてみましょう。

すると、表示されている幅が狭いのが分かりますよね?

幅が狭い

これは、デフォルトの設定で2カラムになっているからです。

2カラムとは、記事本文とサイドバーの2つを表示させる設定。

 

そのため、右側にサイドバーを表示させるための

余白が空いているから表示が狭くなるのです。

 

 

ホームページの場合は、1カラムの方がデザイン的に良い。

ですから、設定を変更するためエディタ画面に戻ります。

 

 

【ページ属性】の項目が初期値は『デフォルトテンプレート』になっています。

ここを『No sidebar』に変更します。

1カラムに変更

 

すると、この様に幅が広くなって、見た目がよくなりましたよね?

1カラム

 

アクセスマップの埋め込み方法

次に会社情報に欠かせない地図の埋め込みについてです。

まず、グーグルの検索バーに会社の住所を入力します。

すると、検索結果が表示されますが、タブを地図に選択します。

グーグルマップ

 

マップ画面に『共有』というボタンがあるのでクリック。

そして、『地図を埋め込む』を選択します。

共有で地図の埋め込み

 

地図の大きさを選ぶのですが、私の場合は『カスタムサイズ』を選んでいます。

『HTMLをコピーする』をクリックし、固定記事に貼り付けます。

HTMLをコピーする

 

貼り付けする際は、『カスタムHTML』というブロックを挿入します。

カスタムHTML

 

 

先ほどのコピーしたマップを『カスタムHTML』に貼り付けます。

そして、プレビューするとこの様な感じになります。

地図の表示

 

少し表示された地図は大きく感じるので、サイズを調整してみましょう。

『カスタムHTML』の『width』と『height』という文字に注目してください。

widthが横幅で800px、heightが高さで600pxで表示する設定になっています。

地図の調整

 

今回は、『width="800"』 を『width="100%"』、

『height="600"』を『height="500"』に変更してみます。

地図表示の変更

 

すると、大きさが調整されて見やすくなりましたね。

アクセスマップの埋め込み方法については、こんな感じです。

地図の調整

 

まとめ

ホームページは、固定記事を作成するようにしましょう。

ブログとは違い、時系列で表示させる必要はありません。

 

もし、スタッフ用のブログやお知らせ欄を設置する場合は、

投稿記事を使用してください。

 

 

私が使用しているのは、Lightning Proというワードプレステーマです。

残念ながら、テーマによって操作方法が異なります。

 

そのため、今回の記事と同じ操作でホームページを作りたい人は、

Lightning Proにした方が無難でしょう。

【Lightning Pro】の公式サイトはこちら

 

 

それでは、また!

  • この記事を書いた人

アラフォーフリーランサーすぎにい

どうも!アラフォーフリーランサーすぎにいです。 サイト管理人について詳しく知りたい方はこちら。

おすすめ記事

オーディブル 1

あなたは最近、読書をしていますか? 『読書したいけど、集中力がないから読めない』 『そもそも本を読むのが苦手や~』 という方もいらっしゃるでしょう。   実を言うと、私も集中力がないので、読 ...

2

「給料が少なくて、いつも金欠状態、家族にも贅沢をさせてやれない。」 「何か副業をして、今の経済状況を早く改善したい。」 そんな感じで、副業に興味を持った方も多いですよね?     ...

ワードプレスでブログ 3

「ワードプレスは、アメブロやライブドアブログよりも検索に強い。」 「ブログはワードプレス一択でしょ!」 と言われても、ブログ初心者にとってはハードルが高いですよね?     私は2 ...

-WEBサイト制作
-

Copyright© すぎにい公式ブログ | 初心者フリーランス講座 , 2020 All Rights Reserved.