<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>ウェブサイト（ホームページ）制作を仕事にするのブログ</title>
<link>https://ameblo.jp/web-tech/</link>
<atom:link href="https://rssblog.ameba.jp/web-tech/rss20.xml" rel="self" type="application/rss+xml" />
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com" />
<description>Web 制作実況中継中</description>
<language>ja</language>
<item>
<title>星の作成</title>
<description>
<![CDATA[ <p>現在、PhotoShopとイラレの復習をしており、できれば体系化できればと考えています。</p><p>&nbsp;</p><p>本日のテーマは、夜空の星です。ロマンティックですね。</p><p>&nbsp;</p><p><a href="https://stat.ameba.jp/user_images/20190218/19/web-tech/a7/72/j/o0400040014358432622.jpg"><img alt="" height="400" src="https://stat.ameba.jp/user_images/20190218/19/web-tech/a7/72/j/o0400040014358432622.jpg" width="400"></a></p><p>&nbsp;</p><p>作成した方法を下記しておきます。</p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">１．新規ドキュメントを開く</font></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">　　サイズは、<span lang="EN-US">400</span>ｘ<span lang="EN-US">400</span>　背景色は濃い青</font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">２．水平に直線を引く</font></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">　　線は、白で１ピクセルの幅、長さは200ピクセル（大体それくらい）</font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">３．メニューのフィルター　→　ぼかし　→　ぼかし（移動）</font></p><p style="margin: 0mm 0mm 0pt;"><font face="游明朝"><font color="#000000">　　角度：０、距離：<span lang="EN-US">80</span></font></font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">４．レイヤーを複製し、<span lang="EN-US">90°</span>右に回転。２枚のレイヤーを結合させる。十字の形になる。</font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">５．レイヤー複製し、縮小させて、<span lang="EN-US">45°</span>回転させる。</font></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">　　これで、星の形は完成だが、もう少し手を加える。</font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">６．ぼかした光を加える。</font></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">　　選択範囲ツールで円を描き、境界線を作る。</font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">７．最後に中心にぼかしを加えて終了。</font></p><p style="margin: 0mm 0mm 0pt;"><span lang="EN-US"><font color="#000000" face="游明朝">&nbsp;</font></span></p><p style="margin: 0mm 0mm 0pt;"><font color="#000000" face="游明朝">８．星を他にも作りたければ、７の完成形の星を、一つのレイヤーにして、複製、縮小、移動させる。</font></p><p><br>以上です。</p><p>&nbsp;</p><p>追伸：　次回からは、もっと丁寧に画面ショットも張り付けるようにしますね。</p><p>&nbsp;</p>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12441101181.html</link>
<pubDate>Mon, 18 Feb 2019 19:12:53 +0900</pubDate>
</item>
<item>
<title>イラレをあきらめない</title>
<description>
<![CDATA[ <p>久しぶりにイラレで練習で、地図を作成しました。</p><p>&nbsp;</p><p><a href="https://stat.ameba.jp/user_images/20190212/21/web-tech/d0/7f/g/o0577043514355077973.gif"><img alt="" height="317" src="https://stat.ameba.jp/user_images/20190212/21/web-tech/d0/7f/g/o0577043514355077973.gif" width="420"></a></p><p>&nbsp;</p><p>JRの線路が目印になります。 線路の描き方は、原始的な方法で作成することも可能ですが、折角、いろいろな機能があるのですから、ツールを使いましょう。</p><p>&nbsp;１．直線ツールで線を引きます。</p><p>２．直線が選択された状態で、塗り色は濃い灰色、太さは３０pix位。</p><p>３．メニューの"ウィンドウ”からアピアランスを選択（or Shift + F6)。</p><p>４．アピアランスパレットの"線"のレイヤーを複製。色を白にする。</p><p>５．複製した線の幅を２６pix位にする。</p><p>６．アピアランスの複製したレイヤーの線の文字をクリックして、線種パレットを表示させる。</p><p>&nbsp;７．破線にチェックを入れ、線分と間隔に数値を入れ、完成です。</p><p>&nbsp;</p><p>アピアランスパレットの線種パレットでは、矢印も簡単に作れますよ。</p><p>&nbsp;</p><p>以上。</p><p>&nbsp;</p>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12439701819.html</link>
<pubDate>Tue, 12 Feb 2019 21:27:32 +0900</pubDate>
</item>
<item>
<title>2019年　夢をあきらめない</title>
<description>
<![CDATA[ <p>もう、2019年になって1ヵ月が過ぎてしまった。</p><p>いや、2019年は、まだ始まったばかり。ポジティブに考えよう。</p><p>&nbsp;</p><p>今日（2019年2月5日）から、夢の続きを始めよう。</p><p>2018年には、曲がりなりにも、レスポンシブデザインは理解したし、サイトも作れるようになった。</p><p>Let's get started, again.</p><p>&nbsp;</p><p>また、Webにまつわることを投稿していこう。</p><p>今日は、ここまで。</p>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12438073050.html</link>
<pubDate>Tue, 05 Feb 2019 22:14:59 +0900</pubDate>
</item>
<item>
<title>2017年の目標</title>
<description>
<![CDATA[ 昨年の8月にスマホデビューした。<br>今年は、スマホ対応のウェブ制作が出来るようになる
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12234525016.html</link>
<pubDate>Tue, 03 Jan 2017 12:40:06 +0900</pubDate>
</item>
<item>
<title>レスポンシブ・ウェブデザインを始めよう</title>
<description>
<![CDATA[ <p>お久しぶりです。１年振りの更新になります。正確に言えば、2015年の6月21日が前回の更新ですので、１年４ヶ月位のブランクがあったことになります。</p><br><p>その間、何をしていたのか？ウェブ関連の作業はほとんどやっていないことになります。この記事の原稿は、実は図書館の「電源付閲覧席」で書いています。図書館に来たのが、久しぶりと言うことです。</p><p>どうしても、自宅では、気が散ってしまい、記事の原稿の作成までは行かず、中途半端なネットサーフィンになってしまいがちです。また、図書館通いを始めようかと思います。</p><br><p>今日からまた、新たに、１週間に１回の記事の投稿をしようと決意しました。当分（2016年内）は、レスポンシブデザインについて、記事を投稿しようかと考えています。今度の土曜日は、本屋に行って、関連の書籍を購入して勉強します。</p><br><p>そうとう、出遅れた感のある、レスポンシブデザインの勉強になりますが、一生懸命やる所存です。レスポンシブデザインを始めるきっかけになったのは、自分がガラケーからスマホ（アイフォン）に変えたこと。もう一つの要因は、グーグルがスマホ未対応サイトを低評価するようなアルゴリズムが始まったからです。</p><br><p>それでは、来週の日曜日（10月16日）まで。</p>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12208272836.html</link>
<pubDate>Mon, 10 Oct 2016 13:06:01 +0900</pubDate>
</item>
<item>
<title>フォトショップのレイヤーフォルダーについて</title>
<description>
<![CDATA[ <p>前回の更新から、久しぶりの更新です。</p><br><p>Web制作中ですが、中継するには、至っておりません。</p><p>今日の気づきを一つ、二つ紹介と言うことで記事の投稿にしようと思います。</p><br><p>現在、Photo Shopで、デザインを作成中です。改めて、感じたことは、フォルダーの重要性です。</p><p>皆さんご存知のレイヤーパレットの話です。レイヤーをまとめるフォルダーは、各レイヤーを作成しながら、同時にフォルダーも作成していくのが賢明のようです。</p><p>メリットは、作業効率が上がります。</p><p>１．フォルダーで管理すれば、表示・非表示が簡単にレイヤーを全部行える。</p><p>２．フォルダーで管理すれば、ロックもレイヤーをまとめてロックできる。</p><br><p>今日のお役立ち情報は、以下の通りです。</p><br><p>Shiftキーを押しながら複数枚のレイヤーを選択します。その状態で、CｔｒｌキーとGキーを押すと、レイヤーがセットされて、フォルダーができあがりです。名前を"Header"など分かるようにすれば、よいのではないでしょうか。</p><br><p>それでは、次回まで。</p>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12041485128.html</link>
<pubDate>Sun, 21 Jun 2015 16:11:38 +0900</pubDate>
</item>
<item>
<title>ウェブ制作実況中継 - 第二弾</title>
<description>
<![CDATA[ <p>ウェブ制作実況中継の第二弾をお送りします。</p><br><p>今日からとりかかります。納期は、６月一杯です。</p><br><p>私の場合、ページの横幅を決めるところからスタートです。</p><p>レスポンシブデザインを試したことはありません。</p><p>理由は、経験から、他のスマホやタブレットでも、それなりに表示されると考えているからです。</p><p>もう一つは、レスポンシブデザインにすれば、表示をチェックする対象がPC以外に広がるので、それを嫌ってのことです。</p><br><p>レスポンシブデザインとは：</p><p>ウェブデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。</p><br><p>因みに、幅は、可変ではなく、固定にするつもりです。</p><br><p>作業の進捗は、来週の日曜日から配信予定です。</p><br>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-12030424180.html</link>
<pubDate>Sun, 24 May 2015 11:39:57 +0900</pubDate>
</item>
<item>
<title>ホームページ内のキーワード</title>
<description>
<![CDATA[ <p>ホームページをお持ちの方は、たくさんいらっしゃるかと思います。自分もホームページを持っています。そして、自分で管理していますので、なあなあになっています。更新も滞りがちです。</p><br><p>改めて、自分にきびしくなければならないなーと思う今日この頃です。何気に頭をよぎったのは、私がホームページの更新をお手伝いをしていたお客様がホームページの更新を非常に大事にされていました。最新のイベントやお知らせなどの情報発信だけの意味だけではなく、集客のためにキーワードを選定して試すということを都度やられていました。このキーワードを今回使ったから、ヒット率が上がったとか、常に研究されていました。</p><br><p>ホームページは、作るだけでなく、言葉は悪いですが、「仕掛け」も大事だと思うわけです。それも、Web制作のプロの仕事の一つなんだと思うわけです。「仕掛け」と言えば、なんだか悪いことをイメージしますが、ヒットする言葉を選定し、自分のサイトにお客様に訪問いただくという本来の目的を達成するためです。</p><br><p>言葉の選定については、次回のブログでまとめたいと思います。</p><br><p>久しぶりの更新と相成りましたが、できるだけ１週間に１回の更新を目指して頑張ります。</p><br><p>それでは。</p>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-11956353370.html</link>
<pubDate>Mon, 24 Nov 2014 15:22:29 +0900</pubDate>
</item>
<item>
<title>問い合わせフォームの設置</title>
<description>
<![CDATA[ <p>本日のテーマは、ホームページになくてはならない問い合わせフォームについての投稿です。</p><br><p>ごくまれに、「問い合わせ」のボタンを押すと、問い合わせフォームではなく、メールが立ち上がるサイトがあります。私は、あれには、ちょっとがっかりしてしまいます。</p><p>ユーザー（訪問者）に手間を掛けているような気がしています。</p><br><p>したがって、問い合わせフォームの出番です。以前は、Pearによる問い合わせフォームを利用していました。しかし、若干、問い合わせフォームを読み込むのに時間がかかりすぎる気がしていましたので、今回、思い切ってPHPのメールフォームの使用をこころみました。</p><br><p>たどり着いたのが、以下のサイトです。</p><br><p><a href="http://www.php-factory.net/mail/01.php" target="_blank">【MailForm01】PHP多機能メールフォーム　フリー（無料）版</a><a href="http://www.php-factory.net/mail/01.php"></a></p><br><p>リンク先のページをご欄になれば、分かりますが、超要約します。</p><br><p>１．ファイルを２つダウンロードする。</p><p>    "contact.html"</p><p>    "mail.php"</p><br><p>２．"mail.php"の設定を必要に応じて設定する。</p><br><p>３．上述の２つのファイルをウェブサーバーにアップロードする。</p><p>　　私の場合は、トップページ（index.html）と同じ階層にフォルダーを設け、２つのファイルを入れました。</p><br><p>４．テストしたら、送信できました。</p><br><p>簡単と言う点では、ほかの追随を許さないのではないかと思います。</p><br><p>念のため、コメントを加えます。</p><p>"contact.html"に変更を加えていませんので、あとで、変更する必要はあるかと思います。ただ、まずは、送信できるかがポイントでしたので、変更せずにテストしました。</p><p>既存の問い合わせページに"contact.html"の"form"の部分をコピペすると、それらしくなります。</p><br><p>もう一つは、私の場合、メールフォーム版UTF-8をダウンロードしています。今、運用しているサイトがUTF-8でコーディングしているからです。</p><p>どうして、私が現在、運用しているサイトがUTF-8かと言うと、簡単に言うと、今ではUTF-8がグローバルスタンダードだからと言うことでしょうか。たしか、WORD PRESSなどのブログ支援プログラム？もUTF-8で制作されているかと。</p><br><p>テスト送信は、比較的簡単にできましたが、見栄えをよくするには、若干時間をかけなければならないかと考えています。それは、Webのデザイナー、コーダーの本来の仕事の領域になりますね。</p><br><p>最後に、今回、利用させていただきます、PHP工房さんのメールフォームはシンプルで良いなと思っています。実は、２，３年前から探していましたが、やっと巡り合った素晴らしいメールフォームです。</p><br><p>今日は、設置及び送信テストだけでしたので、何も問題がありませんでした。</p><p>来週以降、自分のサイトの内容に合わせて変更・追加もするかと思います。何か分かったことがあれば、報告します。</p><br><p>夢はあきらめない。道は、遠くても。</p><br><p>それでは。</p><br><br>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-11947597744.html</link>
<pubDate>Mon, 03 Nov 2014 14:31:45 +0900</pubDate>
</item>
<item>
<title>Webサイトのナビゲーションについて</title>
<description>
<![CDATA[ <p>今週は、Webサイトのナビゲーションについて。Homeや会社概要などの横並びのグローバルメニューや本文の横に配置したサイドメニューのことです。</p><br><p>一番手を抜いたと言う表現は悪いですが、なんの変化もないメニューです。ブラウザのデフォルトでマウスが指の形に変化するので、リンクがあるのは分かります。</p><br><p>次はやはり、ロールオーバーの機能を使ったページです。しかし、そのリンクのサイトに飛んで、違う位置にカーソルを持っていくと、マウスアウトの状態になって、そのメニューがダウンの状態であることが分かりません。私は、結構、違和感を感じます。また、利用されている方も、違和感と言うのか、なんだか頼りないような感じになるのではないでしょうか。「私はどこ」と言ったら、オーバーでしょうか？</p><br><p>そこで、ロールオーバーのマウスオーバーの状態、マウスアウトの状態、そしてセレクト（クリック）された状態の維持を実現できないかと考えていました。</p><p>因みに、ドリームウィーバーのCS４であれば、まだ、グローバルナビゲーション機能がありましたが、CS5.5には非推奨と言うことでこの機能はありません。昨日からこの問題を解決する方法を模索していました。検討したのは、jQueryの使用です。いくつかのサイトを参考にしましたが、ローカルの環境（Webサーバーを利用できない）では、なかなかテストができません。（現在、外で作業をしています。）</p><br><p>結論は、昔と同じく、ドリームウィーバーの機能でロールオーバーを実現し、リンクしたページでは、ロールオーバーの画像のみ置くことにしました。</p><br><p>今週の成果はありませんでしたが、こう言った試行錯誤も何かの役に立つことを信じて頑張っていきます。</p><br><p>来週は、phpを使った問い合わせフォームページについて投稿できればと考えています。</p><br><p>それでは。</p><br><br><br><br><br>
]]>
</description>
<link>https://ameblo.jp/web-tech/entry-11944184183.html</link>
<pubDate>Sun, 26 Oct 2014 15:01:38 +0900</pubDate>
</item>
</channel>
</rss>
