株式会社イチヤマ様ホームぺージ更新方法

管理画面にログインする

ログインするには、まずWordPress管理画面のURLへアクセスします。
下記のURLからアクセスします。

ログイン画面に移動したら、「ユーザー名」、「パスワード」、「表示された文字」を入力し、「ログイン」ボタンを押下します。
これで、管理画面にログインすることができます。

管理画面からログアウトする

管理画面からのログアウトは、画面の右上からおこないます。

管理画面の右上にある「こんにちは、ichiyamaさん」というテキストにマウスを置きます。

マウスを置くとメニューが開くので「ログアウト」をクリックします。
これでログイン画面に移り、ログアウト完了です。

webサイトの表示

管理画面上から1クリックで現在の状態を確認（Webサイトを表示）することが可能です。
ページの更新を行ったら、正しく表示されるか必ず確認してください。

管理画面の左上に「サイト名」が表示されているので、そこにマウスを置きます（上画像で「テスト」としている部分）。
「サイトを表示」をクリックすると、Webサイトへ移動します。

ダッシュボードの見方

WordPressでは、ほとんどの操作を「ダッシュボード」からおこないます。

左側の赤枠部分がダッシュボードのメニューバーです。
ダッシュボードで覚えておきたいのは、以下の項目です。

投稿

投稿とは記事ページのことです。
「お知らせ」や「ブログ」はここから投稿します。
ダッシュボードの左サイドメニュー「投稿」にマウスを置くかクリックすると、以下のメニューが表示されます。

投稿一覧	投稿済み記事一覧へ移動。投稿の新規追加や編集、削除などができる
新規追加	投稿編集画面へ移動。新規記事を作成する
カテゴリー	カテゴリーの管理画面へ移動。新規追加や編集、削除や表示が可能
タグ	タグの管理画面へ移動。新規追加や編集、 削除や表示が可能

メディア

メディアとは、WordPressサイトの中で使用する画像や動画のことです。
管理画面の左サイドメニュー「メディア」にマウスを置くかクリックすると、以下のメニューが表示されます。

ライブラリ	アップロード済み画像一覧ページに移動。画像閲覧や新規追加、編集や削除が可能
新規追加	画像アップロード画面に移動。ファイルをドロップかファイル選択で画像追加が可能

また、投稿ページや固定ページの編集画面からも画像のアップロードをすることができます。

メディアのフォルダ管理

メディア内の画像はすべてフォルダ分けしております。
「すべてのファイル」を押下すると全メディアが表示されます。
新たに画像を追加したときは、ドラッグで各フォルダへ移動させてください。

現状は左側パネルにあるとおりのフォルダを作成しております。
フォルダを新規作成するときは上の青色ボタンの「新規フォルダー」より作成できます。
名前の変更や削除は該当フォルダの上で右クリックで編集していただけます。
順番の変更は、フォルダをドラッグすることで変更できます。

固定ページ

固定ページは、トップページ以外の各ページを作成します。
商品紹介ページからお問い合わせページまでここで編集できます。
管理画面の左サイドメニュー「固定ページ」にマウスを置くかクリックすると、以下のメニューが表示されます。

固定ページ一覧	投稿済み固定ページ一覧画面へ移動。新規追加や編集、削除やプレビューなどの機能が利用できる
新規追加	固定ページ編集画面へ移動。新規の固定ページを編集できる

外観

「外観」では、Webサイトのデザインやレイアウトに関係する設定やカスタマイズをおこなうことができます。管理画面の左サイドメニュー「外観」にマウスを置くかクリックすると、以下のメニューが表示されます。

カスタマイズ	トップページのファーストビューを設定します。
ウィジェット	トップページのコンテンツを作成します。
メニュー	ヘッダーメニューやフッターメニューを作成します。

お知らせ・ブログの投稿（投稿）

新規追加する

投稿を新しく追加するには、管理画面の左サイドメニュー「投稿」→「新規追加」へ進みます。
または、画面上ヘッダーメニューの「＋新規」→「投稿」からも追加可能です。

上記のような投稿作成画面に移ります。

投稿を編集する

①のタイトルと下のテキストは、そのまま入力可能です。
しかし、②のように見出しを挿入したり、新たに段落を作ったりするときは、
「＋」ボタンを押下し、ブロックを追加します。

