読者です 読者をやめる 読者になる 読者になる

デジハリWebスクール 戦記

デジハリWebスクールでWeb制作を勉強してます。もちろんブログは非公式です。

デジハリ内自主勉強会:レべ研9回目を開催しました!今回は【WordPressを学ぼう!】の会でした。

レべ研 自主勉協会 WordPress 女子会 HTML CSS Sass

おはようございます!!

今日もいい天気です!さて、昨日はデジハリ内で2016年在校生による自主勉強会を行いました。

5月から始まったこの勉強会も今回で、なんと9回目!!参加者が全員女子という女子会でした!

f:id:etamaemma:20160805054257j:plain

 

トレーナーの先生を呼ばず、あえてスキルの低い在学生で模索しながら獲得した知識を披露し、議論を高めていったり、お互いに刺激を与えあうことを目的としています。トップダウンで流れる知識ではなく、まさに「自主的」に情報を共有しあう会です。

 

今回のスピーカーは、わたし!!自分なりにWordPressを勉強してきて、「あ!これならわかるかも!!」と思う要素をまとめてプレゼンしました。

少し内容をこちらでもご紹介しますね。

 

f:id:etamaemma:20160805055630p:plain

「わたしなりに…」とついているのは、まだこれが最短ルートかわからないからです。

でも、正攻法じゃないからこそ、つかみやすいってあるよね!

 

でも、最初はWordPressの使い方からは入りません!先日、Wordbenchに出て、2015年WordCamp実行委員長を勤めた清野さんからたっぷりWordPress愛を伝授されたわたしとしては、WordPressが「オープンソース」であることをみんなにご紹介する必要があります。(たぶん、そこは書籍でもあまり学べないことなので)

 

清野さんのWordCamp等での過去記事をまずはご紹介。

wp-e.org

 

どうして、WordCampなるものがあるのか。どうしてこんなに人が集まるのか、そんなことを記事内容や記事写真を元にご紹介。オープンソースにすることで共同開発をすることがどんな風にステキなことなのか!わたしなりに、伝授された内容をお伝えしました。

 

f:id:etamaemma:20160805055642p:plain

 

さて、お次は、みんなが興味ある、WordPressって何?というところです。

デジハリ入学したての方は、WordPressって何?から始まります。

CMSだよ、といってもCMSが何かもわからない状態です。なので、そのベースをまずはちょっと説明。

そのうえで、こちらの質問…。

f:id:etamaemma:20160805055651p:plain

 

これは、パズルとして図解した方がわかりやすいっ!ってことで、以下の図を作りました。

 

f:id:etamaemma:20160805055702p:plain

 

これを…。HTMLコードで書いたイメージとして示します。

f:id:etamaemma:20160805055717p:plain

 

1ページサイトなら、別に大したことないですよね?

わたしも5ページのサイトを作っていたときはあまり疑問に思いませんでした。でも、13ページのサイトでレスポンシブ設定を行ったとき、あまりにもheader要素が長すぎて!!!これは、何かもっといい方法があるんじゃないか?と疑問に感じました。

f:id:etamaemma:20160805055727p:plain

 

こんなことになります。めんどくさいーーーー!!

 

f:id:etamaemma:20160805055737p:plain

 

一か所だけ書けば、後はコードを呼び出すだけです!!

つまりは「こういう風に便利なものだ!」とお伝えさせて頂きました。

(ほかにも便利要素はあるとは思うのですが、初心者の心をぐっとつかめるのはここかな…と^^;)

 

あとは、最初から<?phpコードを理解しなくてOK!あれは、宅配便についてくる伝票と思おう!

コピペでOK!だから、とりあえずチャレンジしよう!というプレゼンでした。

 

そして、WordPressを理解する上で重要な「ループ」と「条件分岐」について軽く説明。

その後は、ネットで見つけた超絶わかりやすい、Mignionさんのスライドについてご紹介!

 

www.slideshare.net

 

www.slideshare.net

 

www.slideshare.net

 

www.slideshare.net

 

Mignionさんのスライドは、かわいくて楽しくて、「こんな風にWordPressに向き合っている人もいるんだ~~」と感じさせられます。実際、参加者の中からも「テーマとか自分で作っちゃうの!!?」という声が漏れました。そう、あまりWordPress歴がなくても、楽しみながら作っちゃうMignionさんのスライドは、とっても勇気をもらえるものなのです。(ちなみに彼女のサイトもめっちゃかわいいサイトだから要チェック!)

mignonstyle.com

 

 

最後に、いま、猛烈に自分の汚いCSSを書き直し中でめっちゃ困っているわたしから「おまけ」のスライド。

f:id:etamaemma:20160805061429p:plain

 CSSは、デジハリの場合だと、動画でidをつけていることが多いのですが、最近はclassで整理することが多いのが実情。そして、その情報整理の方法は、こちらの書籍が超絶わかりやすいです。

 

そして、もしコードを「書き直す」場合には、せっかくだからSassも覚えちゃった方がお得!いいこといっぱいあるし!!

 

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

 

 

 

あ、あと、「どんな本でWordPress学べばいいの?」という声もあったので、そちらをご紹介。わたしの場合は、0から管理画面の使い方などを学ぶのには、こちらの書籍を使いました。こちらをどう使うかというと、

頭で考えずに”写経”する

のがよいです。理解しようと思うとむずかしくて、でも”写経”なら、否が応でも進みますし、自然とコードにはなんとなく慣れていきます。

 

WordPressレッスンブック HTML5&CSS準拠

WordPressレッスンブック HTML5&CSS準拠

 

 

そういったベースがある状態で、先日Wordbenchで著者にもお会いすることができた、以下の書籍です。こちらは、HTML+CSSで作成したファイルがあった上での、WordPressカスタマイズを教えてくれます。必要なことを網羅しているのでわかりやすいと思います。

 

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

 

 

あ。そうそう、清野さんの本もご紹介しますっ!Wordbenchで「僕も本出しているんですよ~」とお伺いしましたので。

ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩

ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩

 

 こちらはまだ書店でチェックできていません!が、今後チェックいたしますっ!!

 

ということで、昨日ご参加のみなさま、ありがとうございました。

スピーカーとしても、まだまだ使えてないのですが、知識を確認しながらまとめていくことはとても勉強になりました。今日からもまたがんばりまーす!