Macのホームページ作成ガイド http://mac-homepage.livedoor.biz/ ホームページ作成ソフトのレビューや使い方サイトの紹介、レンタルサーバ情報などなどMacでホームページを作成しようとしている人の応援サイトです。 ja ホームページを公開しよう - 完全無料でホームページを作る！ http://mac-homepage.livedoor.biz/archives/1370130.html $(function(){ $('#tabs').tabs({ selected:1 }); }); 前回までで、だいたいのHTMLページの作り方やリンクの貼り方は解説してきました。 まだ不完全な状態であっても、とりあえず作成したホームページをサーバーにアップロードして公開しましょう。 ホームページは公開し... lblevery 2011-08-14T18:39:49+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

前回までで、だいたいのHTMLページの作り方やリンクの貼り方は解説してきました。
まだ不完全な状態であっても、とりあえず作成したホームページをサーバーにアップロードして公開しましょう。
ホームページは公開して終わりというわけではありません。
いまは不完全でも、少しずつ改良したり少しずつページを増やしていって、アップデートを繰り返していく事が重要です。
「ある程度まとまってから」なんて事をいっている間に、ホームページ作成の情熱が冷めてしまったりしては、もったいないです。

ここでは「完全無料でホームページを作る！」というテーマで解説をしていますので、今回は無料のFC2ホームページにアップロードする手順を解説します。

FC2WEB ホームページを使ってホームページを公開しよう！

FC2WEB ホームページは完全に無料で使える上に、1GBもの容量があり、目立つ広告も表示されないレンタルサーバーサービスです。
それではさっそくホームページのアップロードまでの手順を解説します。

  1. FC2ホームページを利用するには、FC2IDの作成が必要です。FC2IDも無料で取得できます。
    もしすでにIDを持っている場合は、FC2ホームページのトップページからログインボタンを押してサービス追加の登録画面に進みます。 upload_01

  2. FC2IDを取得＆ログインすると、以下のような画面になりますので、「今すぐFC2ホームページを始める」ボタンを押して次の画面に進みます。 upload_02

  3. 無料版か有料版のどちらに申し込みするのかを選択する画面になります。
    今回はもちろん無料版を使いますので「無料ホームページ登録」ボタンを押します。 upload_03

  4. 次はいよいよ登録するホームページの情報を記入する画面です。
    希望のアカウント名やFTPのパスワードなどを入力します。FTPのパスワードはファイルのアップロード作業の時に使いますので、必ず何かにメモを取っておいてください。 upload_04

  5. 希望するアカウントで登録ができたら、カウンター機能やアクセス解析機能の追加もできる完了画面が開きます。ここでアクセスカウンターなどの追加申し込みをしても良いのですが、今回は何も追加せずに次のステップに進みます。 upload_05

  6. これで登録が完了して、無事に管理画面が開きました。さぁ作ったホームページをサーバーにアップロードしていきましょう！
  7. ホームページのアップロードはサイバーダックを使います。サイバーダックを起動したら、左上の「新規接続」のボタンを押して、サーバーの設定画面を開きます。 upload_06

  8. サーバーの設定は、管理画面の「FTP情報」ページを見ながら以下のように行います。
    • サーバ：ホスト名（ホストアドレス）欄の内容を入力します
    • ユーザ名：ユーザー名を入力します
    • パスワード：先ほどメモしたFTPパスワードを入力します
  9. 入力した情報が間違っていなければ、これでログインができるはずですので、あとはサイバーダックのウィンドウにアップロードするファイルをドラッグアンドドロップするだけです！

完全無料でホームページを作るぞ！

  1. ホームページの作成・公開事前準備
  2. HTMLとCSSの基礎のキソ知識
  3. ホームページ無料テンプレートをダウンロード
  4. ヘッダ部分の作成
  5. メインコンテンツ部分の作成
  6. サイドメニュー部分の作成
  7. フッター部分の作成
  8. ホームページを公開しよう
]]> ホームページのフッター部分の作成- 完全無料でホームページを作る！ http://mac-homepage.livedoor.biz/archives/1370100.html $(function(){ $('#tabs').tabs({ selected:1 }); }); このページでは、当サイトで配布している無料テンプレートをベースにして、ページのフッター部分の作成について解説しています。 基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、... lblevery 2011-08-14T16:11:45+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

このページでは、当サイトで配布している無料テンプレートをベースにして、ページのフッター部分の作成について解説しています。 基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。

また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。

フッターセクションの範囲

フッターセクションは、テンプレートHTMLソースの以下の部分です。

  <div id="footer">
    Copyright c サンプルサイト All rights reserved.
  </div>

フッターセクションには、ホームページのコピーライト表記や、主要なページへのリンク、ページの一番上に戻るリンクの設置などを行うセクションです。
基本的には全ページ共通のものになります。

ページの一番上に戻るリンクの設置　～自分でCSSを書いてみよう！～

ホームページは基本的に縦長になりますので、ページの一番下まで読み進めた時に、ページの先頭部分に戻る為には、ずーっとスクロールをして戻らなくてはいけません。
しかし「▲ページの先頭に戻る」といった具合に、フッター部分にリンクを設置しておく事で一気にページ先頭まで戻る事ができるので便利です。

footer_link_1

それではHTMLファイルとCSSの修正を行ってみましょう！

HTMLファイルの修正

それではまずはHTMLファイルを修正していきましょう。
修正するポイントは以下の2点です。

  1. footer部分に「▲ページの先頭に戻る」というリンクをdivタグを使って設置する
  2. bodyタグに「id="top"」というIDを設定する
  3. コピーライトのテキストをdivtタグで囲み、「copy」クラスを適用する

順に見ていきましょう。

まずfooter部分に以下のように、divタグを使ってテキストを設置して、テキストにリンクを設置します。

  <div id="footer">
    <div><a href="#top">▲ページの先頭に戻る</a></div>
    Copyright c サンプルサイト All rights reserved.
  </div>

ここでリンク先に指定しているのは「#top」ですが、これはファイルではなく、後ほどbodyタグに設定するIDを指定しています。
こういった感じでリンク先の指定の先頭に「#」を付ける事で、同じページ内での移動ができるようになります。
こういったフッター部分から、ページの先頭に戻るリンクだけでなく、ページ先頭部分のメニューから、ページ内に書かれた情報の部分まで一気にジャンプさせるといった事もできます。

次に、今設定した「#top」のリンク先の場所を設定します。 今回はページの先頭部分、つまり一番上にジャンプさせたい訳ですから、bodyタグに「#top」を設定します。

</head>
<body id="top">
  <div id="header">

これでリンクの部分は完了ですが、後ほどCSSで見た目の部分を調整する為の仕込みをしておく必要があります。
それはコピーライト表記のテキストの部分に「copy」というクラスを設定しておく事です。

  <div id="footer">
    <div><a href="#top">▲ページの先頭に戻る</a></div>
    <div class="copy">Copyright c サンプルサイト All rights reserved.</div>
  </div>

CSSファイルの修正

さて次にCSSの修正をして、デザインを整えていきます。
恐らく今は下の画像のような見た目になっているはずです。

footer_link_2

