HP運営ブログ

カテゴリー: 筆者:中村@新人 のアーカイブ

2017.12.11.初心者さんのためのミニWEB語録 *** フォームの種類 ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

前回紹介した「お問い合わせフォームの作り方」

その2の紹介の前に、知っておくと便利なWEB語録を紹介します!

 

 

***  フォームの形式や名前  ***

 

お問い合わせ等のフォームで使用されている部分にも名前が色々あるのです(*´ω`*)

今回はフォームでよく使用されている形式を説明していきます!

 

 

 

●テキストボックス

テキスト形式で文章を「一行だけ」入力できる形式です。

名前や住所、メールアドレスなど、自分で入力する項目で使用します。

基本的に使われる頻度は最も多い形式で、「数字だけ」や「アルファベットだけ」など、指定した文字のみしか入力できないように設定されている場合もあったり、かなり応用の利く形式でもあります。

 

 

●テキストエリア

こちらもテキスト形式で文章を入力できる形式です。

テキストボックスとの違いは、複数行を入力できること(・∀・)っ

改行ができるので、お問い合わせの内容やアンケート内容等の長い文章を入力する時に使用します。

 

 

●ラジオボタン

あらかじめ設定しておいた選択肢を○をクリックして、一つだけ選択してもらう形式です。

良い悪いなどの評価や有無、参加不参加などの項目で使用されることが多いです。

選択肢が多すぎると見づらくなるので、あまり選択肢の数が多くない場合におススメします。

 

 

●セレクトボックス

これも、決まっている内容を一つだけ選んでもらう項目で使用します。

あらかじめ設定しておいた項目がプルダウン(下にぴょこっと出てくる形)で選択できる形式です。

ラジオボタンより、選択肢が多い時に使用することが多いです。

 

 

●チェックボックス

あらかじめ設定した選択肢を、□部分をクリックして複数選べる形式です。

オン・オフの機能がついているので、チェックのついた□部分をクリックするとチェックを外すことができます。

「該当するもの全てにチェックしてください」といったアンケートの複数選択によく使用されます。

 

 

●ファイルボックス

フォームを使用する人が画像などのファイルを投稿(添付)できる機能です。

例えば、求人フォーム等を作って募集をした時、履歴書を添付で送ってもらえると便利ですよね(´∀`)ノ

問い合わせをする人や回答される人に事前に資料を用意してもらいたい場合に使用します。

 

 

 

基本的な形式は上記くらいで、これらの形式を応用して色々な入力の機能がついていく形なのです。

同じ項目でも、ラジオボタンにするかセレクトボックスにするか…などなど、項目×形式の組み合わせは多岐にわたります!

色々な形式を使用して、必要な情報を入力してもらえるフォームをくみ上げましょう(≧ω≦)

 

 

 

2017.11.27.お問い合わせフォームを作ってみよう その1

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回はホームページの重要な部分「お問い合わせ」ページの編集の仕方を紹介します。

 

 

***  設問の追加・編集でオリジナルフォームを作成!  ***

 

まず、初期設定のお問い合わせがコチラ↓↓

 

 

 

いつも通り右クリックで「メールフォーム」から「編集」を選択。

 

 

出てくるメールフォームの編集画面がコチラ↓↓ 

 

 

メニュータブが「設問」「設定」「開始ページ」「確認ページ」「完了ページ」 

とたくさんありますが、まず「設問」でフォームの内容を決めていきます。

 

設問の内容を変えたい時は、右側の「えんぴつアイコン」 

消したい時は「ゴミ箱アイコン」 

増やしたい時は、下部にある「追加」のアイコンで変更していきます。

 

「追加」や「えんぴつアイコン」を選択するとその設問の編集画面に切り替わります。

 

 

 

基本となる設問の編集内容は「設問見出し」「必須項目」「公開」「回答形式」の4つ。 

 

設問見出し

お問い合わせフォームの左側にでる項目名

必須項目

「必須」にすると、お問い合わせをする時にこの項目を入力していないと確認するに進めない状態になります。
「無回答可」にすると、入力していなくても先に進めます。

公開

「公開」と「非公開」があり、公開を選択するとお問い合わせフォームに表示されます。

回答形式

回答形式は12形式あり、欲しい回答に合わせて形式を選びます。
簡易的なお問い合わせフォームからアンケート形式のものまで幅広く対応できます。

 

設問の追加・編集をして「ok」で更新。

この作業を繰り返してお問い合わせフォームを作成していきます。

次回は回答形式について紹介します(・∀・)っ

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.11.20.初心者さんのためのミニWEB語録 *** カラム ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

突然ですが、皆さん「カラム」ってご存知ですか?

ホームページを制作する時に「1カラムにしますか?2カラムにしますか?」と聞かれる事がある、デザイン構成に関わる言葉なのです。

今回はカラムの説明と、カラムの数の特徴を紹介します♪

 

 

●カラム(column)

「カラム」は、印刷物の段組みの縦方向の集まりや、表形式のデータの縦の列の事を表します。

ひとまず、縦の列のかたまりだと思ってください。

 

さてさて、まずは下の画像をご覧ください♪

Groopのサイトのカラムに色を付けてみました。

色の付いた縦の枠が左側は黄色の一つだけ、右側はメインとサイドに分かれています。

 

こういった縦の枠の事をカラムと呼んでいます。

 

上の画像で分かるように、Groopのサイトは、TOPページが【1カラム】

その他のページは【2カラム】の構成で作られています。

 

よく見られるホームページの構成は【1カラム】【2カラム】の他に【3カラム】もあります。

大体のホームページはこの3種類にわけられます。

 

それぞれにメリットとデメリットがあるので説明していきますね (・ω・)ノ

 

 

1カラム

