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

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も関わってくるのでかなり難しいので、業務内容に応じて不要であればあまり覚えなくてもいい(けど、覚えられると幅が広がる)

3月3日(金)-ポートフォリオ作成実習②

WordPressサイトの掲載内容について

ポートフォリオサイト

◆ご挨拶
◆プロフィール(自己紹介)

 名前
 顔写真
 生年月日
 略歴
 仕事への姿勢や意気込み
 自己PR
◆保有スキル
 スキル項目
 スキルレベル
◆ポートフォリオ
 作品
 作成の説明
 作品ツール
 作成時間
 その他(苦労したこと、考慮したこと、学んだこと など)
◆後書き

訓練ブログ

学んだことの復習や忘れてしまったことを思い出す資料として記録する

・訓練の1日単位で投稿ページを作成
・ページのタイトルは、訓練内容がわかるように

【参考サイト】

WordPressサイト作成時の注意事項

WordPressサイトの作成に当たっては、ポートフォリオとしての活用を中心に考えてサイト構成を考えてください。
また、ポートフォリオの作成に当たっては、ポートフォリオを見る人の立場に立って考えてみましょう。

・採用担当者の立場になって作りましょう(採用担当者が何をみたいか考えてみましょう)
・トップページは作品主体にしましょう(ポートフォリオとしてのトップページを意識してみましょう)
・操作性や導線を考慮しましょう(クリックの多すぎは見る気がしなくなります)
・未経験者の場合は「学校でこんな事を勉強してきました」、「私はこんなことができます」をわかるようにしましょう

WordPressのカスタマイズ

※カスタマイズはあまりしないこと
 基本機能で工夫してどうしてもできない場合にカスタマイズするようにする

・【ブロックのクラス・ID指定】
ブロック→高度な設定→【HTMLアンカー】にid指定、【追加CSSクラス】にクラス指定ができる


・【追加CSS】
外観→カスタマイズ→【追加CSS】にCSSを追加、【公開】でカスタマイズできる

【HTMLアンカー】でid指定したものは、#○○、【追加CSSクラス】でクラス指定したものは、.○○で入力

12月19日(月)-グラフィックデザイン基礎④

WordPressへのPDFのアップロード方法

メディアライブラリに入れるのでなく、最初から投稿・固定ページの「画像」→「アップロード」で直接PDFをアップロードする
※PDFファイルはそのままだと透明部分が黒色になるので、背景に白地を置くなどする

感想

本日は1か月で学んだツールなどを使いIllustrator、Photoshopで作品を作る、1回目の成績考査でした。
しっかり覚えたことが身についているか、時間内に作品を仕上げることができるか不安でしたが、試行錯誤しながら作っていく作業は手こずる分うまく形になったときは嬉しく、楽しく感じました。
時間内に目標していたイメージまでは完成することができませんでしたが、これからも練習していきたいと思っています。

12月17日(金)-CMS構築基礎④固定ページの作り方(パスワード設定と実用例)