「＋」を押下すると、メニューウインドウが開きます。
この中から追加したいブロック種を選択し、記事の中に挿入します。
ブロックとブロックの間に新しいブロックを挿入したいときは、
何も選択していない状態でブロック間の余白部分にゆっくりカーソルを合わせると
「 + 」が表示されます。
今回は、見出しブロックを追加してみます。

見出しを選択するとメニューバーが表示されます。
これで新たなブロックが追加され、H3の見出しと本文を入力できるようになりました。

「お知らせ」「ブログ」の必要設定項目

①タイトル	お知らせやブログのタイトルを入力します。
②本文	お知らせやブログの内容を入力します。
③リンク	画像やテキストにリンクを作成できます。
④meta description	記事の概要を入力します。基本的には本文で構いません。
⑤カテゴリー	カテゴリーを指定します。
⑥アイキャッチ画像	記事の見出し画像
⑦パーマリンク	記事のURL設定
⑧プレビュー	ブラウザでの表示確認
⑨公開/更新	公開や更新をします。

①タイトル　②本文

記事のタイトルや本文を入力してください。
そのまま入力可能です。

段落を変えて新たに文章や画像などを挿入したりするときは、
③の「＋」ボタンを押下し、ブロックを追加します。
「＋」を押下すると、メニューウインドウが開きます。
この中から追加したいブロック種を選択し、記事の中に挿入します。
ブロックとブロックの間に新しいブロックを挿入したいときは、
何も選択していない状態でブロック間の余白部分にゆっくりカーソルを合わせると
「 + 」が表示されます。

③リンク

リンクを設定するには、テキストをドラッグ選択し赤枠のリンクマークを押下します。
URLを入力するバーが出てきますので、URLを入力し右側の矢印をクリックします。
リンク設定したテキストを選択すると設定したリンクが表示されます。
リンク先ページを当該ページとは別のタブ（外部サイトへのリンク）で表示させたいときは、
「新しいタブで開く」にチェックを入れます。
修正したいときは、鉛筆マークを押すと編集できます。

④meta description

記事の概要を紹介する100〜120文字程度の文章です。
Googleなどの検索エンジンで検索結果画面のタイトル下に記載されます。
SEOにも影響しますので必ず入力してください。

⑤カテゴリー

トップページに最新の記事から5件ずつ一覧が掲載されます。
カテゴリーは「お知らせ」と「ブログ」があります。
さらに「お知らせ」には子カテゴリーがありますのでそちらも忘れずにチェックを入れてください。
これまで「NEWS」として更新してきた記事は「ブログ」カテゴリーとなります。

⑥アイキャッチ画像

記事の見出しとなる画像を設定します。
お知らせの場合はなくても構いませんが、一覧表示で「ロゴ」画像が自動で入ります。
ブログは画像があればこちらに設定しておくと記事のトップ（タイトルの下）に表示されます。

⑦パーマリンク

記事の内容がひと通り完成したら、一度「下書き保存」をします。
そのあと、投稿パネル赤枠の「URL」のリンクになっている部分を押下し、パーマリンクを変更します。
画像のように投稿年月を入力してください。同日に複数記事を公開する場合などパーマリンクが重複する場合は、末尾に「-2」が自動的に付与されます。

⑧プレビュー

記事を公開する前に、そのページがブラウザ上でどのように見えるのかをプレビューで確認しましょう。
画面右上のPCマーク→「新しいタブでプレビュー」へと進みます。

⑨公開・更新

プレビューで問題がなければ⑧の公開ボタンを押下します。
記事の訂正や更新をしたときもこのボタンで更新されます。

ブロックの操作方法

記事を書くときに使用するブロックは様々な種類があります。

「 + 」を押し、赤枠の「すべて表示」を押下すると、画面左側にブロックパネルが表示されます。

基本的な操作はどのブロックでも同じです。
ブロックを選択すると、上にブロックツールバーが表示されます。
ブロックツールバーの設定項目は、追加（選択）したブロックによって変わります。

①ブロックの種類	アイコンにより、ブロックの種類が表示されています。 クリックすることで、ブロックの種類を変換できます（関連ブロックのみ）。
②ドラッグ	ブロックを任意の場所までドラッグ（移動）できます。
③上に移動/下に移動	クリックすることで、上や下にブロックを移動できます。
④オプション	ブロックを複製したり、削除したりできます。