メインコンテンツだけを表示させるため、内容に集中してもらえるという点が一番のメリットです。

画像を大きく表示することができるので、インパクトのあるデザインに向いています。

 

また、集中して内容を見てもらえるので、強みや推したい部分、商品のアピールポイント等が伝わりやすくて、お問い合わせに繋がりやすい構成でもあります。

なので、商品の販売サイトやキャンペーンのサイト等に向いていると言われています。

 

最近はスマホやタブレットでホームページを見る方が増えてきたので、若い方が見慣れているデザインという事もメリットの一つでしょう。

 

ただ、サイドにメニューがないため、他のページへの移動がしづらいというデメリットがあります。

ページ数が多いホームページや、他のページをいろいろ見てほしいといった希望がある場合は向かない形です。

他のページへのリンクをコンテンツ内やフッターに作ったり、グローバルナビを固定化するなどの対策が必要ですね。

 

 

 

2カラム

一番オーソドックスな形で、ホームページを見る人にとって分かりやすくて使いやすい形です。

メニューやカテゴリなどをサイドに配置できるので、他のページへの移動がしやすいという事がメリットです。

人は物を見る時にF字やZ字に視線が動くため、ページを見たときに必ずサイドカラムが目に入るので、見ているページ以外のコンテンツに気付いてもらえることも2カラムの強みです。

 

 

ただし、2カラムのデメリットも必ずサイドカラムが目に入ってしまう事。

サイドカラムを右側にする等で多少改善できるのですが、メインコンテンツに集中して欲しい場合には向いていない形です。

 

 

 

3カラム

サイドカラムを左右に置けるので、2カラムより情報量を増やせることがメリット。

左右のカラムにカテゴリやメニューなどを分けて置くことできるので、情報量の多い大きい規模のサイトやブログ等に多い形です。

商品を販売するECサイトなどでもよく見ます( ゚ω゚)

 

3カラムはメインコンテンツの幅が狭い事と情報量が多くなることがデメリットです。

一度に入ってくる情報量が多いので、メインコンテンツへなかなか集中してもらえないということがあります。

 

 

 

 

カラムの構成はホームページを作る上で、後から変更するのが難しい部分になるので、一番最初に決めたいところです。

基本的にはホームページを見る人にとって一番使いやすい形を考えて決めます。

どんなデザインにしたいのか、見てもらう対象はどの層か、全体の情報量がどれくらいになるのかなど、色々な要素をあらかじめ考えておきましょう(*´ω`*)

 

 

 

2017.11.13.会社案内を変更してみよう! その5

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回は会社案内変更の最終段階!

↓↓まだ「会社案内」が残っているこの部分↓↓

 

 

パンくずリストやフッターメニュー、内部のコンテンツを変更していきます。

 

 

***  コンテンツの変更方法  ***

 

Groopメニューから「コンテンツリスト」を選択します。

 

 

メニューの変更の時と同じく、選択するとそのまま編集画面に切り替わるので、

変更したいページの右側にある「鉛筆アイコン」をクリックします。

 

 

 

すると、ページの編集画面に切り替わるので、タイトルを変更して「OK」を選択。

 

 

これでページのタイトルが「会社案内」から「運営会社」へ変更できました。

 

 

「コンテンツ」のタイトルが変更されたので、コンテンツ部分とパンくずリストの部分が「運営会社」に変わっています。

 

 

 

 

さて、今日はまだまだ続きます。

タイトル変更の次はアクセスマップをコンテンツ(ページ)ごと削除します。

「コンテンツリスト」を開いて、一番右にある「ゴミ箱アイコン」をクリック

 

 

確認画面で「OK」を選択。

と、前回の「メニューの削除の仕方」とやり方は同じですが違うところがあります。

 

下の画像のように、メニューはコンテンツ(ページ)へ移動するための項目です。

 

メニューの項目を削除した時は、 

メニューだけから項目が削除されて、コンテンツ(ページ)は残っています。

ページに移動するための項目がなくなっているので、見ることができない状態です。

 

そして、コンテンツ(ページ)を削除した時は、 

ページの元になっている部分を削除するので、同時にメニューの項目も消えてしまいます。

コンテンツ(ページ)を消してから、他の部分で色々な更新をした後に、元に戻したくなった場合、

新しく作る必要があるので、削除する時は気をつけましょう。

 

 

 

さぁ、次で最後です。

変更されずにひっそりと待っていたフッターメニューを編集します。

 

フッターメニューの「会社案内」部分で右クリックをして「メニュー名編集」が一番簡単ですが、ちょっと違う方法をお教えします。

 

まず「Groopメニュー」から「メニューリスト」を開いて、

「メニューグループ」から「フッターメニュー」を選択します。

 

 

フッターメニューではまだ「会社案内」になっているので、「鉛筆アイコン」をクリックして編集画面を出します。

 

 

メニュー名を「運営会社」に変更して「OK」をクリック!

 

 

フッター部分も変更が完了しました(´∀`)ノ

 

 

メニューリストにあるメニューグループは、違うグループに同じタイトルの物があっても一か所の変更で全てのメニューには反映されないのです。

ちょっと不便に感じるかもしれませんが、メニューグループごとに違う設定ができるので、汎用性が高い仕様となっています。

 

メニューグループをいくつか作っている場合は、他の項目の名前を変え忘れていないか要注意ですね(>ω<;)

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.11.06.初心者さんのためのミニWEB語録 *** HPの部分の名前 ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回はヘッダーやフッターなど、ホームページを作る上で絶対に出てくる言葉…

ホームページを構成している各部分の名前の一部を紹介します!

 

Groopサイトを参考に、

大まかな分け方をするとこんな感じ↓になります。

 

 

上から順番に説明していきますね (・ω・)ノ

 

 

 

●ヘッダー(HEADER)

