No Code Challenge-そうだオンライン・スクールを作ろう☆彡[08]Pagesでデフォルトの画像を変更する!

昨日までにSiteの「Theme」の変更ができるようになりました。
今日はあなたのteachableのスクールホームページを編集する作業をします!
siteの真ん中あたり「Pages ページ」を使って主要ページの背景などを変更します。

ちなみに主要ページとは、PAGE TITLEの以下の3つです。

・Homepage(ホームページ)
・Privacy Policy(ページURL)

・Terms of Use(利用規約)

1)Pages(ページ)のご紹介


ここでは「PAGE TITLE(ページタイトル)」「PAGE URL」が変更可能なようです。

これが詳細な内容です。Pagesでは以下の内容を管理していると言うことになります。「PAGE TITLE(ページタイトル)」では、ホームページプライバシー・ポリシー及び利用規約の変更が可能ですね。

PAGE URL」は、もちろん上記を反映するホームページ、プライバシー及び規約んになります。

Homepage Backund(ホームページの背景)に関しては、上記「PAGE TITLE」の「Homepage」から編集できます


と言うことで、上図緑枠の「Preview」をクリックします。

これがホームページの編集ページになります。


デフォルトでは「Canonのカメラ」が挿入されていたので、「REHAB x Educations」のイメージに変更し、ホームページを編集しようと思います。

2)ホームページを編集しよう!


まず、Bannerをクリックしてみましょう!

それでは、やっていきましょう!以下の順序で変更・修正していきますね!

①Image(ホームページのバックグランド)
②Heading Text(スクールネーム)
③Sunheading Text(スクールの紹介文)


①Imageを編集しよう!

これは既成の画像があればそれでOKです!
なければ、無料で使用できる画像から選択してくる必要がありますね。
あなたのスクールのイメージにピッタリの画像を探しましょう!

ちなみに僕は「第3の故郷」であるイタリアの研修先の建物を背景に入れたいと思います。やってみます。


Imageにカーソルを持っていくと「⊕ Replace Image」と表記されるので、赤いゴミ箱(Dush Box)も表記されますが、そのままクリックしましょう。


すると、「Choose files」のページが出てきます。
「My Computer」「Web images」「Link(URL)」など、いくつか表記されるので、あなたが選びたい画像の在処を選択しましょう。
当てがないあなたなら、最下段の「Custom Source」から選択できますよ!

ちなみに、「Custom Source」をクリックすると、以下のような画像が出てきます。

僕は「My Computer」から取り出します


青枠の画像を選択し、クリックします。


このページが出てきます。


真ん中の部分に選択した「画像」が反映されているのが確認できます。
確認できたら、右下の「Upload」ボタンをクリックしアップロードします。

このように、「Image」が変更され、僕のイメージ通りのホームページになりました。次は「Heading Text」です。

②Heading Textを編集しよう!


赤枠の「School Name」を独自のスクールネームに変更します。
僕の研究所名は「REHAB x Educations」なので、それを入力します。


反映されましたね。
しかし、このイメージには文字色が合っていないので、変更します。


赤丸枠の部分で文字色変更します。


コーポレートカラーの「Light Blue」を選んでみましたが、どうですかね?
まあ、これはこのままで次に進みましょう。次は「Subheading Text」の変更です。

③Subheading Textを編集しよう!


ここには、スクールの理念とかを入れたいと考えています!
やはり「Heading Text」は緑、「Subheading Text」は赤ということで、イタリアンカラーにしてみました。

結果↓


設定がうまくいきました!
「Image」「Heading Text」「Subheading Text」が、それぞれ反映されました

3)その他の画像も編集してみよう!

このホームページの下には、画像が2、それに合わせたテキストが2あります。
デフォルトでは以下のような画像が貼ってありますが、これらもここで変更できます!
以下のような感じです。


ここには、スクールの代表的なイメージなどを掲載するといいでしょうね!
そのためには、コンテンツを考慮した画像選択が重要になりそうです。

変更画面はこんな感じです↓

ホームページで実行したことと同じようにするといいです!


今回は「Custom Source」から選んでみます!ちょっとやってみます↓


画像を選択したので「Select one file」ボタンをクリックします。
下のような画面が出ます。


選択した画像が赤丸に反映されています。
これを確認したら、右下の「Upload」ボタンをクリックします。


このように反映されました。
イメージだけ見てるといい感じ!いい雰囲気!なんだけど、コンテンツにフィットしているかはちゃんと考えないといけませんね!

残りも同じようにやっていきましょう。

4)今日のまとめ

今日は「Pagesでデフォルトの画像を変更する!」ことができるようになりました。
どんどん内容が揃ってきて、あなたらしい、僕らしいスクールになってきましたね☆彡
いろいろやらなくてはならないけど、ずいぶんカタチになってきたので嬉しいですね!
ゆっくり!やさしく!やわらかく!すすめています。もう少しお付き合いをよろしくです。

◇ 
今日も最後まで読んでいただき、どうも有り難うございました。
これらの情報があなたにとって有益であれば、ますます嬉しいです。
それでは、また!Ciao☆彡

【参照サイト】
teachable:https://teachable.com/

投稿者: コージーニ先生

リハビリテーションセラピストです。現在までに約15万人の患者、その家族及び学生と保護者とかかわりを持ってきました。その経験から患者とその家族&子どもたちと学生たちとの人生に寄り添って感じたこと、学んだことの中から「過去の僕」に知っておいてほしいコト&「未来のみんな」に伝えたいことを呟きます。 著作や詳しい活動履歴はこちら→ https://kojini'sblog.com/about

コメントを残す

%d人のブロガーが「いいね」をつけました。