段落ブロックを追加してみました。
段落ブロックではテキストの配置や装飾がブロックツールバーに表示されます。

ブロックの設定は、画面右側の「ブロック設定パネル」からも可能です。
ブロック設定パネルではブロックの設定タブとスタイルタブがあります。

また、ブロック同士を組み合わせたり、重ね合わせたりすると、ぺージ編集エリア内で特定のブロックのみを選択するのが、難しい場合があります。そういう場合は「リスト表示」で確認してみてください。

画面左上（1）の「三本線アイコン」をクリックすると、各ブロックがリスト形式で表示されます。
ここで編集したいブロックを選択することが可能です。また、（2）をクリックすれば、ブロックの複製や削除もできます。

①画像ブロック

画像ブロックを追加するとこのような画面が表示されます。
アップロードから画像を選択して追加します。

右側のブロック設定パネル内にある「代替テキスト」は必ず入力するようにしてください。
画像サイズもブロック設定パネルより変更できます。

スタイルタブではフレームや枠線を設定できます。

②リストブロック

リストブロックでは、箇条書きや順序付きリストを作成することができます。
リストブロックが追加されたら、表示する内容を入力していき、エンターキーで改行すると2行目・3行目と、リスト項目を増やしていくことができます。
リストタイプを変更したいときは、ツールバー一番左のブロックマークを押すとブロック全体が選択され、ツールバーが少し変化しますので、赤枠のボタンでリストタイプを変更します。
他にもブロック設定パネルのスタイルタブでも様々なリストタイプに装飾することもできます。

③カラムブロック

カラムブロックは、ひとつのブロックを複数に分割できる機能をもつブロックです。画像を横に並べたり、画像とテキストを横並びに表示させたりできるので、投稿のレイアウトの幅が広がります。

カラムを選択するとレイアウトパターンが表示されます。
ここには表示されていませんが最大6カラムまで増やすことができ、ブロック設定パネルで変更できます。

わかりやすいようにリスト表示にしてあります。
カラムを追加するとカラムの中に「 + 」が表示されますので、通常のブロック追加と同じように「 + 」を押して画像や段落などのブロックを追加します。

50％ずつの2カラムでそれぞれ段落と画像+段落を入れました。
リスト表示を見るとわかりやすいと思います。
この画像はブロック全体を選択している状態です。
この状態でブロック設定パネルを見ると、カラムが「2」となっています。
ここでカラム数を1～6まで変更することができます。
「モバイルでは縦に並べる」をOFFにすると現在の見た目のまま横並びに表示されますが、サイズがそのまま縮小されるため小さくなります。

こちらはリスト表示を見るとわかるように左側のカラムのみを選択しています。
いずれかのカラムのみを選択すると、ブロック設定パネルにカラムの幅を設定する項目が表示されます。
ここでカラムの横幅割合を％で変更することができます。
もし左側カラムを80％にすると右側のカラムは20％ということになりますが、右側カラムの画像は比率を守って縮小されるため小さくなります。

④テーブルブロック

テーブルブロックは表を作成するブロックです。
カラム数（列）と行数を設定し、「表を作成」ボタンで追加します。

2列4行の表を作成し、ブロック設定パネルで「ヘッダーセクション」を追加、スタイルタブで「レスポンシブ」を設定しました。
「表のセル幅を固定」をONにすると列が均等の幅で固定されます。
スタイルタブでは表のテンプレートがいくつか用意されていますし、枠線の色や太さの設定もできます。

投稿を削除する

管理画面の左サイドメニュー「投稿」→「投稿一覧」へ進みます。
投稿の一覧が表示されますので、削除したい記事にマウスを合わせます。
「ゴミ箱へ移動」を選択すると、該当記事を削除することができます。
こちらは指定の記事を管理画面の「ゴミ箱」に移動させただけで、完全に削除できたわけではありません。
ゴミ箱に記事が入ると、記事一覧の上部に「ゴミ箱」の項目が表示されますので「ゴミ箱」へ移動し、対象記事を「完全に削除する」を選択すれば、完全に投稿を削除することができます。

