icon_torita-gj.png

人物紹介:羽村鳥太

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

icon_neko-1.png

人物紹介:猫先生

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

icon_tugumi-gj.png

人物紹介:羽雲つぐみ

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

icon_torita-5.pngそ、そんな……ひどいッスよ~。

 

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

 

icon_torita-gj.png本当ッスか!
オレ、がんばるッスよ!!

 

icon_tugumi-3.png写真集も今日のレクチャーも楽しみね!

img_fcblog_13-1.jpg

 

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

 

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

 

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

 

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

 

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

img_fcblog_13-2.jpg

 

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

 

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

img_fcblog_13-3.jpg

 

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

 

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

 

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

 

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

 

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

 

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

 

icon_torita-2.pngはーい! よいしょー。

 

icon_tugumi-2.pngその下の「リンク画像」っていうのはどうするの?

 

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

 

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

 

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

 

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

 

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

 

icon_torita-1.pngなるほど……了解ッス!
じゃあ、ぽちぽちっとー!

 

icon_neko-1.pngよし。
では、ここまでで一旦確認してみるニャ。

img_fcblog_13-4.jpg

 

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

 

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

 

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

img_fcblog_13-5.jpg

 

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

 

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

img_fcblog_13-6.jpg

 

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

 

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

 

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

 

icon_tugumi-3.pngあっ、なんだかふっきれたわね、鳥太くん!

 

icon_torita-gj.png……よし! できたッス!!

img_fcblog_13-7.jpg

 

icon_neko-4.pngうむ!
この調子でどんどん進めるニャ、鳥太!!

 

icon_torita-2.pngはーい!
次はここっすね! ぽちっと~!!

 

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

 

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

 

icon_torita-gj.pngはい!!
いきまーす!

img_fcblog_13-8.jpg

 

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

 

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

 

icon_neko-3.pngうむ……!!
ついにここまできたニャ……感無量ニャ……。

 

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

 

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

 

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

 

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

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