カテゴリー : PC

サイト作成

昨日、私のサイトの方でサイト作成について質問がありましたのでこちらで答えます。
ただ私が教えられるのはサイトを開設する上での最低限の基礎知識と、簡単&無料で作成できるサービスを紹介するぐらいです。
サイトを作成したことがない方だとブログのように容易に開設できると考えがちですが、サイトを作成していくという事は決して容易なものではありません。もちろんここで一から十まで教えられることでもありません。
サイトを作成する為の書籍も多数出版されていますし、専門学校もあります。簡単に作成出来たらこのような書籍や専門学校はいりません。ただ何の知識がない方でも独学で十分に作成していく事は可能です。

基礎知識

まずはサイトを作成していく上で必要なもの。

・サーバー
サイトを世界中に公開する為に必要な領域。
無料と有料があります。
有料のものでも料金が違ったり、容量が違ったり、使用できない言語があったりと様々です。
無料のものは広告が表示されます。テキスト広告がページ下部に小さく入るのから上下に大きいバナー広告が入るのまで様々。有料のサーバーに比べ制限も多いです。

・テキストエディタ
HTMLやCSS等のコードを記述する為に使用します。
私はシェアウェアの『秀丸エディタ』を使用しています。シェアウェアですが無料で使用することが出来ます。
WINDOWSに標準搭載されているメモ帳でもできますが、秀丸の方が使いやすいです。

・FTPソフト
サーバーにデータを転送する為に使用します。
私はフリーソフトの『FFFTP』を使用しています。

続いてテキストエディタに記述する言語について。
HTMLやCSSについて勉強します。色々ある言語の中でも最も簡単な部類の言語です。
単純な(簡素な)サイトで良ければHTMLのみで作成できます。
ある程度理解できてからJavascriptだったりサーバーサイドの言語(後述)を勉強すればいいです。
また言語が分からなくても『ホームページ・ビルダー 』のようなソフトを使用することでも可能です。フリーソフトもあるようですが、私は利用したことがないので。
HTMLについては最初は『HTMLタグ辞典 』で勉強しました。

初心者向けにホームページ作成について解説している『1時間で作るホームページ』なんかお勧めです。私も最初はこちらのサイトで勉強しました。

私のサイトについて

私のサイトはサーバは『ロリポップ!レンタルサーバー』のロリポプラン(263円/月)を使用。ドメインは『ムームードメイン』で取得(980円/年)。共にアビスパ福岡のスポンサーであるpaperboy&co.(通称・ペパボ)が提供しています。

上記で説明した秀丸エディタにコード(言語はHTML、CSS、Javascript、SSI、PHP、Perlなど)を記述してFFFTPでサーバーにアップしています。
SSI、PHP、Perlというのはサーバーサイトスクリプトとも呼ばれ、サーバー内で動作するプログラム言語です。動的サイトはこのような言語で作成されています。動的な事とは例を挙げると掲示板、チャット、ブログなど閲覧者に合わせて表示される内容などを変える事ができるサイトです。
私のサイトでいうと、トップページのRSSリーダー、一行掲示板、アンケート、メニューはサーバーサイドスクリプトで作成されています。
対する静的サイトとはここをクリックすればこのページに行くというようなサイト製作者が予め指定した事しかできないサイトのことです。

無料で作成するには

私が知ってる無料で作成する方法は以下の通り。

①無料のサーバーをレンタルし、テキストエディタにHTMLを記述し、FTPソフトでサーバーでアップする。サーバーによる制限を受けるのみである程度やりたい事を自由に出来ます。

②Jimdoのようなサービスを利用する。①より出来る事が制限されますが、ブログのように簡単な操作のみで作成できます。

③WordPressを利用して作成する。最近このWordPressで作成されたサイトが多いと感じます。ブログのように簡単にできるのは②と同じ。①より制限がありますが、②より自由にやりたい事を実現できます。ただプログラム(言語)を理解している上級者向けだと言えます。あとインストールが初心者には難しい。データベースを利用するのでデータベースを利用できる無料サーバーでなければいけない。