ホームページを見たときに、一番上に表示されている部分の事です。

最初に目に入る部分になるので、サイトを印象づける大切な部分になります。

そのため、タイトルロゴやわかりやすい案内、そしてページ間の移動がしやすいようにナビゲーションを入れることが多いです。

 

Groopのページでは最上部に「ロゴ」と説明文、プライマリーナビとして「お問い合わせ」を入れて、次にグローバルナビゲーションの形です。

オーソドックスで分かりやすいヘッダーの構成になっています。

 

プライマリーナビゲーション

説明で出てきたプライマリーナビゲーション。

コンテンツの内容と直接的に関係はないけれど、重要になるページへのリンクの事を言います。

基本的にヘッダーの右上部分にあり、お問い合わせやブログ・会社概要等が設置されていることが多いです。

Groopのページでは「お問い合わせ」が入っています。

 

 

 

●グローバルナビゲーション

ホームページの中で基本的に全てのページに共通して用意されているリンクの事です。

ページの上部の目立つ部分にあり、そのホームページの中でメインとなるページへ飛べる形が多いです。

 

Groopのページでは上の方にありますが、ホームページによっては、サイドに入っていたり、ハンバーガーメニューの中に隠れていたりします。

 

 

ハンバーガーメニュー

ハンバーガーメニューはスマホでホームページやアプリを開いた時によく見られるメニューの事です。

グローバルナビの説明で隠れていると書いたのは↓画像↓のように押したら出てくるメニューだからです♪

なぜ「ハンバーガー」なのかというと、三本線がハンバーガーみたいだから。

という面白い名付けのメニューなのです(´∀`)

 

 

 

●パンくずリスト

ページの数が多いホームページでは、自分が見ているページがどの位置のページなのか判らなくなってしまうことがあります。

そんな時に役立つのがパンくずリスト!

「ホーム > 会社案内 > アクセスマップ」のように表示してくれるサブナビゲーションなのです。

そのページがどこに属しているかを示す「属性型」、ホームページ内でどこの階層にあたるかを示す「位置型」、そのページにたどり着くまでに見てきたページが示される「パス型」の3種類があります。

Groopで作るホームページは移動がしやすいように「位置型」のパンくずリストが採用されています。

 

ちなみに「パンくずリスト」と呼ばれる由来は、童話のヘンゼルとグレーテルで迷子にならないようにパンくずを置いて森を歩いたお話が元になっています。

「パンくずリスト」以外にも「パンくずナビ」や「トピックパス」「フットパス」と呼ばれることもあるようです。

 

 

 

●サイドバー

メインとなるコンテンツの左側や右側に常に表示される部分の事です。

メニューや検索機能、広告等が配置されることが多いです。

サイドバーにメニューを置くことと、他のページへの移動がしやすくなるという特徴があります。

 

 

 

●フッター(FOOTER)

ホームページの一番下の部分の事です。

サイトによって、コピーライトだけから、会社の情報や著作権情報・サイトマップ等を置いて利便性を上げているもの、デザイン重視で画像だけなど、フッターだけで幅広い構成があります。

作成するホームページに合わせて決めていく事が大切ですね(≧ω≦)

 

 

 

ホームページを構成しているものはまだまだ沢山ありますが今回はここまで!

他の用語はまた今度紹介します♪

 

 

 

2017.10.30.会社案内を変更してみよう! その4

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

さてさて、今回は↓この部分。

メニューに残っているタイトルを変更していきます。

 

 

***  メニューの変更方法  ***

まずは右クリックの「メニュー」から「メニュー名編集」を選択します。

 

 

「メニュー名編集」を選択すると、そのまま編集画面に切り替わるので、

今回は「会社案内」から「運営会社」へタイトルを変更します。

 

 

 

左側のメニューの名前の変更はこれだけ♪簡単ですよね(*´ω`*)

 

 

しかし!まだアクセスマップがメニューにあるので、これを消す作業をします。

 

右クリックの「メニュー」から「メニューリスト」を選択。

(Groopメニューにも項目があるのでどちらからでもOKです)

 

 

出てきたメニューリストの「運営会社」の左にある「+」をクリックします。

 

 

すると、運営会社の下に「アクセスマップ」が表示されるので、

一番右にある「ゴミ箱のアイコン」を選択します。

 

 

確認画面で「OK」を選択
(´・∀・)っ

 

 

「メニューリスト」と「ページ上のメニュー」から「アクセスマップ」がなくなりました。

 


 

 

もし「アクセスマップ」を元に戻したい場合は、

「メニューリスト」の画面で運営会社の右側にある「++」をクリックして項目を追加します。

 

 

追加された編集欄に【タイトルを入力】して、【サイト内リンクを選択】して、【アクセスマップを選択】して、右側の保存ボタンをクリックで元通りのメニューになります。

 

 

 

今回はコンテンツとしてのページは残しつつ、メニューのみを編集するやり方を紹介しました。

 

ページの中に「会社案内」となっている部分があと少し残っているので、

次回の「Groopで作ってみよう」では、残りの部分の変更の仕方をお教えします♪

 

 

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.10.23.初心者さんのためのミニWEB語録 *** GPS ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

前回のブログ「会社案内を変更してみよう!その3」でマップの入れ方を紹介したところから、今回はマップ等に関連があって、よく聞くあの言葉を紹介します。

 

 

● GPS

GPSという言葉は耳に覚えのある方がほとんどだと思います。

 

