【閲覧くださっている皆様へ】URLが変わりました。一部転送が完了していない内部リンク先があります。「404 Not Found お探しのページは見つかりませんでした。」という表示になる場合は、"https://bits-lifestyle.com/jigaku-study/●●"から、"https://study.bits-lifestyle.com/●●"へ書き換えてアクセスくださいますよう、お願いいたします。ご迷惑をおかけいたします。

 
スポンサーリンク

【プログラミング初心者向けWordPressの始め方⑥】レンタルサーバお試し期間のWP設定(2)

ワードプレス

レンタルサーバーお試し期間中にやることを9日間に分けてお伝えしています。初心者の方はWPの設定方法に慣れ、HTML&CSSを実践でき一石三鳥です!

※お試し期間はサーバにより異なります。
※以下、ワードプレスをWPと略します。
※説明の便宜上「〇日目」としていますが、 順番はバラバラで大丈夫です。実際はLP模写しながら不明点を調べていく形になります。

レンタルサーバお試し期間中のTODO(例)

今回は2日目 LPお手本の決定とWP「カスタマイズ」にて設定 です。

お手本となるサイトを決め、WPデフォルトのカスタマイズ画面で簡単なアレンジを加えてみましょう。

LP模写のお手本の決定

まず、LP模写するお手本を決めます。
※LP:ランディングページ

例えば、下記のまとめサイトに載っているページは比較的シンプルなものが多いです。

Web Design Clip [L] LP・ランディングページのクリップ集
Web制作の参考になるLP・ランディングデザインのリンク集
WPでのLP模写なので、HTML&CSSの勉強としては多少邪道な感じもしますが、これからWPでサイト構築していきたいのであれば、合理的かと思います。
WPでの見本の選び方としては、「メニューが上の方にあるもの」がおすすめです。WPテーマの多くは、メニューがトップにあるからです。もしくは、見本に合わせてテーマを選ぶのもありです。お試し&勉強中なので、色々試してみてください。

今回は、私が見本とさせていただいたサイトで進めていきます。

大名古屋ビルヂング
大名古屋ビルヂングの公式サイト。食を中心とした大名古屋マルシェやジェイアール名古屋タカシマヤ ウオッチメゾンをはじめ、ファッション、雑貨、レストラン、フード、ライフスタイル&サービスなどのショップ最新情報を発信しています。