ページの先頭に戻るリンクの上に線がついていますが、これをリンクテキストの下に表示させて、余白なども調整します。
以下の画像のようにする事が目的です。

footer_link_3
それではCSSファイルをテキストエディタで開いてください。 （名前を変えていなければ、テンプレートフォルダ内のstyle_001.cssファイルです） まずは現在表示されている線を消しますので、62行目に書かれているfooter部分の設定の中の「border-top」の設定を削除してください。
#footer{
border-top:1px solid #333;    ←この行を消す
 width:950px;
margin:0 auto;
（・・・以下省略）
}
次に先ほどHTMLの修正で追加した「copy」というクラスの見た目を定義します。 footerの設定の}の次の行に、以下のような設定を追加してください。
#footer{
（省略）
}
.copy{
border-top:1px solid #333;    /*コピーライト表記の上に線を表示*/
padding:10px 0;    /*コピーライト表記の内側の余白を上下10pxに設定*/
margin-top:10px;    /*コピーライト表記の外側の余白を上10pxに設定*/
}

これでCSSの修正は完了です。
先ほど修正したHTMLの修正と合わせて、ブラウザで表示を確認してみてください。

さてここで同じ余白の設定で「padding」と「margin」が登場しました。
この2つは同じ余白の設定ですが、若干異なります。詳しくは、HTMLスタイルシートリファレンスなどをご覧ください。

完全無料でホームページを作るぞ！

  1. ホームページの作成・公開事前準備
  2. HTMLとCSSの基礎のキソ知識
  3. ホームページ無料テンプレートをダウンロード
  4. ヘッダ部分の作成
  5. メインコンテンツ部分の作成
  6. サイドメニュー部分の作成
  7. フッター部分の作成
  8. ホームページを公開しよう
]]> ホームページのサイドメニュー部分の作成- 完全無料でホームページを作る！ http://mac-homepage.livedoor.biz/archives/1370061.html $(function(){ $('#tabs').tabs({ selected:1 }); }); このページでは、当サイトで配布している無料テンプレートをベースにして、ページのサイドメニュー部分の作成について解説しています。 基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレー... lblevery 2011-08-14T13:28:07+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

このページでは、当サイトで配布している無料テンプレートをベースにして、ページのサイドメニュー部分の作成について解説しています。
基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。

また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。

サイドメニューの範囲

サイドメニューは、テンプレートHTMLソースの以下の部分です。 メインセクションの中に入っています。

  <div id="sidemenu">
    サイドメニュー
  </div>

サイドメニューには、他のページへのメインリンク（以下、サイドグローバルメニュー）や広告バナーなどを配置します。 ここではサイドグローバルメニューの設置と、広告バナーの設置などを行う手順を解説します。

サイドグローバルメニューの設置

テンプレートには、すでに下のようなサイドグローバルメニュー用のスタイルが設定されていますので、HTMLソース上に決まったコードを書けばメニューとしての見た目が整うようになっています。

side_g_menu_1

それではHTMLソースを修正していきましょう。 <div id="sidemenu">と</div>の間に、以下のようなHTMLソースを追加してください。

  <div id="sidemenu">
  <!--以下のソースを追加-->

  <ul class="menu">
    <li>トップ</li>
    <li>ブログ</li>
    <li>写真</li>
    <li class="end">動画</li>
  </ul>

  </div>

<li>～</li>の間には、写真のページなら「写真」という具合に、リンクする先のページの内容を記述してください。
メニューがもっとたくさん必要な場合は、適宜<li>～</li>を追加して記述してください。
ここでキモになるのは、追加したソースの<li class="end">～</li>の部分です。
いくつメニューを追加しても問題はありませんが、必ずメニューの一番最後の行には class="end"という記述を入れてください。
これは「end」というクラスを設定している部分で、やってみると分かりますが、この行がないとメニューの一番最後の下部分に線が表示されないので、デザインがかっこわるくなってしまいます。
（クラスってなんだっけ？という方は、HTMLとCSSの基礎のキソ知識 - 完全無料でホームページを作る！をもう一度読み返してください）

他のページへのリンクを設置

サイドグローバルメニューの設置ができたら、次に各ページへのリンクを設置してみましょう。 リンクを設置するには<a>～</a>タグを使います。
それでは実際にリンクを設置してみましょう。

  <ul class="menu">
    <li><a href="index.html">トップ</a>
  </ul>

実際にリンクする先のページURLは、<a>のhrefの中で指定します。
この時に注意する点は、現在のページから見てリンク先のページがどのフォルダに入っているか？という点です。
現在のページから見て、下の階層のフォルダ内のファイルへのリンクの場合は「フォルダ名/ファイル名」という形式になり、現在のページより上の階層のファイルへのリンクの場合は「../ファイル名」という感じになります。
なかなかこれだけで理解できる人は居ないと思いますので、以下の3つのパターンからどのようにリンクを設定するのかを解説します。

side_g_menu_2
  1. photoフォルダのindex.htmlへリンク
    現在修正しているページがwwwフォルダに入っているindex.htmlだとすると、photoフォルダのindex.htmlへリンクは「photo/index.html」になります。
  2. 同じフォルダのphoto_01.htmlへリンク
    現在修正しているページがphotoフォルダに入っているindex.htmlだとすると、同じphotoフォルダのphoto_01.htmlへリンクは「photo_01.html」になります。
  3. 上の階層フォルダのindex.htmlへリンク
    現在修正しているページがphotoフォルダに入っているphoto_01.htmlだとすると、上の階層にあたるwwwフォルダのindex.htmlへリンクは「../index.html」になります。

ここで解説したリンクの考え方を「相対パス」と呼びます。
今修正しているページからの相対的な位置を指し示すものだから、こう呼ばれます。

もう一つ「絶対パス」というリンクの考え方もあります。
これは「http://」からはじまるURLをhrefに設定するやり方です。

相対パスでも絶対パスでも、どちらの考え方でリンクを設置しても問題はありません。
どちらを使っても、検索エンジンに読み込まれやすいとかそういった事もありませんので、完全に好みで使って良いと思います。
ただ、絶対パスだとどうしてもURLが長くなってしまう為、HTMLソースが見にくくなってしまい、修正の時に苦労をするかもしれません。

リンクについて少しはイメージができたでしょうか？
ビギナーの方にはなかなか難しいと思いますので、実際にリンクを設置してみて、体で覚えていくようにしてください。

完全無料でホームページを作るぞ！

  1. ホームページの作成・公開事前準備
  2. HTMLとCSSの基礎のキソ知識
  3. ホームページ無料テンプレートをダウンロード
  4. ヘッダ部分の作成
  5. メインコンテンツ部分の作成
  6. サイドメニュー部分の作成
  7. フッター部分の作成
  8. ホームページを公開しよう
]]> クオリティ高し！しかも無料で使えるアイコンサイト「iconeden.com」 http://mac-homepage.livedoor.biz/archives/1369788.html $(function(){ $('#tabs').tabs({ selected:1 }); }); 無料で使えるアイコンサイトです。 上の画像はダウンロードできるアイコンの一部サンプルですが、無料なのにかなりクオリティが高いので、いろいろな場面で使えそうです。 リンク：iconeden ダウンロードするには、... lblevery 2011-08-13T16:01:22+09:00 ホームページ無料素材 $(function(){ $('#tabs').tabs({ selected:1 }); }); free_icon_site
無料で使えるアイコンサイトです。
上の画像はダウンロードできるアイコンの一部サンプルですが、無料なのにかなりクオリティが高いので、いろいろな場面で使えそうです。

