No Code Challenge-そうだオンライン・スクールを作ろう☆彡[06]外観をデコレーションする!

今日は僕のスクールをteachableに備わっている機能で、外観をいろいろとデコレーション、装飾していきま~す☆彡

と言うことで、早速僕のスクールの「テーマ Theme」ページに移動します。

ここでは、以下の設定が可能です。(便宜的に数字で並べてみたよ!)

1)Logo & Branding
2)Font Family
3)Colors

まず、Logo & Brandingでは、カスタムロゴやファビコンを追加し、スクールのサムネイルを調整します。画像とかが埋め込めるということです。

Font Familyでは、スクール全体で使用するフォントを変更します。Fontもいろいろと揃ってますね!サイト全体のフォントの設定変更ができます。

最後に Colorsでは、スクール全体の色をカスタマイズするか、プリセットカラーパレットのいずれかを使用します。これはスクールのイメージカラー選定になるので、案外大切な部分だと思います。

デフォルトでは、一番左の「黒✖緑」が採用されています。ご自身のパーソナルカラーに合わせて設定変更してみることをオススメします。もちろん、面倒くさいな…と考えるあなたはデフォルトのままで全然OKですよ!
ナビゲーションバーやフッター、ヘッダー、ボタンやリンクなど、実にさまざまなものが用意されています。

それでは、Logo & Branding からやっていきましょう!
もちろん何も変更しなくてもOKなんだけど、一応練習なので、一緒にいろいろやってみましょう!

1)Logo & Branding

それでは、Logo & Branding からやっていきましょう!
もちろん何も変更しなくてもOKなんだけど、一応練習なので、一緒にいろいろやってみましょう!

L&Bでは3つ設定します。
Site Logo」「School Thumbnail」「Favicon」です。
まずは、右上の「Preview プレビュー」をクリックして確認してみましょう。

現在Free Planでやっているからなのか、こんな画像が嵌っているページ登場!

本当は?以前はこんな画面になってたけど…変わったんだね?

これらは何も手つかず、純粋無垢な個人ページ!
これからどんどんカスタマイズしていくよって感じです!

では、また設定画面に戻ります。

まずは「Site Logo」がどこかというと、スクール名が書いてある左にイラストや画像がはめ込める様になってます。

teachableに「Preset」として装備されているもの、あるいは自身のPC内に格納している「画像」や「イラスト」等を選択します。以下のような感じです。

これらの中から選択するもよし、既に決定している「Logo」があればPCから選択してもよいです。ここではPC内から「REHAB x Educations」のLogoを選んでみます

赤枠の「My Computer」をクリックしてみましょう!

Choose files」をクリックし、PC内の「画像等」から選択します。

自身の画像ファイルから選択します!

「Uproad」をクリックすると、このようにアップされます。

「Preview」をクリックし、どのように反映されているかを確認しましょう。

これが、下図のように「名前(Koji Ikeda’s School)」の代わりに「サイトロゴ」に変更になりました!

このあたりの変更は、自由にやってもらえるといいかと思います!
「サイトロゴ」が良いか悪いかの判断はここではしません。次に進みましょう!

2)Favicon

続いて「ファビコン」になります。
ファビコンとは、Previewでもわかると思いますが、赤丸で囲んだ部分のことを言います。

ここをオリジナルに変えたければ変えるし、変えたくなければ変えなくてもOKです。
と言うことで、これも「REHAB x Educations」のロゴを使用します。PCないから選択すると、下図のようにコネクトされます。

再び「Preview」で確認します!赤丸の中に確かに画像が反映されています!

3)School Thumbnail

最後は「School Thumbnail」です。

これは、以前は「Homepage Background」と表記してあった場所ですが、現在は「School Thumbnail スクール・サムネイル」に変更になってます。
ちょっと設定がややこしかったり、名称が紛らわしかったので変更されたのかと思います
元々の「Homepage Background」からは以下のページのBackgroundの変更を想像してしまっていましたが、変更後の反映は違っていましたので…この修正はGoodです!

実は管理画面の左下にある部分をクリックすると「my teachable」にいきます。

先ほど設定した「ファビコン」が赤丸の部分にも反映されていますね!
先ほど設定した「アカウント」で、この人(ここでは私)が所有しているスクール情報、いわゆるこの人(私)がスクール・オーナーになるので、所有しているスクール情報が提示(青枠)されています

また、teachableの中では他者の設定したスクールに登録したり、コースを受講したりすることができますが、そのようなときにも、このページに「登録しているスクール(コース)」の情報も掲載されます。現在は何もないので個人設定のスクールのみ掲載されている状態です。
このように「my teachable」という機能があります。

ここでは紹介だけしておきます。後日、別の機会に説明することになるかと思います。

ここで説明したいのは、青枠の緑部分の「学校のイラスト」を変更できる機能が、赤枠で囲んだ「School Thumbnail」です。いわゆる「サムネイル」を作成することになります!

ちょっとやってみますね!
上図赤枠の「School Thumbnail」をクリック!

ここでもオリジナルを反映させたいので「My Computer」をクリックします。

たくさんの画像から選択したら、①の「Convert」をクリックします。

すると、以下のような表示になるので、右下の「Save」をクリックします。

これで「Theme テーマ」が出そろいました。もう少しですね!

ここで左下の選択すると緑色に変わる部分をクリックすると、下図のように「my teachable」が表示され、サムネイルが出来上がりました。

これで「Theme テーマ」の「Logo & Branding」の設定が完了しました
お疲れさまでした!

4)今日のまとめ!

と言うことで、今日のところはここまでと言うことにしましょう!
スクールの外観がずいぶんカッコよくなってきたのではないでしょうかね!
特に、自分のアイコンやロゴを持っていると、特別感がありとってもいい感じになりますよ!

明日はつづきの「Font Family」と「Colors」をやり終えたいと思います。
超ゆっくり目で進めているので、あなたも一緒に完了したのではないですか!

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

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

投稿者: コージーニ先生

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

コメントを残す

Kojini's Cafe established 2016をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む