セブ IT×英語留学の『Kredo』体験記｜第２週３日目

セブでIT×英語留学って、ぶっちゃけどうなの？

費用もかかるし、行こうかどうか迷っています。

というお悩みを解決できるシリーズです。

今回は、セブ IT×英語留学の『Kredo』さんに来ています。

滞在先は駐在員も住むことがあるAvida Towerが寮になっているので、セブシティーの中では超快適ですよ。

セブに綺麗なビーチはないぞ！

そういえばですが、セブ留学って、マクタン島に学校がない限り内陸です。

海はありません。

もうそろそろセブの各種語学学校側も

「Cebu Cityは内陸で、海には接していない」

とちゃんと言いましょうよ。

確かに週末に海に行けますけど、けっこう遠いです。

海を満喫したい人は、学校がない日にボラカイ島やエルニドに旅行するといいですよ。

私なんかは仕事でセブに来ていますが、「セブ」という名前だけで遊びに来ていると思われるのは好ましくないですね(笑)

セブシティーというか、フィリピン自体がどこも田舎なので、タクシーで移動しない限り、娯楽がないです。

IT Parkはレストランがたくさんあるし、24時間オープンのファストフード店もあるし、コンビニもあるのでそこそこ便利です。

スーパーが少し遠いのと、セブは渋滞が酷いです。

まぁ、東南アジアはどこもそうでしょうし、LAとかも凄いですから、どこに行っても日本より快適な国はありません。

来年にはショッピングモールができる・・・と言われていますが、予定が遅れる国なので、さてどうでしょう。

個人的には森や木がそこら中にあるし、寒くないし、とても好きな国ですが、やることがない人にとってはめっちゃ暇すると思います。

個人的な意見ですが、駐在妻の人とかは覚悟して来られたし、ですね。

ノマドする人にとっては、ネットは遅いですが、のんびりしてて、過ごしやすい国だと思いますよ。

IT留学｜第２週３日目

さて、まずは授業の感想から。

昨日は基本的な説明で、ぶっちゃけですが、おいおいこんなことをやっていて大丈夫か・・・と思っていました。

ところが、今日の授業はかなり役立つと思います！！！

昨日同様、WordPressを勉強しました。

WordPressだけじゃないと思いますが、WordPressって初めて使う人にとってはかなりとっつきにくいんです。

ブログを書くだけなら簡単なのですが、ウェブサイトのデザインをいじるとなるとけっこう面倒です。

色々と機能があるし、どこをいじればどこが変わるのかなど、最初は把握するのに時間がかかるんですね。

実際、本を買えばできるレベルですが、本ってWordPressの基本説明から載っているので、必要なウィジェットやプラグインのことを書いてくれていなかったり、結局、肝心な部分にたどり着くまでにかなりページ数を読まないといけません。

確かに、本って詳しいのがメリットですが、基本説明ばかりだと途中で挫折してしまうのではないかなぁと思います。

Kredoで授業を受けると、WordPressの固定ページのレイアウトの設定、投稿ページのレイアウトを自分でアレンジできるようになりますよ。

大切な部分を一気に最初に教えてくれるので、自分でサクッとWordPressを使ってウェブサイトを構築できるようになります。

また、有料のテーマを使っているブロガーの人でも、固定ページの設定がよくわからない人が多いと思うのですが、Kredoで授業を受けておけば、気付きがあると思います。

来週は、１か月目の３週目なのですが、３週目からCSS／HTMLの基礎を学ぶので、WordPressの骨組みとデザイン部分を少しいじれるようになりますよ。

ただ、機能面はPHPなので、WordPressの機能を詳しく理解するにはPHPをかなり勉強しないといけないようです。

PHPを極めるのはかなり時間がかかるでしょうね。

フリーランスエンジニアになるためには

別にフリーランスを目指す必要はないですが、WordPressをいじるのに必要な知識をまとめると以下になります。

• HTML・CSS
• Bootstrap
• jQuery
• PHP
• WordPress
• MAMP
• サーバーとドメインの基礎
• MySQLの超基礎
• Adobe『Photoshop』の超基礎

引用元：フリーランスエンジニアになるための全行程まとめ

Kredoの先生に聞いている感じも同じような感じなので、これらを身に着ければ、どうにか働きながらスキルアップできると思います。

私の場合は、プロのように熟達する必要はないので、上記を理解し、ゆっくりでも使えるようにすることです。

何事も一歩一歩ですし、細分化すれば対応可能だと考えます。

事前準備

ここからは単なる授業メモなので、大したことは書いていません(笑)

以下のプラグイン/Pluginsをダウンロードして、有効化/Activateしておきます。

プラグインというのは、便利な追加機能です。

WordPressって、機能を追加できるんです。

自動でもくじを作ってくれるとか、より使いやすいブログエディターとかですね。

ウェイジェットというのは、ウェブサイトのサイドバーとかにカレンダーを表示したり、SNSボタンを配置したり、ウェブサイトになかったものを追加して表示するときに使うことが多いです。

