機能紹介・操作方法 その2

サンプルサイト

もくじ

ABOUT（プロフィール、自己紹介）ページ

プロフィール、自己紹介ページです。

 

メニューから「ABOUT」。（サブディレクトリにWordPressをインストールしている場合、メニュー「ABOUT」がリンクエラーになり編集画面にアクセスできないことがあります。その場合は管理者権限でログイン→固定ページ→ABOUTでアクセスしてください。リンクエラーの解消法は→こちら）

 

アー写とプロフィール欄からなります。プロフィール欄はエディタで自由に書き込むことができます。画像やリンクを貼ることも可能。サンプルサイト

NEWS（お知らせ）ページ

お知らせページです。

 

メニュー「NEWS」から「新規追加」

 

お知らせの投稿は3パターンに対応してます。

1.リンク無し

タイトルがそのまま表示されるだけです。

2.お知らせ詳細（PROのみ）

お知らせ詳細を選択するとエディタが現れて入力できるようになります。入力した内容は単体のページとして表示されます。
自主イベントをする、新しい音源が出る、といったときの特設ページとしても使えます。サンプルサイト

3.外部リンク

外部リンクを選択するとURL入力欄が現れます。別ページへ飛ばす場合に使えます。

 

NEWSはトップページには最新の5件、一覧ページでは1ページの表示が20件でそれ以上になると20件ごとにページが分けられます。

CONTACT（お問い合わせ）ページ

お問い合わせページです。

メールフォームになっていて入力、送信された内容が、指定したメールアドレスに届きます。

PAST LIVE（過去のライブ情報）ページ(PROのみ)

「LIVE」ページのPAST LIVE(過去のライブ情報)の表示件数は10件。それ以前の情報は「more」リンクで「PAST LIVE」単体のページに飛びます。

 

ライブ情報を更新していくことで自動生成されるページなので特に何をすることもありません。1ページの表示件数は20件。それ以上になると20件ごとにページが分けられます。サンプルサイト

 

 

SETTING – 基本設定

主に「SETTING」にまとめました。

 

メニュー
SETTING→基本設定

ロゴ

各ページヘッダーの左側に表示されるロゴです

 

高さ50pxで表示されます。拡大しても劣化のないSVG形式推奨ですが、PNGやJPG形式などの場合は大きめに作ることできれいに表示されます。

 

参考：無料で使える！簡単にロゴを作成できるおすすめサイト8選

 

シンプルに文字を画像化したもので良ければ追加料金となりますが、制作も承っております。

ディスクリプション

サイトの概要文、説明文です。検索結果のページ概要として表示されます。

キーワード

最近ではほとんど意味がないと言われますが、一応入力欄を作りました。検索エンジンに認識されたいワードをカンマ区切りで入力。

 

ファビコン

PCでページを開いたときにブラウザのタブにつくマークです。

 

ico形式、マルチアイコンで作成することをお勧めします。

 

参考：マルチアイコン（ファビコン）の設置方法と作り方！icoに変換は必要なの？

ico形式の画像がメディアにアップできない場合は↓
参考：favicon.icoをWordPressの管理画面からアップロードできない→ wp-config.php を一時的に修正

アップルタッチアイコン

iPhoneやなんかでホームにブックマークを置いたときのマークになります。
PNG形式、180×180px推奨。

 

コピーライト

一番下のフッター部分に表示されます。

参考：年号と©マークと何が必要？Copyright（コピーライト）表記の正しい書き方

アイキャッチ画像

SNSなどでシェアされたときに表示される画像を設定します。管理画面メニュー

任意の画像を設定。

 

Twitterでシェアされた場合

 

Facebookでシェアされた場合

リンク色

任意の色を選んで→Update

 

リンクの文字にマウスオーバーすると指定した色になります。

SETTING -トップページ

ヘッダー画像

トップページのメインの画像です。

メニュー
SETTING→トップページ→ヘッダー画像

