 |
 |
Ⅱ 科学(Musical life) 5:ウェブ制作=サイト構築・ドメイン契約 ★一部で有効=Web Creation ウェブビジネス第2弾。良質なホームページの作成方法。 <目次> 【1】ブログ作成=Word Press 【2】サイト作成=ホームページビルダー 【3】ウェブ公開=契約と転送設定 Ⅲ 転送やアイコン設定  ★更新：2023/5/30 ★文字数：約10300字(OK)   『ホームページビルダー22 ダウンロード版』:：ジャストシステム   初心者でも簡単にホームページを作成できる、ホームページビルダーシリーズの最新版！高品質な写真・イラスト素材を合計20種類搭載している。 |
【1】ブログ作成=Word Pressで作る無料ソフト、Word Pressを使い、ブログを作成。 近年、他の無料ブログ（FC2等）よりWord Pressが最も推奨されている。 Ⅰ Word Pressの使い方 (1)Word pressの特徴 Word Pressの特徴は下記の通り。 ・創始者はAutomattic社の実業家、マレンウィッグ氏 ・CMSの代表。CMSとは、コンテンツ管理システム=Webコンテンツを、HTML等専門知識がなくても管理できるようにしたもの。CMSの中で、最も利用者数が多い ・いつでも更新できる。PCだけでなくスマホ、タブレットからでも更新できる。 ・SEOに有利。アクセスupの為の親切な仕掛けが幾つもある。 ・サイト側で自分が編集した内容に対して分析してくれる ・ソーシャルボタン、コメント欄等が最初から設置されており、訪問者とコミュニケーションがとれる。 (2)Word Pressの編集 英語の画面が出たり取っつきにくさはある。何事も慣れは必要。 ・英語→日本語に変換 ・プロフィール（右上画像）→アカウント設定（Account setting）→右下の保存（水色）ボタン (3)Word Pressのプラグイン Word Press内での機能を追加する為のソフトウェアのようなもの。初期設定だと、 文字のサイズを変えられないなどの機能不良があるが、追加機能（=プラグイン）すればできることが増やせる。 ❶TinyMce Advanced 文字サイズや文字の背景色、文字の背景画像を変更可能に ・「設定」から付けたし可能 ❷Popup Maker まずマウス右クリックで日本語に翻訳しておこう。ポップアップの作成手順は下記の通り。 左メニューの「プラグイン」→「ポップアップを作成する」→「ポップアップ名、ポップアップタイトルと本文」を記述する。 ポップアップ名はWordPress編集画面で作成したデータの名前になる。 ポップアップタイトルに記述した文章はポップアップの左上に大文字で表示される。 本文欄は通常のブログと同じように文章を書いたり、画像を入れたりして自由に記述できる。 作成が終わったら「公開」ボタンを押すと保存できる。作成したポップアップ一覧の確認は左上の横三本線→「すべてのポップアップ」から確認できる。 ●ポップアップの起動条件を指定する ポップアップが表示される条件として、「クリック展開」または「時間経過による自動展開」かどちらか指定できる。 クリック展開の指定方法はポップアップの編集画面→下部の「トリガー」→「新しいトリガーを追加」→ 「開くをクリックします」→「追加」→「追加」→「更新」で設定できる。 ●作成したポップアップをブログに導入する ポップアップが作成できたら、左上の横三本線→「すべてのポップアップ」→ 一覧画面の作成したポップアップの中で使用したいポップアップタイトルの右横「CSS Class」のところに記載された「popmake-〇〇」というのをコピーし、 ポップアップの起動条件になる文字や画像の部分を下記コードで囲む。 <span class="popmake-〇〇">（クリック対象の文字や画像）</span> ❸Slimstat Analytics アクセス解析可能 ➍Yoast SEO SEO対策のアドバイス表示をしてくれる。 Ⅱ ブログでコンテンツを作成する 本題。文章を書いたり、画像を貼り付けたりして中身を構成する。 (1)ブログのテーマ 最も肝心な、書く内容。 ●自分が興味あること 自分が好きなことや、勉強すべきことは最もやる気につながりやすいため、まずは自分主体でテーマを決めるのがいいだろう。 ●他者から需要のあること 自分が好きなことばかりだと趣味のブログになり、狭い範囲の内容に偏ってしまう。それだけだと気分で更新することになり、中々アクセスを集めにくい。基本的にウェブで配信し、稼ぐということは、他者にとって有益な内容を提供するということ。 相互に刺激し成長し合う。世の中には色んな人がいる。人と会話したり、色んなサイトや番組をみて勉強し、自分の興味にも繋げる。そうすることでネタ不足もなくなり、毎日安定して更新できるようになるだろう。 ●既存のサイト＋オリジナリティー 既にあるようなサイト等のコピーやマネをしても、既存のサイトには勝てない。既存のサイトを参考にするのは文化の発展には欠かせないが、それ＋新しい何かを付け加えることでそれがオリジナリティーとなり、サイトの需要や存在意義が出てくる。 ●テーマの例 ・ビジネス関係 ・携帯電話、PC関係 ・ウェブ、プロバイダ関係 ・旅行 ・音楽 (2)文章量命 SEO（アクセスup）の基本は文章の充実量、キーワードの多さ。最も優先すべきことは、ウェブライターになった気持ちで毎日文章をコツコツ書き続け、更新を止めないこと。 (3)画像やツールで華を添える 文章だけだとアクセスは集めても華がなく、見辛いため、ファンがつきにくい。ページに合った画像を使用。時間短縮したいなら無料素材、自分で撮った写真なら時間もかからないので安心。絵はオリジナリティがでるが、時間がかかるので余裕があるなら使う。 |
【2】サイト作成=ホームページビルダーホームページ制作ソフトにも色々あるが、このページでは主にHPB（ホームページビルダー）を使ったサイト作成方法についてまとめる。 Ⅰ ホームページ作成ソフトの種類 Word Pressと違い、全て有料である。 (1)ホームページビルダー：（株）ジャストシステム 直感的に作れるホームページ制作ソフト。 (2)シリウス：（株）ACES WEB ※シリウスの公式ホームページ 次世代のホームページ制作ソフトといわれる。アフィリエイト専用の制作ソフト。 ・料金：18,800円（税込） (3)Dreamweaver：アドビシステムズ 上級者向け。直接HTMLコードに書き込んで編集する。 Ⅱ ホームページビルダーの使い方 (1)ホームページビルダーの機能 2021年現在、HPB22まで発売されている（以前のバージョンは順次発売終了） ●ホームページビルダーの種類と互換性 ・クラシック：自由にこだわって編集したい場合 ・SP：テンプレを使い簡単に作りたい場合 HPB19以降、「クラシック」と「SP」があるが、互換性がない。例えば、クラシックで作成したページをSPで編集することはできない。しかしクラシック同士、SP同士で編集したデータなら引継ぎ可能。 ●サイト転送設定 WEBサイトをインターネットにアップロードするために必要な設定。プロバイダーと契約し、プロバイダーから指定されたFTP（File Transfer Protocol＝ファイル転送時の通信）情報を指定する。 ・「転送先フォルダ名」はプロバイダーにより指定がない場合もあれば、ドメインと同じフォルダ名にすることもある。 ●サイト容量 プロバイダーにより容量制限があるので、自分が現在作っているコンテンツの合計容量がどの位なのか把握しておこう。 ・容量の見方は「サイト転送」→合計●ファイル（転送サイズ●MB または●GB） ●HPBサービス 作るだけでなく、公開、運営、集客までサポート。プランは月額制、全独自ドメイン、初期費用無料、Word press対応。他のサーバーと比べ、容量が少ないのであまり推奨できない（大容量で知られるエックスサーバーなら最低容量300GB） ・10GBプラン→約1500円 、メールアドレス10個 ・50GBプラン→約3500円、メールアドレス無制限 ・ネットショッププラン（50GB）→約4500円、メールアドレス無制限 ・ばっちり集客プラン→約6000円、全自動ウェブフォーム、メルマガ・クーポン配信 ・他のサービスからドメイン移行する場合の「Auth code」とは、移行元プロバイダの認証コード。移行元のサイト上で手続きし、発行する。 ・申込後は新規の場合は1時間ほどサーバ設定に時間がかかるため、完了メールを待つ。他社からドメイン移行の場合は、10日前後かかる。 ・申込後の設定で重要なのは、「コントロールパネル」と「お客様カウンター」。コントロールパネルでは管理者アカウント設定、メール設定、WordPressインストールなどができる。お客様カウンターでは契約内容の変更、ドメイン情報の詳細確認、ネームサーバー情報などが確認できる。 ・Word Pressも使える。HPB17から搭載。ソフトインストール済みのPCからだけでなく、ブログ感覚でスマホやタブレットからもサイトが更新可能に。1ページあたり記事表示数は5記事。ウェブ上のWordPressの管理画面にログインすれば、スマホなどでも編集できる。外出先でメモ感覚で保存しておけば、時間を有効に活用できる。細かい編集は自宅のPCで行えばよい。 (2)ホームページビルダーでの作成手順 ※HPB19（バージョン）を基準としています ●作成モードについて 作成後でもモード変更可能。「ファイル」→「モードを指定してファイルを開く」 「標準モード」はページを常に中央表示可能。表やスタイルシート(CSS)を使う。 「どこでも配置モード」は数ミリ単位で、思い通りに文字や画像を配置できるが、編集画面と見る端末側の画面でズレがあったり、常に中央配置画面が作れない等の難点がある。 ●URLの作成について ・SEO対策として検索エンジンがわかりやすいよう、コンテンツと関連した単語を使用。 ・page1.htmlなど、作者主体のものは避けるべき。 ・記号は-は使用okだが、/、.(ドット)、+は保存不可 ・URL名を変更した場合は、前のURLを完全に削除しないと、いつまでもWEB上に残ってしまい、スパム扱いで検索順位等に影響を与える可能性がある。これを避けるには、ファイル転送ツールで完全に削除する。 ※HPBでのURL削除方法 ●表（テーブル）について HTMLソースをいじらず直接編集できる。表を使うことでどの端末でも画面を中央表示するのに便利。やり方は「表の挿入」→表の外枠選択→書式の位置揃え→中央揃えに ・枠がうっとうしい場合は非表示にできる。 ●ページ編集とHTMLソースについて HPBではHTMLソースを直接いじらなくても、ブログ感覚で編集できるのが便利だが、HTMLソースを直接編集することもできる。その場合、HTMLを構成する用語を理解しなければならない。詳細は後述する。 ●リンクの作成 文字や画像に別ページに飛ぶリンクを挿入する。ページからページにスムーズにアクセスを促す為にかなり重要になる。 ・「パスワード付きリンク」は他人に見られたくない、ウェブメモ帳にしたいページなどに使う。 ●トラブル対処、バグ解消 HPBで作成すると、ときに意味不明なバグが生じて悩まされる。その解消法について解説する。 ①ファイルを読み込めない、転送時、FTPサーバー名など入れても設定情報が反映されない →ホームページビルダーのアンインストール→再インストールでは解決しない。プログラムの中にある「Just systemツール」の中から設定情報をリセットで解決する。 ※サイトや転送設定の新規作成ができない（公式サイト） ②HTMLリンクに不要なタグが自動的に生成される。編集が重くなる →編集ページ上の文字をコピペすると生じやすい。コピペしたいときは編集ページからではなく、HTMLソースの中でコピぺすればバグは生じない。それでも解消しない場合、面倒だが入力し直しで解決する。 ③同じ文字サイズで作成したのに、PCとスマホで実際にみたサイズが異なる →HTMLタグをチェックし、不要なタグが入ってないか調べ、削除する。それでも解消しなければ面倒だが、入力し直しで解決。 (3)ホームページビルダーのツール ●「挿入」ツール ・「ロゴ」はページのタイトル等目立たせたい文字に使用する。 ・「ボタン」は別のリンク先にとんだりするために設置する為の色んなマーク。 ●ウェブアートデザイナー 写真や画像をページ内に配置するツール。 ●ウェブアニメーター 動く文字等をページ内に配置するツール。 ●スタイルの設定 文字の上に背景画像設定することで目立たせることが可能。出し方は文字ドラッグ→マウス右クリック→「スタイルの設定」→「色と背景」 ・「色と背景」→「参照」→「素材集から」：最初から選べるもの。割と種類が豊富にあるので、慣れないうちはこれを使えばOK。 ・「色と背景」→「参照」→「ファイルから」：自分でPhotoshopなどで背景素材を作成し、文字背景に設定することが可能。オリジナルの背景を作れるので、素材集に飽きた人は自分で作成してみよう。 Ⅲ 知っておくべきHTMLの知識 HTMLで指定する情報群のことを「タグ」と呼び、タグには以下のような種類がある。 (1)HEADとは：<HEAD></HEAD> 表に出ない、ページ内部の概要を検索ロボットに知らせる為のタグのこと。<meta>や<title>を記述する。 ●<meta name="description"content=（概要説明）> Googleなどの検索結果にてタイトルの下に記述する説明文に使われる。 ●<meta name="keyword"content=（キーワード）> 検索されたいキーワードを指定する。しかし2009年以降、メタキーワードを悪用したスパムが横行したため、現在は設定しても検索順位には影響しない。 ●<meta name="viewport"content="width=（数字）"> スマホ最適化、自動縮小防止。青字の部分の数字は、ページのサイズに合わせて指定する。 ●<TITLE>（タイトル）</TITLE> 最重要。ホームページのタイトルになり、検索順位に影響する。 (2)BODYとは：<BODY></BODY> ページの表に出る部分。読者から見えるページのタイトルや文章、画像などコンテンツの内容を記述する。 ●<h1>（大きな見出し）</h1> <body>内に見出し（目次）をつける。h1～h6まで使用できるが、重要なのはh1、次点でh2。h1はページタイトル等1回のみ使用が望ましい。 ・h2～h6は中～小見出しとなり、使用回数制限はない。 ●<font 〇>（内容）</font> 文字の色やサイズを指定する。〇にはcolorやsize等が入る。 ●<b>（内容）</b> 文字を太くする ●<br>：改行する ●<table width="〇"> 「テーブル」を指定する。各「行」の横幅をまとめて指定する。注意しなければならないのは、各行ごとに<td width="〇">で横幅を指定することもできるのだが、これをするとレイアウトが崩れやすいので、<table width>のみ設定し、<td width>は設定しないこと。 ●<td>：テーブルデータの略。 ●<img src="〇"> 画像を指定する ●<div style="top：〇px；"left：〇px；position：absolute；width：〇px；height：〇px；margin：〇px> サイトの画面配置を指定。"px"は距離の単位、 "top"は上からの距離、"left"は左からの距離、 "position：absolute"は絶対位置への配置、 "width"は幅、"height"は高さ指定、 "margin"は余白 ●<center>（内容）</center> 画面全体を中央表示 ●<div align="left"> 文字を左揃えにする (5)リンクの指定 ある文字や画像から別のページにアクセスする仕掛け。 ●<a href="（ページURL）">（内容）</a> ページ外リンク。ページ内の文字や画像などをクリックすると、他のページに飛ぶように指定する。指定するページのURLは自由。 ●（リンク元）<a href="〇">（内容）</a> ●（リンク先）<h2 id="〇">（内容）</h2> ページ内リンク。同じページ内で特定の文字や画像をクリックしたさいに、特定の場所まで一気に飛ぶように指定する。目次に指定するのが有効。ページが縦に長い場合、リンクを設置する事で一気にその場所までジャンプすることができる。〇には適当な記号を指定する。リンク先とリンク元で、同じ記号を指定する。複数のリンクを設置する場合、リンク元、リンク先まとめて別のものを指定する。 （例) ・リンク元1 <a href="#123">→リンク先1 <h2 id="123"> ・リンク元2 <a href="#abc">→リンク先2 <h2 id="abc"> (1)お名前.com：GMOインターネット（株）  国内シェアNo.1の格安ドメインサービス。年額￥1～ ・Webサイトやブログ、メールアドレスに使用 ・500種類以上の独自ドメイン (2)イージーメールフォーム：（株）リーフワークス 
Webサイトに必要な、お問合せフォームやアンケートフォームを簡単に作成・管理できる。 |
【3】ウェブ公開=契約と転送設定Ⅰ サーバー契約 (1)エックスサーバー：エックスサーバー（株） 
・全サーバーの中で最も世間的評価が高い。 ・一括払いのみ対応。分割払い非対応なので注意！ ・Word Press対応！ ・初期費用あり（全プラン3,000円） ・電話サポートは平日10-18時受付 ・メールサポートは365日24時間受付！ ●プラン（3種類） 各々3カ月、6カ月、12カ月、24カ月、36カ月ごとの契約。ここでは3カ月分の金額のみ記述する。 ・「X10」は3カ月3,600円。ディスク容量（※）200G、転送量（※）70G/日 ・「X20」は3カ月7,200円。ディスク容量300G、転送量90G/日 ・「X30」は3カ月14,400円。ディスク容量400G、転送量100G/日 ※ディスク容量とは…ウェブ作成時のファイルや画像などの保存できるデータ量のこと。サーバ契約により数10GB保存できるケースが多いが、実のところ複数サイトであっても1GBですら使い切るのが難しいといわれており、あまり大容量に拘る必要はないと思われる。 ※転送量とは…ウェブページ閲覧時にサーバーへの負荷を抑える為に業者が設けたデータ送受信容量の上限。ウェブサイトへのアクセスが多ければ多い程、転送量は多くなる。転送量を超過してしまうと、業者から警告を受け、プラン変更等を促される事がある。 (2)ロリポップ！：GMOペパボ(株)  ・安い！！ ・ライトプラン以降、Word Press利用可能！ ・初期費用￥1500（エンタープライズプランは￥3000） ●プラン（4種類） 契約期間は1カ月、3カ月、6カ月、12カ月、24カ月、36カ月から選べる。ライトプラン以降は6カ月以上プランの一括払い限定で少し安くなる。 ・エコノミー：月額100円。ディスク容量10G、転送量40G/日 ・ライト：月額250円（300円）。ディスク容量50G、転送量60G/日 ・スタンダード：月額500円（600円）。ディスク容量120G、転送量100G/日 ・エンタープライズ：月額2,000円（2,300円）。ディスク容量400G、転送量無制限 (3)コアサーバー：GMOデジロック(株)  ・全プラン転送量無制限！ ・Word Press対応！ ●プラン（4種類） ・CORE-MINI：月額198円/ディスク容量60G ・CORE-A：月額397円/ディスク容量120G ・CORE-B：月額785円/ディスク容量240G ・CORE-C：月額3,167円/ディスク容量500G (4)GIGA：セブンアーチザン(合)  ・ディスク容量無制限プランあり！ ・Word Press対応！ ・サポートは365日24時間受付！ ●プラン（5種類） 1カ月、3カ月、6カ月、12カ月契約あり ・スーパー：年額8,908円。ディスク容量80G、転送量180G/月 ・ディスク容量無制限：年額11,760円。ディスク容量無制限、転送量180G/月 ・ウルトラ：年額14,980円。ディスク容量120G、転送量360G/月 ・ギャラクシー：年額26,980円。ディスク容量200G、転送量360G/月 ・アルティメット：年額50,980円。ディスク容量300G、転送量720G/月 (5)リトルサーバー：（株）リトルネットワーク  ・安い！！ ・Word Press対応！ ・転送量不明 ●プラン（4種類） 1カ月（ヘビーのみ）、3カ月（ミニ以外）、6カ月、12カ月プランあり ・ミニプラン：年額1,800円。ディスク容量20G ・リトルプラン：年額3,000円。ディスク容量60G ・ビッグプラン：年額5,160円。ディスク容量120G ・ヘビープラン：年額47,760円。ディスク容量500G ※参考サイト ・レンタルサーバー比較 Ⅱ ドメイン契約 (1)ムームードメイン：GMOペパボ（株）  月額69円（.workや.club、.xyz、.site）～1,260円（.net）でドメイン取得可能なサービス。 Ⅲ 転送やアイコン設定ウェブ公開後の各種設定方法。 (1)HTMLファイルを管理する サイトの内容をアップロードするさいに、全てのデータを管理しているファイルを「HTMLファイル」と呼ぶ。画像ファイルなどをこのHTMLファイル内に移動すれば、サイト内のデータとして共有できる。 ホームページビルダーの場合、ファイルの最上層（ルートディレクトリ）は「public_html」というフォルダになる。 (2)サイトのアイコンを作成する サイトのアイコン＝「ファビコン=favicon」と呼ぶ。自己ブランディングになり、ブックマーク登録しやすくする為、設定しておいた方が望ましい。 ①元となるアイコン画像を制作 ②画像をファビコン変換サイトにてico形式に変換 ③icoファイルをサイトのHTMLファイルに移す ④HTMLソースに記述し、アップロード ①元となるアイコン画像を制作 PhotoshopやIllustratorで制作。作成するサイズの例は下記の通り。全てのサイズで作る必要はない。解像度の高いAndroid用で作るのがベスト。拡張子は「png」にする。 ・パソコン用：16px×16px、32px×32px、48px×48px=favicon.ico ・iPhone用：180px×180px=apple-touch-icon.png ・Android用：192px×192px=favicon.png ※ホームページのアイコンとは？（Xserver） ②画像をファビコン変換サイトにてico形式に変換 ※「icoファイル」はマルチアイコンと呼ばれる形式。複数サイズの画像をまとめて格納できる。 ※Faviconジェネレーター ※Favicon generator 上記変換サイトでアイコンにしたい画像をアップロードすれば、ico形式のfavicon用画像を自動で全部作成してくれる。変換サイトにて複数のファイルが保存できるが、そのうち下記3つのみ使用する。 ・favicon.ico ・apple-touch-icon-180×180.png ・android-chrome-192×192.png ③3つのicoファイルをサイトのHTMLファイルに移す ダウンロードしたら上記3つのファイルをHTMLファイル（index.htmlなどが保存してあるファイル）と同じ場所にコピーして保存。 ④HTMLソースに記述し、アップロード アイコンを表示したいページのHTMLソースのhead枠に以下コードを記述し、転送して完了。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" link rel="apple-touch-icon"> <href="apple-touch-icon-180x180.png" sizes="180x180" link rel="icon" type="image/png"> <href="android-chrome-192x192.png" sizes="192x192"> ※ホームページにファビコンを表示する方法    |
|
|
