に投稿 コメントを残す

美容室のM様、ご依頼ありがとうございます!

埼玉県川越市の美容室M様より、ホームページ制作(スタンダードプラン)のご依頼を頂きました、ありがとうございます!
またFacebookページ(Facebook内の企業やブランド専用のページ)の作成依頼も併せてご依頼頂きました。
スタイリングのページを充実させつつスピーディに更新したいということと、とにかくSEOに強いホームページということで、毎月の更新も含めて関わらせて頂くことになり、ありがたい限りでございます!
お店様のスタイルを全面的に打ち出しつつ、よりユーザビリティの高いホームページにしたいと考えております。

0
に投稿 コメントを残す

税理士M先生、ご依頼ありがとうございます!

埼玉県鶴ヶ島市の税理士M先生のホームページリニューアル(ベーシックプラン)、ご依頼誠にありがとうございます!
とても気さくで豪放な先生でいらっしゃいますので、打ち合わせ時はいつも雑談(先生のお話)が97%、本題が3%という割合になってしまいますが、そんな世間話から様々なビジネスのヒントを頂いており、非常に勉強になります。
「基本的にはお任せ」ということで、先生に相談に来られる方にとってどこよりも価値のある情報を提供し、「この先生に税理を依頼したい」と思えるようなホームページを作れるようがんばりますので、どうぞ宜しくお願い致します!

0
に投稿 コメントを残す

フラワーデザイナーY様、ご依頼ありがとうございます!

埼玉県所沢市のフラワーデザイナーY様、ネットショップ(ベーシックプラン)のご依頼誠にありがとうございます!
ご自身でデザインされたフラワーアレンジメントやインテリア関係のハンドメイド作品を販売するためのサイトを、カラーミーショップを利用して制作させて頂く予定になっております。
また、様子を見て楽天市場にもご出店されたいとのことですので、まずは自社サイトでしっかりと売上を軌道に乗せることができるよう、私どももできる限りお力になりたいと思います。
主婦のY様は所沢市のご自宅でフラワー教室をされていますが、独身時代はお花関係のお仕事でかなりご活躍をされていたようで、ただの主婦とは思えないほどのビジネスセンスをお持ちです。
母の日(今年は5月8日)までに間に合わせたいとのことですので、SEO対策の効果が出るまでに時間がかかることも考慮し、急ピッチで制作させて頂きます!

0
に投稿 コメントを残す

整骨院Y様、ご依頼ありがとうございます!

東京都台東区の整骨院Y様、ホームページリニューアル(ベーシックプラン)のご依頼、誠にありがとうございます!
最近はホームページからのお客様がとても増えたということで、今回リニューアルに踏み切ったと伺いました。
今のホームページもプロに依頼しているためしっかりとした作りにはなっていますが、スマートフォン対応してないため、せっかくの充実したコンテンツも台無しです。
また、想定されるアクセス数もかなりの取りこぼしが考えられますので、しっかりとレスポンシブデザイン(スマホやPCなど、端末のディスプレイサイズによって自動的に表示が変わる仕組み)にてお作りさせて頂きます!

0
に投稿 コメントを残す

エステサロンのM様、ご依頼ありがとうございます!

埼玉県坂戸市のエステM様より、サイトリニューアルに伴うホームページ制作のご依頼を頂きました。
「仕事や人間関係のストレスを忘れ、心から癒やされる空間」というオーナーM様が掲げるコンセプトに沿ったページデザインで、さらに訪問ユーザー様にとってストレスにならないような使い勝手の良さを重視してお作り致します!
制作にあたりお店の写真などの素材をある程度頂くのですが、見ているだけで癒やされてしまいます。。。
とは言えそんなにのんびりしているわけにもいかず(汗)、お急ぎということですので、ご希望の納期にどうにか間に合うようがんばります!

0
に投稿 コメントを残す

英会話教室のH様、ご依頼ありがとうございました!

