IT 1NOTE パソコンスクール

岡山市北区・静かな住宅街のパソコン教室。仕事、日常生活でパソコン活用術。 スマホやタブレット~資格取得まで。IT1NOTE(アイティーワンノート) パソコンスクールつしま校

TEL.086-252-7585

〒700-0088 岡山市北区津島笹が瀬10-16

ホームページ作成

MacパソコンでWebサイト作成

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

当教室は、自営業をされてる生徒さんも多く、

Windowsだけでなく、Macパソコンを持たれていたりと、

お仕事関連や、個人的に趣味で使用されているなど目的も様々です。

 

その中で、Macパソコンで多い実践レッスンは、

MacパソコンでWebサイト作成と更新の実践レッスンです。

 

 

昔に比べて業者に頼まなくても、自分でWebサイトを作成できるので、

自分好みのレイアウトや、形を変更出来るので、

好評をいただいてる実践レッスンです。。

 

一から作成する楽しみもあり、基礎、応用的なスキルも幅広く身に付けれるので、

初心者さんでも、自分のWebサイトを作りたい、

という方にもおすすめの実践講座です。

 

 

お問い合わせ

無料体験&カウンセリング予約

 

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

 

完ぺきにしない事がHP作成ポイント

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご店長
教室ブログTOP

 

ホームページやブログを代表する
SNS作成の生徒さんが増えて来ました。

ここ数か月、HPやブログ作成の
お手伝いをして気付いた事があります。

皆様、勢い、ホームページ作成を
完璧にしたいと思って作成するのですが・・・。

実は、最初に完璧に作成するホームページより
中途半端に作成したホームページの方がより良く、
成長して行き
長続きしているのです。

 

この理由を教室で調べたら
面白い事がわかってきました(*^^)v

自称、完璧なホームページって
業者さん任せが非常に多い。

考え方としては、

「完ぺきなんだから、更新しなくていいんでしょ。」

「ブログ?そんなのめんどくせーな。」

こういう考えになって行くようです・・・。

一方、中途半端に作成して
出発したホームページは・・・。

「まだこういう事を掲載したい」

「来月のキャンペーンを掲載しなくては?」

「プロ作成のホームページと何が足りないんだ?」

「ブログ更新のネタがない・・・。」

などなど、
常に成長しようとする姿勢が見られます。

やがてそれは、
ホームページ自体の問題点はもちろんなのですが
会社自体の問題点や方針が見えてくるようになります。

 

見ている方も、どうでしょうか?

最初から完ぺきなホームページよりも
どんどんバージョンアップして成長していく
ホームページの方が
目が離せなくなり
アクセスアップになって行きます。

 

 

そこに気付くことが早くできる事が、
自分でホームページ作成をする
最大のメリットなのかもしれませんね。

安い、高いだけが、決め手ではないのです。

ある意味、
完ぺきにしない事がHP作成ポイントなのかも。

 

 

この続きは教室でお会いしましょう♪

無料体験&無料カウンセリングでお待ちしております。

086-252-7585

IT1NOTEパソコンスクール Webサイト

 

 

ランキング参加してます。
ポチッとしてみて下さいね。宜しくです。

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

ホームページの画面は両方確認すること

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

教室の実践レッスンの内の一つに、

ホームページ作成レッスンがあります。

自営業の方や趣味系の生徒さんには好評のレッスンです。

 

今ではパソコンだけでなく、スマートフォンでHP

見る人も多いので、大きなPCのモニタ画面と、

スマートフォンの小さい画面と比べると見え方も違います。

 

実際にホームページを作成してみて、生徒さんが持っている

スマートフォンの画面を見てチェックしたりと、

そこからまた直したり確認しながら進めています。

 

 

このレッスンでは一から作成する場合と、

生徒さんが既にホームページを持っていて編集するなど、

みんな使用される題材も違いますので受講されるレッスン内容も様々です。

 

HPなどもご相談を承っておりますので、

ぜひお気軽にお越し下さいませ。

 

 

================================

※お問い合わせ、無料体験予約は、
電話もしくは、ホームページからお願い致します。

IT1NOTE パソコンスクールつしま校
(アイティーワンノート)

お問い合わせ

無料体験&カウンセリング予約

☎︎ 086-252-7585

 

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

 

WordPress新エディターを旧エディターに変更

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座 (質問対話形式実践型個別指導)

教室のホームページはWordPress使用しているのですが・・・。

数日前に5.0に更新され非常に使いにくい・・・。

新型エディターがまだ馴染まない方は多いのでは?

教室の生徒さんも、さっそくご質問が出てきました。

 

どうにかならぬか?晴れの国おかやま(-_-;)

そこでしばらくの間

旧型エディターで使用できるプラグインを見つけました。

※Classic Editor (WordPress)

 

今のところ、教室ブログが

スムーズに旧型のまま使用できています(*^^)v

 

ただし、まだ私も

このプラグインの使用は現在進行形で未知の世界。

ご使用は自己責任でお願い致します(*^^)v(現状不具合なし)

 

 

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