携帯やスマートフォン、カーナビなど、身近な生活の中に取り入れられていて、欠かすことのできないものの一つになっていますね(*´ω`*)

 

例えば、初めて行く場所に向かう時等に自分の現在地を地図アプリで見たり、カーナビで住所を設定して案内をしてもらったり、バイクや自転車に付けて盗難にあった時に見つけられるようにしたり、子どもやお年寄りのスマホ等に設定して位置情報がわかるようにしたり…様々な場所で使われています。

お仕事などでは、バスやタクシー、トラック、船、飛行機等の運行情報の管理や、天気予報であったり、土壌調査等の色々な調査といったことに使用されています。

 

実は元々はアメリカが軍事用に飛行機や船などの航法支援用として開発したシステムでした( ゚Д゚)

 

GPSは、Global Positioning System(グローバル・ポジショニング・システム)の略称で、「全地球衛星測位システム」「全地球測位システム」「汎地球測位システム」とも呼ばれています。

 

人工衛星を利用した測位システムで、地球の上空にある約30個ほどのGPS衛星から発信されている情報を、GPS受信機が受け取って計算することで受信機の現在地がわかる仕組みとなっています。

 

 

かなり正確な位置情報が出るGPSですが、衛星の配置による誤差が出ることもあります(>ω<;)

衛星の数が増えれば、より正確な情報が出せるため、日本では日本版GPSの「準天頂衛星初号機みちびき」という衛星が開発されました。

衛星が交代で待機してGPSを補完するシステムで、これから徐々に衛星の数を増やしてより正確な情報が出せるようになるそうです。

ちなみに、みちびきやGPS等の測位衛星の位置を知ることができるアプリもあったりします。

  

 

地図や乗換案内、FacebookなどのSNS、他にも様々な場面でその場所の情報を得るためのGPS(≧ω≦)

日本版GPSのみちびきに期待です!

 

 

2017.10.16.会社案内を変更してみよう! その3

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回は会社案内ページ第三弾!

 

見本にしているページと同じようにアクセスマップを会社概要ページに纏めたいと思います♪

 

 

***  Googleマップの追加方法  ***

 

今回もいつも通りの右クリックから始まります

 

 

「コンテンツパーツ」から「パーツの追加」を選択!

 

 

「その他」のタブから「GoogleMaps-新規作成」を選択します。

 

 

地図が入りました

けれど、縮尺と設定が初期状態なので日本地図上でマークは東京を指しています。

ちゃんとした場所に設定をするためもう一度右クリックでメニューを開きます。

 

 

「Google Maps」から「プロパティ」を選択して編集画面を出します。

必須項目が「タイトル」「住所」「縮尺」「サイズ」と4つあるので、これを編集していきます。

タイトルは地図につけたい名前を入力しましょう。今回は無題のまま進めます。

 

まず、住所を変更!

 

 

ここで重要なのが「自動的に緯度経度取得を行う」にチェックを入れることです。

このチェックを忘れると地図のマークの位置が変わらないのでご注意ください。

 

 

縮尺は広域と拡大は8段階で選ぶことができます。

 

 

チェックを入れずに進めると広域地図が出ます。

右に行くにつれて拡大されていきます。

 

 

おススメは右から3つ目か4つ目辺り。

駅からの距離などで縮尺を決めると場所が分かりやすいです。

 

 

最後の必要項目のサイズはマップ自体の大きさになるので、今回はデフォルトの「100%×350px」で設定します。

設定が完了した地図がコチラ↓ 

 

 

 

見本には「アクセスマップ」の見出しがあったので、マップの上に見出しパーツを追加します。

もう一度「コンテンツパーツ」から「パーツの追加」を選択して、会社概要の見出しで使用している「見出し(h2)」を選びます。

 

 

見出しの文章をアクセスマップに変更して完成です!

 

 

 

無事、見本と同じ形の内容に編集できました♪

後はメニュー部分のタイトル変更と別ページのアクセスマップの削除ですが、今回はここまで!

 

次回の「Groopで作ってみよう」で紹介します(´∀`)ノシ 

 

 

 

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

2017.10.10.会社案内を変更してみよう! その2

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

前回の「Groopで作ってみよう」で変更した会社案内!

 

 

予告していたとおり、今回は空いてしまっている隙間のつめ方を紹介します。

 

 

***  タグ編集で段落から改行へ  ***

 

この隙間…原因は見たまま編集をした時に自動的に入る<p></p>タグなのです。

 

と、いうことで今回は「フルエディタ編集」でタグを編集していきます! 

 

まず最初はいつも通り右クリックをして、「フリーページ」から「フルエディタ編集」を選択します。

 

 

編集画面の左下にある「ソース」をクリックして、タグの編集画面にします。

 

 

 

出てきたタグ編集画面でちょこっとタグを書き換えます。 

 

 

赤い枠で囲っている部分を変更していきます。

全部の行が<p></p>を使った段落になってしまっているため、あの隙間ができてしまっているのですね。

この<p></p>段落タグを<br>改行タグへ変更します。

 

 

全部変更したら「保存する」を選択して反映させます。

 

 

 

