この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
2022年02月26日
Dreamweaverの基本設定とHTML公開まで
本日は、ホームページ制作ソフト「Dreamweaver」の基本設定とホームページを制作する際に欠かすことのできないデータ（HTMLファイル CSS 画像）の制作から一般公開するまでの基本的な流れをお伝えいたします。
ホームページは主に次のようなファイルによって構成されます。
ホームページを制作する方法は大きく分けて2つあります。
(1)自分のパソコン（ローカル）上で制作しレンタルサーバーに、ホームページのデータを転送し一般公開する。
(2)Web上のホームページ制作サービスを使って制作する
フォルダーの置き場所（制作したデータの保存場所）はある程度自由で、例えば使用しているPCのデスクトップなど。
@charset "utf-8";
/* 以下のタグに対してマージン・パディング（余白）をなくす */
body,h1,ul,li{
margin:0;
padding:0;
}
/* 画像の幅を100%にし高さをautoとすることで縦横比が固定されます。 */
img{
width:100%;
height:auto;
}
/* background-imageは背景に画像を表示することできます。
*/
header{
background-image:url(../img/header-back.jpg);
padding:20px;
}
/* list-style-type:noneは黒丸を消します。display:flex;は子要素を横に並べることができます。
ul{
list-style-type:none;
display:flex;
}
ホームページを構成する様々なデータ
ホームページを管理するためのフォルダ—を作る
Dreamweaverを起動して「サイト管理」を行う
トップページを作成し保存する
CSSを作成してリンクする
画像を用意する
HTMLを記述する
CSSを記述する
ホームページを構成する様々なデータ
ホームページは主に次のようなファイルによって構成されます。
- HTML
- CSS
- 画像
- その他（JavaScriptやPHP)
次のデータはテキストファイルです。いわゆるコーディングやプログラミングという作業によって制作します。制作・編集はテキストエディターと呼ばれるソフトエアを使います。今回はadbe社のDreamweaverを使ってホームページを制作していくための流れをお伝えいたします。
「HTMLとはHTMLタグを使って文章を構造化するマークアップ言語です」
「CSSはHTMLにデザインを施すためのテキストベースのデータです」
「JavaScriptは、ブラウザに表示される文字や画像に動きを設定したりアクセスしてきたユーザーの情報を取得するための言語です」
ホームページで扱う画像は写真・イラスト・アイコンですが、これらはグラフィックアプリケーションを使って編集したのち、「jpeg」「png」「gif」というファイルに変換してホームページ上にHTMLやCSSを使って乗じさせます。
「PHPはフォームやメール、ショッピングシステムなどのシステムを構築するための言語です」
ホームページを管理するためのフォルダ—を作る
ホームページを制作する方法は大きく分けて2つあります。
(1)自分のパソコン（ローカル）上で制作しレンタルサーバーに、ホームページのデータを転送し一般公開する。
(2)Web上のホームページ制作サービスを使って制作する
今回は（１）の方法について記載させていただきます
（１）の方法でホームページを制作する場合は自分のPCまたは外付けHDDなどのメディアにホームページを制作管理するためのフォルダーを１つ制作します。このフォルダーの中にホームぺージのトップページや下層ページ・CSS/JavaScript・画像等を保存し制作していきます。
フォルダーの置き場所（制作したデータの保存場所）はある程度自由で、例えば使用しているPCのデスクトップなど。
【注意点】
PhotoshopやIllustrator、XD、テイスト原稿などのいわゆる素材はこのフォルダーの中には保存せず別途フォルダーを作成し管理します
それでは具体的に1つフォルダーを作成してみたいと思います。
今回はデスクトップにフォルダーを作成してみます。
フォルダー名には、制作するwebサイトの名称などを設定します。
今回は「blod_test_site」とします。
Dreamweaverを起動して「サイト管理」を行う
次はホームページ制作専用アプリケーションである「Dreamweaver」を起動しサイトを制作するための基本設定をおこないます。
Dreamweaverを起動しました。（バージョンが古いですが・・）
次にサイトの管理設定を行います。【サイトメニュー → サイト管理】を選択します。
サイト名に任意の設定名を入力します。ローカルルートフォルダー（２）は横の赤枠のアイコンをクリックして管理フォルダーをみつけます。今回はデスクトップの「blod_test_site」です。
フォルダーの参照画面になります。目的のフォルダー「blod_test_site」をシングルクリックし「選択」をクリックします。
「blod_test_site」フォルダーを開いたら更に「選択」をクリックします。※実はこの時に「blod_test_site」フォルダーの中身は見えませんが問題ありません。
設定画面に戻ったら「保存」をクリックします。※状況によって警告アイコンが表示されるウィンドウが出ますが「OK」をクリックして進んでください。
Dreamweaverの起動画面にもどりました。右側の「ファイルパネル」を確認しましょう。空の状態ですが「blod_test_site」フォルダーが参照されています
トップページを作成し保存する
次は空のトップページを作成します。【ファイルメニュー → 新規】を選択します。
画面が切り替わります。【空白ページ（１） → HTML（２） → なし（３）】を選択します。
さらに（４）では「HTML5」を選択し「作成」（５）をクリックします。
基本的なHTMLが記述されている新規TMLファイルが表示されます。
できれば直ぐに保存しておきます。【ファイルメニュー（１） → 保存（２）】を選択します。
参照フォルダーが自動的に開きます。（１）
【ファイル名】（２）を入力します。
ファイル名は『index.html』とします。
※トップページのファイル名は基本的に『index.html』とします。（Web上のルール）
【保存】をクリックします。（３）
画面が切り替わり右横の【ファイルパネル】内に「index.html」が保存されたことを示すアイコンが表示されます。ファイルを開く際は【ファイルパネル】のアイコンをダブルクリックしてください。
CSSを作成してリンクする
本来HTMLを記述してもよいのですが、いったんCSSを作成しHTMLに読み込んでみようと思います。
新規CSSファイルを作成しますので【ファイルメニュー → 新規】を選択します。
画面が切り替わります。【空白ページ → CSS】を選択します。
「作成」をクリックします。
新規のCSSファイルができました。
ちなみに@マークからはじまる1行目の記述はCSSの文字コードがutf8を参照していることを示しています。
いったん保存します。ここではショートカットで保存画面を表示してみましょう。
キーボードで【ctrl + S】と押します。すると保存画面が表示されます。
ここでCSSファイルを格納するための新規フォルダーを作成するために（１）をクリックします。
そのフォルダー名を『css』（２）に変更します。
名前の変更が完了したら、『css』フォルダーをダブルクリックして開きます。
画面が切り替わったらファイル名を『style.css』（１）に変更し【保存】（２）をクリックします。
画面が切り替わり右横の【ファイルパネル】内に「cssフォルダーの中にstyle.css」が保存されたことを示すアイコンが表示されます。ファイルを開く際は【ファイルパネル】のアイコンをダブルクリックしてください。
CSSファイルはHTMLに読み込んで紐づけて使用します。方法はHTMLファイルにタグを使って読み込みます。『index.html』を表示してください
</body>の上に空白行を作成し、そこに<linkタグを記述します。
下記のコードがCSSを読み込むHTMLです。<link >要素といいます。rel="stylesheet" 部分はHTMLとCSSファイルの関係性を示すもの。このまま定型で覚えてよいです。 href="css/style.css">部分は外部データであるCSSファイルを参照するコードです。ここではcssフォルダーの中にstyle.cssがありますのでcss/でフォルダーの中を参照しファイル名を指定します。
<link rel="stylesheet" href="css/style.css">
href="まで記述するとDreamweaverは「参照」機能が表示されます。クリックしてファイルを目視して探し参照できます。（コードを勝手に書いてくれます）
記述が完了しますと、まだ保存していないことを示す『 * 』マークがタブメニュー内のファイル名の右横に表示されます。確認してみましょう。
確認ができましたら【Ctrl + S】を押し上書き保存を行います。
さらにそのままの画面でキーボードの【F5キー】を1回押して画面を更新してみましょう。
するとファイル名が表示されているタブ（コード画面の左上付近）の下に『ソースコード』と『css』という画面の切り替えボタンが表示されます。このボタンはHTMLにリンクされている外部ファイルを同一画面上で切り替え表示することができます。
これで一先ず準備が整いました。この後は画像を用意します。
画像を用意する
ホームページの中で使用する画像はHTMLファイルと同じフォルダーの中に格納しタグを使って表示します。
今回は次のような構成で画像を準備しました。
rootフォルダー（親フォルダー）の中に「img」という名前のフォルダーを作成し画像を格納しています。
HTMLを記述する
Dreamweaverの画面に戻ります。『index.html』のコードを表示し基本的なHTMLタグを記述します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Web Site</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>PhotoGallery</h1>
</header>
<div><img src="img/photo01.jpg" alt="わらびもち"></div>
<ul>
<li><img src="img/photo02.jpg" alt="桜餅と道明寺"></li>
<li><img src="img/photo03.jpg" alt="みたらし団子"></li>
<li><img src="img/photo04.jpg" alt="豆大福"></li>
</ul>
</body>
</html>
title要素にはホームページのタイトルを設定します。google検索にも影響するためよく検討の上入力します
header要素にはウェブページの大見出しを定義したりログインボタンやナビゲーションを設定するエリアと持っていただいてよいでしょう。
h1要素は企業名や企業ロゴなどタイトル要素と同等の語句を設定します。
div要素は特に意味のない要素ですがレイアウトを行うためタグをグループ化する際に利用します。
class名を付与することができます。これによりCSSを記述する際に他のタグに影響を与えずこのタグのみにデザインを施すことができます。
img要素は画像を表示する際に利用します。src属性で画像の場所と画像名を指定します。 alt属性には画像の意味を記述します。
ul要素とli要素は箇条書きを作るタグです。初期設定では先頭に黒丸が発生します。（後でCSSを使ってこの黒丸は消すことができます。）
タグを記述したら「Ctrl + S」キーを押して上書き保存します。
結果を確認しますのでデスクトップの『blog_test_site』フォルダーを開き『index.html』をダブルクリックし『googleCerome』で開きます。
下記が表示結果です。
この後はCSSを記述して文字や画像のサイズ、背景カラーを変えてみたいと思います。
CSSを記述する
CSSを記述するためにDreamweaverでstyle.cssを表示します。
@charset "utf-8";
/* 以下のタグに対してマージン・パディング（余白）をなくす */
body,h1,ul,li{
margin:0;
padding:0;
}
/* 画像の幅を100%にし高さをautoとすることで縦横比が固定されます。 */
img{
width:100%;
height:auto;
}
/* background-imageは背景に画像を表示することできます。
*/
header{
background-image:url(../img/header-back.jpg);
padding:20px;
}
/* list-style-type:noneは黒丸を消します。display:flex;は子要素を横に並べることができます。
ul{
list-style-type:none;
display:flex;
}
「ホームページデータってどうやって公開するの？ レンタルサーバーとFTPソフトの解説！ windows」
をご参照ください
【このカテゴリーの最新記事】
-
- no image
- no image
- no image
-
2022年01月14日
ホームページデータってどうやって公開するの？ レンタルサーバーとFTPソフトの解説！ windows
ホームぺージを公開する流れ
皆様こんにちは。
今回のテーマは「ホームページはいったいどのように一般公開するのか？」という疑問についてお答えしたいと思います。
その前にホームページはどのような仕組みで構成され一般にお披露目されるのかを説明しますね。
ホームページはいったいどのように作るのかというと、基本的に大きく分けて2つあります。
１つはHTMLと呼ばれる言語を使い所定のルールにのっとってホームページを構成する要素（見出し・文章・リンク・画像など）をテキストエディターを使ってマークアップ（プログラミングのようなもの）作成していきます。
半角英数字を使って下記のようにプログラムのようなものを書いて見出しや文章、画像の表示、リンクの設定などを書いていきます。
<h1>ようこそ私のホームページへ</h1>
上はh1要素といって大見出しを表します。<h1> </h1>の部分がタグと呼ばれるものです。
「ようこそ私のホームページへ」という文字が大見出しとして定義したことになります。
ホームページはHTMLにプラスして、様々なデータを必要とします。
例えば画像の位置や文字サイズ、背景カラーなどデザインを定義していくにはCSSと呼ばれるデータを記述します。また写真のスライドショーなど動きをつくりだすにはJavascriptという言語を使ってプログラミングする必要があります。当然写真やイラストデータ（JPEG、GIF AVGなど）も紐づいています。
このようにホームページはHTML以外にたくさんのデータの寄せ集めで成り立っているのです。
完成したHTMLページはgoogleCeromeなどのウェブブラウザを使って開きますと、どのように表示されるかを確認することができるのです。
(HTMLの知識については割愛致します)
もう１つの制作方法は、アプリケーションを使って「動的」にホームぺージを制作します。
ブログやインスタのようにホームページを制作できるサービスサイトやWordpressと呼ばれるアプリケーションの管理画面上でホームページの文章や画像を挿入して作っていきます。
こちらの方法は初級レベルから上級レベルまで作り方は、作り手の技量によります。
基本的にはHTMLを記述しなくてもホームページができてしまうという便利なものと考えてよいでしょう。
さて、ホームぺージ制作の流れですが、制作側では次のような作業を行いホームページが一般公開されます。
（１）企画
（２）設計
（３）プレゼン
（４）制作
（５）テスト
（６）公開
（７）運用
この中で今回は（６）の公開で何が必要で何が行われて公開となるのかにスポットを当てて解説致します。
レンタルサーバーと契約する
レンタルサーバーはホームページのファイルを格納しておくサーバーコンピューターであり月額費用を支払ってデータを公開するための保管場所を借りるわけですね。
制作したホームページのファイルはFTPソフトを介してレンタルサーバーに転送してはじめて一般に公開される形となります。
転送する為にはFTPクライアントソフト（FTPソフトと略します）が必要であり、ネット上からダウンロードし自分のPCにインストールして利用します。
FTPソフトを入手しインストールする
FTPソフトはWindows版とMac番があります。
Windows版
FFFTP（無料）
FieZilla（無料）
Mac版
FieZilla（無料）
FTPソフトのインストール
ここではFFFTP（windows）のインストールをご紹介します。
（１）ダウンロードしたインストーラをダブルクリックしてインストールする
（２）FFFTPを起動する
起動するとこのような画面が表示されます。
手前の画面をよく見ると左側と右側に2分割されていますね。
このうち左側のウィンドウには自分のPCの参照先フォルダーの中身が一覧表示されます。
右画面は契約したレンタルサーバーの公開データ用フォルダーを参照し表示させることになります。（設定を行っていないと何も表示されません）
次のセクションでお伝えいたします。
データを公開する
データを公開するにはインストールしたFTPソフトにレンタルサーバーのFTP接続情報を設定します。
ここではレンタルサーバーのFTPの設定方法を記述します。
【サクラインターネット】
サクラインターネットのスタンダードプランにて
（１）さくらインターネットの管理画面ににログインする
（２）「サービスの契約状況を確認する」をクリック
（３）「契約中のサービス一覧」よりコントロールパネルを開く
（４）管理画面の「サーバー情報 → サーバー情報」をクリックする
（５）「サーバー情報」に記載されている「FTP設定情報」を表示する
（６）FTPソフトを起動してレンタルサーバーの設定を行います。
■「ホストの設定名」には任意の管理名を入れます。（基本なんでもOK）
■「ホスト名（アドレス）」には「ホスト名」を入れます。
■「ユーザー名」には「ホスト名」を入れます。
■「パスワード/パスフレーズ」には「ホスト名」を入れます。
■「ローカルの初期フォルダー」は公開するホームページのデータ
■「ホストの初期フォルダー」はレンタルサーバーの一般公開用データの転送先フォルダーを指定します。
設定が完了したら必要なデータを左の画面（ローカル側）から右の画面（サーバー側）に転送して一般公開が完了となります。
転送がスムーズにいく場合がほとんどですが、時にはデータ転送の途中でエラーが起きる場合もあります。そんな時は改めて再転送し手上げれば大丈夫です。
ホームページの表示テスト
転送が完了した後は実際にホームページにアクセスしてきちんと表示されるかｍ
、表示された後はページのリンク切れはないかを全て確認します。
何らかのミスやエラーがあった場合は速やかにエラーがあったページのデータだけをFTPで再転送して再テストを行います。
2021年12月24日
Adobe PhotoshopとIllustratorの比較 その2【文字の基本設定編】
皆様こんにちは。
本日はAdobe photoshop Illutratorの『文字ツール』の使い方について解説いたします。
まずは双方のソフトを起動してそれぞれ、新画面を用意します。
【新規ドキュメントの情報は次の通り】
A4 縦方向 画像解像度 300dpi
今回は写真の横のスペースに文字を配置して調整する方法をご紹介いたします。
ちなみに写真の配置はphotoshop Illutratorともに「ファイルメニュー → 配置」から参照して任意の寸法にしています。
写真が配置できましたら文字ツールを選択します。
【画像参照】 赤〇が文字ツールです。「T」のアイコンは共通ですね~
文字の作成方法は２つのやり方があります。（Photoshop Illutrator共通）
事前準備として『ツール0から』文字ツールを選択したら『文字パネル』を表示して文字サイズをとりあえず12ptに設定しておきましょう。
Illutratorの文字パネルは『ウィンドウメニュー → 書式 → 文字』で開くことができます。
ショートカットは「Mac : コマンド + T」「Windows : ctrl + T」
Photoshopの文字パネルは『ウィンドウメニュー → 文字』で開くことができます。
ショートカットは基本的に割り当てられていません。
「Mac : コマンド + T」「Windows : ctrl + T」を押すと「自由変形」となります。これはこれでよく使いますが(^^♪）
では入力方法に話を戻します
1つ目は文字ツールを選択したら入力したい場所にカーソルを移動しワンクリックします。
カーソルが点滅したことを確認して文字の入力を開始します。
※あらかじめ文字をコピーしておきペーストも可能！
2つ目は文字ツールを選択したら入力したい場所にカーソルを移動しドラックを行って文字の表示範囲を作成して入力を開始します。この時にドラッグして作成された矩形のエリアを『 テキストエリア』と呼びます。
今回は下記のような文を挿入し見出し部分（【みかん大福】）とリード文（ダミー文字）を調整していきます。
【みかん大福】
みかんの甘酸っぱい味とお餅がコラボした和菓子
『みかん大福』が大人気です！
みかんの甘酸っぱい味とお餅がコラボした和菓子
『みかん大福』が大人気です！
みかんの甘酸っぱい味とお餅がコラボした和菓子
『みかん大福』が大人気です！
では文字を入力します。
本日はAdobe photoshop Illutratorの『文字ツール』の使い方について解説いたします。
まずは双方のソフトを起動してそれぞれ、新画面を用意します。
【新規ドキュメントの情報は次の通り】
A4 縦方向 画像解像度 300dpi
今回は写真の横のスペースに文字を配置して調整する方法をご紹介いたします。
ちなみに写真の配置はphotoshop Illutratorともに「ファイルメニュー → 配置」から参照して任意の寸法にしています。
写真が配置できましたら文字ツールを選択します。
【画像参照】 赤〇が文字ツールです。「T」のアイコンは共通ですね~
文字の作成方法は２つのやり方があります。（Photoshop Illutrator共通）
事前準備として『ツール0から』文字ツールを選択したら『文字パネル』を表示して文字サイズをとりあえず12ptに設定しておきましょう。
Illutrator
Illutratorの文字パネルは『ウィンドウメニュー → 書式 → 文字』で開くことができます。
ショートカットは「Mac : コマンド + T」「Windows : ctrl + T」
Photoshop
Photoshopの文字パネルは『ウィンドウメニュー → 文字』で開くことができます。
ショートカットは基本的に割り当てられていません。
「Mac : コマンド + T」「Windows : ctrl + T」を押すと「自由変形」となります。これはこれでよく使いますが(^^♪）
では入力方法に話を戻します
１・【クリックして入力を始める】
1つ目は文字ツールを選択したら入力したい場所にカーソルを移動しワンクリックします。
カーソルが点滅したことを確認して文字の入力を開始します。
※あらかじめ文字をコピーしておきペーストも可能！
２・【テキストボックスを作成して入力を始める】
2つ目は文字ツールを選択したら入力したい場所にカーソルを移動しドラックを行って文字の表示範囲を作成して入力を開始します。この時にドラッグして作成された矩形のエリアを『 テキストエリア』と呼びます。
Illutratorのテキストエリア
Illutratorのテキストエリア
今回は下記のような文を挿入し見出し部分（【みかん大福】）とリード文（ダミー文字）を調整していきます。
【みかん大福】
みかんの甘酸っぱい味とお餅がコラボした和菓子
『みかん大福』が大人気です！
みかんの甘酸っぱい味とお餅がコラボした和菓子
『みかん大福』が大人気です！
みかんの甘酸っぱい味とお餅がコラボした和菓子
『みかん大福』が大人気です！
では文字を入力します。
上が Illutratorのテキストエリアです。どちらも「小塚ゴシックPro r 12pt」ですが、Illutratorの文字の方が太く見えますね~
『みかん大福』部分を見出しとしてスタイリングする
ここで『段落』パネルも登場させましょう。
Illutratorの文字パネルは『ウィンドウメニュー → 書式 → 段落』で開くことができます。Photoshopの文字パネルは『ウィンドウメニュー → 段落』で開くことができます。
段落パネルを開く理由は見出しとリード文の間をあけるためです。
Illutrator Photoshopともにテキストツールを使って『みかん大福』部分をドラッグします。
まず文字パネルでは文字サイズを18pt 文字の太さをB 行送りを14ptに設定しました。『みかん大福』の文字の下の余白をあける方法はいくつかの方法があり、この方法hはそのうちの1つです。
段落パネルでは『段落後のアキ』を14ptに設定しました。
リード文については特に行間（行送り）の調整をよく使いますが、どの程度あけるかは、デザインの方向性によって様々です。一般的には文字サイズの1.5倍から2倍が妥当です。
10ptで設定した場合1.75倍にしたい場合は17.5ptということいなります。
今回は文字の入力についてIllutratorとPhotoshopを見比べながら基本をお届けいたしました。
参考になれば幸いです。
ご覧いただきましてありがとうございました。
2021年03月30日
話題書紹介 僕が子供のころ、ほしかった親になる。幡野広志
余命宣告された父親が幼い息子さんに考えを残すためにかかれた名著
ブログで話題になり出会いました。
以下印象に残った部分を要約致します。
優しい虐待
褒めることで自己肯定感
ヤな人から逃げる方法は、自分に自信を持つこと
嫌な人は徹底的に逃げろ
大切な相手は能力ではなく、その人の優しさで選ぶのがいい。
面白い人は自分がしっかりあって、人の目をきにしない
夢を叶う為にお金と仕事というツールがある
職業を夢にしてもあまり意味がない
お金と仕事というツールを得るために必要なのが学歴や職業でそれ以上の意味はない
夢とお金と仕事の関係
やりたいことがわからないというのならば、考えていないで試してごらん
何か和失ったときに残るのは家族しかない
幸せが何かは自分で決めていいと、息子に伝えておきたい
嫌な人がまた嫌な人をつくってしまう。
ブログで話題になり出会いました。
以下印象に残った部分を要約致します。
優しい虐待
褒めることで自己肯定感
ヤな人から逃げる方法は、自分に自信を持つこと
嫌な人は徹底的に逃げろ
大切な相手は能力ではなく、その人の優しさで選ぶのがいい。
面白い人は自分がしっかりあって、人の目をきにしない
夢を叶う為にお金と仕事というツールがある
職業を夢にしてもあまり意味がない
お金と仕事というツールを得るために必要なのが学歴や職業でそれ以上の意味はない
夢とお金と仕事の関係
やりたいことがわからないというのならば、考えていないで試してごらん
何か和失ったときに残るのは家族しかない
幸せが何かは自分で決めていいと、息子に伝えておきたい
嫌な人がまた嫌な人をつくってしまう。
2021年03月20日
話題書紹介 ある日突然40億の借金を背負うそれでも人生は何とかなる。湯澤剛氏（PHP研究所）
あきらめるのはまだはやい。 から始まる冒頭文 前半部分は経緯と状況の説明です。私は再建策に注目しました。（33店舗の飲食店事業継承）
初めに 最悪を想定して覚悟して紙に書きだす
次の段階?@ 5年限定 1837日計画
?A当面策と根本策を並行して処理
今の現状を脱するための仕組みづくりのより緊急事態も必ず減る
根本策と当面策の会議場所も変える
?B一点突破 成功モデル店をつくる（限られた資源を集中させる）
新装開店するが低迷
原因?客層がぶれる?店長との意思共有できない?自分も成功するとは信じていない
?ここが弱い、ここが足りない ここが必要
女性をターゲットにしたが1元客
結論 中小企業は弱みなど弱みなど自分にないものに目を向けるのでなく強みや既に持っているものに集中すべき、弱い者こそ自分の強みや長所を伸ばしていくことが重要
解決策 客層を中高年に絞る トレードオフ メインの客層が喜びそうな施策 自店のポジショニングの決定
メンタル 追い詰められた状況で心が弱まっている時期に意思決定する場合には その動機を自問自答するべきである気を付けなくてはならないのはその意思決定をする同期は何かという事を見極めること
厳しい波にもまれているとき、それが本当は自分都合の逃げやごまかしときづかず、意思決定してしまうことがある。目の前の問題から逃げたい気持ちや問題から目をそらしたいという動機で意思決定するとたいてい上手く行かない結果となる。
その他後半部は返済過程とトラブルが掲載
主な施策
イベント 29日 肉の日 27日ツナの日 3月8日サバの日 POP
6店舗に縮小
紹介参考著書
きけわだつみのこえ より自分の境遇を照らし合わせる
経営理念について
何のために経営するのか経営理念：人が輝き 地域を照らし 幸せの和を拡げます
中小企業は大企業になれなかった会社ではない 社会の一隅を照らすことが中小企業の役割
地域密着、真似のできない小回り、技術力
第3章 5年だけの勝負
初めに 最悪を想定して覚悟して紙に書きだす
次の段階?@ 5年限定 1837日計画
?A当面策と根本策を並行して処理
今の現状を脱するための仕組みづくりのより緊急事態も必ず減る
根本策と当面策の会議場所も変える
?B一点突破 成功モデル店をつくる（限られた資源を集中させる）
新装開店するが低迷
原因?客層がぶれる?店長との意思共有できない?自分も成功するとは信じていない
?ここが弱い、ここが足りない ここが必要
女性をターゲットにしたが1元客
結論 中小企業は弱みなど弱みなど自分にないものに目を向けるのでなく強みや既に持っているものに集中すべき、弱い者こそ自分の強みや長所を伸ばしていくことが重要
解決策 客層を中高年に絞る トレードオフ メインの客層が喜びそうな施策 自店のポジショニングの決定
メンタル 追い詰められた状況で心が弱まっている時期に意思決定する場合には その動機を自問自答するべきである気を付けなくてはならないのはその意思決定をする同期は何かという事を見極めること
厳しい波にもまれているとき、それが本当は自分都合の逃げやごまかしときづかず、意思決定してしまうことがある。目の前の問題から逃げたい気持ちや問題から目をそらしたいという動機で意思決定するとたいてい上手く行かない結果となる。
その他後半部は返済過程とトラブルが掲載
主な施策
イベント 29日 肉の日 27日ツナの日 3月8日サバの日 POP
6店舗に縮小
紹介参考著書
きけわだつみのこえ より自分の境遇を照らし合わせる
経営理念について
何のために経営するのか経営理念：人が輝き 地域を照らし 幸せの和を拡げます
中小企業は大企業になれなかった会社ではない 社会の一隅を照らすことが中小企業の役割
地域密着、真似のできない小回り、技術力
2021年03月14日
読書感想 ぼくたちが選べなかったことを、選びなおすために。 幡野広志様著
作者様は余命3年宣告をうけ、様々の経験、体験の中から理解しがたい角度から筆耕なさっている。
特に親子関係・家族・親戚・知人問題 尊厳・安楽大変興味深い本音の作品です。
安楽は大きく3つに分かれている
積極的安楽 医師が自らの手で薬を投与する オランダ・ベルギー
自 ほう助 医師から与えられた薬を患者自らが自分に投与する スイス
尊厳 延命措置を控えたり、やめる行為 日本
上記とは別にセデーション（鎮痛） 緩和ケア
日本の画期的な判例 安楽 に必要な4項目
?@ 耐えがたい身体的な苦痛がある
?A がさけられず、 期が迫っている
?B 苦痛を緩和・除去するための方法を尽くし、代替手段がない
?C 患者本人が安楽 を望む意思を明らかにしている
ＮＡＳＡ
直径家族
拡大家族
あるカウンセラーの方によると、
不登校や引きこもり、自 行為などにはしる子供たちはそこ家族構成に曲型的
過保護で過干渉な母親と仕事中毒で家族に無関心な父親、聞きわけが良くて、てのかからないいい子
3点揃うとスパイラルに入る可能性がある
ぼくが子供の頃ほしかった親になる。 PHP研究所 2018年8月
特に親子関係・家族・親戚・知人問題 尊厳・安楽大変興味深い本音の作品です。
安楽は大きく3つに分かれている
積極的安楽 医師が自らの手で薬を投与する オランダ・ベルギー
自 ほう助 医師から与えられた薬を患者自らが自分に投与する スイス
尊厳 延命措置を控えたり、やめる行為 日本
上記とは別にセデーション（鎮痛） 緩和ケア
日本の画期的な判例 安楽 に必要な4項目
?@ 耐えがたい身体的な苦痛がある
?A がさけられず、 期が迫っている
?B 苦痛を緩和・除去するための方法を尽くし、代替手段がない
?C 患者本人が安楽 を望む意思を明らかにしている
ＮＡＳＡ
直径家族
拡大家族
あるカウンセラーの方によると、
不登校や引きこもり、自 行為などにはしる子供たちはそこ家族構成に曲型的
過保護で過干渉な母親と仕事中毒で家族に無関心な父親、聞きわけが良くて、てのかからないいい子
3点揃うとスパイラルに入る可能性がある
ぼくが子供の頃ほしかった親になる。 PHP研究所 2018年8月
2020年11月20日
一歳のお祝いに【一升米】が人気沸騰中です！
こんにちは。巣鴨元祖塩大福みずのです。
本日は、弊店で人気上昇中の商品をご紹介させていただきます。
赤ちゃんの一歳のお祝いの際に一升餅を背負わせるのが一般的ですが、最近は 一升餅の代わりにお米【 一升米】を背負わせる、お祝い方法が人気です。
もちろん伝統的な一升餅も根強い人気がございますが、お祝いの後お餅を切る手間がかかってしまいます。
そこで登場したのが【 一升米】です。
お米でしたら、着る手間がなく、保存も出来ますので、食べたいときに食べれるのが人気の理由ではないでしょうか。
お客様の中には、お祝いの後お餅も食べたいというご要望もございますので、お餅とお米のハーフ&ハーフ商品もございます。
一歳のお祝いで、一升餅をご検討のご家族様！
巣鴨みずのにお任せください！
一升餅（約1.8kg）お祝いセット
一升米（約1.8kg）お祝いセット
一升餅（約900g）と一升米（約900g）ミックスお祝いセット
お祝いの際に赤ちゃんと楽しい思い出を作ることができる「選びとり」をはじめとするアイテムも複数ご用意いたしました。
また一升米 一升餅を背負う際に利用する風呂敷もセットに含まれております。
有料オプションと致しまして風呂敷の代わりに利用する【リュック型巾着】や【わらじ】が選択できるセットもございまして商品ラインナップの中からお選びいただけます。
みずのの一升餅・一升米お祝いセットで楽しく素敵なお誕生日になること間違いなしです！
ご購入を検討されているお客様、是非弊店が運営しております各ショップイングサイトにアクセスしてください。
＊ 『楽天市場』>>
なお一升餅 一升米のご検討の際にご不明な点がございましたらお気軽にお電話でご相談ください。
電話番号 03-3910-4652
何卒宜しくお願い申し上げます。
みずの オンラインショップ担当
2020年01月31日
PhotoshopテクNo2『レイヤーマスクを使った写真レイアウト」
前回に引き続きPhotoshopネタです。
今回は『レイヤーマスク』の使い方をご紹介いたします。
簡単に言いますとレイヤーマスクは『選択範囲を使って写真を切り抜く機能』という事です。
まずはレイヤーマスクを使い結果を出す一連の流れを先にご紹介いたします。
今回は『レイヤーマスク』の使い方をご紹介いたします。
簡単に言いますとレイヤーマスクは『選択範囲を使って写真を切り抜く機能』という事です。
まずはレイヤーマスクを使い結果を出す一連の流れを先にご紹介いたします。
（１）写真を開く
適当な写真を1枚、Photoshopで開きます。
（２）選択範囲ツールを選択する
ツールから【長方形選択範囲ツール】を選択します。
（３）選択範囲を作る
写真の上にマウスポインタを移動させドラッグすることで選択範囲が作成されます。今回はケーキ部分を切り抜きたいので図のように作成しました。
選択範囲を移動したいとき
選択範囲の移動は、必ず何らかの『選択範囲ツール』がアクティブ（ツールが選択されている状態）になっていることが条件です。移動はドラッグによる移動とキーボード『矢印キー』による移動ができます。
選択範囲の解除
『選択範囲ツール』がアクティブの状態で選択範囲の外側でクリックする。
または『Ctrl + クリック』を実行します。
（４）レイヤーマスクを適用する
レイヤーパネルを表示して【レイヤーマスクを追加】ボタンをクリックしましょう。実行結果は御覧の通り。選択範囲のエリアに写真が表示され選択範囲の外側が透明になりました。（透明なマスク）
レイヤーマスクの実態についてご説明いたしますネ
（５）背景を直す
背景が透明に抜けてしまったのでレイヤーのべた塗機能で白に塗りつぶしておきましょう。
以上でマスクによる切り抜き結果が出来ました。
これだけですとレイヤーマスクの実態が分からないと思いますのでマスクを少し操作してみようとおもいます。
マスクを一時的に外す
レイヤーの【マスクサムネイル】を『Shitキー + クリック』することでマスクが一時的に無効（非表示）になりますので、裏に隠れている写真が表示されます。
マスクの実態を表示する
レイヤーの【マスクサムネイル】を『Altキー + クリック』することでマスク実体が表表示されます。
レイヤーマスクの実態は、簡単に言うとアルファチャンネルと同じように256階調のグレースケールで透明度・不透明度を表現され定義れた領域です。
例えば図のようにブラスを使ってマスクの中を塗ったり消したりしたらどうなるでしょうか。レイヤーマスク【マスクサムネイル】を『Altキー + クリック』して画面を戻してみましょう
結果はずの通りです。黒で塗りつぶされている領域は透明になり、完全な白（#FFFFFF）の部分は写真がはっきり表示されていますね。
いかがだったでしょうか。いろんな選択範囲を作成してマスクを適用してみてください
2020年01月28日
Photoshopテク『手書きの筆文字を切り抜く アルファチャンネル』
こんにちは♪
今日は、Photoshopのちょいテクについて書きたいと思います。
お題は習字のような紙に描いた文字をデジタル化する方法です。
「スキャンして使えばいいんじゃないの？」というご意見もあると思いますが、スマホで筆文字を撮影したりスキャンしたデータってのは文字の周囲の白い部分（用紙の余白エリア）も残っているため、例えば写真の上に重ねたらそのまんまの四角いデータという無残な状態です。
目的は文字部分だけを取り出すことができれば、どんな状況でも使用できますよね。
すなわち必要な部分（文字だけ）だけを抽出することが出来れば目的達成という事ですね。
そこで登場するのがPhotoshopの 『アルファチャンネル』『という機能です！
アルファチャンネルは何かを説明します。
難しいことは、書きません。
端的に言うと、『選択範囲を保存しておく機能』です！
文字の形状を選択範囲として保存できてしまうという事です。
Ilustratorの機能に「トレース機能」というものがあります。
これはスキャンデータのような、いわゆる「ビットマップデータ」をアウトライン化（ベクトル化）して形状を抽出する機能です。
優れた機能ではありますが欠点があります。
例えば筆文字や水彩筆で描いた文字というのは「滲み」がありますよね。
この微妙なグラデーションを表現することは出来ません。（妥協すればそれはそれで笑）
「写真（高精細）」という設定がありますが、にじみが省略され形状がオリジナルから離れてしまいます。
更に高精細アウトラインは、パスやアンカーポイントが膨大に生成されるため、重いし、動かないし（汗）
そこでPhotoshopのアルファチャンネルの出番です。
では実際に下記の筆文字を使って背景を透過し文字部分だけ抜く方法をお伝えいたします。
スキャンすると光り具合によって影が入ったりしますが、これは後で処理しますが、いまはこのまま。
とりあえず、『レイヤーパネル』と『チャンネルパネル』は、見える場所に出しておきましょう♪
『Ctrl + A』を押してすべて選択します。
続けて『Ctrl + C』を押してコピーします。
『チャンネルパネル』を表示して『新規チャンネル』ボタンをクリックしましょう。
画面が真っ暗になります。
そこに、先ほどコピーしておいた筆文字画像をペースト『Ctrl + V』しましょう。
アルファチャンネルにペーストした画像が上記のサンプルようにホワイトのエリアにノイズが入っていたり、文字部分のブラックエリアにもノイズが入っているような場合は、色調補正を使って奇麗に処理する必要があります。しっかり消しておかないと、文字の周囲にノイズの形状をした選択範囲が現れてしまいます。
今回のサンプルは割と明るめのグラデーションノイズだけなので『トーンカーブ』を使って消去できそうです。
まず、文字の上に選択範囲が出来てしまっている場合は、【Ctrl + D】で、いったん選択範囲を解除しておきましょう。
それでは、『トーンカーブ』を使います。
【イメージメニュー】→【色調補正】→【トーンカーブ】を選択します。
下記の図を参考に画像の変化を確認しながらトーンカーブを適用してみましょう。
画面を通常の状態に戻します。
【重要】通常は『チャンネル』パネルの『RGB』チャンネルがアクティブ（選択されている状態）になっています。
ところがアルファチャンネルを作成した直後は、『RGB』チャンネルが非アクティブになっているため、レイヤー上の画像が表示されていません。（一般的な作業が出来ません。）そこで、通常の画面に戻すためには『RGB』チャンネルをクリックしアクティブにすることで、画面がレイヤーに切り替わります。
下地を塗ります。
『レイヤー』パネルの『べた塗り』をクリックしホワイト（#FFFFFF）で画面を白く塗りつぶします。
作成したアルファチャンネルを選択範囲として画面に読み込みます。
『選択範囲』メニュー→『選択範囲を読み込む』を選択します。
『選択範囲を読み込む』ダイアログ画面が表示されたら『チャンネル』から『アルファチャンネル 1』を選択して『OK』をクリックします。
『反転』にチェックを入れて『ok』をクリックします。
文字の選択範囲に任意のカラーで塗りつぶせば完成です。
塗りつぶしは『レイヤーパネル』の『べた塗り』がおすすめです。
下記の図を参考に塗りつぶしを実行してください。
今日は、Photoshopのちょいテクについて書きたいと思います。
お題は習字のような紙に描いた文字をデジタル化する方法です。
「スキャンして使えばいいんじゃないの？」というご意見もあると思いますが、スマホで筆文字を撮影したりスキャンしたデータってのは文字の周囲の白い部分（用紙の余白エリア）も残っているため、例えば写真の上に重ねたらそのまんまの四角いデータという無残な状態です。
目的は文字部分だけを取り出すことができれば、どんな状況でも使用できますよね。
すなわち必要な部分（文字だけ）だけを抽出することが出来れば目的達成という事ですね。
そこで登場するのがPhotoshopの 『アルファチャンネル』『という機能です！
アルファチャンネルは何かを説明します。
難しいことは、書きません。
端的に言うと、『選択範囲を保存しておく機能』です！
文字の形状を選択範囲として保存できてしまうという事です。
Ilustratorの機能に「トレース機能」というものがあります。
これはスキャンデータのような、いわゆる「ビットマップデータ」をアウトライン化（ベクトル化）して形状を抽出する機能です。
優れた機能ではありますが欠点があります。
例えば筆文字や水彩筆で描いた文字というのは「滲み」がありますよね。
この微妙なグラデーションを表現することは出来ません。（妥協すればそれはそれで笑）
「写真（高精細）」という設定がありますが、にじみが省略され形状がオリジナルから離れてしまいます。
更に高精細アウトラインは、パスやアンカーポイントが膨大に生成されるため、重いし、動かないし（汗）
そこでPhotoshopのアルファチャンネルの出番です。
では実際に下記の筆文字を使って背景を透過し文字部分だけ抜く方法をお伝えいたします。
（１）筆文字をPhotoshopで開く
スキャンすると光り具合によって影が入ったりしますが、これは後で処理しますが、いまはこのまま。
とりあえず、『レイヤーパネル』と『チャンネルパネル』は、見える場所に出しておきましょう♪
（２）筆文字画像全体をコピーする
『Ctrl + A』を押してすべて選択します。
続けて『Ctrl + C』を押してコピーします。
（３）新規アルファチャンネルを作成する
『チャンネルパネル』を表示して『新規チャンネル』ボタンをクリックしましょう。
画面が真っ暗になります。
（４）アルファチャンネルに画像をペーストする
そこに、先ほどコピーしておいた筆文字画像をペースト『Ctrl + V』しましょう。
（５）筆文字のノイズを消去し明確な状態にする
アルファチャンネルにペーストした画像が上記のサンプルようにホワイトのエリアにノイズが入っていたり、文字部分のブラックエリアにもノイズが入っているような場合は、色調補正を使って奇麗に処理する必要があります。しっかり消しておかないと、文字の周囲にノイズの形状をした選択範囲が現れてしまいます。
今回のサンプルは割と明るめのグラデーションノイズだけなので『トーンカーブ』を使って消去できそうです。
まず、文字の上に選択範囲が出来てしまっている場合は、【Ctrl + D】で、いったん選択範囲を解除しておきましょう。
それでは、『トーンカーブ』を使います。
【イメージメニュー】→【色調補正】→【トーンカーブ】を選択します。
下記の図を参考に画像の変化を確認しながらトーンカーブを適用してみましょう。
（６）チャンネルパネルをRGBに戻ず
画面を通常の状態に戻します。
【重要】通常は『チャンネル』パネルの『RGB』チャンネルがアクティブ（選択されている状態）になっています。
ところがアルファチャンネルを作成した直後は、『RGB』チャンネルが非アクティブになっているため、レイヤー上の画像が表示されていません。（一般的な作業が出来ません。）そこで、通常の画面に戻すためには『RGB』チャンネルをクリックしアクティブにすることで、画面がレイヤーに切り替わります。
（７）画面を白く塗りつぶす
下地を塗ります。
『レイヤー』パネルの『べた塗り』をクリックしホワイト（#FFFFFF）で画面を白く塗りつぶします。
（８）文字の選択範囲を読み込む
作成したアルファチャンネルを選択範囲として画面に読み込みます。
『選択範囲』メニュー→『選択範囲を読み込む』を選択します。
『選択範囲を読み込む』ダイアログ画面が表示されたら『チャンネル』から『アルファチャンネル 1』を選択して『OK』をクリックします。
『反転』にチェックを入れて『ok』をクリックします。
（９）色を塗りつぶす
文字の選択範囲に任意のカラーで塗りつぶせば完成です。
塗りつぶしは『レイヤーパネル』の『べた塗り』がおすすめです。
下記の図を参考に塗りつぶしを実行してください。
タグ： Photoshop
2019年12月25日
本日、テレビ東京『よじこじ』【年末年始オススメ！そば食って餅スペシャル】にて巣鴨みずのが紹介されます。
テレビ東京の人気番組『 よじごじ
』午後3時45分放送。
年末のスペシャル番組として 【 年末年始オススメ！そば食って餅スペシャル】 が放送されるそうです。
内容は
「ミシュランガイド掲載のそば名店に教わる本当に美味しい年越し蕎麦の作り方
▽ 巣鴨の人気和菓子店では日本各地のお餅が登場
▽湯島の老舗甘味処ではふわふわ雑煮を味わう！ 」
------よじごじwebサイトより抜粋
中でも 巣鴨地蔵通りにある 元祖塩大福の店『みずの』 にお笑いタレントの『 あぶちゃん』こと『 虻川美穂子さん』が取材に来てお店のご紹介をするそうです。（＾＾）/
年末のスペシャル番組として 【 年末年始オススメ！そば食って餅スペシャル】 が放送されるそうです。
内容は
「ミシュランガイド掲載のそば名店に教わる本当に美味しい年越し蕎麦の作り方
▽ 巣鴨の人気和菓子店では日本各地のお餅が登場
▽湯島の老舗甘味処ではふわふわ雑煮を味わう！ 」
------よじごじwebサイトより抜粋
中でも 巣鴨地蔵通りにある 元祖塩大福の店『みずの』 にお笑いタレントの『 あぶちゃん』こと『 虻川美穂子さん』が取材に来てお店のご紹介をするそうです。（＾＾）/
