5月30日(火)-サーバー移行・ロリポップ操作・サイト模写

メモ

◆FFFTP使用時、接続先を切り替える場合は、必ず切断後に接続する

繋いだままにすると勝手にログが溜まっていき、繋げられなくなることがあるためとのこと。

◆練習のための模写サイトを作るとき

検索に引っかからないよう、できればURLを入れても表示できないようにするのがベスト
「検索避け html」等で検索して、METAタグ入れるとよい
+METAのディスクリプションに「模写サイトです」など注釈を入れる

WordPressのサーバー引越し(移行)

1.元Wordpress管理画面→プラグイン新規追加で「All-in-One WP Migration」→有効化
All-in-One WP Migration→エクスポート
【エクスポート先 横の≡】→ファイルをクリック
→成功した場合、デスクトップにDLされる
→失敗した場合は2へ

2.DLできなかった場合は、直接サーバーからデータをDLする
FFFTPで元Wordpressのサーバーへ接続
「wp-content」→「ai1wm-backups」フォルダ内の最新のエクスポートデータ(拡張子.wpress)をデスクトップ等へDL

3.新しいサーバーで、新規Wordpressをインストールしておく
インストールしたWPの管理画面をブックマークしておくと楽
※ロリポップの場合は、下記↓【トップページではなく、下階層フォルダにWPサイトをインポート(引っ越し)する場合】
を参照!

4.新Wordpress管理画面→プラグイン→新規追加「All-in-One WP Migration」→有効化
All-in-One WP Migration→インポート
【インポート元 横の≡】→ファイルをクリック
引っ越し元からエクスポートしておいたバックアップデータを指定
(バックアップデータはインポート後も念のためしばらく保管しておく)
インポート100%後、開始していいかのメッセージが表示→「開始」
しばらく待ち「サイトをインポートしました。」と出たら「完了」

5.移行したWPを動作、リンク先等確認し、問題なければOK
たまに、自HP内リンク先やアンカーリンクがおかしくなっていることがあるとのこと
(URLが変わる影響のため、影響のない外部リンクは問題ない)

※ロリポップを初期化する方法

※今回の例)ロリポップは借りた直後でWPの引っ越しだけしたが、
間違えてトップページ設定にしたくないのにトップに指定し引っ越してしまい、ホームページがWPとして表示されてしまった。

WP部分だけ消す方法もあるが、手順が難しいので、一度ロリポップを初期化し空にする場合の方法。

1.(ロリポップ)サーバーの管理・設定→データベース
下部の「×データベース削除」クリック
色々出るが「はい」→消えたらOK

2.FFFTPまたは、ロリポップ→サーバーの管理・設定→「ロリポップ!FTP」
(大浜先生より、ロリポップFTPの方が早いかも?とのこと)

【.htaccess】のみ残して全データ削除
※【.htaccess】は重要なので絶対に消さない!!

Xfreeの場合、他に「default_page.png」「index.html」の2点はサーバーになにもデータがないときに表示される文言のファイルなので、これもできれば残しておく

(ロリポップ)トップページではなく、
下階層フォルダにWPサイトをインポート(移行)する場合

1.FFFTPまたは、ロリポップ→サーバーの管理・設定→「ロリポップ!FTP」
新規フォルダ作成(実際のWPを表示する際のURLになり、あとから変更は面倒なので名前は慎重に考える)
※ロリポップFTPだとフォルダの権限など表示されるので、FFFTPでやった方がいいかも…?

【FFFTPの場合の接続設定】
新規ホスト→ホストの設定
(以下、ロリポップ→ユーザー情報→アカウント情報の内容参照)
・ホストの設定名:わかりやすい名前(完全に自分の管理用なので日本語でOK)
・ホスト名(アドレス):ftp.lolipop.jp
・ユーザー名:FTP・WebDAVアカウント情報
・パスワード:同じパスワード情報
その他はそのままでいいのでOKで接続

2.(ロリポップ)サイト作成ツール→WordPress簡単インストール
下部のWordPressインストール履歴→履歴を削除でOK

※以下忘れない!!間違えるとまた初期化しないといけないので注意
★インストール先→サイトURL→上部のhttp://~【入力は任意です】
の欄に、作成したフォルダ名を入力
・利用データベース→新規自動作成
・サイトのタイトル以下を入力
・ユーザー名、パスワードは新規で入力でOK
・WordPressテーマを選択→デフォルトテーマでOKそう(あとで上書きされるので)

入力内容確認→インストール

インストール完了したらOK、管理画面URLとかメモしておく