Webサイトは様々なデバイス対応で作成すること

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

HTML/CSSの基礎〜応用まで実践レッスンを終えた生徒様は、

次は自分用のWebページ作成に入ります。

 

今では様々なサイズのデバイスが登場していますので、

PCとタブレット、スマホと異なる画面サイズに合わせて、

レイアウトの切り替えが出来るようにすることが必要です。

 

どのデバイスで見ても、見栄えの良いレイアウトを、

全てに対応しないといけません。

 

 

使用するユーザーが、”見やすい、使いやすい”ことを意識し、

最初の段階で、後々の過程を見越しながらWebページを

一つ一つ構想を練りながら作成して行きます。

 

また後々の制作工数を出来るだけ少なく、手間やミスを減らすには、

効率よく構文を作成しないといけません。

 

一つ形が出来れば、後は一部の管理で活用することが出来ますので、

まず最初は一からWebサイトを作れる様に、実践レッスンで習って行きます。

 

 

 

⭐️教室からのお知らせ⭐️

この秋、スマホ・タブレット・PCスキルアップにぴったりな、

ご新規の方にお得なキャンペーンを開始いたしました!

詳しい内容はこちら↓

スマホ・タブレット・PC初心者さんキャンペーン

期間は11月4日まで受付中です!

キャンペーンはご復帰の生徒様にも適応しております。

 

パソコン初心者の方、シニアの方、大歓迎!

もしご検討されてる方は、見学、無料体験もございますので、

どうぞお気軽にお問い合わせ下さいませ。

* 無料体験&無料カウンセリングでお待ちしております。

 

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HTML/CSSのタグ入力にはタイピングは必須

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

HTML/CSS講座を受講されている生徒様がいらっしゃいます。

 

様々な内容のタグ入力が必要なのですが、まだ慣れていない時に、

全てタグをコピペで済ましてしまうと、どうなるか?

 

コピペだけで入力をせずに済ましてしまうと、

タグの内容が覚えられないという事をよくご存知のようで、

しっかりと入力をされておりました。

 

もちろん、他の講座でも同じです。

自分で一から作成できる事、これがとても重要です。

 

タイピング

 

完成までの過程まで、その都度一つ一つ確認をする作業が必要です。

 

そして完成したWebサイトを修正・変更する時、HTMLやCSSを見た時に、

どこを修正するか?もしくは間違っている箇所はどこか?

そこを見付けるには、タグの名前や、内容の意味を

覚えていないといけません。

 

まずはひたすら文字入力、ここで役立つのがタイピングです。

ホームポジションをしっかり身に付けておけば、

手元を見なくても早く入力が出来て、またミスも少なくなります。

 

プログラミングも一緒で、HTML/CSSも、

まずはタイピングを習得することは必須です。

 

 

⭐️教室からのお知らせ⭐️

この秋、スマホ・タブレット・PCスキルアップにぴったりな、

ご新規の方にお得なキャンペーンを開始いたしました!

詳しい内容はこちら↓

スマホ・タブレット・PC初心者さんキャンペーン

期間は11月4日まで受付中です!

キャンペーンはご復帰の生徒様にも適応しております。

 

パソコン初心者の方、シニアの方、大歓迎!

もしご検討されてる方は、見学、無料体験もございますので、

どうぞお気軽にお問い合わせ下さいませ。

* 無料体験&無料カウンセリングでお待ちしております。

 

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

自分でHP作成をしたい、学生さんから自営業の方まで

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

教室で習いたいご要望の中で、「自分でHP作成をしたい」という

ご要望もございます。

※HPでも通じるのですが、Webサイトが正しい意味になります。

 

HPに興味がある、自分でHPを作ってみたい、自分のお店のHPを

新たにリニューアルをしたい等、年齢問わず、学生さんから社会人、

シニアの方までと、ブログと合わせてHP作成もというお声もございます。

 

タイピング

 

学生の生徒様は、プログラミング言語でHP作成をしております。

 

また自営業でお店を持たれてる生徒様は、

お店のHP作成の内容だけでなく、業務の書類作成や、データ管理、

セキュリティ関連など、幅広い内容を習われております。

 

それぞれHPでもご要望によってレッスンの内容や進め方が違います。

ご興味のある方はぜひご相談下さいませ。

 

 

パソコン初心者の方、シニアの方、大歓迎!

もしご検討されてる方は、見学、無料体験もございますので、

どうぞお気軽にお問い合わせ下さいませ。

* 無料体験&無料カウンセリングでお待ちしております。

 

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No10 brタグって何?

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

8. HP作成No8 Webページ写真の準備

9. HP作成No9 Webページに写真

 

スキマ時間講座も10回目になりました。
このページから入った方は、
上記1~9までの工程を順を追って作業確認して下さい。
決して難しいことはしていないはずです。

さて、今回の目的は文字の改行についてです。

さっそく始めます。

デスクトップ → 2016tabiフォルダー → index.html

これをメモ帳で開きます。(下図参照)

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

次のような文章を写真挿入タグの下に追加入力します。