上記の3つの方法について簡潔ではありますが、記述していきます。

①無料のサーバーをレンタル

無料サーバーでお勧めは、『FC2WEB』です。広告はページ下部に小さくテキストが入るのみ。
私も最初はこちらを利用していました。個人がやってる自宅サーバーではなく企業が運営しているので安定していますが、サーバーサイド言語は使用できません。なので静的なサイトのみ作成できます。
初心者が練習用に利用するにも最適だと思います。慣れてきたら有料プランもありますし。
他を挙げるなら『忍者ホームページ』。

最初に記述したテキストエディタにHTMLを記述、FTPソフトでレンタルした無料サーバーにアップロードするのみです。

②Jimdoでサイト作成

Jimdo(ジンドゥー)では無料でサイトを作成する事ができます。ただ大きめのJimdoの広告が入ります。
参考までに『福岡大学サッカー部』のサイトはこのJimdoで作成されています。
私は利用したことがありませんが、登録してブログと同じような簡単な操作だけで作成できるようです。
サーバーの確保、HTMLやCSSのような言語、FTPソフトもいりません。

③WordPressでサイト作成

WordPress』はフリーのブログソフトウェアです。誰でも無料でダウンロードできます。
基本的にブログと同じようなシステムですが、これをサイトのように表示することができます。サンプル⇒『WordPressで作られている、有名Webサイト11選』。

問題は上記にも記述しましたが、
・データベースが利用できるサーバーでないといけない。無料サーバーで挙げるなら『@pages』など。
・自身でデータベースに接続したりとインストールが初心者には難しい。
・PHPで作成されているのでPHPの知識がないと何もできない。

WordPressはテンプレートも豊富でプラグインも豊富なのでお勧めです。私のこのブログもWordPressです。

参考までに『ロリポップ!レンタルサーバー』のロリポプラン(263円/月)では初心者でもWordPressを簡単にインストールして利用できます。

また最近は『WordPress.com』のように無料でWordPressブログが開設できるサービスもあるようです。FC2やアメーバ、ライブドアのようなブログサービスと同じですね。

アップロード容量の制限変更

WordPressの場合、アップロードできるファイルの容量はデフォルトでは上限で2MBまでになっています。
これを変更する方法のメモ。

.thaccessファイルで設定

下記のソースを入力してファイル名を『.htaccess』にして保存。
Wordpressが入ってるディレクトリにアップする。

[html]#Change upload limits
php_value memory_limit 32M
php_value post_max_size 32M
php_value upload_max_filesize 32M
php_value max_execution_time 600
#Change upload limits end
[/html]

ロリポップの場合

ロリポップを利用している方はとても簡単に設定できます。ちなみに私もロリポップ。