リンク：iconeden

ダウンロードするには、気に入ったアイコンの「DOWNLOAD」ボタンをクリックします。
free_icon_site_1

次にライセンスに関する確認をします。
個人／商用問わずに　ロイヤルティフリーで使用できますが、ポルノサイトなどでの使用や、アイコンの再販売などはできないという内容です。
（ライセンスについては改訂があるかもしれませんので、使用前に翻訳サイトなどを使って、最新のライセンス内容を確認してください）

ライセンスの内容を確認したら「ACCEPT AGREEMENTS & DOWNLOAD」ボタンをクリックします。 free_icon_site_2

zipファイルのダウンロードリンクをクリックします。
free_icon_site_3


ダウンロードできるファイルは、PNG形式やICON形式のファイルの他、イラストレータ形式などのファイルも含まれていますので、あらゆる場面で使えると思います。 ]]> ホームページのメインコンテンツ部分の作成 - 完全無料でホームページを作る！ http://mac-homepage.livedoor.biz/archives/1367517.html $(function(){ $('#tabs').tabs({ selected:1 }); }); このページでは、当サイトで配布している無料テンプレートをベースにして、ページのメインコンテンツの部分の作成について解説しています。 基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプ... lblevery 2011-08-07T14:04:29+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

このページでは、当サイトで配布している無料テンプレートをベースにして、ページのメインコンテンツの部分の作成について解説しています。
基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。

また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。

メインセクションの範囲

メインセクションは、テンプレートHTMLソースの以下の部分です。

<div id="content">
  <ul id="pan">
    <li>ホーム ></li>
    <li>ホーム</li>
  </ul>
  <div id="main">
    メインコンテンツ
  </div>
  <div id="sidemenu">
    サイドメニュー
  </div>
</div>

メインセクションには、メインコンテンツの他に、現在のページの位置を示すパン屑リストや後述するサイドメニューセクションも内包されます。 ここではメインコンテンツ部分にビルボード画像（ユーザーの目を引かせる為の大きな画像）や中見出しなども設置して、メイン部分を整頓する手順を解説します。

ビルボード画像を設置

ページを見たユーザーの目をひく事はもちろん、キャンペーン情報など告知したい情報をビジュアルで見せたい時にもビルボード画像はよく使われます。
ここでは単純にimgタグを使って設置しますが、Ajaxなどを使ってアコーディオン型にしてみたり、いろいろなパターンがありますので、バージョンアップについては後ほど解説します。

サンプルのビルボード画像は、テンプレートフォルダのimagesフォルダにbil_img_01.jpgというファイルがあります。このビルボード画像をメインセクションに設置します。
<div id="content">
  <ul id="pan">
    <li>ホーム ></li>
    <li>ホーム</li>
  </ul>
  <div id="main">
    <img src="images/bil_img_01.jpg" width="630" height="300" alt="サンプルビルボード画像">
     メインコンテンツ
  </div>
  <div id="sidemenu">
    サイドメニュー
  </div>
</div>

メインセクションはdivの数も多くややこしくなってきますので、設置する位置に気をつけてください。
上記のように<div id="main">の下に設置すれば問題はありませんが、違う場所に設置してしまうと、見た目が崩れてしまったりする場合があります。

中見出しとメインコンテンツのテキストを設置

テキストを中心にしたメインコンテンツを設置する事で、検索エンジンにページの内容が伝わりやすくなります。画像を中心にするとページのテキスト量はどうしても少なくなってしまいますので、できるだけテキスト量は増やしておく方が良いでしょう。
また中見出しを設置して、区切りをつけておくとページも見やすくなります。

ここでは中見出しに「新着情報」を設置してみましょう。
メインコンテンツには新着情報の中身を設置します。

<div id="main">
  <img src="images/bil_img_01.jpg" width="630" height="300" alt="サンプルビルボード画像">   <h2>新着情報</h2>
    ○/×  △△を追加しました<br />
    ×/○  □□を公開しました<br />
</div>

<br />というタグが登場しましたが、このタグはテキストを改行するタグです。
文章をメインコンテンツに書いた時などでも、改行したい箇所があれば<br />タグを設置する事で改行できますので、いろんな場面で使えます。

見出しタグの設置順序について

中見出しに<h2>タグを使いました。 ヘッダセクションに使った大見出しタグが<h1>ですので、勘のいい方はもうお分かりでしょう。 見出しタグは<h1>から順番に使っていく必要があるんです。
一応<h6>までHTMLにはありますが、実際には<h3>くらいまでしか使わないと思いますし、無理に使う必要もありません。

また、<h3>の後に<h2>を使っても問題はありません。
見出しの順番については、なかなか難しいので使っても良い順番と、使ってはいけない順番の例をだします。

<h1>→<h2>→<h3>  ○
<h1>→<h3>→<h2>  ×
<h1>→<h2>→<h3>→<h2>  ○
<h1>→<h2>→<h4>→<h2>  ×

この見出しタグの順番はあくまでも「HTMLソースに書かれた順番」です。
ブラウザなどでの見た目の順番ではありません。（見た目の順番はCSSで変える事ができるため）

ここまで見出しタグの順番について書いてきておいて・・・という感じもしますが、実際に順番が正しくなっていなくても、見た目が崩れるとか、SEOで不利になるとかの問題は、まずありません。
それほど気にしなくても大丈夫なのです。

完全無料でホームページを作るぞ！

  1. ホームページの作成・公開事前準備
  2. HTMLとCSSの基礎のキソ知識
  3. ホームページ無料テンプレートをダウンロード
  4. ヘッダ部分の作成
  5. メインコンテンツ部分の作成
  6. サイドメニュー部分の作成
  7. フッター部分の作成
  8. ホームページを公開しよう
]]> ホームページのヘッダ部分の作成 - 完全無料でホームページを作る！ http://mac-homepage.livedoor.biz/archives/1367282.html $(function(){ $('#tabs').tabs({ selected:1 }); }); このページでは、当サイトで配布している無料テンプレートをベースにして、ページのヘッダ部分の作成について解説しています。 基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学... lblevery 2011-08-06T23:33:16+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

このページでは、当サイトで配布している無料テンプレートをベースにして、ページのヘッダ部分の作成について解説しています。
基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。

また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。

ヘッダセクションの範囲

ヘッダセクションは、テンプレートHTMLソースの以下の部分です。
<div id="header">
<h1>ページの大見出しを記入します</h1>
</div>

ヘッダセクションは<h1>や、ホームページのタイトルロゴ画像などが設置されているのが一般的です。
その他にも当サイトのような感じで、グローバルメニュー（主要なページへのリンクメニュー）が設置されている事もあります。
ここではまず<h1>の設置と、ホームページのタイトルロゴを<img>タグ（イメージタグ）を使って設置するまでを解説します。

<h1>を設置する