埼玉県所沢市の英会話教室を開校するH様より、ホームページ立ち上げのご依頼を頂きました。
この度は誠にありがとうございます!
なんとご兄弟で英語の先生をされています。
H様ご本人は以前アメリカに長期滞在されていたということもありとても流暢な英語を話され、なんとも羨ましい限りです!
サイトはもちろんレスポンシブデザイン(パソコンやスマートフォンなど、端末のディスプレイサイズによってレイアウトが変わる仕様)で制作、そしてYouTubeの動画撮影と編集、アップロードもご依頼頂き、今から公開がとても楽しみです。
これから一生懸命作業させて頂きますので宜しくお願い致します!

0
に投稿 コメントを残す

モデル・コンパニオン派遣のW様、ご依頼ありがとうございます!

埼玉県越谷市のモデル・コンパニオン派遣サービスを行なっているW様より、ホームページ制作(リニューアル)とコンサルティングのご依頼を頂きました。
この度は誠にありがとうございます!
コンバージョン率を高めるための様々な施策や、ターゲットを絞っての効果的なSEO対策を行ない、またFacebookやTwitterなどSNSアカウントを活用してウェブ上でのブランディングやプロモーションを抜かりなく行なっていきたいと考えております。
またロゴを含めたデザインも大幅に変更させて頂くことになりましたので、ビジュアルイメージを思い切り路線変更した上で、明確なコンセプトの元にサイトを構築していきますので、どうぞ宜しくお願い致します!

0
に投稿 コメントを残す

行政書士事務所のK様、ご依頼ありがとうございます!

埼玉県川越市の行政書士事務所K様より、ホームページ制作(スタンダードプラン)とSEO対策を中心とするコンサルティング業務のご依頼を頂きました、ありがとうございます!
「クライアントから多く受ける相談を記事にして、情報を発信していくようなホームページにしたい」というご要望を受け、ブログ型に特化したサイト構築を行ないます。
またSEOに有効な記事は作成の仕方にコツがありますので、そういったテクニック的な部分もふまえてしっかりとサポートさせて頂きます。

0
に投稿 コメントを残す

ホームページの階層構造〜ディレクトリでファイルを整理

ホームページの階層構造〜ディレクトリでファイルを整理

ディレクトリ=フォルダです

こんにちは、ホームページ制作のオイゾウです!
HTMLとCSSについての理解が深まってきたところで、ここからはパソコン内で作ったそれらのファイルをインターネット上に公開するための方法を説明していきたいと思いますが、その前にオイゾウのホームページ講座で学んでいる篠田さんとジョージさんを招き、「ホームページの構造」についてお話ししたいと思います。

篠田さんプロフィール

川越市内の某お土産屋さん、68歳。
趣味の家庭菜園をテーマにしたホームページを立ち上げるため勉強中。
Apple製品に目覚め、携帯電話はiPhone、PCはMacBook Airを愛用。

ジョージさんプロフィール

川越市内で理容室を営む52歳。
理容師として30年以上の経験を世の中に伝えるため、店舗ホームページを作りつつブログで情報発信する予定。

no name
HTMLとCSSについては理解できてきましたか?
no name
だいぶ分かるようにはなったけど、あとは実際にやってみて覚えていければいいかな。
no name
あ、そうそうアマゾンで本を買ったよ!

no name
篠田さん、前向きにがんばってますね!
どれどれ、アマゾンで検索と・・・
ホームページ入門書部門で売れ筋ランキング1位じゃないですか!
no name
読んでたらすぐにでもホームページ作れるような気がしてきたよ。
no name
っていうか篠田さん、アマゾンで買い物できるようになったんだ。
no name
最近はコレ(iPhone)ね。
本は結構アマゾンでいろいろ買ってるよ。
カミさんの影響でベニシアさんにハマっててさ、この前はこの「ハーブ便り」買ったけど、すごい勉強になるんだよね!
これからハーブを育てようと思ってるよ。

