武庫勤労者山岳会　新ＨＰサイト　使用説明書2017/02/14　作成： yoshida yukihito

サイトアドレス：　http://mukomount.sakura.ne.jp/wp/

１）　概要

　　　・新サイト概要

　　　・ログイン方法

２）　投稿作成方法

　　　・文章記入

　　　・写真挿入方法

　　　・写真ギャラリー作成方法

３）　カレンダーイベント作成方法

４）　重要告知作成方法

５）　スライダー作成方法

１）　概要

　　新サイト概要

　　2017/02 時点で　さくらサーバライトプラン（月額 129 円）

　　MySQL が使用不可のため　SQLite Integration で動作させています　　WordPress 4.7.2 　テーマ：　STINGER8 Child　　使用プラグインは以下の通りです　　　All In One SEO Pack　　　ＳＥＯ対策

　　　Contact Form 7 　　　　　メール送信フォーム

　　　Event Organiser 　　　　 カレンダー形式のイベント告知

　　　Imsanity 　　　　　　　　写真の縮小・品質の均一化

　　　Meta Slider 　　　　　　 トップページにスライドを設置

　　　Popular Widget 　　　　　人気の記事

　　　Post Expirator 　　　　　告知期限の設定

　　　TinyMCE Advanced　　 投稿記事用のビジュアルエディター

　　　Foo Gallery　　　　　　　写真ギャラリー管理

　　　FooBox Image Lightbox 写真表示の補助

ログイン

ログインするには

トップページからメニュー内にある

「会員ログイン」というボタンを押します。

直接以下のアドレス

http://mukomount.sakura.ne.jp/wp/wp-

login.php

でもログインページへ移行します

サイトへのログイン画面です

ページを閲覧するだけでしたらログインは

不要です。記事投稿・イベント投稿など編

集作業を行う場合にログインしてください。

ユーザーまたはメールアドレス

各会員ごとに発行しています

新規登録、再発行はＨＰ委員までお問い合

わせください。

パスワード

非常に重要ですので各会員ごとに管理して

ください。

ログインした直後の画面です

ユーザーレベルにより見え方は異なります

が、画面の上に黒いバーが１行増えており

「ダッシュボード」という画面が表示されて

いるはずです。

ログインできない場合は・・・

ユーザーまたはパスワードの入力時に

全角（日本語入力）・半角を確認してくださ

い。必ず半角で入力してください。

また、大文字・小文字も区別しています

キーボードの　[caps lock] を確認してみ

てください

記事投稿を説明します

「ダッシュボード」から「投稿」にマウスカー

ソルを合わせるとサブメニューが表示され

ます。

「新規追加」を選択します

投稿一覧は過去に投稿した記事、下書き

記事を編集する場合に使用します。

また、ここで表示される記事は各会員

（ユーザー単位）で表示されますので他会

員が投稿した記事は表示されません。

例外として運営委員・ＨＰ員委員などの管

理者は全ての記事写真にアクセスできます

新規投稿を追加

という画面が表示されます

灰色で「ここにタイトルを入力」とあるのが

投稿記事の表題になります。

今回は　テスト投稿１（ココに題名を入力）と

してみました。

青い文字で表示されているパーマリンクは

そのままにしておいてください。

左画面で「文章あああああ・・・」と入力され

ているところに、山行文章を入力していきま

す。

キーボードの「エンターキー」で改行されま

す。通常はブラウザ表示されるときには自

動的に改行されていきますので１つの文章

区切り以外は、長々と書いていっても大丈

夫です。

しかし、キーボードの「エンターキー」で改

行すると１行空いてしまいます。

１行空けたくない場合は

「シフト」＋「エンターキー」で改行を行うと普

通のワープロのように改行できます。

記事投稿画面の右端には左図のような設

定を行う箇所があります。

公開

下書きとして保存

→　まだＨＰに公開するまえに一時保存す

る場合に使用します。

公開状態

→　通常は　「公開」　でＯＫです

　　パスワード保護を選ぶとパスワードを

知っている人しか閲覧することが出来なく

なります。

すぐに公開する

→　ここは自動的に今日の日付が入ってし

まいます。昨日や一昨日の山行記事を投

稿する場合はココの日付で調整してくださ

い。

カテゴリー

新規追加の場合は「未分類」になっていま

す。「未分類」カテゴリーのチェックをはずし、

山行にあったカテゴリーを選択することをお

薦めします。

後から検索しやすくなります。またトップ

ページの山行カテゴリーで素早く表示する

ことができるようになります。

タグ

行かれた山域（たとえば「六甲山」「金剛

山」「北アルプス」など）を設定するとあとか

ら検索しやすくなって便利です。

Post Expirator

ココは通常、触らないようにしてください。