ブロックエディタの主要機能

  • テキスト→「段落、見出し、リスト」(改行入力、リンク設定)
  • テキスト→「コード、整形済テキスト、詩」(複数の空白や改行をそのまま表示
  • テキスト→「テーブル」:表組型式を作成
  • メディア→「画像、ギャラリー」:写真掲載の基本
  • メディア→「カバー」:テキストをオーバレイした画像を配置
  • メディア→「メディアとテキスト」:写真と文章を並べる
  • メディア→「ファイル」:PDFファイルなどのダウンロードを配置
  • デザイン→「ボタン」:リンクを作成するのに便利
  • デザイン→「カラム」:横方向に複数欄を作成し、それぞれのメディアを指定可
  • デザイン→「続き」:抜粋に表示する範囲を指定
  • デザイン→「ページ区切り」:別ページにする時に指定
  • デザイン→「区切り」:文章と文章の間に水平線を表示
  • デザイン→「スペーサー」:空間を作成
  • ウィジェット→「ウィジェット」:色々な表示部品を指定
  • ウィジェット→「ソーシャルアイコン」:SNSへのリンクを作成
  • 埋め込み→「埋め込み」:代表的なサイトへのリンクを作成

参考サイト

WordPressブロックエディターの使い方
ブロックエディタ(Gutenberg)の使い方

投稿ページと固定ページ

使いやすい(見やすい)ポートフォリオサイトにするためには、投稿ページと固定ページの使い分けや適切なメニュー設定が必要

参考サイト

WordPressの固定ページと投稿ページの違いを解説
WordPressの「固定ページ」って? 「投稿」との違いや使い方を紹介
WordPressでカスタムメニューを作成する方法【初心者向け】

固定ページとは

「固定ページ」は、カテゴリーとの紐付けやトップページとの連動のない独立したページを作る機能で、お問い合わせページや会社紹介ページなどカテゴリーに属さないコンテンツを作るのに適している

パスワード設定

①パスワード保護を追加したいコンテンツのWordPressエディターを開く
②右側のサイドバーにある「公開状態」オプションをクリック
③「パスワード保護」を選択し、投稿のロックを解除するのに使用するパスワードを入力

ポートフォリオに作品を載せるのは、ある程度許容されていることであり、作品を掲載したことで著作権を訴えられるという可能性はほとんどない。
しかし、著作権や守秘義務をいい加減にしてよいというわけではない。
このことを決して念頭から離さず、ポートフォリオに掲載する場合は著作権や守秘義務にきちんと配慮していることを示すことを心がけるようにする。
そうした姿勢を見せることで応募先の企業によい印象を持ってもらえる可能性が高まる。

固定ページを企業向けページとして用意

ポートフォリオは「デザイナーが実績をアピールするための作品集」。
ポートフォリオサイトは、その応募企業様向けに利用する。

ポートフォリオサイトのトップページは基本送らない。
企業の応募要項に合った作品該当ページを、企業側が探してくれるわけはないので、しっかりとその企業に向けたページを用意すること。
権利や守秘義務を意識しパスワード設定をした固定ページを利用する。

求人票の宿題をまとめるのが固定ページ

求人票にある宿題「○○の出来る方」のアンサーをパスワード設定した固定ページで作成し、その応募企業様向けのページを作成する。
これから、ロゴやピクトグラム、アクセスマップや名刺、バナー作成をして、HTMLとCSSを学びLP(ランディングページ)を作成していくので、それを掲載できるように、企業用に改変したり、新規に作成したりする。
その宿題がクリア出来たら、様々な案件に対応できる100ページの実績を見せて、面接に繋げていく。

多くの作品を作っておき、様々な企業にアプローチできるように準備しておく

多くの企業が様々なサービスを提供しているので、これが出来れば仕事に繋がるという絶対はない。
また、社内に既にその技術スタッフがいれば、間に合っています。となり、契約に至る事も難しい場合もある。

対策は「多くの作品を用意しておく」こと。
未来の仕事に対して、雇用主は可能性を考えるため、より多くの種類の作品を用意することで、可能性を広げておく。
訓練時間で、より多くの作品を作れるよう意識していく。

12月13日(火)-CMS構築基礎③

メディア

【PDF】
→サムネイル表示できない
サムネイル表示したい場合は、JPGやPNGなどで別ファイルで表示させる
PDFはDLして読んでもらうなどの資料向け

【JPG】
・圧縮率が高いので画質が荒れやすい
・データが軽い

【PNG】
・圧縮率が低いので画質は綺麗め
・データがJPGより重い
・透過画像が作成できる

 

※画像を借用する場合

・「営利目的ではありません。」
・「勉強のために使用させていただきました。ありがとうございました。」
・「勉強のためにトレースさせていただきました。」
等の謝辞をトップページの隅やプロフィールページ等に載せておくのがよいとのこと
※作品を載せた全ページに記載したりは不要
※©(コピーライト)は付けない。©は著作者しか使用できないので、注意。

【注意】
※人物は借用を避けたほうが良い(著作権の他に被写体の肖像権があるため)
→使う場合は自分で撮った(被写体の許可がある)ものまたは、無料画像サイトのものを使用する

※ロゴマークも借用は避けたほうが良い(商標権が絡むので)

作品を掲載する際のポイント

・どのツールのどんな機能を使用したか
・何を描こうとしたのか
・どのくらいの時間を使ったのか など
技術と結果を明確にすると良い

特に、現在・過去・未来、
現在の作品の自己評価、過去の作品からの改善点、次はこうしたいという未来への目標
これらを考えて次に繋げていく
過去に作成した作品をブラッシュアップして比較し、成長曲線を可視化できるようにすると良い

12月7日(水)-CMS構築基礎②WordPress/Illustrator/Photoshop

WordPress:テーマの選定と切り替えウィジェット
Illustrator:基本操作の復習
Photoshop:選択範囲とレタッチ

WordPress:テーマの選定と切り替えウィジェット

・テーマの変更
外観→テーマ→新規追加→右上検索ボックスに、変えたいテーマの名称を入力し検索、インストールし有効化
Wordpress内にない場合、外部サイトでZIPファイルをダウンロードし、「テーマのアップデート」でZIPファイルをアップロード→有効化

・ウィジェット
サイドバーやフッターなどに表示されるカレンダーや検索ボックスなどのパーツ

Illustrator:基本操作の復習

Illustrator→ベクターイメージの編集ソフト
パスで作られる作品:アンカーポイント(点)同士をセグメント(線)で繋いで作成する

◆ペンツール…パスを描くツール
ハンドルを使用し曲線の角度や向き、長さ等を自由に変えられる
ハンドルの作り方→ペンツールでクリックしたままドラッグ
ハンドルを動かす方法:△ダイレクト選択ツール

・パスを閉じずに線を描き終える場合は、Escキー(オープンパス)
・パスを最後まで閉じたもの(クローズドパス)

Photoshop:選択範囲とレタッチ

Photoshop→ビットマップ画像編集ソフト

基本操作

【最初の操作】
①元の画像レイヤーは鍵をつけて非表示にして保存しておく(復元するときのため)
②コピーしたレイヤーはスマートオブジェクト化しておく
スマートオブジェクト:画像を縮小→拡大などするとガビガビになってしまうので、必ず変換しておく
(レイヤー右クリック→スマートオブジェクトに変換)
※レタッチ作業はスマートオブジェクト状態だとできないので、ラスタライズ(スマートオブジェクトでなくすること)する
③PSDデータで最初に別名保存しておく
→この後作業を行っていく

【選択範囲】
Illustratorと同じように、ペンツールを使用し選択範囲を設定できる

【レタッチ】
・スポット修復ツール(クリックで不要物を消したりできる)
・修復ブラシツール(Alt押しながらクリックでコピペしたりできる)
・コンテンツに応じた修復ツール など

補足

・ZIPファイルの開き方
ダブルクリックではなく、右クリック→「すべて展開」

・無料画像サイトを使用する際は規約をよく確認する
(PAKUTASOは使いやすそう)

【ポートフォリオについて】
・作品のクオリティを高くし、バランスを均一にする
(作品数のために自信のない駄作を載せてバランスを下げない)

・作品作成時は情報を残す
使用ツールや作業時間、何に気を付けて作成したか、アピールポイントなど
※クオリティを判断するのは作成者ではなく閲覧者なので、「よくできたと思います」などの感想は不要

・訓練記録だけでなく、作品ページを充実させる
新しい投稿が上になり、古い投稿は下に流れていく&文字の記録ばかり表示されると実績(どんな作品を作っているのか)がわかりづらい、作品作成ペースが遅い(少ない)とも見えてしまうため
授業以外での自習作品や、以前に作った個人的な作品もポートフォリオには載せてOK

12月5日(月)-CMS構築基礎①WordPress入門

CMSについて

CMS(コンテンツ マネジメント システム)は、HTMLやCSSなどの専門知識が無くてもWebサイトの作成・更新・維持が行えるシステム

WordPressについて

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

【基本の操作方法】


設定

◆一般設定→【サイトのタイトル】【キャッチフレーズ】は自由に変更OK
キャッチフレーズは、検索したときにサイトタイトルの下に表示される文章

※【WordPress アドレス (URL)】~【管理者メールアドレス】までは触らないこと
【日付形式】【時刻形式】【週の始まり】は自由に変更してOKとのこと

◆パーマリンク→【設定→パーマリンク】
パーマリンク構造でURLの表示方法を変えられるが、記事内でリンクしている場合、URLが変わると無効になってしまうので、変更は最初だけにしておいた方がいいとのこと(別に問題なければ変えてOK)

投稿

◆【Shift+Enter】で段落内の改行
◆文字を選択し、【∨→ハイライト】で指定の文字色の変更
◆右上の設定マーク→【色→背景】でブロックの背景色の変更
◆↓リストの表示(・または1、2…)

  • あああ
    いいい
    ううう
  • いいい

◆表組み
【+】で【テーブル】を追加で表作成(追加や削除も可能)

商品数量単価
リンゴ10100
みかん550
バナナ1010

◆メディアライブラリ

画像を使用する場合、直接貼り付けでなく、先にメディアライブラリにアップロードして使用し、ダブりなどがないように管理する方がいい(サーバーに同じ画像が溜まってしまうため)

◆アイキャッチ画像

投稿記事のアイキャッチ画像

◆画像挿入、ギャラリー挿入

並べて表示させたいときは、ギャラリーで挿入
補足:枚数によりバランスが悪く表示されてしまうが、透明画像を用意するとちょうどよく表示されるとのこと

◆カテゴリー

カテゴリーで記事を分類できる

◆タグ

タグでより詳細な分類ができる、同じタグ内容で記事を後から探し出せる

固定ページ

投稿ページと違い、メニューなどで自発的にリンクさせないと見えない
投稿ページのように流れていく内容というよりは、例えば「企業情報」「採用情報」などのような普段あまり内容が動かないが、ずっと目に付くようなページで使用する

メニュー

【外観→メニュー】→【メニュー構造→メニュー名→メニュー設定→メニューを作成】でテーマ毎に表示位置が多少異なるが、上部やサイド、下部などに表示される

テーマ

テーマのデザインを自由に変更可能
Cocoon、FUKASAWAなどが有名とのこと
基本無料のものしか表示されない(有料の場合は、直接その配布サイトでDLする場合に支払いをする必要がある)

感想

WordPressはまだわからない部分も多いですが、機能がたくさんあって面白く、これからコツコツ覚えていきたいと思います🔥