BIGLOBEホームページサービス「Feather cloud」の紹介コラムです。きれいなホームページを、初心者でも簡単に作れる「Feather cloud」。その使い方を、対話形式で詳しくご紹介していきます。


人物紹介:羽村鳥太

人物紹介:羽村鳥太

鳥巣株式会社の新入社員。
パソコンに詳しくないホームページ担当。

人物紹介:猫先生

人物紹介:猫先生

特別顧問のしゃべる猫。
パソコンやホームページに詳しい。

人物紹介:猫先生

人物紹介:羽雲つぐみ

鳥太の部署の先輩。
特技はたとえ話と除霊。

【第13回】ページ作成を進めていこう!つかってみようFeather cloud

BB-WAVE掲載日:2017年09月13日


ホームページ作成は知識がないと難しい、そう思っている方におすすめのBIGLOBEホームページサービス『Feather cloud』。きれいなホームページを、かんたんな操作で作ることができます。
この第十三回では、ホームページの完成に向けて、『Feather cloud』でページを作りこんでいきます。

前回「メニューを編集しよう!つかってみようFeather cloud」はこちら

完成に向けてその2☆華麗にビフォーアフター!の巻

おはよッス! 猫先生、つぐみ先輩!!
今日も張り切っていくッスよ!!

おはよう、鳥太くん。気合入ってるわね!
猫先生、おはようと同時に額のあたりを前足で撫でて萌えポーズしてますけど、どうしたんですか?

これは萌えポーズじゃないニャ! 顔を洗ってるんだニャ。
くっ、台風の季節はいつもこうニャ……。

そっか〜、毎朝サービスしてるんじゃないんッスね!
じゃあ、次に台風が近づいてたら激写しとくッス!

……鳥太くん。予告したら激写にならないんじゃないかな?

うっ、そ、そうッスね。。
ってことで猫先生、さっきの話は聞かなかったことにして下さい!

ばっちり聞いたニャ。
今後は早起きして、存分に顔を洗ってから出勤するニャ。

そ、そんな……ひどいッスよ〜。

気が向いたら写真集用に撮り下ろし撮影を許可するから、そう気を落とすニャ、鳥太。
まずは今日のレクチャーをビシバシ進めるニャ。

本当ッスか!
オレ、がんばるッスよ!!

写真集も今日のレクチャーも楽しみね!

今回の更新部分ニャ

ということで、今日は前回メニューを編集したこのページの中身と、他のページの中身を作りこんでいくニャ。

でも、画像とかテキストとか、全部考えるのって大変ッスよね。
他の部署にも、書き方があってるか、確認しないとな箇所もあるし……。。

うむ。個人や風通しの良い中小企業などはすぐ確認できそうだが、会社の規模や体制次第では、社内確認に時間がかかることも多いニャ。
画像は、吾輩が事前に各部署のOKをもらっておいたニャ。
テキストは、現行のページで公開されているものと同じでいい、と社長のOKを得ているニャ。

さすが特別顧問さん、事前準備ばっちりね!
ページを作ることも大事だけど、下準部も大切なのね♪

うむ!!
では、まず現行の古いページを見ながらテキストを配置していくニャ!

現行ページ(これ)のテキストを、このページに配置していくニャ

じゃ、猫先生が指示してくれた、ここのブロックエディタを開くッスね!
よいしょー!

ブロックエディタの開き方は、第7回を参考にしてね!

ブロックエディタで編集していくッス!

まず「タイトル」だが、これは古いページのグレーの部分の「巣立ち、出会い、また巣をつくる」でいいだろう。
コピー&ペーストするニャ。

コピペ? 手打ちじゃダメなんッスか??
オレ、なにげに打つの好きなんッスけど。

まったく同じ文章なら、手打ちよりコピペのほうが正確になると思うわ♪
漢字変換を間違えちゃったりすると、ときどき悲惨になるし……そうよね、猫先生?

うむ。
入力ミスの削減と効率化のために、吾輩もコピペをおすすめするニャ。

了解ッス!
ベストオブおべんとうを消して……よいしょー。