右下の「画像を追加」ボタンで入力欄が追加されます。画像は高さ800px、幅1920px以上を推奨しています。中央を基準にブラウザの幅によって左右がトリミングされます。

アップした画像が上から順にスライド表示されます。

一覧左側の数字部分をドラッグすることで順番を入れ替えることも可能です。

ヘッダー動画(PROのみ)

PCのみヘッダーに動画を表示させることができます。

 

メニュー
SETTING→トップページ→ファイルを追加する

で動画をアップ。

 

ここで注意は、WordPressではメディアにアップロードできるファイルの容量に制限があります。
これは契約しているサーバーによっても異なります。

上限を変更するには設定が必要です。
参考：WordPressのファイルアップロード上限値を変更する方法

動画がアップされた場合は動画を優先して、動画がアップされてない場合は画像が表示されます。

 

あまり容量の大きな動画を設定すると、読み込みに時間がかかる場合があります。
極力短めの容量の小さい動画を推奨します。

スマホは通信が遅いとしばらく画面が真っ暗になってしまうなどの問題があり、閲覧者に負担がかかってしまうので動画の設定に関わらず画像を表示させる仕様としました。

 

YouTube動画

トップページの動画です。

メニュー
SETTING→トップページ→YouTube動画

右下の「動画を追加」ボタンで入力欄が追加されます。YouTubeのIDを入力。

 

 

PCではフッターの右側、スマホではメニューを開いたときのメニュー下に各SNSとYouTbeのアイコンがあります。

PC

 

スマホ

 

メニュー「SETTING」の「SNSリンク」

URLを入力したアイコンのみ表示されます。ツイッターしかしてないという場合はツイッターのアイコンだけが表示されます。

SETTING – GoogleAnalytics

グーグルアナリティクスを利用する場合にコードを入力します。
「UA-」以降の数字から入力してください。

※All in One SEOなどのプラグインを追加して、そちらで設定する場合は、空白のままにしてください。
入力してしまうと二重で計測される可能性があります。

参考：【今さら聞けない】Googleアナリティクスとは？導入手順から使い方まで5分で理解！

グローバルナビとはサイトのメインのメニュー部分です。

ここは元からWordPressに備わっている機能で編集できます。

今まで編集者ユーザーでログインしてましたが今回は管理者ユーザーでログイン。

左側のメニューが増えます。

 

左側のメニューの「外観」から「メニュー」

 

デフォルトでは

  • HOME
  • ABOUT
  • LIVE
  • VIDEO
  • DISCOGRAPHY
  • SHOP（外部リンク）
  • MAIL MAGAZINE（PROのみ）
  • CONTACT

の8つのメニューを用意しています。メニュー設定はグローバル。

 

 

例として外部にブログサイトがある場合、メニューに「BLOG」を追加します。
左側の「メニュー項目を追加」のカスタムリンクでURLとリンク文字列(メニュー名)を入力して「メニューに追加」。すると右側の「メニュー構造」に追加されます。
ドラッグで表示順を任意に決めて「メニューを保存」です。

 

こんな感じ。

 

また、外部リンクを別タブで開くようにしたい場合は、以下を参照ください。

参考：グローバルメニューに外部リンクを追加、別タブで開きたい。

 

必要ないメニューは右側の矢印からメニューを開いては削除できます。

フッターにメニューを追加できます。

外観→メニュー→新しいメニューを作成しましょう。

 

任意のメニュー名を付けて
メニュー設定→フッターにチェック→メニューを作成

 

任意のメニューを追加→メニューを保存。

 

追加されました。

 

フォントについて

グローバルナビ、各ページの大見出しのフォントは英語の場合はの「Lato」、日本語の場合は「Noto Sans JP」に設定しております。

変更についてはGoogleフォント内のフォントであれば、対応可能です。

 

続き→WorPressのインストール、テーマの導入法

 

戻る