松戸WordPress部スライド

1. はじめての
オリジナルテーマ制作
松戸WordPress部
2014年11月26日

2. 自己紹介
• 名前 三柴 誠一郎（フリーランス）
• 職業 Webのディレクションとかフロントエンドとか
• 経歴 IT業界１７年 ⇒ ニート9ヶ月 ⇒ フリーランスもうすぐ1年
• 最近の気になる事 ベスト３
猫がついてくる
鞄からおでん（ちくわ）が出てきた

3. 本日のテーマ
①スターターテーマ（_s）を導入する
②CSSフレームワーク（Foundation）を導入する
③アイコンフォント（Genericons）を導入する
④オリジナルテーマ制作（Let’s ハンズオン！）

4. 本日のテーマ
①スターターテーマ（_s）を導入する
②CSSフレームワーク（Foundation）を導入する
③アイコンフォント（Genericons）を導入する
④オリジナルテーマ制作（Let’s ハンズオン！）

5. スターターテーマ（_s）？
テンプレートファイルがあらかじめ用意されている！
スタイルシート
オリジナルテーマを作るために必要な
style.css【必須】テーマのスタイルシート
rtl.css 右から左に記述する言語用のスタイルシート
テーマ関数ファイルfunction.php【必須】WordPressの（管理画面・サイト）を制御します
テンプレートファイル
index.php【必須】メインテンプレート
single.php 投稿ページの個別表示用テンプレート
page.php 固定ページの個別表示用テンプレート
他にも 404.php, archive.php, search.php, image.php などあります
モジュールテンプレート
header.php get_headre()で読み込まれる
footer.php get_footer()で読み込まれる
content.php get_template_part( ‘content’ ) で読み込まれる
他にも comments.php, content-single.php などなどあります

6. お得！

7. 入手方法
以下にアクセス！
http://underscores.me/
①テーマ名を入力して
②クリック！
Sass対応版は
ココをチェック！

8. こんな感じ

9. こんな感じ
Sass対応版の場合

10. 使い方
①ダウンロードしたファイルを解凍！
②テーマディレクトリ配下にコピー（移動）!
※テーマディレクトリはココ /wp-content/themes/
③ダッシュボードの[外観]-[テーマ]でテーマを変更

11. 画面イメージ

12. 本日のテーマ
①スターターテーマ（_s）を導入する
②CSSフレームワーク（Foundation）を導入する
③アイコンフォント（Genericons）を導入する
④オリジナルテーマ制作（Let’s ハンズオン！）

13. CSSフレームワーク？
HTMLを記述する時にフレームワークにそった
記述（クラスを指定)するだけでいい感じにしてくれる！
STRUCTURE
Bootstrap, Foundationなどが有名!
Grid レイアウトを均等に分割し、コンテンツをマス目上に配置する
Visibility 画面サイズや向きによって表示・非表示を制限する
他にも Block Grid などなどあります
NAVIGATION
Off-canvas 左や右からスライドするメニューを作成
他にも Top Bar, Sub Nav, Breadcrumb, Pagination などなどあります
他にも FORMやBUTTON, TYPOGRAPHY
などなど、様々な用途に対応したクラスが用意されている！

14. お得！

15. 入手方法〜Foundation編〜
以下にアクセス！
http://foundation.zurb.com/
①クリック！

16. 入手方法〜Foundation編〜
or or Sass対応は
②クリック！
この先を参照

17. こんな感じEssential版の場合

18. こんな感じComplete版の場合
cssも全部
（サイズが大きい）
jsが全部

19. こんな感じSass対応版の場合
この画面では見えないけど・・・
Gitのリポジトリも作られる

20. 使い方〜grid〜
レイアウトを均等に分割し、
コンテンツをマス目上に配置することができる
初期値：
横幅1000px
分割数12
row 分割するコンテンツを挟む
columns 分割するコンテンツ
large-? おもにPC用の分割数
medium-? おもにタブレット用の分割数
small-? おもにスマホ用の分割数
HTML
初期値：
small - 横幅40emまで
medium - 横幅64emまで
large - 横幅９０emまで

21. 見え方PC
タブレット
largeが縦に
mediumとsmallは
指定した分割数で配置
スマホ
largeとmediumが縦に
smallは指定した分割数で配置

22. gridの初期値を変更
_settings.sass の以下を変更
Sassの場合
横幅
分割数
マージン（rowの外側）

23. 本日のテーマ
①スターターテーマ（_s）を導入する
②CSSフレームワーク（Foundation）を導入する
③アイコンフォント（Genericons）を導入する
④オリジナルテーマ制作（Let’s ハンズオン！）

24. アイコンフォント？
画像っぽいフォント！
フォントなのでfont-sizeで大きさが変更できる！
フォントなのでcolorで色が変更できる！
Genericons - Automatticのアイコンフォント
Foundation - ZURBのアイコンフォント
他にも いろいろあるよ

25. という事は？

26. ＆＄＃｀＊＠＋＞＜

27. 入手方法〜Genericons編〜
以下にアクセス！
http://genericons.com/
①クリック！

28. こんな感じ
利用（指定）するファイル
読み込まれるファイル

29. HTMLファイルに記述
HTML
Copy HTML をクリックして
表示されたコードを貼付ける

30. スタイルシートに記述
Copy CSS をクリックして表
示されたコードを貼付けるHTML
CSS

31. メニュー毎にアイコン変更
タイトルの属性を使う
- リンクタグ[a]のtitle属性
HTML
CSS classを使う
- liのclass属性
CSS

32. 本日のテーマ
①スターターテーマ（_s）を導入する
②CSSフレームワーク（Foundation）を導入する
③アイコンフォント（Genericons）を導入する
④オリジナルテーマ制作（Let’s ハンズオン！）

33. サンプルサイト
サンプルサイトを参考に作ってみよう!

34. 課題①
Google Fontsを利用
Genericonsを利用
ヘッダー画像を表示

35. 課題②
gridで横3列に配置
特定の固定ページの
アイキャッチ、タイトル、抜粋を表示
スマホでは縦に配置

36. 課題③
gridで配置（最新記事を右に）
古い記事はリストで表示
最新の投稿ページの
タイトル、アイキャッチ、抜粋を表示
gridで配置
（最新記事を上に）

37. おわり！