カテゴリー

投稿の中で、「お知らせ」と「ブログ（旧NEWS）」を区別していきます。
今後カテゴリーを増やしていくこともできます。

管理画面メニューの「投稿」にマウスを置くとメニューが表示されますので「カテゴリー」を選択します。
現在作成済みのカテゴリーが一覧で表示されます。

カテゴリーには、親カテゴリーと子カテゴリーがあります。
現在、親カテゴリーは「お知らせ」と「ブログ」です。
子カテゴリーは「お知らせ」の中に4つあります。
この、子カテゴリーはトップページの一覧で表示されますし、検索などにも役立ちます。

お知らせの中に「テスト」という子カテゴリーを作成してみます。

①名前	一覧に表示されるカテゴリー名です。
②スラッグ	カテゴリー名を英語表記にします。
③親カテゴリー	子カテゴリーを作る時に入れます。 親カテゴリーを作るときは「なし」を選択します。
④新規カテゴリーを追加	入力が完了したらこのボタンで追加します。

ページの編集（固定ページ）

固定ページではトップページ以外のページを作成します。
商品紹介や会社概要ページなどはすべて固定ページで作成・編集します。

管理画面のメニューから「固定ページ」を選択します。
現在あるページの一覧が表示されます。

商品紹介の「店舗・介護・保育用食器」のページを見てみましょう。

リスト表示を見るとページの構成がわかりやすくなります。
基本的な作り方は「投稿」と同じ要領です。ブロックも同じものです。

見出しの作成

すでにある見出しの名前を変更するときは、選択して文字を変更すればいいのですが、新たに見出しを追加したいときには少し設定が必要になります。

導入事例のような赤文字の見出しで右側にラインが入る見出しの設定をします。

1. ブロック追加から見出しを選択します。
2. 見出しの種類は「H2」を設定してください。
3. 見出しのテキストを入力します。
4. ブロック設定パネルの下部「高度な設定」を開くと一番下に「追加CSSクラス」があります。
   そこに「line red」と入力します。必ず半角英数で入力し、lineとredの間は半角スペースを入れてください。

区切り線の追加

酒器ページにあるような区切り線を引きたいときは「カスタムHTML」ブロックを選択します。

カスタムHTMLブロックを選択すると、段落のようにテキストを入力するバーが出てきます。
そちらへすべて半角英数で「<hr class=”blue”>」と入力します。

これで以下のような区切り線を追加できます。

会社概要ページの沿革追加

沿革部分は「タイムライン」というブロックを使っています。
少し設定が複雑なので、すでにあるブロックを複製して新たな沿革を追加します。

リストビューを表示し「タイムライン」を選択、展開します。
追加したい場所のすぐ上の既存のタイムラインを選択し、右端にある3点を押します。
オプションメニューが表示されますので、「複製」を選択します。

複製されました。

追加したタイムラインを展開するとわかりますが、カラムが2つ入っていますので左側のカラムに「年」、右側のカラムに「内容」を入力してください。

画像の変更

「導入事例　町田商店様」の画像を変更してみます。
この導入事例では、3カラムでそれぞれのカラム内には画像と段落が入っています。

変更したい画像を選択すると上にツールバーが表示されます。
「置換」を押すと差し替え画像を設定できます。

PCとスマホで表示画像を変える

THAILANDページの「Social Media」項目のようにスマホ表示にすると中の文字が小さくなってしまう時は、解決策としてPC用の画像とスマホ用の画像を別々に作成し、表示を切り替える方法があります。

PC用画像の設定

画像ブロックを選択した状態で右側のブロック設定パネルの「デバイス表示設定」を展開します。
上から3つ目の「タブレット以上：599未満は非表示」を選択します。
これは、閲覧者の画面幅が599px未満のときにこの画像を非表示にする設定です。
つまり、PCとタブレットからアクセスしたときに表示されます。

スマホ用画像の設定

画像ブロックを選択した状態で右側のブロック設定パネルの「デバイス表示設定」を展開します。
一番下の「スマホ：600px以上は非表示」を選択します。
これは、閲覧者の画面幅が600px以上のときにこの画像を非表示にする設定です。
つまり、スマホからアクセスしたときに表示されます。

オリジナル商品カタログの追加