no name
篠田さんがベニシアさんにハマるなんて意外ですね!
読み終わったら貸してください(笑)。
ところでかなり話がそれたので戻しますが、では作成したHTMLやCSSファイル、それに画像を用意して、それらをインターネット上に公開するためにはどうすればよいと思いますか?
no name
サーバにアップするんじゃないかな?
no name
正解です!
そのためにはFTPという通信手段を行なう必要があるのですが、でもその前に覚えておいてほしいことがあります。
それは「ホームページの構成」です。
まずは以下の図を見てください。

ディレクトリを使わず理路整然としてない状態

no name
ここではフォルダのことをディレクトリと呼ぶことにします。
意味は同義と思っておいてもらえればとりあえずは問題ないです。
これらのファイルがサーバ上にあると考えて、トップページである「index.html」の他に2つのHTMLファイル、そして1つのCSSファイル、あと6つの画像ファイルが同じ階層に並んでいます。
今のこの状態というのはかなりファイル数の少ないホームページと言えますが、実際にはもっとファイルの種類も数も増えますので、その場合にディレクトリを使うことで構成をもっと理路整然とした階層による構造にする必要があります。
no name
そうしなければならない理由があるの?
no name
厳密に言えばこれでも問題なく表示することは可能ですが、一方でSEO対策(検索エンジからの評価が上がる)にもなります。
また、サーバに上げたこれらのファイルを1人で管理すると考えれば気にする必要はありませんが、複数人で管理するとなれば、やはり分かりやすい構造であるべきですよね。
さらに言えば、これは今後の話になってしまいますが、WordPressなどのCMSで構築する場合は、もっと深い階層になっていますので、この「階層構造」を理解できてないといけません。
ということで、ここでは2つの新たなディレクトリを作り、そこにCSSファイルと画像ファイルをそれぞれ分けて入れてみたいと思います。

ディレクトリを使って理路整然としているホームページ構造

no name
こうすることで、ファイルの種類ごとにディレクトリにまとめられ、とてもすっきりとした分かりやすい構造になるというわけです。
ちなみに決まりはありませんが、CSSディレクトリのディレクトリ名は「css」、画像ディレクトリのディレクトリ名は「images」とするのが一般的です。
また、HTMLファイルがもっと増えてくれば「index.html」以外をディレクトリに入れて1つ下の階層にした方が良いですね。
例えば「osusume.html」というHTMLファイルについて説明すると、まず今の階層(同じ場所)に「osusume」というディレクトリを作り、このディレクトリに「osusume.html」を入れて、ファイル名を「index.html」に変えます。
そうすることでとても分かりやすい構造になります。
no name
その「index.html」っていうのは、このファイル名じゃないといけないとか、何か決まりでもあるの?
no name
特にそういうわけではないですが、その階層の中でもし「index.html」というファイルがある場合は、そのファイルを表示するという仕組みになってるんです。
no name
じゃあさ、逆にその階層に「index.html」がない場合は?
no name
その場合、よく見たことがあると思いますが「404 Not Found」(ページが見つかりません)というエラーが出ます。
具体的に説明すると、ジョージさんが「http://oizo.jp」にアクセスしたとしますよね?
すると、実際には「https://oizo.jp/index.html」を表示しているんです。
なので、「https://oizo.jp/index.html」にアクセスしても同じことなんです。
ですがもしルートディレクトリ(一番上の階層)に「index.html」がなかった場合、「http://oizo.jp」にアクセスしても「404 Not Found」エラーになってしまいます。
no name
なるほど。
とにかく、ディレクトリを作って、CSSなら「css」というディレクトリに、画像なら「images」というディレクトリに入れて、トップページ以外のHTMLもディレクトリにした方がいいってことだよね。
この解釈で合ってる?
no name
はい、バッチリです!
では次回はこの流れで「相対パス」についての説明をしていきますので、引き続きよろしくお願いします!

ところで話は少しそれますが、ファイルとフォルダに関しては以前「ファイルとフォルダの関係、パソコンの整理整頓」で詳しく書いていますので、もしよかったら併せて読んで頂ければと思います。

