モデルサイトのサイトタイトルからヘッダ周りを好みに合わせて修正します。
SWELLを使うといろいろなことができます。でもどんなことができるかわからないとデザインもできません。
そこで、初めは、とにかく一通り作ることを目指しましよう。もしわけがわからなくなっても、いくらでもやり直すことができます。
ロゴとヘッダのレイアウトを決める
ロゴ画像を取り込む
ロゴ画像は、画面の左上にある、小さめの画像です。ほとんど全ての画面に表示されるので、WordPressの管理画面で「外観」>「カスタマイズ」>「ヘッダー」と選択し「ロゴ画像の設定」の画像を変更を選択します。
Instant Images というタブを選択すると、たくさんの画像が出てきます。好きな画像を選びましょう。メデイアライブラリに選んだ画像が取り込まれます。サイズは、36:160くらいに調整してください
画像を選択して、右したの画像を選択をクリックします。
ロゴ画像が変わるので確認してください。
この画像は、自分のサイトに合わせて作ったものと差し替えるといいのですが、まずは、何か入れてここにこの画像が入ることを知ることが第一歩です。
画像の著作権などは、ブラグインInstant Images の説明を確認してください。今回紹介している時点では、著作権フリーの画像ばかりですが、もしかすると利用条件が変更されているかもしれません。
ヘッダ周りのレイアウトを決める
・WordPressの管理画面で「外観」>「カスタマイズ」>「ヘッダー」と選択し「レイアウト・デザイン設定」で、ヘッダのレイアウトを選択してください。
ヘッダナビとロゴの位置関係を選択できます。
・WordPressの管理画面で「外観」>「カスタマイズ」>「ヘッダー」と選択し「キャッチフレーズ設定」で、キャッチフレーズの表示一を決めてください。PC用とSP用があります。スマートフォンでの画面も確認してください。
他にも、ヘッダ周りでカスタマイズできる部分があります。WordPressの管理画面で「外観」>「カスタマイズ」>「ヘッダー」と選択して設定できます。
ただし、
ヘッダ以外にも設定することはたくさんあります。ここで止まってしまうと時間がかかりすぎます。いつでも戻れるので、次に進みましょう。
ヘッダメニュー
「外観」「カスタマイズ」「メニュー」でメニューを設定します。表示すると、イメージが湧くと思いますが、中身がないと、設定しにくいので、後回しにしましょう
お知らせバーをカスタマイズする
・WordPressの管理画面で「外観」→「カスタマイズ」→「サイト全体設定」→「お知らせバー」と選択し「お知らせ内容」を修正します。
今は、文字が流れていますが、文字を流さないで飛び先のボタンをつけることや、文字自体をクリックできるようにすることもできます。
不要であれば、表示を止めることもできます。まずは「〇〇のWebサーバ開設!」などとメモ程度に入れておくのがいいでしょう。
フッター部分にコピーライト表示をつける
WordPressの管理画面で「外観」>「カスタマイズ」>「フッター」と選択「コピーライト設定」の「コピーライトのテキスト」にコピーライトを表示しましょう。
「かどキャリアサポート」は著作権を譲渡しますが「何も修正しないで、コピーライトだけ変更することは控えてください」
これで、トップページの形ができました。
次は、カテゴリーを分けて記事を作っていきましよう
カテゴリー
WordPressの管理画面で「投稿」＞「カテゴリー」を選択し、作成していきます。
設定するものは「名前」「スラッグ」「親カテゴリー」「説明」「アイキャッチ画像」です。
そのまま、サイトに表示されるカテゴリーの名前になります。
ひな-1モデルでは、「Web」「漫画」「転生もの」「自動車と免許」などがあります。
「漫画」を「まんが」や「あにめ」に変えたりしてみましょう。
苔
これから書くご自分のカテゴリーを追加してしまいましょう。いつでも変えられるので、「仮」の名前を追加してください。
Webのところにカーソルを重ねると、「編集」「クイック編集」「削除」「表示」のメニューが表示されます。
カテゴリーを表示したときのurlとなります。
入力しなければ名前と同じものになるので入力無しで作成しても問題ありません。
SEOを考えると、アルファベットのほうがいいという説もあります。
カテゴリー内を細かく分けたい場合に設定しましょう。
モデルでは「漫画」カテゴリー内に「転生もの」というカテゴリーを作っています。
カテゴリー一覧で「漫画」にカーサルを持っていき「表示」を選ぶと、「漫画」カテゴリーが表示されます。
「漫画」という表示の下に 漫画> 転生もの と表示されています。 ここでサブカテゴリーの「転生もの」を選ぶことができます。
「自動車と免許」の「親カテゴリー」を「漫画」にして、どうなるか確認してください。
そのカテゴリーの説明です。
設定によっては表示できますが、あまり説明が必要なカテゴリー分けをするより、一目でわかるカテゴリーを作りましょう。
転生ものの「ページに表示するタイトル」「ページに表示するサブタイトル」に、「てんせい」「★TEN」と設定しています。
どう表示されるのか確認して、ご自分のカテゴリーの説明を追加してください。
カテゴリー作成後、カテゴリーの編集画面に行き、「アイキャッチ画像」をページに表示するかどうかを表示するにした場合に表示される画像になります。
こちらもなくても問題ないものです。
最低限必要なものは「名前」だけです。できれば、スラッグをアルファベットにすることをお勧めします。
作成後、記事編集画面のサイドバーの投稿タブからカテゴリーを設定できるようになります。
記事に合わせてカテゴリーを選択しましょう。
記事編集画面からもカテゴリーは作れますが、名前と親カテゴリー設定のみとなるため、急ぎの場合は記事編集画面で作り、あとから細かい設定をすればいいです。
サイドメニュー
サイドメニューを表示するかどうかについてはWordPressの管理画面の「外観」＞「カスタマイズ」＞「サイドバー」から設定できます。
モデルサイトでは、サイドバーを右側に設定しています。これを左側にしてどこがどう変わるか確認してください。
サイドメニューの内容はWordPressの管理画面の「外観」＞「ウィジェット」＞「共通サイドバー」から編集することができます。
左側にあるウィジェットのうち表示させたいものを選択し、共通サイドバーを選択することで表示されます。
モデルサイトでは、「検索」「[SWELL]新着記事」「最近のコメント」「アーカイブ」「カテゴリー」が並んでいます。
表示されるものの順番については右側の「共通サイドバー」を選択し、表示されるウィジェットを並び替えることで順番を変えることができます。
順番を変えて、どうなるか確認してください。
コメント
コメント一覧 （1件）
[…] 爆速構築 サイトタイトル、ヘッダ周り – 雇われないで自由に働く […]