この場合のようにカラム枠が余っているときは、リストビューでカラムを選択すると「 + 」マークが出ますので、画像ブロックを追加します。

※新しい行でオリジナル商品カタログを作る時は、カラムブロックを追加して50/50の2カラムにします。

↓★2024/3/1追記★↓

新しい行でオリジナル商品カタログを作る時の注意点

親のカラムを選択した状態で、ブロック設定パネルの「高度な設定」に、
「catalog-row」と入れてください。
この設定は、カラム間の上下の隙間を調整するためのものです。

↑★2024/3/1追記ここまで★↑

画像を追加して、もしこのように画像がずれてしまっていたら赤枠の「配置」を押して中央揃えにしてください。

↓★2024/3/1追記★↓

画像が大きく表示されてしまうときは・・・

解像度72ppi、横幅390pxで作成した画像を2カラムで入れたときに、赤枠の画像のように他より大きく表示されることがあります。
これは、画像のサイズ（データ量）が大きい場合にこのように表示されます。
30KB程度だと実際のサイズで表示されますので、軽量化してアップロードしていただくとこの現象は起こりません。

画像が大きいままでも実際の公開画面では正しく他の画像と同じサイズで表示されますが、気になるときは、右側のブロック設定パネルの解像度を「フルサイズ」にしてください。
その後、画像のツールバーにある表示位置の設定を「中央揃え」にすると他の画像と揃います。
※幅や高さの設定は不要です。

↑★2024/3/1追記ここまで★↑

代替テキストの入力も忘れずに行ってください。
画像にPDFリンクを付けるには、画像を選択した状態でツールバーのリンクマークを押してPDFの短縮URLを入力します。

オリジナル商品カタログ以外の画像

画像の差し替えはツールバーの「置換」から行います。
新たに追加するときは、ブロックを追加から画像ブロックを追加します。

カタログPDFの短縮URL発行

アイキャッチ画像の準備

ダウンロード画面に表示される画像をご準備ください。
推奨サイズは横幅が1000px以上です。

ダウンロード確認ページの作成

管理画面のメニューからダウンロードを選択します。
一覧ページが表示されますので、「新規追加」ボタンを押下します。

新規編集画面が表示されますので、以下の番号順に設定してください。

①タイトル

ダウンロード一覧ページに表示されます。

②アップロード

アップロード方法は以下のとおりです。※ファイル名が文字化けしても問題ありません。
・「SELECT FILE」でアップロード
・エクスプローラーからドラッグでアップロード
・メディアライブラリから選択してアップロード
・URLからアップロード

③パーマリンク

PDFのファイル名を入れます。「.pdf」まですべて入れてください。

④概要

カタログの説明です。一覧ページに表示されます。

⑤下書き保存

ここで一旦、下書き保存を行ってください。

⑥詳細設定

バージョン	最初は「1.0」に設定します。カタログの更新があったら数字を変更します。
リンクラベル	ダウンロードボタンの表示名を入力します。 現在、日本語版「ダウンロード」、英語版「Download」としてあります。
ダウンロードの 制限回数	特に制限を設ける必要がなければ、空欄のままにしてください。
閲覧数	空欄のままにしてください。 ダウンロードページの閲覧数がカウントされて自動的に数字が入ります。 回数をリセットしたいときは削除できます。
ダウンロード数	空欄のままにしてください。 ダウンロード回数がカウントされて自動的に数字が入ります。 回数をリセットしたいときは削除できます。
Package Size	PDFのファイルサイズを入力します。 添付ファイル欄にアップロードしたファイル名の下にサイズが記されています。（青枠） アップロード後、下書き保存をしていないとサイズが表示されません。
アクセス許可	デフォルトのまま「すべての訪問者」のみにしてください。
ページ テンプレート	プルダウンの上から3番目「Single column,Flat」を選択してください。

⑦アイキャッチ

初めに準備したPDFの画像を設定します。

⑧プレビュー、⑨公開

確認して問題がなければ「公開」します。
ここで作成した画面がバナーをクリックしたときに確認ページとして表示されます。

短縮URLの確認

公開まで終わったら一覧ページに戻ります。
画面右の方に「短縮リンク」の項目がありますので、リンクの上で右クリックをして、
「リンクのアドレスをコピー」を押し、バナー画像のリンク設定に貼り付けます。