0
に投稿 コメントを残す

CSSのプロパティ解説~背景編(色・パターン・画像)

CSSのプロパティ解説~背景編(色・パターン・画像)

今回は背景の装飾をします

こんにちは、ホームページ制作のオイゾウです!
前回「CSSのプロパティ解説~文字編(テキスト・フォント関連)」では文字を大きくしたり色を付けたりなど、文字に関するスタイルを指定する方法を紹介しましたが、今回は背景編ということで、色を付けたり画像を入れたりする方法です。
前回の文字と今回の背景を組み合わせるとかなりホームページのデザインも本格的な雰囲気に仕上がっていきますので、是非覚えましょう!

背景に色を付ける

背景は、何も指定しなければ色は白(#ffffff)です。
この背景に色を付けたり、グラデーションにしたり、画像を入れたりすることができますので、その方法を説明します。

ベースになるHTMLはこちら

このHTMLにスタイルを指定していきます。
[html]<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>[/html]

色を付ける

[html highlight="2"]p {
background-color: #957171;
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

背景をグラデーションにする

[html highlight="2"]p {
background: linear-gradient(#957171, #e7d1d1);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

解説

「background」というプロパティで、値は「linear-gradient(色1, 色2)」というように指定します。
色1が上で色2が下です。
値を「linear-gradient(●deg, 色1, 色2」(●に角度を数値で入れる)にして角度をつけたり、値を「radial-gradient(色1, 色2)」にして円形グラデーションにすることもできます。

背景を画像で表現する

以下のようなもみじの写真画像を使い、背景に画像を入れる方法を説明します。


画像のファイル名;bg_momiji.jpg

[html highlight="2"]p {
background-image: url(https://oizo.jp/sample/images/bg_momiji.jpg);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

背景をパターン(柄)で表現する

先ほどのように画像を入れるのですが、今回は写真ではなくお部屋の壁紙のような柄にします。
以下のような小さい画像を使います。


画像のファイル名;bg_pattern_sample.png

[html highlight="2"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

解説

このように繰り返し表示され、柄の背景になります。

背景に指定した画像を繰り返し表示しない

「bg_pattern_sample.png」という画像は小さかったので、p要素の空いているスペースを全て埋めるように繰り返し表示されました。
今回は繰り返し表示させず、さらに表示位置を指定します。

[html highlight="2,3,4"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
background-repeat: no-repeat;
background-position: 50px 50px;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

解説

「background-repeat: no-repeat;」と指定することで、繰り返し表示されなくなります。
さらに「background-position: 50px 50px;」とありますが、これは背景の位置が「左からの距離 上からの距離」です。
ただこれだと文字の背景に画像が中途半端な状態で入っていてとても違和感があるので、位置を変えてみます。

[html highlight="4"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
background-repeat: no-repeat;
background-position: 0 25px;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

応用編・見出しを目立たせる

ここまで来れば、CSSでかなり表現できる幅も広がってきたことでしょう。
そこで最後に、文章の見出しをちょっと装飾してみたいと思います。

ベースになるHTMLはこちら

このHTMLにスタイルを指定していきます。
[html]<p>当店の芋まんじゅう</p>[/html]

使用する画像


この画像を背景に指定し、アイコンのように表示させます。
画像のファイル名;icon_manju.png

CSSの記述

[html]p {
background-image: url(https://oizo.jp/sample/images/icon_manju.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-size: 30px 30px;
height: 50px;
padding: 6px 50px;
border-bottom: solid 1px #919191;
border-right: solid 10px #b18247;
color: #6a222f;
font-size: 1.4em;
font-weight: bold;
}[/html]

このように表示されます

当店の芋まんじゅう

まとめ

いかがでしたでしょうか?
この応用として、画像を使わずにパターンで表現したり、写真画像にグラデーションを重ねたり、もっとこだわったデザインにすることもできますので、いろいろとご自身で試行錯誤しながらチャレンジしてもらえればと思います!

0