注目の記事 PICK UP!

baserCMSでサイト作成♡手順その4【 ratio_3_2編】

前回の手順3で、不要なカテゴリーや記事を削除をしましたから、今回はトップページ(ホーム)の見栄えをわかりやすく変更していきます。

スポンサードリンク

メニューの変更と修正

まずは、メニューの変更をします。
カテゴリーなどを削除したのに、メニューが削除したカテゴリーなどの設定になったままだからです。

メニューの設定は、システムナビのメニュー一覧から行けます。

メニュー一覧

前回カテゴリーや記事を削除したものも、メニューには残っているはずです。それを新しい内容に書き換えていきますが、書き方で注意することがあります。

この部分はグローバルメニューに表示されますから、各固定記事やブログのトップじゃなくても構いません。見て欲しいページを入れておけばいいのだから、特定の記事であったり、ブログの中のひとつのカテゴリーでもいいわけです。

そして、記入が必要な部分にリンクURLがあるのですが、状況によって書き方が違うことをうっかり見過ごしがちですから注意しましょう。

完了後をご覧ください。↓↓

メニュー一覧

私の場合は、上記画像を見てわかるように、すべてカテゴリーを作成して、その中のファイルをメニューに入れています。そのために、半角スラッシュ+カテゴリ名+半角スラッシュの形で記載してありますね。つまり、リンクさせたいページのページ名がindexとなっています。

しかし、メニューからリンクさせたいページが、もしもカテゴリーを作成したトップページでない場合は、ページ名がindexではないこともあり、最後のスラッシュは不要となります。

HTMLの知識があって、URLの決まり方ごとを理解されている方なら、拡張子を抜いた部分を書けと言われれば迷わないでしょうが、初心者でHTMLはわからない場合には注意しましょう。

具体的な記入例

暮らし・生活のブログトップページ
http://osusumejyouhou.xyz/season/index
⇒/season/ と記入

暮らし・生活の1月、2月、3月の行事・イベントカテゴリー
http://osusumejyouhou.xyz/season/archives/category/1-3
⇒/season/archives/category/1-3 と記入

上は最後がスラッシュですが、下はついてませんよね?
WEB作成時のルールとして、indexは省略しても表示されることになっているからです。
たかがスラッシュですが、これのあるなしで表示されなくなるため、注意しましょう。

なお、メニューには、お問い合わせも入っていましたが、私の場合はメニューからは削除しました。しかし、お問い合わせフォーム自体は必要のため、カテゴリーと固定ページは削除しません。

また、メニューの順番を変えたい時は、上の画像にもあるように、並べ替えという部分があります。そこをクリックすると、各メニューの左端に矢印マークが表示されるので、ドラッグして変更しましょう。

テーマ設定でホームのメインイメージを変更

メニューの設定が完了して、どのページも気軽に確認できるようになりました。
次は、トップページの見栄えを変えていきます。

テーマカラーを変更した時に後で・・・と言っていたメインイメージを変更しましょう。
ここまでくれば、イメージ画像のリンク先も決まったからです。

では、前のように画面上のテーマ管理をクリックしたあとに、テーマ設定を選んでページを開きましょう。

ここで画像と説明文章、リンク先を入れていきます。
リンク先はどこでもいいでしょうが、私はメニューに入れてある各ブログへリンクを張ります。
画像のサイズは、3:2の割合であれば、ピタッとハマるはずです。
私は、600✕400にしました。

画像が用意できたら、早速設定しましょう。

説明文について

説明文は、見出しと説明文という感じで、分かれて表示されます。
しかし、記入欄は1行しかないので、切り替えたいところで「 | 」を入力しておきます。

リンク先URLについて

メインイメージ1をホームにした場合には、ホームの記載内容でリンクする必要はありませんから、リンク先URLは未記入で大丈夫です。

その他のリンク先URLは、最初の段階だと相対パスで記入してあります。
相対パスというのは、このホームのファイルから見て、どの位置にあるファイルにリンクさせるかという書き方のことです。

カテゴリ名などを書き換えればすむことですが、よくわからないという方は、相対パス・絶対パスのどちらでも大丈夫です。
絶対パスというのは、普通のURLのことですから、自分で都合の良い書き方をしておきましょう。

たとえば、私のサイトの場合で美容・健康のサイトにリンクさせたいとしたら、
相対パス⇒ ./biyoukenkou/
絶対パス⇒ http://osusumejyouhou.xyz/biyoukenkou/
このどちらの書き方でも良いということですね。

イメージ画像設定

ちょっと気になった点

作業をしていて、はぁ~~????と思ったことがあったので、書いておきますね。
この作業をしている間、画像や説明文、リンク先URLを変更するわけですが、変更しても画面に反映されませんでした。画像変えたのに、なんで変わらないの~?みたいな(笑)

でも、サイトの方を更新して確認するとちゃんと変更は生きています。
私は、隣のタブにサイトを表示させておいて、バシバシ変更して保存ボタンを押したら、隣タブのサイトを更新して見栄え確認しました。

そして一通り完了したら、一度ログアウトします。
再度ログインしなおすと、変更後の表示になっていました。
参考までに・・・

作業完了後のトップページ(ホーム)

やはり画像が入ると違いますね。
早く普通の記事を書いて更新したくなり、うずうずします(笑)

ここまでの作業が完了した際のトップページはこうなっています。

トップページ

今回の作業には画像が必要でしたが、あとひとつロゴも必要です。
私は、550✕70pxで作りました。
必要な方は準備しておきましょう。
マニュアルによると、縦が70px程度とあります。ただ、思ったよりも小さく表示されるので、シンプルに作るのがいいのかな~という感じです。

削除してしまって、ロゴなしでも問題ありません。
その際には、トップページにサイト名が表示されないので、メインイメージ1の説明文にサイト名を入れておくといいかもしれません。

いかがですか?自分サイトらしくなってきたでしょうか。
トップページには、不要なものが色々表示されているので、次回はウィジェットやフッターについて修正しようかと思います。

スポンサードリンク

関連記事

  1. ロリポップに独自ドメインの追加。beserCMSをインストールする前の準備!

  2. baserCMSでサイト作成♡手順その7【 ratio_3_2編】

  3. baserCMSサイトにGoogle AdSense広告を設置

  4. baserCMSでサイト作成♡手順その5【 ratio_3_2編】

  5. baserCMSでサイト作成♡手順その3【 ratio_3_2編】

  6. baserCMSサイトをGoogle Search Consoleに登録してみた

  7. beserCMSとは?WordPressと使用感を比べてみたい♪

  8. baserCMSでサイト作成<まとめページ>

  9. beserCMSを簡単インストールした手順と感想♡

スポンサードリンク

特集記事

  1. 私が利用しているおすすめのオンラインストレージ
  2. 料理・食材・スイーツなど食事関連のフリー素材サイト
  3. baserCMSでサイト作成<まとめページ>
  4. 私が利用しているフリー素材サイトまとめ
  5. WPのテーマならTCD!手軽にオシャレな本格的サイトになる♡

最新記事

人気記事

Twitter でフォロー

PAGE TOP