隙間がなくなってスッキリしました(*´ω`*)

 

 

ちなみに<p></p>タグをはずすだけだとこんな表示になります。 

 

 

 

何もいれていないので改行も段落もなく、ちょっと読みづらい形に……

書きたい内容や見せたい形によって「<p></p>段落タグ」、「<br>改行タグ」を使い分けていきましょう♪

 

 

 

 

そして、今回編集をしていて中村@新人を困らせたものが一つ(>ω<;)

 

 

 

保存をしてからもう一度開くと<br>がなぜか<br /> になってました。

先輩方に聞いたところ、HTMLにも「HTML」、「XHTML」、「HTML5」といくつか種類があって、この表記は「XHTML」に対応している書き方だそうです。

書いた内容と違う内容になっていてびっくりしますが、最新以外にも対応するための仕様なので安心してください♪

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

2017.10.02.初心者さんのためのミニWEB語録 *** HTMLタグ紹介 -1- ***

 

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回は私が覚えたHTMLタグを一つ紹介します。

 

● <br> 改行タグ

<br>は文章の途中で改行したい時に使用する改行タグです。

通常タグは <p> 文章 </p> のように前後で挟まないといけないですが、<br>は文章の改行したいところに入れるだけでOKです。

 

どんな時に使うかというと…

例えば、長い文章があるとします。

 

昔々、あるところに、おじいさんとおばあさんが住んでいました。ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。おばあさんはその大きな桃を拾い上げて、家に持って帰りました。おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。 (民話:桃太郎 冒頭部分)

 

こんな風に文章を区切らずにずらずら表示すると、ちょっと読みづらいですよね?

この文章を見やすくするのが<br>タグです(>ω<)

 

昔々、あるところに、おじいさんとおばあさんが住んでいました。
ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。
おばあさんはその大きな桃を拾い上げて、家に持って帰りました。
おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。
子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。
(民話:桃太郎 冒頭部分)

 

全ての「。」の後に<br>を付けてみました。少し区切るだけでだいぶ読みやすくなりましたね。

ちなみにタグを表示するとこんな感じです↓

 

改行されるなら前に出てきた<p></p>の段落タグでもいいんじゃないの?と思いますよね。

一言でいうと、それもOKです (・ω・)ノ

 

昔々、あるところに、おじいさんとおばあさんが住んでいました。

ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。

おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。

おばあさんはその大きな桃を拾い上げて、家に持って帰りました。

おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。

子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。

(民話:桃太郎 冒頭部分)

 

「。」ごとに<p>タグで囲うとこんな感じで表示されます。

段落で区切ることになるので<br>で改行したものに比べて幅がありますが、同じような見た目ですよね。

 

なら、一緒でいいんじゃないの?と思いますが、ちょっとだけ違いがあります。

目で見て分かりやすくするなら…

 

<br>の場合

「昔々、あるところに、おじいさんとおばあさんが住んでいました。
ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。
おばあさんはその大きな桃を拾い上げて、家に持って帰りました。
おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。
子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。
(民話:桃太郎 冒頭部分)」

 

<p></p>の場合

「昔々、あるところに、おじいさんとおばあさんが住んでいました。」

「ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。」

「おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。」

「おばあさんはその大きな桃を拾い上げて、家に持って帰りました。」

「おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。」

「子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。」

「(民話:桃太郎 冒頭部分)」

 

段落を一つの文章として「」をつけると、こんな感じで違いが出てきます(>ω<;)

<p></p>は「。」ごとに一つの段落として区切っているので「」が多くなってます。

<br>は一つの文章の中で改行をしているだけなので「」が一つだけになるんですね。

 

 

じゃあ、一つの文章にしたいものは全部<br>で区切ったらいい……とは限らないところが気をつけたいポイントなのです!

 

パソコンとスマートフォンって画面のサイズが違いますよね?

最近はノートパソコンやタブレット・スマートフォンと色んな画面サイズがあるので、使っている物によって横幅の文字数が変わってきます。

 

例えばパソコンだと↓こう見えますが、

 

スマートフォンのサイズだと↓こう見えます。

 

今回は「。」で区切っているのであまり気にならないのですが、読みやすくしようと文章の真ん中などで改行してしまうと、パソコンではキレイに見えていても、スマートフォンやタブレットでは変なところで区切られている謎の見え方になっている場合があります。

 

そんな理由から最近は「<br>を使わない」ということが多くなっているのですが、必要になる場面もちょこちょこあるので覚えておきましょう♪

 

 

 

2017.09.25.会社案内を変更してみよう!

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今日はこのHPにある運営会社のページを参考に会社案内を変更してみます!

 

***  表組の変更 列の削除と行の追加など  ***

 

まず、お手本とする運営会社ページはこちら↓

 

そして、現在の中村@新人のお試しHPの会社案内はこちら↓

 

まだ何も入れていないデフォルト状態です。

ここからお手本に近づけていきたいと思います。

 

 

最初はパーツの変更から!

 

 

いつものように右クリックでメニューを出して… 

 

 

初期に入っていた表組パーツは【表組系 左)表 右)画像】でしたので、これを表組だけの【表(見出し・左)】に変更します。

 

 

表組パーツが変更できました。 

デフォルトの表組が3列なので、今度はお手本と同じ2列の表組にします。

 

 

ダブルクリックで編集画面にしてから、消したい列の上で右クリック!

 

 

「列」の部分から「列の削除」を選択すると1列消えて2列の表組になります。

 

 

ちょっと見出しの幅が広いので調整をします。

今度は見出しの部分で右クリックをして「セル」から「セルのプロパティ」を選びます。

出てきたプロパティ画面で幅の部分を変更します。 

 

 

今回は20パーセントに設定。入力をしたらOKを選択して反映させます。

 

 

良い感じのバランスに変更できました。

 

 

後は内容を入力していくだけ…

と、思ったら一行足りなかったので、行を追加します。

 

 

一番下の行で右クリックをして「行」から「行の下に挿入」を選びます。

これで行が追加されるので内容を入れていきます。

 

 

入力が完了したら「保存する」を選択しましょう。

 

 

これで完成!と、言いたいところですが…

「所在地」と「事業内容」の隙間が目立つので、次回のGroopで作ってみようにて調整の仕方を紹介します!

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

2017.09.19.初心者さんのためのミニWEB語録 *** アップデートとアップグレー ド ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

アップロード・アップローダー・アップデート・アップグレード……

WEB用語は似た言葉が多くてどれが何を差しているのか分からなくなりますよね。

 

今回は上に書いている似た言葉の内、後ろの二つを紹介します!

 

 

●アップデート(update)

スマホやパソコンを使っていたら、

「最新版へアップデートしてください」と表示されることがありませんか?

 

「update」を訳すと「更新する」や「最新の状態にする」という意味になります。

スマホやパソコンが表示している通り、最新版へ更新をすることがアップデートです(>ω<)

情報を新しくしたり不具合を改善するために、最新の状態へ更新してください。とお知らせしてくれているんですね。

がらっと変わるというよりは、大きな部分は変わらずに不具合部分を修正するイメージです。

 

 

ただ、最新版に更新したら使いづらくなった…なんてこともあるので、アップデートをする前に何が変わるのか確認することをおススメします (・ω・)ノ

 

 

 

●アップグレード(upgrade)

「upgrade」は直訳すると「水準を上げる」「品質をよくする」「格上げする」などの意味があります。

アップデートとの違いが分からなくなる事が多いですが、アップグレードは基本的に「性能の向上」がメイン!

新しく機能が追加されたり、仕様が変更されたりして、全体的に高性能なものに変えることですね。

そのため、アップグレードは「新しいもの」として提供する時に使われることが多いです。

 

 

「新しいバージョンがあります。アップグレードをしませんか?」とスマホやパソコンでの表示のされ方も違う気がします( ゚ω゚)

 

 

 

●バージョンアップ(version up)

バージョンアップってよく聞きますよね。

新しい機能の追加や、不具合の修正などで機能を強化することなので、ほぼアップグレードと同じ意味です。

多くの場合、同じ意味で使われるので、基本は「アップグレード=バージョンアップ」で大丈夫です。

 

まれに違う意味で使っていることもあるので気をつけましょう(>ω<;) 

 

 

 

 

2017.09.11.色んなパーツを簡単に追加♪ その3

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

前回の「Groopで作ってみよう」で紹介したスライダー(≧ω≦)

右から左に流れる一番オーソドックスな物を紹介しましたが、Groopでは色んな動きのできるスライダーも用意しています!

 

 

***  エフェクトスライダーは種類が豊富!  ***

 

スライダーの変更や追加は前回紹介した方法と同じ♪

いつも通り右クリックをしてメニューを開いて「パーツを変更」を選択します。

 

パーツ一覧の「その他」から今回はエフェクトのかかるスライダーを選択!

 

 

変更後がコチラ↓ 

 

 

あれ? 変わってない? と思うほど、

見た目は一緒ですが、実は編集画面がちょこっと違います。

 

 

エフェクトの選択リストが入ってます!

名前が英語なのでちょっと分かりにくいかもしれないのですが、全て違う動きなのです。

 

動きが分かりやすいように水色と黒の画像を入れてエフェクトを試してみました(´・∀・)っ 

 

 

たくさんありますが、これは動きが分かりやすいものをピックアップした一例★

種類が多くて結構選ぶのが大変でした(>ω<;) 

 

「静止画じゃわからないよ!」と、思うかもしれませんが、

そこは使ってみてのお楽しみ♪ ということで(≧ω≦)

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.09.04.初心者さんのためのミニWEB語録 *** HTML ***

 

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回はホームページを制作する上で絶対に切り離すことができないHTMLについて簡単に説明します。

 

●HTML(HyperText Markup Language)

HTML(エイチティーエムエル)はWEBサイトを作る時に使用するマークアップ言語という特別な言語です。

例えば…

こんな感じ。

 

これは今回のブログのHTMLで編集している画面です。

Groopのブログ編集画面の左上に「ソース」ってありますよね。

そこを選択するとこの画面に切り替わります。

 

記号とか英語がいっぱいですよね!!(>ω<;)

このややこしい文章は「ソースコード」と言います。

「<>」で囲われた「HTMLタグ」を組み合わせて作られているパソコンのための文章になります。

 

上の画像はどちらも同じ内容なんです(>ω<)!!

 

Groopは見たまま編集をすると自動的にソースコードを作ってくれるので、これまで中村@新人が書いたブログでは、こういった部分をあまり紹介していませんでした。

ただ、HTMLタグを少し知っているとブログを書くとき等にやっぱり役に立ちます。

 

 

さて、ここからはWEB勉強中の中村@新人がいつも使っている「HTMLタグ」をちょこっと紹介しますね。

 

● <p> 段落を指定する </p> 

「 <p> </p> 」は段落を指定するためのタグです。

このタグに挟まれている文章は1つの段落となります。

 

ブログを書いていて改行が上手くいかない…なんてことがあった方!

このタグにスペースを入れると改行もできます。ぜひお試しください♪

 

 

 

● <h3> 見出し用 </h3> 

「 <h3> </h3> 」は、見出しを作るためのタグです。

「h1」「h2」「h3」「h4」と数字の違う物がありますが、これは見出しを内容によって振り分けるため等に使います。

中村@新人はブログの中の見出しで使うのは「h3」と決めて使ってます。

ちなみに、見たまま編集の時は「フォーマット」という部分が見出しを選ぶ部分です。

タイトルになる物などに使うと強調されるので見やすくなります。 

 

 

他にも使っているHTMLタグがあるのですが今回はここまで!

まだまだ勉強中なので、これから少しずつ覚えたHTMLタグを紹介していけたらと思います♪ 

 

 

 

2017.08.28.色んなパーツを簡単に追加♪ その2

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

唐突ですが、動きのあるホームページってかっこいいですよね(≧ω≦)

かっこいいサイトはどのサイトも動くコンテンツが入っている気がします… 

と、いうことで今回はスライダーパーツの追加の仕方を紹介します☆

 

 

***  パーツを選んで画像を入れるだけ!  ***

 

前回の「Groopで作ってみよう」でパーツの「追加」を紹介しましたが、

今回はメイン画像の部分をパーツの「変更」でスライダーに変えてみたいと思います。

 

 

いつも通り右クリックをしてメニューを開いて「パーツを変更」を選択します。

 

 

パーツ一覧の「その他」からスライダーを選択!

今回は一番オーソドックスなスライダーパーツを選びました。

 

 

初期状態はサンプルの画像が2枚入ってます。

画像を変更するためにスライダーの上で右クリック!

「スライダー」から編集を選択します。

するとスライダーの編集画面になるので、画像の変更等をしていきます。

 

 

 

サーバーブラウザの部分をクリックすると、いつもの画像選択画面が出てきます。

事前にスライダー用の画像を3枚用意していたので、1枚目を選択。

 

 

二段目にある「alt属性」というのはHtmlの中で画像の代わりになるテキスト文章のことなのですが、説明すると長くなるので割愛します。

ひとまず、画像のタイトルになるような文章を入れておきましょう(´・∀・)っ

 

続いて、三段目。

「リンク」はURLを入れると、スライダー画像をクリックした時にそのページへ移動します。

入れなくてもちゃんと動くので、リンクが必要ない場合は空欄で大丈夫です。

「探す」ボタンをクリックすると、作っているサイト内のページが表示されて移動させたい先を探すことができます。

 

 

「ターゲット」は「リンク」で移動する時に同じ画面(同じウィンドウ)で開くか、

違う画面(別ウィンドウ)で開くかの違いをつけることができます。

 

 

「ラベル」という項目もありますが、上級者向けの内容になるのでこちらも割愛!

何も入れず、空欄にしておきましょう。

 

ここで「保存する」を選択したら1枚目の設定が完了です。

 

 

2枚目以降を編集する時は編集画面の下にある数字をクリックすると編集ができます。

初期状態では2枚目までしか設定されていませんが、更に増やしたい場合は数字の横の「+」のアイコンをクリックすると枚数を増やせます。

 

 

あとは1枚目と同じように画像やリンクを設定して「保存する」をクリック! 

これでスライダーの完成です。

 

スライダーに入れた画像はサイズによってそのまま表示されたり縮小されたりするので、入れる画像のサイズは同じものを用意すると綺麗に入ります。

ちなみに私が今回用意した画像はこのサイズで統一してます♪↓

 

 

 

 

と、いうことで。

今回は右から左に流れるタイプの一番よく見るスライダーの設定の仕方を紹介しました(*´ω`*)

 

 

