ホームページのページの追加・更新方法と運営 いよいよ最終回になりましたホームページ作成講座。 最後は「更新の仕方」です。 最初の方でご説明しましたとおり、ブログなどのPHPを使用しないホームページの更新方法は、かなりアナログです。 実際の作業はHTMLを手入力で編 … ホームページのページの追加・更新方法と運営 もっと読む »
アップロードしてホームページを公開する 以前お話しました通り、ホームページを公開するには、「レンタルサーバー」の契約が必要になります。 今回は同人サイトでよく使われている「FC2」でのアップロード方法をご説明します。 レンタルサーバーへのアップロードは2種類あ … アップロードしてホームページを公開する もっと読む »
PC・スマホ対応のレスポンシブデザインにする 前回スマートフォンサイトのCSSを作成しましたので、今度は画面の幅でCSSが切り替わる設定を行います。 ちなみに同じHTMLで、スマホ・PCの両方を見れるコーディング方法をレスポンシブデザインと呼びます。 一昔前は、PC … PC・スマホ対応のレスポンシブデザインにする もっと読む »
スマートフォンサイトをコーディングする(CSSで横幅の調整) さて、いよいよコーディングも大詰め。スマホサイトをコーディングしていきます。HTMLは基本的にいじらず、CSSだけでレイアウトを変更していきます。 まずは、前回までに作成したstyle.cssを複製して、バックアップを取 … スマートフォンサイトをコーディングする(CSSで横幅の調整) もっと読む »
お問い合わせページをコーディングする はい。今回はラストのページになります『お問い合わせ』ページをコーディングします。 いつも通り雛形を複製して「contact.html」に名前を変更し、contactの中を下記のように記述します。 HTML(contact … お問い合わせページをコーディングする もっと読む »
作者紹介ページをコーディングする 今回は「サイドメニュー」のある『作者紹介』ページのコーディングをします。唯一削除する部分がないページになります。 「member.html」「member_01.html」「member_02.html(サンプルにはあり … 作者紹介ページをコーディングする もっと読む »
イベントページをシンプルにコーディングする さて、今回は「イベント」ページをコーディングします。ここは切り出す画像もないのでさくっと作成します。 これまでのページと同様に、雛形を複製して「event.html」に変更したら、contents内をdivで囲んでCSS … イベントページをシンプルにコーディングする もっと読む »
イラスト(ギャラリー)ページをコーディングする さて、それではいよいよメインになるページ「イラスト(ギャラリー)」ページを作っていきます。まずは今までどおり必要な画像だけ切り出します。(取りあえず今回は1枚分) そして、「イラスト一覧」ページをコーディングするため、雛 … イラスト(ギャラリー)ページをコーディングする もっと読む »
トップページをコーディングする(twitterで新着情報) 今回はトップページをコーディングしていきます。作業方法は、雛形と同じで、トップページに必要な画像だけまた切り抜きます。 画像の用意ができたら、先ほど作成した雛形に組み込んでいきます。雛形は各ページで必要ですので、複製して … トップページをコーディングする(twitterで新着情報) もっと読む »
ホームページをコーディングする(CSS編) 前回つくったHTMLファイルに「CSSファイル」を読み込ませることで、レイアウトやデザインを加えることができます。ちなみにCSSはカスケードスタイルシートと呼び、htmlを装飾するファイルになります。 実は、前々回説明な … ホームページをコーディングする(CSS編) もっと読む »
ホームページをコーディングする(HTML編) さて、ついにこれからコーディング作業にはいります。コーディングには『table組み』と『CSS組み』の2種類あります。違いを大雑把にいうとtableは『表』、CSSは『ブロック』になります。 現在、table組みは、ほぼ … ホームページをコーディングする(HTML編) もっと読む »
ホームページをコーディングする(準備編) こんにちは。武誰です。今回は下のデモサイトを使ってお話していきます。 >>デモサイトを見る >>ダウンロード デモサイトには、一部「フリー素材」を使用しているため、そちらはダウンロードデータには含まれておりません。(二次 … ホームページをコーディングする(準備編) もっと読む »
下層ページをデザインする!統一フォーマットで! これからコンテンツ部分を抜き取ったデータをコピーして、他のページもデザインします。因みにトップページ以外のページを「下層ページ」と呼びます。 下層ページを全部違うデザインにするサイトもありますが、これはNGです。元のペー … 下層ページをデザインする!統一フォーマットで! もっと読む »
トップページをデザインする。「メイン画像」が鍵! こんにちは。武誰です。それでは、ホームページの看板である「トップページ」をデザインします。まず、閲覧者の環境を考えてつくります。 ・・・断言します。全ての人に、理想のページを見せることはできません。 パソコンのバージョン … トップページをデザインする。「メイン画像」が鍵! もっと読む »
ホームページをデザインする さて今回から私の本業の分野「デザイン」にはいります。 10年間Webデザイナーとして働いてきましたが、ホームページをデザインするということは、ただきれいなサイトをつくることが「デザイン」じゃないんだなーと考えるようになり … ホームページをデザインする もっと読む »
デザイン準備とページ内の各名称 いよいよホームページを「作って」いきます。先にHTMLで枠組みをつくってから、後で写真追加したり、色とか装飾する人がいますが、これは間違った作り方です。 作ってる最中に写真(イラスト)と背景色が合わなかったり、文字が枠内 … デザイン準備とページ内の各名称 もっと読む »
HTMLファイルとそれを助ける仲間たち さて、前章までで「レンタルサーバー」と「ドメイン」の、準備ができましたので、今度はいよいよ店舗や商品にあたる、「HTMLファイル」の説明します。 ホームページは「HTML」という基盤となるファイルに加え、様々なファイルで … HTMLファイルとそれを助ける仲間たち もっと読む »
ドメインの種類と料金の違いと取得条件と。 はい。今回のテーマは「ドメイン」についてです。前回までに「無料レンタルサーバーを借りたらドメインはいらない」と説明したとおり、全て無料でホームページ作成を考えている方には、必要にないテーマです。 ですが、ホームページを運 … ドメインの種類と料金の違いと取得条件と。 もっと読む »
レンタルサーバーの比較(無料・有料) さて、前回無料レンタルサーバー(ブログ含む)の種類をお伝えしましたので、今回は『無料時の短所』『有料サービス』と、有料レンタルサーバーの種類を説明します。 私はWEBデザイナーという仕事柄、有料・無料問わずいろんな環境下 … レンタルサーバーの比較(無料・有料) もっと読む »
無料レンタルサーバーの利点と欠点 さて、前回「ブログにレンタルサーバーは必要ないのか?」 という疑問でおわりましたので、いきなり結論から入りましょう。 「無料ブログサービス」は、その運営会社の「サーバー」と「ドメイン」を使ってブログを作るので、レンタルサ … 無料レンタルサーバーの利点と欠点 もっと読む »
ホームページの種類(ブログとは違うのだよ!) こんちには。実は本業はWebデザイナーの武誰です。まず最初は「ホームページの種類」をご説明します。ホームページは大きく分けて2つあります。 【1】自動で更新されないホームページ 【2】自動で更新されるホームページ 勘違い … ホームページの種類(ブログとは違うのだよ!) もっと読む »
ホームページの仕組み(準備・必要なもの) はじめまして。「牛屋へ.com」管理人の武誰です。 当ホームページでは『牛屋の店長』というWeb漫画主体で更新していますが、実は本業は『Webデザイナー』というホームページを作る仕事をしています。 今は停止中なのですが「 … ホームページの仕組み(準備・必要なもの) もっと読む »