ロリポップ(http://lolipop.jp/)にログインする。

『WEBツール』⇒『PHP設定』。

『upload_max_filesize』の箇所を20Mに変更する。ロリポップの場合、デフォルトの『2MB』と『20MB』の2択です。
選択したら『php.iniを設定する』をクリックしてログアウト。

アップロード画面で確認してみます。上限が20MBに変更されています。

functions.phpやphp.iniを編集

ググったら『functions.php』や『php.ini』を編集して制限を変更する方法もあるらしい。とても分かりやすいサイトがあった。
こっちは試してないから何とも言えないけど。上記の方法で駄目だったら参考に。

WordPressでファイルアップロードサイズの制限値を変更する方法

PHARMACY

キャプチャをとりたいなら『PrtSc』キーを押してコピペするのが一般的。ただこれは現在表示されている部分をキャプチャするだけなので、縦長のページ丸ごとキャプチャしたい場合は使えません。
前々からWebページを丸ごとキャプチャ出来るソフトがあるのは知っていましたが、使う機会も無かったので気にも留めていませんでした。ただ先日Webページを丸ごとキャプチャする必要があったのでググって結局ダウンロードして使っています。

Webページは消されたりする事も多く、ソースなどで使用したい大切なWebページ等は保存しておくのがベター。ブログなどにURLを載せても閲覧者がいざクリックしてリンク先にいっても削除されてるといった事も多いです。バックアップがてらページをキャプチャしておくのが賢明だと思います。消えた後に保存しておけばよかったと思っても後の祭りですし。
最近だと魚拓などのサービス(例/ウェブ魚拓)も充実していますが、画像が上手く表示されないケースも多い。一応魚拓をとれば画像もサーバに保存されるとか記述してあるのですが。。。あと動作も不安定。URLを入力してもエラーになる事も多い。

ググって出てきたのが『PHARMACY』。PHARMACY(薬局)とキャプチャって何が関係あるか分かりませんが。使い勝手は抜群に良い。嬉しい事にインストールタイプのソフトではないです。

ダウンロードはこちら⇒Vectorソフトを探す!/PHARMACY

出力はBMP、PNG、JPG、クリップボードの4種類。
使い方はキャプチャをとりたいサイトのURLを入力して『移動』、出力形式などを指定して『キャプチャ』をクリックするだけ。
保存先は選べないみたいです。PHARMACY.exeのフォルダに保存されます。

試しにこのブログをキャプチャしてみました。サンプルはこちら

これ以外にもfirefoxのアドオンでもあるようですね。

参考までに。

ULTRAZONE

最近教えてもらったサイト。
サッカー情報が満載ってわけではないけど、知りたい情報をピンポイントに教えてくれる。
欧州で活躍している日本人選手の対戦スケジュールとか、CLの事など。CLは公式が分かりにくいから重宝してます。Jリーグだと勝ち点の推移とか順位の推移とか。
データをグラフ化してオンマウスで表示するようにしているのもいいですね。私もサイトを作成する上でやりたかった事だった。jqueryを利用してんのかな。


http://ultra-zone.net/

プラグイン②

BM Shots

今までサイトのサムネイル画像を表示したい時は『HeartRails Capture』を使用していました。しかし最近利用しようとしたところ不具合なのかサムネイルの表示に時間がかかり挙句表示されないという事が続いていました。
このプラグインはURLを指定するだけでサムネイルを生成できるので便利です。with属性でサイズの指定も出来ます。

下記のサイトからzipファイルをダウンロードしてきてアップロードするだけ。
プラグインのダウンロード先

[browsershot url=”http://~” width=”サイズ指定”]

表示例↓

[browsershot url=”http://avispaflag.com/blog/” width=”550″]

Lightbox Plus

グループ名を指定する事で複数の画像をグループ化できます。
グループ化する事でクリックすると次の画像に移るようになります。

[html]<a href="画像の絶対パス" rel="lightbox[グループ名]" title="キャプション" class="liimagelink">
<img src="画像の絶対パス" alt="" title="キャプション" />
</a>[/html]

Broken Link Checker

こんな便利なプラグインはまさかないだろうなと思いググったらあった。リンク切れチェックをしてくれるプラグイン『Broken Link Checker』。
結果は下記画像のようにダッシュボード上に表示されます。
リンク切れとして抽出したリンクには訂正線が自動で引かれます。ただリンクは生きたまま。
欲を言えばYouTubeなどの埋め込み動画が削除されたのもチェックして検出してほしかったな。

リンク切れを起こしているリンクがあるページも一緒に表示してくれるのでそのページに行き修正するのも簡単。下記画像はクリックして拡大してください。

WP-Ban

IPやホスト名でアクセス制限する為のプラグイン。
ダウンロードはコチラから。
ダウンロード&インストールして有効化。ダッシュボードの『設定』→『Ban』、IPやホスト名を指定するだけです。