<h1>はページの大見出しの部分で、ページの内容を要約したような文章を書きます。
ただ文章といってもそれほど長い文章を入れるのは、見出しとしては不適切かと思います。
一概には言えませんが、長くとも40文字程度で1行に収まるように書きましょう。

タイトルロゴ画像を設置する

ホームページのタイトルロゴ画像をヘッダセクションに設置します。 画像はimagesやimgといったフォルダにまとめておくのが一般的ですので、ご自分でホームページのロゴ画像を作成した場合は、imagesフォルダに保存しましょう。

ここではテンプレートフォルダの中にあるimagesフォルダに入っている、「rogo.png」を使って画像の設置方法を解説します。

画像は<img>タグ（イメージタグ）を使って設置します。 ロゴ画像を設置したヘッドセクションのHTMLソースは以下のようになります。

<div id="header">
<h1>ページの大見出しを記入します</h1>
<img src="images/rogo.png" width="420" height="60" alt="サンプルサイト" />
</div>

imgタグのsrc属性に、表示させる画像へのパスを書きます。
画像の幅はwidth属性に、高さはheight属性にそれぞれ、ピクセル数で書きます。
もし画像の大きさが分からない場合は、幅と高さは書かなくても「とりあえず」問題はありません。

最後のalt属性ですが、これは画像の代替テキストです。
音声のブラウザなどの画像が表示されないブラウザを使っているユーザーに、どんな画像がそこに表示されているのかを知らせる為にあります。
alt属性に書かれたテキストは通常のブラウザでは見えないので、この部分に過剰なキーワードを書いてSEO対策をしていた時代もありました。
現在ではこういった行為はスパム行為になってしまう可能性が高いので、あくまでも画像に書かれた内容だけを書いておく方がベターでしょう。

spam_alt

これでとりあえず、シンプルなヘッダ部分ができました。
グローバルメニュー（主要なページへのリンクメニュー）の設置など、バージョンアップは後ほど解説いたします。

完全無料でホームページを作るぞ！

  1. ホームページの作成・公開事前準備
  2. HTMLとCSSの基礎のキソ知識
  3. ホームページ無料テンプレートをダウンロード
  4. ヘッダ部分の作成
  5. メインコンテンツ部分の作成
  6. サイドメニュー部分の作成
  7. フッター部分の作成
  8. ホームページを公開しよう
]]> ホームページ無料テンプレートをダウンロード http://mac-homepage.livedoor.biz/archives/1367217.html $(function(){ $('#tabs').tabs({ selected:1 }); }); それでは実際にホームページの作成をはじめてみましょう！ ここではいくつかのレイアウトのパターンを用意しましたので、ご自分のイメージしているホームページのレイアウトに近いモノのダウンロードボタンを押して、... lblevery 2011-08-06T18:09:51+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); }); それでは実際にホームページの作成をはじめてみましょう！ ここではいくつかのレイアウトのパターンを用意しましたので、ご自分のイメージしているホームページのレイアウトに近いモノのダウンロードボタンを押して、テンプレートとなるHTMLやCSSなどの素材一式をダウンロードしてください。

ホームページの無料テンプレート

ダウンロードボタンを押すと、zip圧縮されたフォルダがダウンロードできます。
圧縮フォルダの中には、テンプレートのHTMLファイル（template_xxx.html）とCSSファイル、サンプルページのHTMLファイルと、画像のフォルダが入っています。

【2カラム右メニュー】
サンプルプレビュー
2カラム右メニュー
download
【2カラム左メニュー】
サンプルプレビュー
2カラム左メニュー
download

テンプレートのセクションについて

またどのパターンも共通して4つのセクションに分ける事ができます。
まずはそれぞれのセクションに書かれる内容や、役割などを確認していきましょう。
（下の画像は、2カラム右メニューバージョンで解説しています。）