3.インストールした新WPの管理画面
ブックマークしておくと楽
プラグイン→新規追加「All-in-One WP Migration」→有効化
All-in-One WP Migration→インポート
【インポート元 横の≡】→ファイルをクリック
引っ越し元からエクスポートしておいたバックアップデータを指定
(バックアップデータはインポート後も念のためしばらく保管しておく)
インポート100%後、開始していいかのメッセージが表示→「開始」
しばらく待ち「サイトをインポートしました。」と出たら「完了」

4.移行した新WPを動作・リンク先等確認し、問題なければOK
たまに、自HP内リンク先やアンカーリンクがおかしくなっていることがあるとのこと
(URLが変わる影響のため、影響のない外部リンクは問題ない)

ロリポップに複数サイトを作るとき

・トップディレクトリ(階層)は基本的にトップページ用のindex.htmlやcss、imgフォルダを置く
・その他サイトを置く場合は、トップディレクトリにURLになる名称でフォルダを作り、その中にindex.html等を格納すればOK

5月12日(金)-WEBマーケティング基礎②

【要参考】
・【STEP4】Webページの制作「WEBマーケッティングの教科書②.pdf」参考

デザイントレンドを理解しておきましょう。

Googleウェブマスターツール(Google Search Console)について

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。 元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

【参考サイト】

5月11日(木)-WEBマーケティング基礎①

【要参考】
・【STEP4】Webページの制作「WEBマーケッティングの教科書①.pdf」参考

Googleアナリティクス で効果測定を理解しておきましょう。

マーケティングとは?

ビジネスを成功させるためにはマーケッティング活動が重要です。まずは、マーケティング活動の一般論について理解しましょう。

【参考サイト】

WEBマーケティングとは?

最近はWebを使用したマーケッティング活動が重要視されています。Webマーケッティング活用の基本について理解しましょう。

【参考サイト】

SEOについて

SEOとは?

Webページを作ったら、誰もが多くの人に見てもらいたいと思うでしょう。趣味で作ったWebページなら、お友達に見せるだけでもいいかもしれませんが、ネットショップやアフィリエイトなど、事業としてやりたい場合は訪問者を増やす施策が必要です。普通はインターネットに公開しただけでは誰にも見てもらえませんから、訪問者を呼び込む何らかの方法が必要になるのです。そこで、注目されているのがSEOと呼ばれる方法です。

SEO(エスイーオー)というのは Search Engine Optimization の頭文字を取ったもので、検索エンジン最適化と呼ばれています。これは検索エンジンの検索結果の上位に表示されるようにするテクニックです。現在インターネット利用者は必要な情報を探すために Yahoo! や Google といった検索サービスを利用している方が多いです。そして、利用者のほとんどが検索結果の1ページ目か2ページ目までしか見ていない傾向があります。つまり、これら検索サービスの上の方に表示されれば、インターネット利用者の多くを効率的に自分のWebページに呼び込むことが出来るというわけです。

SEMとは?

SEMとは Search Engine Marketing (検索エンジンマーケティング) の略で インターネット上での市場調査を行う事を指します。 自社サイトのターゲットとユーザーのニーズを把握し どのようなキーワードでの検索結果に上位表示されれば最適なのかを詳しく調査します。 検索エンジンの検索結果の上位に表示されるようにサイトの構成を整備するSEO(検索エンジン最適化)や、 検索連動型広告などによる広告掲載などもSEMに含まれます。

LPOとは?

LPOは「Landing Page Optimization」の略で「ランディングページ最適化」と言います。 広告や外部サイトからリンクを辿って最初に表示されるページをランディングページと呼びます。 初めて訪れたユーザーに適切な導線(ユーザーの視線やカーソル位置を想定した流れ)や便利な検索機能を提供し コンバージョンレートを上げる為に最適なサイト構成に整備します。

【参考サイト】

Webデザイナー(コードを書く仕事)で必要なSEO

SEO対策を意識したコーディングと言うものは、まず正確にHTMLを記述しなくてはなりません。HTMLと言うものは多少間違った記述が行われていても、取り敢えずはウェブページとして表示されるわけです。しかし、検索エンジンは正しいHTMLで記述されていないと評価を低くしてしまい、SEOに対してはマイナス要素となってしまうのです。その為HTMLソースコーダーにはSEO対策を意識したHTMLの知識が必要になると言う事なのです。

【参考サイト】

被リンクについて

被リンクの扱いはとても要注意です!!まだまだ理解されていない企業、制作会社がまだ多いです。SEO対策でとても重要な内容になります。

【参考サイト】

SNSについて