ページの新規追加（固定ページ）

商品紹介など新たにページを追加するときには、固定ページの新規追加で作成します。

固定ページ一覧から「新規固定ページを追加」をクリックします。
作成方法は投稿ページでお知らせやブログを書くときと同様になりますが、設定項目が一部異なりますのでご注意ください。

①タイトル	グローバルメニューにも表示されるページ名です。
②非表示・無効	タイトル要素を「ON（非表示）」にしてください。
③下書き保存	パーマリンク設定をするため一旦下書き保存をしてください。
④パーマリンク	ページのURLになります。半角英数で決めてください。 他のページと被らないようにご注意ください。
⑤アイキャッチ	ページのヘッダー画像になります。 比率16:9（横1200px以上、高さ675px以上、解像度72ppi）の画像推奨
⑥プレビュー	ページが完成したらプレビューで表示の確認をします。
⑦公開	ページが完成したら公開ボタンを押します。

グローバルメニューの設定

固定ページを新規追加されただけではメニューには表示されませんのでメニューの設定をします。
「外観」にマウスを乗せるとサブメニューが表示されますので「メニュー」を選択します。

赤枠の中に現在のメニューが階層で表示されています。
ここでドラッグすることでメニューの表示順を変えたり、削除したりすることもできます。

新たにページを作成してメニューに追加表示させたいときは、左側の「メニュー項目を追加」から選択します。
今回は新商品というページを作成したので、そちらにチェックを入れて「メニューに追加」を押します。

メニュー構造の一番下に新商品が追加されました。

次に表示位置を変更します。商品紹介の中の一番上に入れてみます。
ドラッグで動かします。
最後に「メニューを保存」ボタンを押します。

設定が完了したら表示を確認してみましょう。

商品紹介の中に新商品ページが追加されました。

フッターメニューの設定

トップのグローバルメニューとページ一番下にあるフッターメニューは別で管理されていますので、メニューを追加や変更したらフッターメニューも変更が必要です。

管理画面の左サイドメニュー「外観」にカーソルを合わせるとサブメニュが表示されます。
「ウィジェット」を選択します。

フッターはフッター[1]、[中央1]、[中央2]、[右]の4カラムで構成されています。
それぞれ展開し修正していきます。
すべて項目は段落ブロックで作成したテキストに各ページのリンクを付けています。

修正が終わったら、右上の「更新」ボタンを押してください。

トップページの更新

トップページは固定ページとは異なり、ウィジェットで作成されています。
管理画面の左サイドメニュー「外観」にカーソルを合わせるとサブメニュが表示されます。
「ウィジェット」を選択します。

ウィジェットページが表示されます。
トップページで表示されているコンテンツの内容は「フロントページコンテンツ[上部]」の中に入っていますので、こちらをクリックして展開します。

リスト表示を見ていただくとわかるように、中のコンテンツの作成方法は固定ページなどと同様にブロックで作成しています。
見出しも「高度な設定」→「追加CSSクラス」に「line red」と記載していただければ表示されます。

更新が終わったら、右上の「更新」ボタンを忘れずに押します。

ファーストビュー画像の変更

トップページのファーストビュー（トップに表示されるスライダー）の画像を変更します。

管理画面のメニュー「外観」にマウスを乗せ、「カスタマイズ」を選択します。

カスタマイズ画面が表示されたら「ファーストビュー設定」を選択します。

さらに表示されたメニューから「画像スライダー設定」を選択します。
現在は画像[PC] [1]～[7]まで画像が入っています。
変更したい画像の下にある「画像を変更」を押して新しい画像を選択します。
不要な画像を削除したい場合は、「削除」ボタンを押します。

お問い合わせ（採用情報・お問い合わせ）

採用情報ページとお問い合わせページにはそれぞれコンタクトフォームが設置されています。
お問い合わせが送信されると、登録されたメールアドレスにメールが届きます。
※送信者（問い合わせした方）にも内容確認のメールが送信されます。

お問い合わせの履歴を確認します。
管理画面メニューの「問い合わせ履歴」にマウスを乗せ表示されたサブメニューから「受信メッセージ」を選択します。

一覧から確認したいメッセージを開くと内容を確認できます。