hane - AGN Web!

WordPressの無料テーマAttitudeの使い方（固定ページ活用方法）

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方（固定ページ活用方法）
3.WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）

前回に引き続き、WordPressの無料テーマAttitudeの使い方を
説明していきたいと思います。
今回は固定ページを作成しトップへ展開するところまでを説明します。
前回と同様の完成サイトのトップページを元に説明していきます。

制作サイト

業種：歯科医院
ページ数：10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

固定ページの作成

下記のページを固定ページで作成します。
ダッシュボード / 固定ページ /

・院長のあいさつ
・一般歯科
・小児歯科
・口臭歯科
・予防歯科
・歯周病
・ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

固定ページにはアイキャッチ画像を設定してください。

院長あいさつ、診療科目、ご案内、新着情報

1.院長あいさつ
ダッシュボード / 外観 / Theme Options / Advance Options / Home Slogan Options

スライダー下に院長あいさつを掲載します。
キャッチコピーを別で作成し、
「院長あいさつ」の固定ページにリンクをしています。

・Disable Slogan Part
表示の有無

・Slogan Position
表示の位置
Above Slider　→　スライダーの上
Below Slider　→　スライダーの下

・Home Page Slogan1
キャッチコピー

・Home Page Slogan2
サブコピー

・Redirect Button Text
ボタン文字

・Redirect Button Link
ボタンリンクURL

メインコンテンツ
ダッシュボード/ 外観 / ウィジェット

診療科目、ご案内、新着情報を掲載します。
ウェジットを使い掲載する固定ページ設定します。

「カスタムウィジェット画面」に移り「Business Page Sidebar」にウェジットパーツをドラッグ&ドロップします。
Theme Horse：Services　→　診療科目
Theme Horse: Featured Widget　→　ご案内
最近の投稿　→　新着情報

2.診療科目
ダッシュボード / 外観 / ウィジェット / Business Page Sidebar / Theme Horse：Services

Theme Horse：Servicesの「▼」を押すと項目が出てきます。
固定ページを6件まで設定することができます。
診療科目の一覧を作りたいので、作った固定ページをセットし保存します。

トップページには、固定ページのアイキャッチ、タイトル、本文の抜粋が
掲載されます。

3.ご案内
ダッシュボード / 外観 / ウィジェット / Business Page Sidebar / Theme Horse: Featured Widget
Theme Horse: Featured Widgetの「▼」を押すと項目が出てきます。
タイトルと固定ページを4件まで設定することができます。
ご案内の一覧を作りたいので、タイトルに「ご案内」と入力し
作った固定ページをセットし保存します。

トップページには、ウェジットで設定したタイトルと各ページの
アイキャッチとタイトルが表示されます。

4.新着情報
ダッシュボード / 外観 / ウィジェット / Business Page Sidebar / 最近の投稿

ここでは、ブログ機能を使ってアップした最新の記事を
トップページに掲載しようと思います。

最近の投稿の「▼」を押すと項目が出てきます。
タイトルと記事を何件表示するか設定します。

トップページには、ウェジットで設定したタイトルと
設定した件数の記事タイトルが表示されます。

これで、メインコンテンツ作成は終わりです。
これだけなら、簡単にできそうな気がしませんか、
興味のある方は是非トライして見てください。

次回はフッターエリアの設定の説明をします。

WordPressの無料テーマAttitudeの使い方

以前、「WordPressで無料テーマAttitudeを使ってのサイト制作」を書いたところ、
思いのほかアクセスがあったので、WordPressの無料テーマAttitudeの使い方を
3回に分けて詳しく説明していきたいと思います。
再度、無料テーマAttitudeの説明しますので以前の内容と重複する箇所がありますので、ご了承ください。今回も、初心者の方もできるように、CSSの変更は行いません。
サイト内容は前回と同様の内容で行いたいと思います。

制作サイト

業種：歯科医院
ページ数：10ページ程度

完成サイトのトップページを元に説明していきます。

ちなみに無料テーマAttitudeはレスポンシブ対応なので
スマートフォンだとこんな感じに見えます。

はじめに

無料テーマAttitudeはブログ用のテーマですので、
コーポレートサイト用のテンプレート切り替える必要があります。

テンプレートの設定

固定ページの作成

新規にページを作成します。記事タイトルを記入、テンプレート欄で「Business Template」を選択、【公開】ボタンを押します。
本文は空白のままでOKです。

作った固定ページをフロントページとして使用
ダッシュボード / 設定 / 表示設定