WordPressの固定ページのレイアウトを変える

用意ができたら、「固定ページ／Pages」に行きます。

１列目

Add Rowで、ページ構成を考えます。

３：７とかにして、３のほうをクリックして、add widgetをクリックし、Visual Editorを追加します。

Editを押して、Visual Editorに文字を入れてみましょう。

７のほうをクリックして、Galleryを設定。

Galleryに写真を追加します。

Columnsは２に設定。

Size「Thumbnails」に。

写真を触れば写真を移動できます。

これらはプラグインやwidgetsがなければ機能しません。

初期設定では使えない機能です。

固定ページ「Gallery」に戻って、row layoutを変えることで、ページの列を変えることが可能です。

つまり、この機能を知っていれば、ページの余白を設定できます。

２列目

今作った列の下に、another rowで、列を追加してみましょう。

クリックして選択し、add widgetからVideoを選択して設定します。

YouTubeのページに行きましょう。

URLリンクをコピーします。

今作っている固定ページに動画を入れたい場合に、この作業が役に立ちます。

固定ページ戻って、URLをペーストします。

Add to widgetで動画が挿入されます。

更新して、動画が挿入されているか確認しましょう。

サイズが大きい場合は、rowのところに行って調整します。

２列目右

先ほどの２列目の動画の横に、１つブロックを追加しましょう。

Visual Editorを設定します。

さっきはVideo widgetで、今回はVisual Editorです。

Custom HTMLを入れれば、何かを入れ込むことも可能ですね。

２コマ目①：お問い合わせページ

固定ページを新規作成で追加して、「お問い合わせページを作ります。」

２列作ります。

両方とも２つに分割します。

ブロックをクリックして、add widgetで「Custom HTML」を追加します。

追加された、Cutom HTMLを開いて、名前、電話番号、emailなどを設定します。

そのままの画面で、attributes

CSS Stylesに行きます。

HTMLはstructureを担当。

CSSはdesignを担当。

今作ったCustom HTMLを複製（duplicate）

先ほど設定したCSS（ブロックサイズ）の設定がコピーされます。

Google Mapの埋め込み

Google Mapに行って、埋め込み用のURLをゲットします。

鍵マークで、列を複製できる

Contactページに戻って、列の右上に鍵マークがあるので、そこから複製ができます。

最初に設定した、CSSコードがそのままになるので、サイズを維持できます。

Contactボタンを教えて、Contact Formsに飛びます。

Contact Formを開いて、編集・設定します。

設定が終わったら、ページ上部にあるhtmlをコピーします。

固定ページ「Contact」に戻って、２列目の左のブロックを開き、先ほどのhtmlをコピーします。

Appearance → menuで「contact」を追加

TOPメニューにコンタクトを追加します。

２コマ目② Plugins → MetaSlider/メタスライダー

TOPページやサイドバー、ボディーにスライド写真を載せられる機能のようです。

Pluginsからダウンロード、installしてから、Activateします。

Dash Boardに戻ると、左のメニューにMetaSliderがあるはずです。

MetaSliderを開きましょう。

Add Slideをクリックして、新しいスライドショーを作れます。

Advanced Settingで色々と設定を変えられます。

設定が終わったら、設定を保存しましょうね。

AppearanceからCustomizeに行きます。

Theme Settings → Home → Home Page Slider

Publish/公開ボタンを押したら、ウェブサイトにSliderが反映されます。

Appearance → Widgets

ページ構成を変える機能です。

まずはSocial Media Widgetsをいじってみましょう。

Footerに設定します。

あとは必要なSNSの設定をします。

３コマ目：続き

ダッシュボード → appreance → widgets

これらはサイドバーの設定です。

不要なwidgetsを消しちゃいましょう。

サイドバーから余計なものを消すということです。

widgetsを並び変えるときは、ドラッグするだけです。

サイドバーのカレンダーを一番上や下に持ってきたり、検索バーとかを移動させることができます。

ここでは、以下の４つを追加してみましょう。

新しい記事を作る：add new post

記事でもPage Builderを使えます。

これは便利ですね。

英語勉強法.jpは有料テーマJINを使っていますが、Page Builderは使えるのかなぁ。

今度試してみたいです。

Page Builderを使えば、ここでもMetaSliderなど、色々とページの構成を変えながら記事を書くことができますね。

作業：自分のウェブサイトを作ってみる

４コマ目と明日で自分のウェブサイトをWordPressで作ります。

まずはテーマ選びです。

見た目をざっくり想像できます。

使いづらいテーマを作ったら死亡しますね。

『Kredo』IT留学と英語勉強法のまとめ記事

以下の２記事に『IT留学』全記事と『英語勉強法』の主要記事をまとめてあります(^^)

ぜひお立ち寄りください！

フィリピン留学 無料相談

セブ 英語×IT留学『Kredo』の無料留学相談しております。

Twitterかお問合せまでどうぞ。