中村@新人の力量が足りず動画でお見せできないのが残念ですが、スライダーが入るだけで大分印象が変わりますよ♪

 

初心者さんでも動きのあるサイトが作れることもGroopの魅力の一つなのです(≧ω≦)

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

 

2017.08.07.初心者さんのためのミニWEB語録 *** コンテンツ ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

お盆前の今回は、

ブログ内でも何度か登場している「コンテンツ」と、いろんな場所でよく聞く言葉を紹介します!

 

 

コンテンツ(contents)

コンテンツは日本語にすると「内容」や「中身」という意味です。

WEBやゲーム、映像、音楽などで良く使われる言葉で「情報の中身」という意味で使われています。

 

例えば

「サイトのコンテンツを充実させたい」

↓   

「サイトに掲載する記事や画像、動画などの内容を充実させたい」といった意味合いになります。

 

カタカナになるだけでかなり文章が短くなってしまう不思議です( ゚Д゚)

 

 

 

メディア(media)

メディア(media)はミディアム(medium)の複数形のことで、日本語に訳すと「媒介」「媒体」「中間」という意味になります。

「媒体」や「中間」という意味から、情報の伝達や記録、保管等に使用される物のことを指すことが多く、デジタル用語としては記憶媒体のことです。

ハードディスクやメモリーカード等のことですね(>ω<)