「2016年11月17日(木) 晴れた中のサイクリングは最高!」

下図赤丸内を参照

20161117br%e3%82%bf%e3%82%b03

入力できたら保存します。

ファイル → 上書き保存

完成したindex.htmlをブラウザ表示で確認します。

①index.htmlの上で右クリック。
②プログラムから開く → InternetExplorer

下図のようにIEのブラウザで表示確認ができます。

20161117br%e3%82%bf%e3%82%b01

よくみると、
「2016年11月17日(木)晴れた中のサイクリングは最高!」

が写真横に。

一つ改行できたら、下に下がるのでは?と発想してみます。

そこで、brタグ(強制改行)を文の前に入力します。

<br>
2016年11月17日(木)晴れた中のサイクリングは最高!

 

20161117br%e3%82%bf%e3%82%b04

ファイル → 上書き保存

index.htmlファイルをブラウザ表示で開いて確認。

①index.htmlの上で右クリック。
②プログラムから開く → EnternetExplorer

20161117br%e3%82%bf%e3%82%b02

文字が下に落ちてくれました。
brタグは強制改行してくれるのです。

でも少し窮屈にみえます。
そこで、もう一度brタグを入力してみます。
思い切って2つ追加、計3つになりました。
3行分改行するイメージです。

<br>
<br>
<br>
2016年11月17日(木)晴れた中のサイクリングは最高!

下図参照

20161117br%e3%82%bf%e3%82%b05

ファイル → 上書き保存

index.htmlファイルをブラウザ表示で開いて確認。

①index.htmlの上で右クリック。
②プログラムから開く → EnternetExplorer

20161117br%e3%82%bf%e3%82%b06

すると・・・。

どうでしょうか?上手く文字が配置された感じです。

brタグ(強制改行)は
<>開始タグ ~ </>終了タグで1セットのタグと違い単独で使えます。

終了タグがないのです。

<br>とよく似ているのに<br />がありますが、同じ意味です。

ここでは長くなるので解説を省きます。
興味のある方は、下記の用語で検索をかけてみて下さい。

<br>   <br />   html  Xhtml html5

brタグを覚えるとホームページの修正に役立ちますね。

スキマ時間で覚えていきましょう♪

 

HP作成No10
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No9 Webページに写真

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

8. HP作成No8 Webページ写真の準備

 

今回の目的はWebページへ写真を挿入します。

まず、HP作成ファイルと写真のある場所の確認です。

①デスクトップにある2016tabiを開く
※ここまでの作業は上記No1~8で確認ください

②imgフォルダーを開く

20161115hp%e6%8c%bf%e5%85%a5%e5%86%99%e7%9c%9f%e7%a2%ba%e8%aa%8d

③2016kokubunji.JPGがある事を確認。
この写真をWebページに入れます。

一つ戻って
2016フォルダー内のindex.htmlをメモ帳で開く(下記図参照)

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b92

 

今回は<h2>晴れの国おかやま発~の旅記録</h2>の下に

写真を挿入してみます。まず、以下の画像の配置タグを入力。

<h2>晴れの国おかやま発~の旅記録</h2>
<img src />

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a51

次に<img src />タグの中に
画像がどこにあるのか?を示す 画像パス を入力します。

<img src=”img/2016kokubunji.jpg” />

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a52

更に下記のように入力しましょう。

<img src=”img/2016kokubunji.jpg” alt=”備中国分寺五重塔” />

alt=”〇〇〇”はalt属性といい、代替テキストの情報です。

※代替テキストとは?  画像のかわりに文字で表示
 ネット速度が遅い時代は、画像が出て来るのに時間がかかったのだ

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a53

ファイル → 上書き保存

以下の図のように index.htmlファイルを
InternetExplorerで開いて確認しましょう。

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

下記のように写真入りの
Webページになっていれば成功です。

 

20161115%e7%94%bb%e5%83%8f%e5%85%a5%e3%82%8ahp%e5%ae%8c%e6%88%90

 

また一歩前進です。

スキマ時間で覚えていきましょう♪

 

HP作成No9
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No8 Webページ写真の準備

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

 

今回はWebページに写真を入れる準備です。
その前に。

Webページのファイル保存の確認です。
基本はアルファベットと数字で名前をつける事を覚えます。

日本語でのファイル名は、基本 × です。

文字化け等で、ややこしくなるので、

ファイル名は単純にアルファベットと数字と覚えましょう。

写真ファイルも同じです。

20161112%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e5%90%8d1

では、これからWebページで使う写真を用意します。

今回は、上記の国分寺の写真を用意してみました。

20161112%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%abimg1

 

デスクトップにある2016tabiフォルダーを開いて

imgフォルダーに写真をドラッグ&ドロップします。

※Webサイト(ホームページ)はこの2016tabiフォルダーで管理している

 

20161112%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%abimg2

 

上図の赤丸のように

写真がimgフォルダーに入っていれば、準備OKです。

 

スキマ時間で覚えていきましょう♪

 

HP作成No8
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