特別な事情があってある期間後には閲覧

不可にしたい場合だけ設定します。

アイキャッチ画像

ココも重要です。

青い文字をクリックして次に説明するメディ

アライブラリから画像を選択します。トップ

ページ上に投稿のシンボルとなる画像を設

定します。ここも設定しておくことをお薦めし

ます。

記事の中に画像を追加していきます

文章を書いている途中で、画像を挿入した

い場所（カーソルの点滅がある箇所）で「メ

ディアを追加」というボタンをクリックします。

文章を書き終わってた後からでも、写真は

追加できます。

メディアライブラリ　という画面が表示され

ます。ここで写真の選択と追加を行います。

ちなみに「ダッシュボード」→「メディア」でも

同様のことが行えます。

写真をＨＰに新規追加するには「ファイルを

アップロード」と書かれた場所をクリックして

ください。

画面に「ここにファイルをドロップ」となって

いる場所に写真をドラッグ＆ドロップするか、

「ファイルを選択」ボタンをおして写真を選

択してください。

サーバ容量の関係で写真は自動的に　

1024px　jpg 85% まで自動的に縮小と画

像品質が落とされます。

必ずオリジナル画像は各自保存しておいて

ください 。

アップロードした画像をクリックして選択し

てください。各写真の属性とＨＰに表示する

ときの細かい設定が可能です。

タイトル

任意で設定してください。付けておいたほう

が後々何の写真だったかが分りやすい。

キャプション

ココは基本空白にしてください。ＨＰに挿入

したときに写真＋キャプション文章という形

式で挿入されます。写真アップ時にメー

カーやカメラ形式がそのまま入っている場

合がありますので削除をお薦めします。

代替テキスト

テキストブラウザ用のテキストです。最近で

はテキストブラウザを見ないので基本空白

で良いと思います。

CustomURL

画像クリックしたときに別ページにリンク設

定したい場合だけ使います。基本的に空白

で良いです。

CustomTarget

基本触らないでください。

CropPosition

基本そのままでＯＫです。

添付ファイルの表示設定

配置：　基本は　なし　にします

リンク先：

「なし」を選択した場合は画像をクリックして

も何も起きません。

「メディアファイル」を選択した場合は、ＨＰ

上で写真をクリックするとポップアップで大

きく再表示します。

「添付ファイルのページ」は謎です。

「CustomURL」では CustomURLで設定した

URL に飛んでいきます。

サイズ

「サムネイル」は 290px四方の小さめ画像

としてＨＰ上に挿入。

「中サイズ」はサムネイルより一回り小さめ

の画像サイズで挿入。

「大サイズ」は投稿記事の幅にちょうど良い

大きさで挿入。

「フルサイズ」は投稿記事の幅にちょうど良

い大きさで挿入。

お薦めは設定は、

配置：なし　リンク先：メディアファイル

サイズ：大サイズがちょうど良いと思います。

続いて、画像ギャラリーを説明します。

画像ギャラリーは前もって準備しておくこと

をお薦めします。

「ダッシュボード」→「FooGallery」にカーソ

ルをあわせ「Add Gallery」を選択します

Add New Gallery という画面に切り替わり

ます。「ここにタイトルを入力」に適当に分り

やすい文字列を放り込んでください。このタ

イトルはギャラリー挿入のためだけに使用

します。

灰色の「Add Media」というところをクリック

します。

メディアライブラリが表示されますのでギャ

ラリーに追加する写真をクリック（チェックが

入るので分りやすい）していきます。

最後に一番下にある青い Add Media ボタ

ンを押すと、先ほどの画面に戻りギャラリー

に写真が登録されます。

少しだけ画面の下までスクロールしてくださ

い。ここでは Size という項目だけ設定す

ればＯＫです。

そのままでは　290px というおおきなサム

ネイルになってしまうのでギャラリーらしく

複数の画像を一覧表示するため　90px 程

度に設定します。

ここの値が小さいほどＨＰ上で小さなサム

ネイルとして表示されます。

60px ～　90px あたりがお薦めです。

ココまで出来たら　「公開」ボタンを押してく

ださい。念のためキチンと登録されている

か確かめます。

「FooGallery」の「Gallery」をクリックして

一覧表示させて見てください。一番上に先

ほど作ったギャラリーが登録されているは

ずです。

では、投稿記事にギャラリーを挿入してみ

ます。挿入方法は写真とほぼ同じ要領です。

今回は「Add FooGallery」というボタンを押

します。

ギャラリー選択画面が表示されます。

先ほど作ったギャラリーをクリックすると

チェックが入り選択されたことが分ります。

右下の青いボタン

「Insert Gallery」というボタンをおしたら

編集画面に戻ります。

カーソルがあった位置にギャラリーが挿入

されたことがわかります。

ギャラリーは挿入されたようですが、実際

の表示を確かめてみたいと思います。

右端に「プレビュー」というボタンがあるの

で押してください。

別にウインドウが表示されて実際のイメー

ジを見ることができます。

サムネルの大きさを調整したいなどギャラ

リー内容を編集するには「ダッシュボード」

から「FooGallery」で行ってください。

カレンダーにイベントを追加します。

「ダッシュボード」→「イベント」にカーソルを

合わせます。

まずは　「カレンダー表示」　を選択してくだ

さい。左図のようにカレンダー形式に直接

登録していくことができます。

※あとから編集することもできます。

ただし、この方法だと細かな設定はできま

せん。追加できるのは日時・イベント名など

に限られます。

そこで、「イベント」→「新規追加」から登録

して行くことにします。

タイトル：

カレンダーに表示されるイベント名

記事：

カレンダーにカーソルを合わせた時やク

リックして詳細を表示したときにココに記載

した内容が表示されます。写真の登録もＯ

Ｋです。

日時・場所（地図）も細かく設定することが

できます。

複数日数かかる場合でも End Date に数

日後の日付を設定すればカレンダー上に

日数分帯状に表示されます。

続いて、重要な告知を特別に表示したい場

合に使うアナウンスを説明します。

夏冬山スクール・各種教室などの告知に使

用できます。×ボタンを押すまでトップペー

ジ上部に表示され続けます。

「ダッシュボード」→「設定」

→「Announcer」　を選択してください。

右に InActive とあれば非表示、Active

とあれば表示対象であることがわかります。

青いボタン「Create New Announcement」を

クリックします。

「New」 に　タイトルを入力してください

「Announcement」に告知内容を記入して

行ってください。文字修飾・リンクも使用で

きますので、このアナウンスから詳細ペー

ジに飛ばすこともできます。

文章の枠を下のほうへスクロールすると、

いつまで告知するのか、どんな配色で表示

するのかを設定することができます。

告知期限をこえて表示されると少々間抜け

た感じがしますので、ここは必ず設定して

おくようにします。

From が　告知開始日

to が　告知終了日　となります

Show Close Button が　ＹＥＳ　にしておい

たほうが良いでしょう。告知が消せなくなっ

てしまいます。

ここでは配色を指定できます。

Background color と Text color をどぎ

つくならないように適当な配色にしてくださ

い。リンクが青色なので文字色は青色以外

が望ましいと思います。

ここからは　トップページに設置しているス

ライドの説明です。スライドを非表示にした

い場合は「外観」→「テーマの編集」から

header.php を開き直接編集します。

<?php if ( is_home() || is_front_page() ) { ?>

<?php echo do_shortcode("[metaslider

id=284]"); ?>

<?php } ?>

と書かれた部分をコメントアウトか削除して

ください。その後、「外観」→「ヘッダー」を開

き画像を選択すると静止画だけを表示する

ことができます。

スライドの設定方法

「ダッシュボード」→「Meta Slider」を選択

します。

現在、登録されているスライド一覧が表示

されます。

上部にある「＋」ボタンを押すと登録スライ

ドそのものを１つ増やすことができます。

右手の「スライドを追加」ボタンを押すとスラ

イドに含まれる写真・イラストを追加する事

ができます。

URL にアドレス（投稿記事でも固定記事でも

他のＨＰでも大丈夫です）を記入してやると

スライド写真をクリックしたときにそのペー

ジに飛ばすことができます。

夏冬山スクールのお知らせやイベント告知

に有効だと思います。

スライドの右端には

スライドの表示形式を細かく設定する箇所

があります。

お薦め設定は下記のとおり

ＮｉｖｏＳｌｉｄｅｒ

幅：1024px 高さ：300px

効果：フェード

テーマ：デフォルト

矢印：チェックあり

ナビゲーション：非表示

高度な設定では

中央揃え：チェックあり

自動再生：チェックあり

スライド遅延： 8000～10000ms

アニメ速度： 1500～2000ms

いろいろ設定したらもっと良い効果がある

かもしれないでの試してください。

最後にスライドの「ショートコード」

このコードを header.php に埋め込んでス

ライド表示させています。表示する位置とど

のスライドを表示させるかを設定していま

す。

表示するスライドを変更する場合は、

「外観」→「テーマの編集」から header.php

を開き直接編集します。

<?php if ( is_home() || is_front_page() ) { ?>

<?php echo do_shortcode("[metaslider

id=284]"); ?>

<?php } ?>

このように記述された部分を探してください。

[metaslider id=284]　の数字の部分を

変えることで表示スライドも変えられます。

ＩＤ番号は　スライド設定画面の右下

「ショートコード」という部分にあります。