今作った固定ページをトップページに設定します。
フロントページの右側にあるリスト内から指定し設定を保存します。

そうすると、コーポレートサイト用のテンプレート切り替わります。

ページレイアウト設定

ダッシュボード / 外観 / Theme Options / Design Options

サイト全体の幅の設定　（Site Layout Options）
Narrow Layout　→　狭いレイアウト
Wide Layout　→　広いレイアウト
基本のページレイアウト設定　（Default Layout Options）
No Sidebar　→　サイドバーなし
No Sidebar, Full Width　→　サイドバーなし全幅
No Sidebar, One Column　→　サイドバーなし１カラム
Left Sidebar　→　左サイドバー
Right Sidebar　→　右サイドバー

※ページごとにレイアウトを変更することはできます。

背景の設定

ダッシュボード / 外観 / Theme Options / Design Options / Custom Back Ground

全幅のレイアウトを選択していると意味がないですが、
背景に画像設置や背景色変更ができます。

ヘッダー、メニュー、スライダー

1.タイトル部分

タイトル形式
ダッシュボード / 外観 / Theme Options / Design Options / Custom Header

・Header Logo
ロゴ画像を設定できます。

・Show
Header Logo Only　→　ロゴ画像のみ表示
Header Text Only　→　テキストのみ表示
Disable 　→　非表示

・Need to replace Header Image?
ヘッダー画像変更

・Hide Searchform from Header
検索窓の有無

※ロゴの部分をテキストのみにする場合
ダッシュボード / 外観 / カスタマイズ / サイトタイトルとキャッチフレーズ

サイトタイトルとキャッチフレーズを入力します。

2.ソーシャル
ダッシュボード / 外観 / Theme Options / Social Links

使用しているソーシャルサービスのURLを入力します。

Facebook
Twitter
Google Plus
Pinterest
Youtube
Vimeo
LinkedIn
Flickr
Tumblr
Myspace
RSS

3.メニュー
ダッシュボード / 外観 / メニュー

必要なメニューを設定して
テーマの位置 Primary Menu にチェックを入れます。

4.スライダー
無料テーマAttitudeで使用しているスライダーは、
固定ページもしくは投稿ページのIDを設定して表示します。
画像はアイキャッチ画像を使用し、
タイトルと本文の一部を表示します。

スライダーの基本設定
ダッシュボード / 外観 / Theme Options / Featured Post / Page Slider / Slider Options

・Disable Slider
表示、非表示

・Number of Slides
スライド枚数

・Transition Effect
画像切替の効果

・Transition Delay
スライド時間

・Transition Length
切替時間

スライダーの内容設定
ダッシュボード / 外観 / Theme Options / Featured Post / Page Slider / Featured Post/Page Slider Options

IDを設定することによりトップページにスライダーが表示されます
以上でヘッダー~スライダーまでの使い方になります。

次回は固定ページなどの扱いを説明します。

制作事例　（株）しゅんあぐり様

農家が潤い、生活者も喜ぶ。そんな農業スタイルを仲間たちと作り上げたい。

公開　2015年6月5日
URL　http://www.syun-agri.com/
TYPE　コーポレートサイトリニューアル

●リニューアル目的
・デザインのリニューアル。
・ページ構成を見直し、ユーザビリティの向上。
・LINEスタンプと合わせて制作

ウェブマスターツールの「検索クエリ」が新しくなり「検索アナリティクス」に！

今回は「検索アナリティクス（ベータ版）」の使い方を説明したいと思います。

ウェブマスターツールの検索トラフィックにある「検索クエリ」が新しくなり、
「検索アナリティクス（ベータ版）」がリリースされました。

検索アナリティクスって何が出来るの？

サイトがどれくらいの頻度でGoogleの検索結果に表示されたかがわかります。
4種類のデータを6種類のカテゴリでレポート表示できます。

検索アナリティクスの使い方

4種類のデータをグラフと表で表示できる。

赤枠部分の項目を追加してグラフに表示させることができます。

◾クリック数：Google検索結果ページに表示されたあなたのサイトをクリックして移動した回数
◾表示回数：あなたのサイトがGoogleの検索結果に表示された数
◾CTR（クリック率）：Googleの検索結果においてサイトのコンテンツがクリックされた割合、クリック数÷表示回数
◾平均掲載順位：Googleの検索結果におけるサイトの「最上位」の平均掲載順位

6種類のカテゴリを表で表示できる。

赤枠部分のカテゴリごとに表示させることができます。

・クエリ：検索されたキーワードごとのカテゴリ
・ページ：あなたのサイトのページごとのカテゴリ
・国：検索された国ごとのカテゴリ
・デバイス：PC、モバイル、タブレットごとのカテゴリ
・検索タイプ：ウェブ、画像、動画ごとのカテゴリ
・日付：指定した日付ごとのカテゴリ

クエリ
Googleで検索されたキーワードごとのデータを表示します。
あなたのサイトがどのようなキーワドで検索されているかわかります。

ページ
あなたのサイトのページ別のデータを表示します。
ページごとのパフォーマンスを比較できます。

国
検索された国ごとのデータを表示します。
特定の国のみでの検索パフォーマンスを確認できます。

デバイス
PC、モバイル、タブレットごとのデータを表示します。
デバイスごとの検索パフォーマンスを確認できます。

検索タイプ
ウェブ、画像、動画ごとのデータを表示します。
基本ウェブの検索ですが画像や動画でもあなたのサイトを検索しているかを確認できます。

日付
指定した範囲の一日ごとのデータを表示します。
日付単位で検索パフォーマンスを確認できます。

フィルタ機能
各カテゴリでフィルタ機能が使えます。
フィルタを使うことで見たい情報だけに絞り込むことができます。

・クエリ：キーワードで絞り込みが行えます。

・ページ：URLの文字で絞り込みが行えます。

・国：検索された国を選んで絞り込みが行えます。

・デバイス：PC、モバイル、タブレットで絞り込みが行えます。

・検索タイプ：ウェブ、画像、動画で絞り込みが行えます。

・日付：指定した日付絞り込みが行えます。

比較機能
今回、追加された機能としてデータの比較をすることができるようになりました。

例として掲載順位のデータだけでデバイスの「PC」と「モバイル」を比較します。

「PC」と「モバイル」を選択

グラフ上に「PC」と「モバイル」順位の変動が同じグラフで見ることができます。

補足

画像のグラフ上にある「更新」ですが、2015/4/21に行われた
モバイルフレンドリーアップデートの日です。

「更新」の日を境にモバイルの検索順位の推移も調べることができます。
SEO対策の効果測定や改善のためには、検索アナリティクスはかなり実用的なツールになります。
Googleアナリティクスでは得られない貴重な情報がありますので、
工夫すれば様々な使い方ができます。

是非、使ってみてください。

制作事例　椎谷板金工業様

屋根、外壁、雨樋から採光システムまで、
快適な暮らしのための修理･施工工事は私たちにお任せください。

公開　2015年4月17日
URL　http://www.yane-toi.com/
TYPE　コーポレートサイトリニューアル
CMS　Wordpress

●リニューアル前の課題と要望
・新しい事業（採光システム）始めるにあたってホームページに情報が無い。
・デザインが古いので新しいデザインにしたい。
・施工実績も更新できるようにしたい。

●リニューアル後
・CMSを導入することにより、施工実績を更新できるようにした。
・新しい事業（採光システム）のページを増やし業務内容を充実した。
・サイト内構成を整理して、ユーザーの導線を明確にした。

ディレクターとデザイナーのイメージ共有

4月に入りまして、花粉さえ飛んでなけれは、
いい季節になりました。

今回は、デザイナーに作業をお願いするときに
気を付けていることをまとめました。

私は、普段webディレクションの仕事していて
お客様から聞いてきた内容を元に、構成案とデザイン案を制作します。
構成案は自分で作成すればよいのですが、ページのデザインはデザイナーにお願いします。

デザイナーへの説明がうまく伝わらないと、
「イメージと全然違う」
「何度も修正が入って予算をオーバーしてしまった」
などのトラブルが起こってしましまいます。
ドラマで良くある「○○君これお願い。」みたいに何の説明もなく
仕事が上がってくることは、ほぼありえません。

上記のトラブルが起きないよう
私がデザイナーにお願いするときの注意点をまとめてみました。

1.情報、目的、サイト構成の説明

デザイナーにお客様の情報や目的、サイト構成を説明するようにしています。
まずは、ディレクターとデザイナー同じ情報を共有することがスタートラインです。
ここをおろそかにすると、後々大きなズレが生じる場合があります。

2.掲載情報

掲載内容と情報の順位付けを行い指示します。
デザイナーが構成に時間をかけて、後ですりあわせを行うよりも、
はじめから指示をした方がスムーズに作業を行えます。

3.色の指定

メインカラーを指定します。
お客様指定の場合もありますし、デザイナーと相談して決める場合もあります。
どちらにしろ明確に指示します。
サブカラーは状況に応じて指示しています。

4.テイストの近いサイト

他のサイトを使ってイメージやデザインの方向性を伝えます。
最低3~4サイト用意します。
コピーサイトにならないように、
全体の雰囲気や部分的に参考にするなどサイトによってどこを参考にするのか説明します。
デザイナーに考える力をつけるにはこの方法はおすすめしませんが、
私は、感覚・雰囲気など、言葉で明確に表現しにくい部分を共有するために使用しています。

5.スケジュールの確認

今持っているスケジュールを確認して無理のない納期を設定します。
あまりにも短納期で仕事を詰めすぎると、それなりのデザインしか上がってきません。
全ての仕事でできるわけではありませんが、意識して行っています。

まとめ
以上の点を意識して行っていますが、
いきなり100点のデザインは上がってきません。
デザイナーがお客様と直接お話しできれば、デザイナーの能力の問題となりますが、
お客様 → ディレクター → デザイナーの場合は、
ディレクターがお客様の話をまとめて、デザイナーに指示していますので、
半分はディレクターの責任だと思います。
「思ったものをあげてこない」ではなく、「思ったものをあげてもらう」ために何をするかが大事だと思います。

Snipping Tool（スニッピングツール）という画面キャプチャソフト

今回は、Windows Vista（Home Basicは未実装）以降のバージョンに実装された画面キャプチャソフトです。

今更？って思う方もいるでしょうが、正直言うと知らなかったんです（笑）
元々、画面キャプチャソフトは昔からシェアウエアを使用してた為、
必要がなかったのです。
今回、お客様に簡単に画面キャプチャを取ってもらうために
何かいいソフトはないか調べていたら、
WindowsにSnipping Tool（スニッピングツール）があることを知って、
ビックリ！！
こんないいソフトがあったなんて・・・

なので、今更かもしれませんが紹介します。
画面キャプチャソフトとは？パソコンの画面に表示されているものを
画像にして保存するソフトです。
全体画面キャプチャは、キーボードの右上に「PrintScreen」と書かれたキー（「PriScr」と略されていることもあります。）を押せば、取ることはできます。
では、Snipping Tool（スニッピングツール）を使うと何ができるかというと
1.自分の好きな形に取ることができる。
2.取った画像に直接マウスで文字が書ける。
3.そのまま別のソフトに貼り付けや画像として保存できる。

それでは、説明してきますね。

まず、Snipping Tool（スニッピングツール）は
Windowsの「スタート」→「すべてのプログラム」→「アクセサリ」の中に「Snipping Tool」があります。

Snipping Toolが立ち上がると、ウィンドウが出現し、背景が白いマスクがかかった画面になります。
1.自分の好きな形に取ることができる。

操作ウィンドウの「新規作成」の▼から切り取りの方法が4種類選べます。
・自由形式の領域切り取り
・四角形の領域切り取り
・ウィンドウ領域切り取り
・全画面領域切り取り

・自由形式の領域切り取り
マウスをドラッグした形に切り抜けます。一筆書きになるので注意！

・四角形の領域切り取り
マウスをドラッグしたエリアを四角形に切り抜きます。

・ウィンドウ領域切り取りは選択したウインドウを切り抜きます
・全画面領域切り取りは文字通り全画面を切り抜きます。
2.取った画像に直接マウスで文字が書ける。
画面キャプチャ後、「ペン」のボタンを押した状態にすると、直接マウスで文字が書けるようになります。
画像の注意点や指示など書くことができます。（フリーハンドです。）

※消しゴムを使うと簡単に消すことができるので何度でもやり直せます。
3.そのまま別のソフトに貼り付けや画像として保存できる。
画面キャプチャ後に「コピー」のボタンを押しすと別のソフト（Word、Excel）に直接貼り付けることができます。

「保存」のボタンを押しすと画像ファイルとしての保存が可能（保存形式はJPEG・HTML・PNG・GIF）

●こんなこともできます
例えば、以下のようにウィンドウの「メニュー」一覧など通常の方法では、うまく取り込むことができません。

こんな時は、Snipping Toolを立ち上げた後、一旦「Esc」キーを押して、Toolを非アクティブ状態にします。その後、キャプチャしたい「メニュー」を表示状態にし、そのまま「Cttl」キーと「PrintScreen」キー両方を押します。こうすることで、メニューが表示されたまま、Snipping　Toolが起動しますので、あとは今まで通りの方法でキャプチャするだけです。意外と簡単にできますので、是非試してみて下さい。

制作事例　新潟サンライズゴルフコース様

新潟県北蒲原郡聖籠町にあるゴルフ場です。
27ホールのパブリックコースで、ゆったりと大きなゴルフを楽しめます。

公開　2015年3月5日
URL　http://www.nsgc.jp/
TYPE　施設サイト（スポーツ）リニューアル
CMS　Wordpress

●リニューアル前の課題と要望
・イベントなど自分たちで更新できるようにしたい。
・スマートフォンにも対応できるようにしたい。
・すっきりしたデザインにしたい。
・コース情報をプリントできるようにしたい。

●リニューアル後
・CMSを導入することにより、イベント、お知らせ、だけではなく
定期的に変わる項目を更新可能。
・サイト構成を見直しを行い、グローバルメニューを減らしシンプルな構成に変更。
・コースページを全体、各エリア、各コースとA4でプリントできる。
・スマートフォン用に表示の切替。

LINE@登録してみました。

暖かい日が多くなってきて少し気分がいいhaneです。
寒さから早く解放してほしいです。

今回は、2015/02/12に一般開放されたLINE＠を登録してみましたので、
その登録方法を紹介します。

LINE＠は無料で使える（有料版もあり）お店ページです。

今までのLINE＠は、LINE株式会社に申請を出して、
承認された店舗のみが使用することができました。

今回は、LINE＠アプリをダウンロードして、アカウントを登録が可能になりました。※App Store／Google play内は、「LINEat」で検索が可能です。

登録方法をご紹介します。
スマホをデジカメで撮ったので画像が汚いです。

1.LINE＠アプリをダウンロード

2.LINE＠アプリを起動
「LINEログイン」を押してください。
※LINEのアカウントを持っていないとログインできません。
ない方は、LINEアプリのダウンロードから始めましょう。

3.規約の同意

4.LINEアカウントにログイン
LINEで登録してあるアカウント情報の「メールアドレス」と「パスワード」を入力してください。

5.LINEアカウント作成
真ん中の「+」をタップするとアカウント作成画面へ移ります。

※この時に、年齢認証を行う必要があります。
Wi-Fiで接続しているとパスワードなど聞かれますので、
Wi-Fiを切った方が早く進むと思います。

6.プロフィール入力
名前の箇所に会社名（お店名）を入力して
主業種と副業種を選択します。

7.初期登録完了

以上で初期の登録は完了です。
ここから、アカウントページや返信コメントなど登録していくのですが、
「登録作業はすべてスマホで行うの？」と思う方がいると思います。
私もそうでした。。。
大丈夫です！ＰＣからも編集することはできます。
下記のＵＲＬからアクセスしてください。

LINE@管理画面
https://admin-official.line.me/

ＰＣから管理画面に入るにはアカウント情報の「メールアドレス」と「パスワード」が必要です。初回は認証コードが必要ですので登録メールアドレスへ認証コードを送信してログインしてください。

ＰＣでログインすると大変親切なマニュアルがありますので、
アカウントページの作成はマニュアルをご覧ください。

ためしに作ってみた　わが社のLINE@です。

業種が「企業、その他」に分類されるため承認がされないみたいです。
承認されないと、LINE@ページには掲載されないため、露出が激減します。
承認依頼ができる業種は必ず行いましょう。

ショッピングサイトまとめ6

年が明けてずいぶん経ちますが・・・

あけましておめでとうございます。今年もよい年でありますように！

haneです。
第6回目はみなさんご存じ「楽天市場」です。

特徴
楽天市場は、楽天株式会社が運営する大型のネットショッピングモールです。
ネットショップのページ作成機能や決済機能、受注管理、アクセス解析など
店舗運営をサポートする様々な機能が揃っています。
メリット
●多くのユーザーが集まるモール型ショップであり、頻繁にキャンペーン企画もあるため、圧倒的に集客力が強いです。
●無料ECセミナーなど、サポ―トが充実しています。
デメリット
●管理画面やオプション料金、仕様に関する情報が少なく、
構築前の機能確認がしづらいです。
●初期登録費用や運営費など、他社に比べて高い印象があります。
●売上ごとにスーパーポイント付与料やロイヤリティ、
システム利用料などの追加料金が発生します。
●モール型ショップであるため、競合のライバル店が多いです。
＜こんな店舗におすすめ＞
●品揃えや価格など商品力に自信のある場合
●競合と比べて差別化要素がある場合
●既に楽天以外の店舗でうまくいっている場合