※今回、改めて実際のサイトを確認したら、メニューがスライドショーの下になっています(*_*;。
この形にするにはHTMLの修正も必要になってしまいますので、今回はメニューが上にくるような構成にアレンジさせていただきます。あくまで、WPの機能を使ってPHPつきHTMLファイルをいじることなくアレンジできる範囲にとどめます。

使う画像について

今回は、非公開で自分の練習のためだけのサイトなので、使う画像については、見本の画像をsnipping tool等を使ってコピーして使うこととします。著作権にかかわるため、コピーした画像を他人に渡したり、自分のHP等で公開したりしないこと!!

Snipping toolの使い方はこちらのサイトを参考に

Windows 10 画面キャプチャアプリ Snipping Tool の使い方
Windows10 では画面キャプチャアプリ Snipping Tool が標準で搭載されていて、選択した範囲を切取りキャプチ...

全体の構成

実際のお手本サイトは著作権の関係上、ここには表示できないので、見本サイトの構成図だけお伝えします。

えーっと、今回はHTMLをLightningのいじらずに、初歩のCSSだけを使用するため、下記の③は作成が難しいと思われます。また、⑥のようにグローバルメニュー(サイト共通メニュー)をスライドショーの下に作成することも難しいため、ここは④と⑥の位置を交換して作成します。。。

WPカスタマイズ画面での設定

お手本サイトのデザインに合わせて簡単にデザイン等を設定していきます。

WP管理画面のメニュー

今回使うのは、固定ページ、外観と設定です。

サイトのタイトルを設定する

設定の中の「一般設定」を選びます。

①これは今回は無視して大丈夫です。(Lightningと合わせて使うと便利なプラグインという追加機能があるのですが、お試しの段階なので不要だと思われます。)

②見本に合わせてサイトのタイトルを記入します。

③キャッチフレーズは、タイトルの下などに表示される、そのサイトの説明文として使われます。どこに表示されるかはテーマにより異なります。今回の見本はキャッチフレーズの表示がなかったので、ここでは空欄にしています。

他の欄は、デフォルトのままでおそらく問題ありません。

入力が完了したら、画面一番下の変更を保存ボタンを押します。

※サイトのタイトルは、外観→カスタマイズ→サイト基本情報からも設定・変更が可能です。

メニューを作成する

メニューは、実際に作った各固定ページや投稿ページのタイトルを選んで、リンクを貼ることができるので便利です。

固定ページ:メニューを開くとすぐ出てくるような、日付が関係ないページ
投稿ページ:よくブログで書かれているような、日付やカテゴリーつきの記事
※ざっくり説明しています・・・

固定ページを作成する(タイトルだけ)

固定ページから「新規追加」を選択します。
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

真っ白な固定ページがでてきます。タイトルを記入します。

あとから変えられるので、適当で大丈夫です。
タイトルを記入したら、右上の「公開する」ボタンを押します。
(公開しても、検索エンジンがインデックスしないように設定していれば非公開みたいなものなので、心配いりません)

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

こんな感じで、あとはメニューの数だけ固定ページを作成します。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

固定ページ一覧を見ると、こんな感じになります。

メニューを設置する

設定から「メニュー」を選択します。
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れます。

その下のメニューの位置は下記のようにチェックを入れます。

上の方にある「メニューを保存」ボタンを押します。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です
外観から「カスタマイズ」を選択します。
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

この「カスタマイズ」から、各種デザインを簡単に設定できるようになっています。

ニューを選択する
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

このようになっていればOKです。

Header Navigationはサイト上でトップメニュー、Footer Navigationは一番下のメニューのことです。今回の見本のサイトにはフッターメニューがなかったので設定していません。

Mobile Navigationとは、ケータイやタブレット用のメニューのことです。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

プレビュー画面はこのようになりました!

ホームページ設定を選択
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

どこのページをトップページとして表示させるかの設定ができます。

「ホームページ」に先ほど固定ページで作成した「トップ」を選択して設定

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

画像を選択をクリックすると、画像を選択する画面が表示されます。

すでに画像を登録している場合は、「メディアライブラリ」から選択します。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です
この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

キーカラーを設定します。

キーカラー(暗)はリンクがあるときの表示色です。
正確には、色番号が必要なのですが、あとから変えられるのでまずは適当で良いです。
※別の機会に、見本サイトのカラーの調べ方もお伝えしていきます。

また、その下の「トップページを1カラムにする」に今回はチェックを入れます。ここは、見本サイトによって異なり、サイドバー等があれば2カラムになります。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

プレビュー画面はこんな感じになっているかと思います。

スライドショーの設定

スライドショーは最大5つの設定が可能です。

まずは1個目スライド【1】を設定していきます。

画像選択をクリックし、使用する画像を画面からアップロードします。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

この記事では著作権の問題で、作成した画像を使用していますが、実際に練習用サイトを作成するときは、見本サイトのスライドのキャプチャをそのまま使ってもよいと思います。

その際、キャプチャには文字も含まれているため、下記の設定ではデフォルトで入っているテキストを削除してください。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

下にスクロールしていくと、スライドのタイトルとテキストを入れる箇所があります。

スライドタイトルの大きな文字の下に、小さめの文字でスライドテキストが表示されます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

さらに下に進むと、「位置」の設定があります。中央にすると、上記のテキストが画像の中央に表示されます。

また、スライド上の文字色も自由に変えられます。(スライドショーが簡単に作れるのはLightningのすごいところです!)

上記の「色を選択」の右側にある文字の羅列が色番号です。これは見本サイトから調べました。これも、あとから変えられるので、まずは自分の感覚で決めてください。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

まめにボタンを押しておくことをお勧めします。

プレビューはこんな感じになりました。画像が入るとサイトらしくなりますね。

さらに下の方に進んでみてください。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

さて、2個目・3個目のスライドは下記のようにデフォルトで設定されています。これを削除して、見本からのキャプチャ画像等を設置しましょう。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

全体はこんな感じです。

サイトを表示して確認

本日最後に、プレビュー画面以外でサイトの表示を確認してみましょう。

カスタマイズを閉じるときは、左上の×を押します。(公開済みにしてから)

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

管理画面に戻るので、左上にある、サイトタイトルにカーソルを合わせます。
「サイトを表示」をクリックします。

すると、 実際WEBに公開された時のように表示されます。

まとめ

こうやって書いてみると、設定は結構大変ですね。私も初めてWPの管理画面を使ったときは全然わからなくて、Google先生に聞きまくったり、試行錯誤しながら設定していったことを思い出しました。

次回は、いよいよCSSの登場です。

コメント

WP Twitter Auto Publish Powered By : XYZScripts.com
タイトルとURLをコピーしました