次に「本文」だが、ここはタイトルの下にある小さめの文字の部分ニャ。
古いページで、次に入っているのは「鳥巣株式会社は、お客様との出会いから巣立ちまでをサポートいたします。」だから、これをコピペで入れるニャ。

はーい! よいしょー。

その下の「リンク画像」っていうのはどうするの?

ここは、新しい画像を用意したニャ。
この「経営理念の詳細」に画像を変更するニャ、鳥太。

おっ、シンプルだけどかっこいい画像ッスね! どっこいしょー!!
画像の変更のしかたは、第8回を参考にしてほしいッス!

よし!
では、次の横長の画像ふたつのブロックは削除するニャ。
テンプレートの画像だから、これは使うことができないニャ。

そっか、テンプレートに使われてる画像は、借り物のイメージ画像だから使っちゃいけないのね?

うむ。
実際にページを公開する前に、自分で用意した画像に差し替えないといけないニャ。

なるほど……了解ッス!
じゃあ、ぽちぽちっとー!

よし。
では、ここまでで一旦確認してみるニャ。

ここまでの進捗ニャ

では、次は画像を足すニャ。
横に二つ画像を並べるんだが……まず、ブロックを追加するニャ。

はーい。 ……って、あの、猫先生……。。
画像を横に2つ並べるテンプレート、ないっぽいんですけど……。

うむ、そうなんだニャ。
「スマートモード」で作るのは難しいので、ここは「エディタモード」を使うニャ。
「エディタモード」の「画像/ギャラリー」をクリックして、「フォトレビュー」をクリックし、最後に「適用」ニャ。

エディタモードの選びかたニャ

だ、大丈夫っすかね…… ぽ、ぽちぽちっと。。
なんだか、見慣れないブロックエディタ画面が出てきたッスよ。。

うむ。恐れることはないニャ、鳥太。それがエディタモードの画面ニャ。
吾輩の指示通りに進めていけば大丈夫ニャ。

エディタモード画面と進め方ニャ

うーん、スマートモードよりちょっと難しそうね。
でも、間違って消しちゃったりしても、また新しいブロックをこのテンプレートで作ればいいだけよね?

そのとおりニャ、つぐみ。
もし操作が怖い場合は、第9回で学んだ、ブロックの複製をしておくのも良いニャ。

わ、わかったッス!
ビビッてないでガンガンいくッス! ぽちぽちっとー!!

あっ、なんだかふっきれたわね、鳥太くん!

……よし! できたッス!!

エディタモード画面(完了)とプレビューッス!!

うむ!
この調子でどんどん進めるニャ、鳥太!!

はーい!
次はここっすね! ぽちっと〜!!

サクサク作り進めてるわね!
ファイト、鳥太くん!

……………………
よし! 編集が完了したニャ、鳥太!!
プレビューを押すニャ!!!

はい!!
いきまーす!

1ページできたッス!!

おおお……!
と、鳥巣株式会社のページになったッスね……!!

ほんとね!
最初にこのテンプレートを見たときは、旅行会社っぽかったのに……!!

うむ……!!
ついにここまできたニャ……感無量ニャ……。

さて、1ページで感動に浸っているヒマはないニャ!
鳥巣株式会社のページは、「会社のご紹介」「経営理念」「事業情報」……など、まだまだあるニャ。
このページを複製して、他のページも作っていくニャ!!

猫先生、オレ、ようやくホームページ担当の仕事ができてる気がするッス……!!
この調子で進めていくならできるッス! がんばるッスよ!!

疲れたらわたしも手伝うわ、鳥太くん!
来週までにがんばって他のページも作りましょ♪

うむ、チーム一丸となって進むニャ……!!
次回は、これがあれば募集もアンケートもらくらく! 採用ページのお申し込みフォームを作っていくニャ!!

次回「世界とコンタクト☆お申し込みフォーム作成!!」お楽しみに!

今回使ってみたサービス

  1. サービス名:BIGLOBE Feather cloud
  2. 提供会社:ビッグローブ株式会社
  3. http://www.fc.biglobe.ne.jp/index.html