また、「マスメディア(massmedia)」の略称として使われることも多く、その場合はインターネットやテレビ、ラジオ、新聞などの情報媒体の事を指します。

 

 

 

ハードウェアとソフトウェア

 

 

まず、ハードウェアは一般的にコンピューター等を構成する物の中で目に見える部分の事を指します。

パソコンで言うと、本体をはじめ、キーボードやマウス、モニター・スキャナー等の事です。

「ハード」と略されることもあり、元々は「金物類、金属製品」の意味だったそうです。

 

そのハードウェアの対比語がソフトウェア。

ソフトウェアはハードウェアの逆で目に見えない部分の事です。

コンピューターを動かすプログラムだったり、システムだったり、アプリだったり、テキスト化された情報だったりします。

こちらも「ソフト」と略されることがあります。

 

 

色んな場所で「ハードウェア=体」「ソフトウェア=脳」と例えられることが多いです。

 

人は体がなくても脳がなくても動けないのと同じように、

パソコンもハードウェアがなくてもソフトウェアがなくても動かないので、

結構的を得た例えだなぁと感じた中村@新人でした(´∀`)ノ

 

 

 

 

2017.07.31.色んなパーツを簡単に追加♪ その1

 

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

さてさて、これまではすでに用意されていたコンテンツを編集することを紹介してきましたが…

今回は新たにパーツを追加する方法についてお話しします☆

 

***  簡単に追加できる豊富なパーツ!  ***

 

パーツの追加はいつものGroopの操作と同じでとっても簡単です(*´ω`*)

 

 

右クリックをした時に出てくるメニューから「コンテンツパーツ」を選んで「パーツの追加」を選択します。

すると色んなパーツの一覧が出てくるので、希望のパーツを選びます。

 

 

今回は画像が4つ並んだパーツを選びました。

 

 

右クリックで画像を追加♪

 

 

試しに画像編集の練習で作った色違いのGroopロゴを入れてみました(≧ω≦)

 

パーツは画像だけではなく、文章を入れるための枠や表組など、たくさん種類があります。