template_section
  • ヘッダ
    <h1>タグやホームページのタイトルを書くセクションです。
  • メイン
    コンテンツ部分やパン屑リストなどのメニューなどを書くセクションです。
    また、サイドメニューもメインに内包されます。
  • サイドメニュー
    他のページへのメニューや、広告バナーなどを書くセクションです。
    その他にも様々な用途で使われます。
  • フッタ 一般的にはホームページのコピーライト表記などを書くセクションです。
    サイドメニューよりも細かいメニューを書いたりする事もあります。

    • これからそれぞれのセクションにコンテンツを追加して、ホームページを作成する手順を解説していきます。

    完全無料でホームページを作るぞ！

    1. ホームページの作成・公開事前準備
    2. HTMLとCSSの基礎のキソ知識
    3. ホームページ無料テンプレートをダウンロード
    4. ヘッダ部分の作成
    5. メインコンテンツ部分の作成
    6. サイドメニュー部分の作成
    7. フッター部分の作成
    8. ホームページを公開しよう
    ]]> 検索順位チェックツール | 検索エンジンの順位を確認！ http://mac-homepage.livedoor.biz/archives/678249.html $(function(){ $('#tabs').tabs({ selected:5 }); }); ホームページやブログは公開しただけでは誰の目にも触れません。せっかく書いた記事や役に立つ情報なども、誰も見てくれないのでは意味がありませんよね。 ではどうすれば良いかと言うと、お分かりの通りGoo... lblevery 2011-07-30T11:11:03+09:00 便利ツール
    ホームページやブログは公開しただけでは誰の目にも触れません。せっかく書いた記事や役に立つ情報なども、誰も見てくれないのでは意味がありませんよね。
    ではどうすれば良いかと言うと、お分かりの通りGoogleなどの検索エンジンに登録されて、特定のキーワードで上位に表示されれば良いのです。
    いわゆるSEO対策というものです。

    ではSEO対策を行ってからその効果を測定するにはどうすれば良いでしょうか。
    一番シンプルな方法は、各検索エンジンで狙ったキーワードで検索すれば良いのです。あとは自分のホームページ／ブログがどこに表示されるか確認します。
    しかし、この方法では各検索エンジンで同じ事もしなくてはいけないですし、検索結果の画面は順位表示されている訳ではありませんので、いちいち順位を数えなくては いけません。

    そこで登場するのが、ここでご紹介する「検索順位チェックツール」です。
    これらのツールを使えば、各検索エンジンでの順位を簡単に確認する事が出来ます。
    ohotuku | 検索エンジン順位チェックツール
    順位チェック 300 | ちょこっと便利な無料SEOツール集 ohotuku.jp
    使い方は簡単でURLを入力して順位を検索したいキーワードを入力するだけです。 順位も300位までの順位を表示してくれますので、結構便利です。 ただ、Macで使う場合はレイアウトが若干崩れる場合がありますので、ブラウザで文字サイズを多少小さくして使う必要があります。
    DW230 | 検索エンジン順位チェックツール
    DW230
    DW230にアクセスして右側にある検索ツールのリンクをクリックします。.comドメインの場合は「G/Y/M 順位検索ツール com」、.jpドメインの場合は「G/Y/M 順位検索ツール jp」を選びます。
    開いたページで、上位表示を狙っているキーワードと、URLの一部を入力して検索します。
    すると、GoogleやYahoo!といった主要な検索エンジンの検索結果を簡易的に表示してくれます。検索結果の最初の画面は200位までの表示ですが、ページ下部に1000位まで 表示するリンクがあります。
    ランキングチェッカー | 検索エンジン順位チェックツール
    ランキングチェッカー
    トップページでURLと、上位表示を狙っているキーワードを入力して検索ボタンを押します。それだけで、Google、Yahoo!、MSN（現在はBing）での指定したキーワードの検索順位を表示してくれます。
    かなりシンプルな操作で順位検索が出来ますが、若干順位表示のスピードが遅いように思います。
    ]]>     HTMLとCSSの基礎のキソ知識 - 完全無料でホームページを作る！ http://mac-homepage.livedoor.biz/archives/1361750.html $(function(){ $('#tabs').tabs({ selected:1 }); }); ソフトの準備も整ったところで、さっそくホームページの作成！といきたい所ですが、その前にまずHTMLとCSSについて簡単にご説明しておきます。 基本的な事ですので、しっかりと理解をして進んでいただかないと、これか... lblevery 2011-07-24T11:16:55+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

    ソフトの準備も整ったところで、さっそくホームページの作成！といきたい所ですが、その前にまずHTMLとCSSについて簡単にご説明しておきます。
    基本的な事ですので、しっかりと理解をして進んでいただかないと、これから先ご説明する事も理解できない可能性が高いです。

    HTMLとCSS

    名前だけは聞いた事があると思いますが、それぞれがどういったモノでどんな役割を持っているかご存知でしょうか。
    簡単に言えばHTMLは文書ですので、タイトルや見出し／本文などを記述するファイルです。
    HTMLにもデザインをするための属性などが用意されていますが、現在はデザイン部分はCSSで行うのが一般的です。

    つまり、HTMLは「文書ファイルそのもの」で、CSS（カスケーティングスタイルシート）は「HTMLのデザインを担当しているファイル」だと言う事ができます。 html_css_1

    HTMLファイルの拡張子は「.html」か「.htm」、CSSファイルの拡張子は「.css」です。

    CSSはどうやってデザインを担当しているのか？

    大雑把にHTMLファイルとCSSファイルの関係は理解していただけたかと思います。
    ではHTMLファイルの中身と、CSSファイルの中身をちょっとだけ見てみましょう。
    HTMLがどういうモノでCSSがどうやってデザインを担当しているのかが理解できればOKです。

    ■HTMLファイルの中身について

    まずHTMLファイルですが、HTMLはタグというモノで構成されています。
    例えば改行をしたい時は<br />タグ、文章は<p>タグを使います。
    このタグは基本的に、開始のタグと終了のタグがあり、例えば「ここから」「ここまで」が文章ですよという具合に、最初と最後に使います。
    先ほどの<p>タグであれば、開始タグは「<p>」終了タグは「</p>」です。
    ただ改行タグのように、開始タグも終了タグも関係なく、1回書けばOKというタグもあります。

    うわぁーとか思っちゃった人。安心してください。ここでタグを全部覚えてくださいなんて言いません。
    ここではHTMLファイルはタグで構成されていて、タグには開始タグと終了タグがある、タグの種類はたくさんある、という事が理解できれば大丈夫です。

    Googleで「HTMLタグ」とかで検索すると、タグの辞書のようなサイトがたくさんあります。基本的にタグの細かい説明はそういったサイトに任せたいと思いますので、自分で見やすい／分かりやすいサイトを探してみてください。

    ■CSSファイルの中身について

    次はCSSの構成ですが、CSSはデザインを指定する箇所を表す「セレクタ」と実際にデザインを指定している箇所で構成されています。
    例えば先ほどHTMLのところでご紹介した<p>タグの文字の太さを太字にしたい時は、以下のように書きます。

    p{ font-weight : bold; }
    ここではpがセレクタで、font-weight:bold;が実際にデザインを指定している箇所です。
    デザインを指定している箇所では、二つの設定が「：」でつながっています。
    「：」の左側にある「font-weight」がプロパティ、右側の「bold」が属性と呼ばれています。
    また最後に付いている「；」は決まり文句なので、必ず最後に付けておく必要があります。

    ここでちょっとギモンです。HTMLファイルの中にたくさん<p>タグが使われていて、その一部だけ文字を太くしたい場合はどうすればいいのでしょうか？
    実は先ほどのHTMLタグをセレクタに使う方法だと、HTMLの中にある全部のタグが対象になってしまいます。

    そこで登場するのが、「クラス」です。
    クラスという別名を<p>タグに付けておく事で、太字にしたい<p>タグの場所を特定する事ができます。
    書き方はこんな感じです。

    .p_futoji{ font-weight : bold }
    この設定は「p_futoji」の部分だけを太字にしますよって設定です。
    最初に付いている「.」は私のタイプミスではなく、これも決まり文句なので必ず書かなくてはいけません。

    プロパティには文字の太さだけでなく、文字の色や線を表示させたり、余白を設定したりと様々なモノが用意されています。
    ただ、いま解説した細かい事はすぐに覚えなくても大丈夫です。
    ここで理解して欲しい事は、CSSがHTMLファイルのタグや、クラスなどを使って場所を指定して、デザインを設定しているという事です。

    まとめ

    ・HTMLファイルはHTMLタグで構成されている
    ・HTMLタグは開始タグと終了タグがある（無いものもある）
    ・HTMLタグの種類はたくさんある
    ・CSSはHTMLタグやクラスを使ってデザインをする場所を指定している

    完全無料でホームページを作るぞ！

    1. ホームページの作成・公開事前準備
    2. HTMLとCSSの基礎のキソ知識
    3. ホームページ無料テンプレートをダウンロード
    4. ヘッダ部分の作成
    5. メインコンテンツ部分の作成
    6. サイドメニュー部分の作成
    7. フッター部分の作成
    8. ホームページを公開しよう
    ]]>     Macを使って無料でホームページを作成しよう http://mac-homepage.livedoor.biz/archives/718540.html $(function(){ $('#tabs').tabs({ selected:1 }); }); Macを使ってホームページを作成するには、ホームページを作成するMac用のソフト、ホームページを公開する為のサーバー、サーバーにアップロードする為のソフト（FTPソフト）など、いろいろと必要になります。 M... lblevery 2011-07-24T09:06:39+09:00 Macで無料ホームページ作成 Macを使ってホームページを作成するには、ホームページを作成するMac用のソフト、ホームページを公開する為のサーバー、サーバーにアップロードする為のソフト（FTPソフト）など、いろいろと必要になります。
    Mac用ホームページ作成ソフトには、FTPの機能が搭載されているものが多いのですが、安くても数千円、高いソフトだと数万円もします。レンタルサーバーも併せて考えると、1万円前後の出費が必要になる計算になります。
    Macを使ってまったくお金をかけずに、ホームページを作成する事は出来ないのでしょうか？
    実際にはそんな事はありません。

    そこで、ここではHTMLなどの知識を解説しつつ、完全無料でホームページを作る方法と、できるだけHTMLの知識を使わずにMacを使った無料でホームページを作成する方法について考えてみたいと思います。

    完全無料でホームページを作る！

    HTMLやスタイルシート（CSS）の事をちょっとだけ知っていれば、完全に無料でホームページを作成する事ができます。
    HTMLやCSS作成に使うソフト（テキストエディタ）も無料で手に入りますし、サーバーにアップロードしてホームページを公開するソフトも無料で手に入ります。
    もちろんホームページを公開するサーバーも無料で借りる事ができますので、必要なのはちょっとだけHTMLやCSSの勉強をする時間と、ホームページ公開するコンテンツ（情報）だけです。

    ページの作成に慣れてきたら、ちょっとだけお金を使って独自ドメインの使えるサーバーに引っ越したり、ホームページでアフィリエイトをしたり、見に来てくれた読者とツイッターやフェイスブックで交流したりと、その可能性は無限に近いほど広がります。

    ではさっそく無料でホームページを作成して公開する準備を始めましょう！

    ■完全無料でホームページを作るぞ！【目次】

    1. ホームページの作成・公開事前準備
      ・無料のテキストエディタ、FTPソフトをインストール！
    2. HTMLとCSSの基礎のキソ知識
      ・HTMLとCSSの関係
      ・CSSの仕組み
    3. ホームページ無料テンプレートをダウンロード
    4. ヘッダ部分の作成
      ・<h1>の設置
      ・imgタグによるロゴ画像の設置（altテキストのスパム行為に注意）
    5. メインコンテンツ部分の作成
      ・ビルボード画像の設置
      ・中見出しタグの設置
      ・見出しタグの設置順序について
    6. サイドメニュー部分の作成
      ・サイドグローバルメニューの設置
      ・他のページへのリンクを設置（リンクの基礎）
    7. フッター部分の作成
      ・自分でHTMLとCSSを修正してみよう！
    8. ホームページを公開しよう
      ・完全無料のFC2ホームページを使って公開しよう！

    ■無料でホームページをバージョンアップ！

    1. ヘッダセクションにグローバルメニューを設置してみよう
    2. ビルボード画像をAjaxを使って動きのあるメニューにしてみよう

    「iWeb」を使ってホームページを作成

    Macを買った時には、必ずiWebというホームページ作成ソフトがバンドルされています。このiWebを使えば、ホームページ作成ソフトの出費は無料で済みます。テキストや写真などを自由に配置できますので使い勝手もなかなか良く、HTMLなどの知識が無くても、とりあえずホームページを作成できます。

    またiWeb'09（iLife'09）以降であれば、ホームページをサーバーに公開する為のFTP機能も搭載されています。
    （iWeb'08、iWeb'06はMobileMeへの公開機能のみです。MobileMeは年間9,800円の有料サービスです。）
    使い方はiWebのヘルプを見るか、iWebでお気軽ホームページで見る事ができます。

    iWebでホームページを作成したら、これまた無料のレンタルサーバーに公開します。
    さすがに独自ドメインを使いたいなどの要望は、無料のレンタルサーバーでは出来ませんが、無料のレンタルサーバーでもハードディスク容量も十分にありますし、スピードも速いです。

    無料で使えるレンタルサーバーを一覧にしてありますので、参考にしてみてください。
    ・無料レンタルサーバー一覧

    無料のブログを使ってホームページを作成する

    livedoorブログやSeesaaブログ、FC2ブログなどの無料ブログサービスを使ってホームページを公開する方法もあります。
    無料のブログはウェブブラウザさえあれば更新する事ができますので、Mac標準のSafariがあれば十分です。
    これらの無料ブログは、ブログを構築する為のサービスですが、ブログっぽくない「ホームページ」を作成する事も可能です。実は当ホームページもlivedoorブログを使って作成・公開しています。

    この方法は、ホームページ作成ソフトやサーバーなどを、一括で用意する事ができて完全に無料です。
    また、ブラウザで作成が出来るので、外出先のWindowsパソコンなどでもページを更新する事も出来ますし、基本的にブログサービスを使っていますので、ブログランキングなどに参加する事も可能です。

    こう書くとメリットばかりのように思えますが、デメリットが無い訳ではありません。
    まずブログのカスタマイズにHTMLの知識が、若干必要な点が挙げられます。各ブログサービスの管理画面の使い方などをマスターする必要もあります。
    しかしいずれも大きなデメリットではありませんが・・・。

    無料のホームページ作成サービスを使う

    無料のブログサービスだけでなく、無料のホームページ作成サービスというものもあります。
    ホームページ作成するソフトを使ってHTMLを作成しサーバーにアップロードする、という従来の方法ではなく、ページの作成や修正をサーバー上でやってしまおうという発想です。
    無料ブログサービスとの違いは、ページのレイアウトなどを簡単にカスタマイズ出来るように設計されている点です。
    代表格は「Googleサイト」と「Jimdo（ジンドゥー）」ですが、個人的におススメなのはJimdoです。
    一番のおススメポイントは、レイアウト、デザインのカスタマイズ性が高い事と、なによりそのカスタマイズが数値を入力してという従来の方法ではなく、スライダーを動かして位置を修正するなど、視覚的に分かりやすい点です。

    こちらも無料ブログサービスと同様、ウェブブラウザを使って作成しますので、MacだけでなくWindowsでも更新が可能です。

    ]]>     ホームページの作成・公開事前準備 http://mac-homepage.livedoor.biz/archives/1361707.html $(function(){ $('#tabs').tabs({ selected:1 }); }); まずはホームページを作るためのソフトの準備をしましょう。 無料のテキストエディタとFTPソフトです。 テキストエディタはHTMLソースを書いて、実際にホームページを作るために必要なソフトです。 FTPソフトは、作成... lblevery 2011-07-24T08:49:31+09:00 Macで無料ホームページ作成 $(function(){ $('#tabs').tabs({ selected:1 }); });

    まずはホームページを作るためのソフトの準備をしましょう。
    無料のテキストエディタとFTPソフトです。
    テキストエディタはHTMLソースを書いて、実際にホームページを作るために必要なソフトです。
    FTPソフトは、作成したページを公開するためにサーバーにアップロードするためのソフトです。
    ここではテキストエディタは私も愛用している「mi」、FTPソフトは「サイバーダック」を使用します。
    どちらももちろん無料です。

    miのダウンロードとインストール

    mi_pagemiのダウンロードページから、最新のmiのディスクイメージをダウンロードします。
    ダウンロードしたディスクイメージをダブルクリックしてマウントしたら、miのアイコンをアプリケーションフォルダにコピーします。
    これでインストールは完了です。

    ・mi - テキストエディタ
    ・最新版ダウンロード

    サイバーダックのダウンロードとインストール

    cyberduck_page サイバーダックのページの右側にあるダウンロードコンテンツから、最新版のZIPファイルをダウンロードします。
    ダウンロードしたファイルを解凍するとアヒルのアイコンが現れますので、そのアイコンをアプリケーションフォルダに移動します。
    これでインストールは完了です。miと一緒にDockに表示しておくと起動も便利です。

    ・Cyberduckについて
    ・旧バージョンのサイバーダックのダウンロードページ

    さて、これでホームページを作成してサーバーに公開する準備はできましたが、最後にもうひと手間。 ページを作って確認するのに、いちいちサーバーにアップロードして確認するのは面倒ですので、Macの「Webサーバ」機能を使ってローカル環境でホームページの動作が確認できるように準備します。

    詳しくはMacOSXのウェブサーバ機能（Apache）を使う方法をご覧ください。

    完全無料でホームページを作るぞ！

    1. ホームページの作成・公開事前準備
    2. HTMLとCSSの基礎のキソ知識
    3. ホームページ無料テンプレートをダウンロード
    4. ヘッダ部分の作成
    5. メインコンテンツ部分の作成
    6. サイドメニュー部分の作成
    7. フッター部分の作成
    8. ホームページを公開しよう
    ]]>     Yahoo!Site Explorerでホームページの被リンクを調べよう http://mac-homepage.livedoor.biz/archives/1361635.html $(function(){ $('#tabs').tabs({ selected:5 }); }); 自分の運営しているホームページがどのくらいのリンクをもらっているのか、どんなページからリンクしてもらっているのか？という事は大いに気になる部分だと思います。 そんな被リンク（他の人のホームページなどから... lblevery 2011-07-24T01:10:55+09:00 便利ツール $(function(){ $('#tabs').tabs({ selected:5 }); }); 自分の運営しているホームページがどのくらいのリンクをもらっているのか、どんなページからリンクしてもらっているのか？という事は大いに気になる部分だと思います。
    そんな被リンク（他の人のホームページなどからもらっているリンク）はどのように調べていますか？

    Googleで「link:ホームページのURL」でも調べる事はできますが、全部のデータを見せてくれる訳ではなく、Googleがそのホームページの被リンクとして認識しているものの一部を、ランダムに表示しているだけです。

    そこでアメリカYahoo!が提供している「Yahoo!SiteExplorer」をご紹介します。
    このツールは無料で使えて、1,000サイトまで被リンクとして認識されているサイトのTSVデータまでダウンロードできる優れものです。
    ただし、このツールも全部のデータが見られる訳ではなく、アメリカのYahoo!が認識しているサイトなので、もしかしたら日本のGoogleが認識しているサイトとは異なるかもしれません。

    しかし、ホームページの被リンクを調べるにあたって非常に便利なツールですので、ぜひ活用してください。

    Yahoo! Site Explorerの基本的な使い方

    使い方は非常に簡単ですが、英語のツールなのでデータの見方がちょっと分かりにくいかもしれませんね。
    まず被リンクを調べたいホームページのURLを検索ボックスに入力して「Explore URL」をクリックします。

    yse_1

    すると、ずらずらっとアメリカYahoo!が認識している指定したURL内のページ一覧が表示されます。 「Pages」ボタンはサイト内のページ一覧を表示するボタン、「InLinks」ボタンは指定したURLの被リンクを表示するボタンです。
    ボタン内に書かれている数字は、それぞれのページ数を表しています。
    ここでは「http://mac-homepage.livedoor.biz/」のページ数が140ページあり、被リンクは1,517ページあるという事です。
    yse_2

    被リンクを調べよう

    では「InLink」ボタンを押して被リンクを調べてみましょう。
    まずInLinkを押したばかりの状態は、自分のドメインも含んだ被リンクが一覧に表示されます。
    つまり自分のホームページの内部にあるリンク（内部リンク）も、この一覧には含まれているという事になりますので、純粋に他のサイト（ドメイン）からの被リンク数や被リンクサイトを調べるには、もうひと手間必要です。

    右側に「Show Inlinks:」というセレクトメニューがありますので、ここで「Except from this domain」を選んでください。
    つまり「指定したURLのドメインは除く」という意味です。

    yse_3


    通常はInLinkボタンに表示される被リンク数は減るはずです。（内部リンクを除く訳ですから当然ですよね）
    当サイトの場合は、自分のドメインを除いた時の被リンク数は1,397ページでした。

    またセレクトメニューの下あたりにある「TSV」というリンクをクリックすると、表示しているデータを最大1,000件までTSV（タブ区切り）ファイルとしてダウンロードする事ができます。

    ただし、ダウンロードしたデータはUTF-8のデータですので、そのままエクセルなどで開くと文字化けします。まずテキストエディタ（miエディタなど）で開きエンコードをShift-JISに変更して保存し直しましょう。
    ]]>     リンク http://mac-homepage.livedoor.biz/archives/176032.html $(function(){ $('#tabs').tabs({ selected:0 }); }); お気に入り ホームページ作成ソフトの解説ホームページ RapidWeaverで簡単HP作成 [ラピッドウィーバー] iWebでお気軽ホームページ [iWeb] BiNDwebマニュアル（非公式） [BiND for WebLiFE] Mr.H flaave ... lblevery 2011-06-19T19:30:21+09:00 その他 $(function(){ $('#tabs').tabs({ selected:0 }); });

    お気に入り

    Webクリエイターボックス

    ホームページ作成ソフトの解説ホームページ

    RapidWeaverで簡単HP作成 [ラピッドウィーバー]

    iWebでお気軽ホームページ [iWeb]

    BiNDwebマニュアル（非公式） [BiND for WebLiFE]

    Mr.H flaave テクニック [flaave]

    ホームページ作成のサポート

    無料ホームページ作成

    ホームページ作成無料リンク集

    アイコン無料！0円のweb素材屋さん

    メーカーホームページ

    ラピッドウィーバー

    iWeb

    Freeway4

    BiND for WebLiFE 2

    Dreamweaver CS4

    flassve

    かんたんWebアニメーション

    相互リンクも大歓迎です。ご希望の方はお問い合わせフォームからご連絡をお願いします。 ]]>     ロリポップ! - 月額263円で使える初心者も安心のレンタルサーバ http://mac-homepage.livedoor.biz/archives/569760.html $(function(){ $('#tabs').tabs({ selected:3 }); }); ロリポップならMovableType設置マニュアルも充実。 あなたも月々２６３円でブログデビューしてみよう！！ ロリポップ！レンタルサーバーのニュース PHP5.3が利用可能に！（2011/3/6） ロリポップ！のサ... lblevery 2011-03-06T22:52:27+09:00 レンタルサーバー ロリポップならMovableType設置マニュアルも充実。
    あなたも月々２６３円でブログデビューしてみよう！！

    ロリポップ！レンタルサーバーのニュース

    PHP5.3が利用可能に！（2011/3/6）
    ロリポップ！のサーバーでは、「 PHP5.3 」をご利用いただけるようになりました。

    現在の「 PHP5.2 」から「 PHP5.3 」に切り替えをご希望の方は ユーザー専用ページの【 PHP設定 】の項目でバージョンの変更を 行うことができます。

    ■PHP設定のマニュアル
    　http://lolipop.jp/manual/user/php-setting/

    ※切り替えを行わない場合は、従来の「 PHP5.2 」を引き続きご利用いただけます。

    ディスク容量増加、マルチドメイン対応（2011/1/25）
    コロリポプランが、1GB⇒2GBへ、ロリポプランが8GB⇒13GBへ大幅ディスク容量アップ。さらに1つのアカウントで複数の独自ドメインを利用 できるマルチドメインにも対応など、大幅にパワーアップしました。

    共有SSL機能の追加（2010/7/17）
    共有SSL機能を使えば、お問合わせフォームなど、インターネット上での個人情報等のやり取りを行う場合でも、第三者に情報をのぞかれたり盗まれたりしないように通信を暗号化することができます。

    PukiWiki簡単インストール機能の追加（2010/5/21）
    Wikipediaのような情報共有サイトを、簡単かつ素早く作成することができる、「PukiWiki」の簡単インストール機能が追加。
    知識がなくてもボタン１つでインストール可能。

    ロリポップ！レンタルサーバーのサービス概要

    ロリポップ！ レンタルサーバーは、月額263円から利用でき8GBものディスク容量が使える、激安のレンタルサーバーです。

    ロリポップ！レンタルサーバーは、PHPが利用できたり、アクセス制限がかけられたりと機能面も充実しています。
    サブドメインプランもありますが、独自ドメインの持ち込みに対応した、独自ドメインプランも用意されています。
    がしかし、何よりも特徴的なのが、ショッピングカート機能の「カラーミーショップ！ミニ」（ロリポップ契約者なら無料で利用可能）を始めとして、レンタルCGIのサービスや、様々なコミュニティーサイト、ソーシャルネットワークなどが用意されている点です。
    これはロリポップ！以外の、他のレンタルサーバーには無い大きな特徴です。

    特にショッピングカート機能は、SSLに対応しクレジットカード決済にも対応しているので、かなり手軽にネットショップが始められそうです。

    ロリポップ！レンタルサーバーの機能概要

    ロリポップ！レンタルサーバーの機能概要

    ロリポップ！レンタルサーバーの機能詳細

    2011/1/25 UPDATE!
    オススメ
    おすすめのプラン
    コロリポプラン ロリポプラン チカッパプラン
    コスト 初期コスト 1,575円 1,575円 1,575円
    月額コスト 105円～ 263円～ 525円～
    基本
    機能    		 容量 2GB 13GB 30GB
    SSHログイン × × ○
    独自ドメイン
    使用    		 ○（最大20） ○（最大50） ○（最大100）
    メール
    機能    		 アドレス数 ドメインごとに最大10 無制限 無制限
    迷惑（スパム）メール
    フィルタ    		 ○ ○ ○
    ウイルス
    チェック    		 ○ ○ ○
    ウェブメール
    機能    		 ○ ○ ○
    メーリング
    リスト    		 1件 5件 10件
    ウェブ
    機能    		 アクセス解析 ○ ○ ○
    PHP ○ ○ ○
    Perl ○ ○ ○
    ブログ
    機能    		 MovableType ○ ○ ○
    XOOPS - ○ ○
    WordPress - ○ ○
    PukiWiki ○ ○ ○

    ロリポップ！で一番安くサーバーを借りると、いくらかかる？

    最も安いコロリポプランであれば、初年度は初期費用を含め2,835円（年間）、翌年以降は年間1,260円でレンタルできます。

    初期費用：1,575円
    月額費用：105円

    ただ、機能的に見てもロリポプラン（初年度：4,731円、2年目以降：3,156円）が一番オススメのプランです。

    ロリポップ！のサポート体制

    よくある質問のFAQページや、ユーザー同士の助け合い掲示板、お問い合わせフォームが用意されていますが、ロリポップ！では、チャット形式のライブヘルプが用意されています。
    ライブヘルプは平日なら23:00までやっているので、夜遅く自宅に帰ってきてからでも、いろいろと質問できます。
    • サポート専用ページあり（オンラインマニュアル）
    • メールによる問い合わせ対応
    • チャット形式の問い合わせ対応（ライブヘルプ）

    ロリポップ！への申し込み・最新情報

    ロリポップ！レンタルサーバーの申し込みや最新情報は、ロリポップ！ のホームページでご確認ください。
    ]]>     iWeb レビュー http://mac-homepage.livedoor.biz/archives/444953.html $(function(){ $('#tabs').tabs({ selected:2 }); }); iWebは、アップルのMac専用ホームページ作成ソフトで、Macを購入すると付属しているiLifeの一部です。 （最新版のiLife'11でもiLife'09と同じバージョンが同梱されています） 単体で購入する事はできませんの... lblevery 2011-01-14T00:25:59+09:00 ホームページ作成ソフト ilife11iWebは、アップルのMac専用ホームページ作成ソフトで、Macを購入すると付属しているiLifeの一部です。
    （最新版のiLife'11でもiLife'09と同じバージョンが同梱されています）
    単体で購入する事はできませんので、iLifeのパッケージを購入します。
    iLifeには、iWebだけでなく写真管理ソフトのiPhotoや、映像編集のiMovieが同梱されています。

    似たようなインターフェイスのラピッドウィーバーというソフトがありますが、ラピッドウィーバーについては「ラピッドウィーバー レビュー」をご覧ください。

    iWeb'09の新機能

    iWeb'09からは、MobileMe以外のサーバーにも、作成したホームページをアップロードする機能が追加されました。
    この機能を使えば、MobileMeにアップロードするように、ワンクリックでホームページを公開する事が出来ます。
    もちろん従来通り、ローカルPCにHTMLを出力した後にCyberduckなどのFTPソフトを使って、サーバにアップロードする事もできます。
    MobileMe以外のサーバーに公開する場合の手順は下記のページ（外部リンク：iWebでお気軽ホームページ）をご覧ください。

    ・MobileMe以外のサーバーに公開するには
    ・iWebで作ったホームページをMobileMe以外のサーバで公開するコツ　- サーバの準備編（1）-
    ・iWebで作ったホームページをMobileMe以外のサーバで公開するコツ（2）- アップロード編 -


    その他の機能では、目立った機能追加は無く「マイナーアップデート」のように感じるかもしれません。
    しかし、それだけインターフェイスとして完成されているという風にみる事も出来ますし、細かい点はいろいろと改善されていますので、Macのホームページ作成ソフトとして、定番ソフトになる実力は備わっていると思います。

    iWebとは？

    基本的にHTMLやスタイルシートなどの専門的な知識は必要なく、ワープロソフトのように、画像やテキストを好きな位置に配置していくだけで、ホームページが作成できるソフトです。
    Macのホームページ作成ソフトの中でも、非常に簡単でレイアウトの自由度が高いソフトだと思います。

    しかし、レイアウトの自由度は高く初心者の人には良いソフトなのですが、メタタグのコントロールなど、仕様以外の部分の自由度は低いソフトですが、前バージョンから搭載されているHTMLスニペットを使いこなせば、結構いろいろな事が出来ます。

    例えばフラッシュなどもHTMLスニペットを使えば設置する事ができます。
    フラッシュの設置については、下記のページ（外部リンク：iWebでお気軽ホームページ）をご覧ください。

    ・FlashをiWebのページで表示させるには
    ・Flashをページに入れるには 2 - 手順の詳細解説


    Mac OSX専用のソフトですので、Mac OS9では使用できません。

    使い方などの解説サイトリンク

    iWebでお気軽ホームページ

    私の公開しているページで手前味噌ですが、iWebの使い方やTipsまでまとめているホームページです。このホームページ自体もiWebで作成されていますので、とても参考になると思います。ブログではiWeb'09への移行顛末記も公開しています。

    公式ホームページ

    アップル -　iLife

    ]]>