最近は、SNSを利用したマーケッティングも活性化しています。マーケッティング断面でのSNS活用方法を理解しましょう。

【参考サイト】

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。 元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

【参考サイト】

4月28日(金)-CMS構築実習・サーバー引越し

WordPressサイト移行手順を確認しましょう。

WordPressサイトのフォルダ構成について

WordPressのフォルダで移行に関連するフォルダは、以下の通りです。投稿ページや固定ページなどのコンテンツデータは、ファイルではなくデータベースに格納されているためファイルとして確認することはできません。

  • テーマフォルダ:/wp-content/themes
  • プラグインフォルダ:/wp-content/plugins
  • メディアライブラリィフォルダ:/wp-content/uploads

また、WordPressサイトの移行にAll-in-One WP Migrationプラグインを使用した場合は、以下のフォルダに移行用データが作成されます。

  • 移行データフォルダ:/wp-content/ai1wm-backups

WordPressサイト移行時の対象物について

WordPressサイトを移行する場合には、以下の対象物の移行が必要になります。

  • WordPressサイト環境(テーマ、プラグインなど)
  • 設定情報、投稿データ、固定ページデータ
  • メディアデータ
  • ドメイン移行(必要に応じて)

WordPressサイトの移行手順について

WordPressサイトの移行の行うためには、以下の手順があります。

  • レンタルサーバーが提供する簡単引越し機能(Xfreeはなし、ロリポップはある)
  • プラグインを使用した移行(Xfreeの場合ノート参照)

【参考サイト】

4月27日(木)-CMS構築基礎⑥

【要参考】
・【STEP4】Webページの制作「Wordpress活用法の教科書⑧.pdf」参考
WordPress テーマ作成入門 | HTML-CSS 入門講座 | 情報デザイン工房 濱屋

基本機能を保有したテーマを理解しましょう。

WordPressテーマの基本機能とは

基本機能を持ったWordPressテーマを作成するためには、以下の機能を実装する必要があります。

  • 投稿一覧の表示
  • 投稿ページの表示
  • 固定ページの表示
  • メニューの表示

メモ

・大浜先生より(WordPress テーマ作成入門 | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 「A4.5 テーマのカスタマイズ」参照)

テーマのカスタマイズ方法は、複数ありますので以下の順でカスタマイズ可否を確認してください。

  1. テーマが提供するカスタマイズ機能でのカスタマイズ
  2. プラグインを利用したカスタマイズ
  3. 追加 CSS を利用したカスタマイズ
  4. 子テーマを利用したカスタマイズ
  5. カスタマイズをあきらめましょう!(他のテーマを探すかオリジナルテーマを作成することを検討しましょう)

4月25日(火)-CMS構築基礎⑤

【要参考】
・【STEP4】Webページの制作「Wordpress活用法の教科書⑦.pdf」参考
WordPress テーマ作成入門 | HTML-CSS 入門講座 | 情報デザイン工房 濱屋

WordPressのテーマの仕組みを確認しましょう。

WordPressについて

WordPress(ワードプレス)は、ブログやサイト(ホームページ)を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

【参考サイト】

WordPressのテーマとは

WordPressのテーマは、Webサイトのデザインを決定するものですが、デザインに加えてサイト全体の構成や表示される機能にも影響します。単純に見た目のデザインだけで選ぶと操作がしにくかったりメンテナンスが大変だったりする場合もあります。
テーマの入手方法は、以下の種類があります。無料のテーマの中には、機能制限有りが無料で制限を解除する場合は、有料になる場合もあります。

  • 無料のテーマ(WordPress公式テーマ)
  • 無料のテーマ(WordPress非公式テーマ)
  • 有料のテーマ
  • 制作会社に発注
  • 自分で作成

【参考サイト】

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

【参考サイト】

メモ

・WordPressのテーマはPHPも関わってくるのでかなり難しいので、業務内容に応じて不要であればあまり覚えなくてもいい(けど、覚えられると幅が広がる)

4月24日(月)-サーバーサイドプログラム基礎

【要参考】
・【STEP4】Webページの制作「Wordpress活用法の教科書⑥.pdf」参考

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト(プログラミング)にはサーバー側で動くものとクライアント側(PC側)で動くものがあります。違いについて理解しましょう。

【参考サイト】

サーバーサイドの仕組み

Webページには固定のHTMLが設定されているページ(静的ページ)と要求発生時にHTMLを作成するページ(動的ページ)があります。静的ページと動的ページの違いを理解しましょう。

【参考サイト】

サーバーの契約と開設

サーバーサイドプログラミングを行うためにはレンタルサーバーとの契約が必要です。

【参考サイト】

【ワンポイントアドバイス】
サーバー選びは最初に行いましょう。
お仕事時に一番最初に確認すべき事としてどのサーバーを利用しているか?
そしてどのサーバーを利用するか?これは、企画初期に確認を行いましょう。 後から、出来る出来ない問題が発生してしまいます。

4月21日(金)-PHP基礎

【要参考】
・【STEP4】Webページの制作「Wordpress活用法の教科書⑤.pdf」参考

【大浜先生の作成したPHPを使用したお問合せフォーム】
お問い合わせ | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 (表示)
https://tools.hamaya2020.com/contact/contact.txt (公開しているPHP内容)
※txtを参考に使用していいが、4・6行目のメールアドレスは大浜先生のアドレスなので、変更する。
+自分で作成したページの例えば下部などにお問合せフォームを作り、そこに紐づけるのは難しい(書き換えないといけない)ので、お問合せフォームも別ページで単体で作成するのが良いとのこと

WordPressはphpで出来ています

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト(プログラミング)にはサーバー側で動くものとクライアント側(PC側)で動くものがあります。違いについて理解しましょう。

【参考サイト】

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

【参考サイト】

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

【参考サイト】

【ワンポイントアドバイス】
PHPはHTMLの延長と考えて、Wordpressの利用でよく見かける技術として今後に備えておきましょう。まずは、しっかりとHTML・CSSを理解しましょう。
PHPのファイルにHTMLを記述できるわけですから 必要性と使いどころをまずは理解して、一つ一つ理解してい くのが良いでしょう。

4月18日(火)-JavaScript基礎

【要参考】
・【STEP4】Webページの制作「JavaScript(jQuery)の教科書.pdf」参考
JavaScript / jQuery で処理しましょう | HTML-CSS入門講座 | 情報デザイン工房 濱屋

【参考にしやすいWebパーツ】
WebParts Web パーツ | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 (WebパーツP1~P13まで参考例と、実装方法の紹介)
動くWebデザインアイデア帳 | 動くWebデザインアイディア帳 (大浜先生も参考にしているサイトとのこと)

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

【参考サイト】

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery (実装したいキーワード)」で検索します。
良く使うキーワードの例は、以下の通りです。

・スライダー
・カルーセル
・ハンバーガーメニュー
・ライトボックス
・ドリルダウン
・フェード
・スクロール など

【参考サイト】

【ワンポイントアドバイス】
Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。

メモ

◆JavaScriptの実装は以下のような方法があるが、①→③(難しい→簡単)とのこと
①JavaScript呼び出し
②jQuery呼び出し
③個別ライブラリィ呼び出し
(+CS3以降はCSSで実装できるものもある(教科書pdf参照)ので、どちらも理解しておくと良いとのこと)

◆JavaScriptは、HTML・CSSがひと通り完成した後、最後に実装するのが良いとのこと

◆JavaScriptの実装は、色々なサイトから参考にして書くのが良いとのこと
↑の参照サイト【参考にしやすいWebパーツ】などで引っ張ってくるなど

◆JavaScriptとJavaは全く別物なので、絶対に混同しないこと
JavaScriptは「JS」と略すのが普通

◆サーバーにUPを数回して、変更部分等が反映されていないとき
→キャッシュが残っている可能性があるので、以下を試す
①スーパーリロード(Shift+F5)※FnキーロックされているPCの場合は(Shift+F5+Fn)
or
②Googleで検証ツールを開いた状態で、上部のリロードボタン(円の→の更新ボタン)を長押し
→「ハード再読み込み」、だめなら「キャッシュの消去とハード再読み込み」で試す

◆ページ全体のスクショの取り方(中間部分などで途切れず画像ファイルで保存できる)
検証ツールを開いた状態で、(Ctrl+Shift+P)→実行欄の右側に、日本語なら「フル」英語なら「FULL」でボタンを押すと保存できる

4月11日(火)-ユーザーインターフェイス基礎⑤

【要参考】
・【STEP4】Webページの制作「「デザインの考え方」の教科書⑧.pdf」参考

「ユーザビリティー」と「アクセシビリティー」

ユーザビリティとは?

ユーザビリティは、一般的には「使いやすさ」を示す言葉だが、国際規格のISO 9241-11では、「ある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い」としている。

アクセシビリティとは?

アクセシビリティは、英語では“Accessibility”で、「近づきやすさ」、「利用のしやすさ」、「便利であること」などと訳されています。 一般的には、「利用者が機器・サービスを円滑に利用できること」という場合に使われています。

【参考サイト】


【ワンポイントアドバイス】
Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。