イメージ通りのサイトを作るため、色んなパーツを使って、好みの組み合わせを探すのは結構楽しいです(´∀`)ノ

 

皆さんもいろいろ試してみてくださいね♪

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

 

2017.07.24.初心者さんのためのミニWEB語録 *** データの送信・取込・書出   ***

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今日のミニWEB語録は、データの送信や取り込み、書き出しに関するものを紹介します♪

色々な場所でよく耳にする言葉なので、知っている方も多いかもしれません。

 

 

●アップロード(upload)

 

スマートフォンやパソコンから写真やデータをインターネットへ送信することをアップロードと言います。

インターネット上へアップロードすることで、遠く離れた場所にいる知り合いと写真やデータを共有することができます。

FacebookやInstagramなどのSNSに写真や動画を載せることもアップロードですね(*´ω`*)

ちなみに、アップロードする時に使う支援プログラムの事をアップローダーと言います。

 

 

●ダウンロード(download)

ダウンロードは今回のWEB語録で一番よく耳にする言葉だと思います(`・ω・)っ

インターネット上から、データやファイルをパソコン等に取り込む作業のことを言います。

「データを落としといて~」と、ダウンロードの事を「落とす」と言う場合もあります。

 

 

●インポート(import)/エクスポート(export)

日本語に訳すと「import=輸入」「export=輸出」の意味。

なので、インポートは外部にあるデータをパソコンなどに取り込んで使えるようにすること。

エクスポートはパソコンなどのデータを別のパソコン等でも使えるように書き出することです。

 

例えば携帯やスマホの電話帳のデータを新しいものに移す時!

 

 

中村@新人はちゃんと覚えるまで、よく「あれ?どっちだっけ?」となっていました(>ω<;)

「入れる」のがインポート、「出す」のがエクスポートで覚えましょう♪

 

 

 

 

2017.07.18.編集してたらおかしくなっちゃった!! ~そんな時の対処方法~

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

Groopで編集している時、うっかり失敗!なんてこともあると思います。

中村@新人も操作を間違えてレイアウトが崩れてしまったことがありました(´・ω・`)

 

今日はそんな時の対処方法をお教えします。

 

 

***  間違えたらまず右クリック!  ***

 

コンテンツの上で右クリックをすると「元に戻す」という項目があります。

 

 

それを選択してクリックするだけで、操作をする直前の状態に戻せます。

「元に戻す」の右側に出てくる項目でどの操作まで戻すかを選ぶことも♪

「すべての変更を見る」を選択したら、これまでの変更内容が一覧で出てきます。

 

 

変更内容の右側にある矢印アイコンをクリックすると、その変更まで一気に戻ることが可能です。

 

ちなみに、Groopメニューでも元に戻すボタンがあります。

 

 

再構築ボタンの横にある矢印アイコンがGroopメニューの元に戻すボタンです。

メニューを開いた状態だとこっちの方が早いかもしれないですね(*´ω`*)

 

 

Groopはうっかりミスをしても元の状態に戻せるので、初心者さんでも安心して作業できるのです♪

「元に戻す」にいつも助けられている中村@新人でした(>ω<;)

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

2017.07.10.初心者さんのためのミニWEB語録 *** データの保管 ***

 

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

パソコンで作業しているとデータの量がどんどん増えていきますよね(´・ω・`)

今回はデータの保管の方法や管理する上で気を付けることを説明します。

 

●アーカイブ(archive)

アーカイブは複数のファイルを1つのファイルにまとめることです。

日本語に直訳すると「記録保管所」や「書庫」になります。

沢山のデータがあると必要なデータがどこにあるのか分からなくなってしまったりしますよね。

関連するファイルやデータをひとつにまとめて保管(アーカイブ)することで、

必要なときに必要なデータをすぐに取り出せるのでとても便利です(*´ω`*)

 

ちなみに、どんなものをアーカイブすることかで色々と名前がついています。

ウェブページ全体やページの一部を収集して保存する「ウェブアーカイブ」

博物館や美術館・図書館にある文化財などをデジタル化して保存することを「デジタルアーカイブ」

特にデジタルアーカイブは、映像技術などの発達で、よりキレイな画像などを残せるようになったため、テレビ番組などでもよく取り上げられていて、最近よく耳にする言葉です。

 

 

●バックアップ(backup)

データが急に消えてしまったり壊れてしまった時に、復旧できるようコピーを取っておくことをバックアップと言います。

 

パソコンやスマートフォンなどの機械は、急な故障やウイルスに感染するなどの非常事態が起きることがあります。

データをコピーして予備を用意しておくことで、非常事態が起きても大切なデータを元に戻すことができます。

 

パソコンやスマートフォンは壊れてしまったら、最悪の場合データが全て見れなくなってしまいます。

普段使っているパソコンやスマートフォンとは別に、

USBや外付けのハードディスク、違うパソコン等にバックアップをしておきましょう。

 

 

●復元

壊れてしまったり消えてしまったデータを、バックアップを使って元の状態に戻すこと。

バックアップがないと復元することは難しいので、定期的なバックアップをおススメします(´∀`)ノ

 

 

●上書き保存

保存していたデータを更新した内容に書き換えて保存する方法です。

前に保存したデータを開いて作業した後、保存をする時に前のデータと「同じ名前で同じフォルダ」に保存すると 新しく保存した内容に上書き保存されます。

上書き保存をしてファイルを閉じてしまうと、保存前の状態には戻せなくなってしまいます。

もし、前のデータが必要になる場合がある時は「名前を付けて保存」や「新規保存」で、新しく名前を付けて別のファイルとして保存すると、以前のデータを残すことができます。 

 

 

 

わかりやすくアーカイブで整理をして、きちんとバックアップを取っておくと、

急なトラブルが起きてもすぐに対応できるので、定期的にデータの確認をしておきましょう(≧ω≦)

 

 

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP