Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
はじめての 
オリジナルテーマ制作 
松戸WordPress部 
2014年11月26日
自己紹介 
• 名前 三柴 誠一郎(フリーランス) 
• 職業 Webのディレクションとかフロントエンドとか 
• 経歴 IT業界17年 ⇒ ニート9ヶ月 ⇒ フリーランスもうすぐ1年 
• 最近の気になる事 ベスト3 
猫がついてくる 
鞄か...
本日のテーマ 
①スターターテーマ(_s)を導入する 
②CSSフレームワーク(Foundation)を導入する 
③アイコンフォント(Genericons)を導入する 
④オリジナルテーマ制作(Let’s ハンズオン!)
本日のテーマ 
①スターターテーマ(_s)を導入する 
②CSSフレームワーク(Foundation)を導入する 
③アイコンフォント(Genericons)を導入する 
④オリジナルテーマ制作(Let’s ハンズオン!)
スターターテーマ(_s)? 
テンプレートファイルがあらかじめ用意されている! 
スタイルシート 
オリジナルテーマを作るために必要な 
style.css【必須】テーマのスタイルシート 
rtl.css 右から左に記述する言語用のスタイルシー...
お得!
入手方法 
以下にアクセス! 
http://underscores.me/ 
①テーマ名を入力して 
②クリック! 
Sass対応版は 
ココをチェック!
こんな感じ
こんな感じ 
Sass対応版の場合
使い方 
①ダウンロードしたファイルを解凍! 
②テーマディレクトリ配下にコピー(移動)! 
※テーマディレクトリはココ /wp-content/themes/ 
③ダッシュボードの[外観]-[テーマ]でテーマを変更
画面イメージ
本日のテーマ 
①スターターテーマ(_s)を導入する 
②CSSフレームワーク(Foundation)を導入する 
③アイコンフォント(Genericons)を導入する 
④オリジナルテーマ制作(Let’s ハンズオン!)
CSSフレームワーク? 
HTMLを記述する時にフレームワークにそった 
記述(クラスを指定)するだけでいい感じにしてくれる! 
STRUCTURE 
Bootstrap, Foundationなどが有名! 
Grid レイアウトを均等に分割し...
お得!
入手方法〜Foundation編〜 
以下にアクセス! 
http://foundation.zurb.com/ 
①クリック!
入手方法〜Foundation編〜 
or or Sass対応は 
②クリック! 
この先を参照
こんな感じEssential版の場合
こんな感じComplete版の場合 
cssも全部 
(サイズが大きい) 
jsが全部
こんな感じSass対応版の場合 
この画面では見えないけど・・・ 
Gitのリポジトリも作られる
使い方〜grid〜 
レイアウトを均等に分割し、 
コンテンツをマス目上に配置することができる 
初期値: 
 横幅1000px 
 分割数12 
row 分割するコンテンツを挟む 
columns 分割するコンテンツ 
large-? おもに...
見え方PC 
タブレット 
largeが縦に 
mediumとsmallは 
指定した分割数で配置 
スマホ 
largeとmediumが縦に 
smallは指定した分割数で配置
gridの初期値を変更 
_settings.sass の以下を変更 
Sassの場合 
横幅 
分割数 
マージン(rowの外側)
本日のテーマ 
①スターターテーマ(_s)を導入する 
②CSSフレームワーク(Foundation)を導入する 
③アイコンフォント(Genericons)を導入する 
④オリジナルテーマ制作(Let’s ハンズオン!)
アイコンフォント? 
画像っぽいフォント! 
フォントなのでfont-sizeで大きさが変更できる! 
フォントなのでcolorで色が変更できる! 
Genericons - Automatticのアイコンフォント 
Foundation - ...
という事は?
&$#`*@+><
入手方法〜Genericons編〜 
以下にアクセス! 
http://genericons.com/ 
①クリック!
こんな感じ 
利用(指定)するファイル 
読み込まれるファイル
HTMLファイルに記述 
HTML 
Copy HTML をクリックして 
表示されたコードを貼付ける
スタイルシートに記述 
Copy CSS をクリックして表 
示されたコードを貼付けるHTML 
CSS
メニュー毎にアイコン変更 
タイトルの属性を使う 
- リンクタグ[a]のtitle属性 
HTML 
CSS classを使う 
- liのclass属性 
CSS
本日のテーマ 
①スターターテーマ(_s)を導入する 
②CSSフレームワーク(Foundation)を導入する 
③アイコンフォント(Genericons)を導入する 
④オリジナルテーマ制作(Let’s ハンズオン!)
サンプルサイト 
サンプルサイトを参考に作ってみよう!
課題① 
Google Fontsを利用 
Genericonsを利用 
ヘッダー画像を表示
課題② 
gridで横3列に配置 
特定の固定ページの 
アイキャッチ、タイトル、抜粋を表示 
スマホでは縦に配置
課題③ 
gridで配置(最新記事を右に) 
古い記事はリストで表示 
最新の投稿ページの 
タイトル、アイキャッチ、抜粋を表示 
gridで配置 
(最新記事を上に)
おわり!
Upcoming SlideShare
Loading in …5
×

はじめてのオリジナルテーマ制作

5,118 views

Published on

松戸WordPress部スライド

Published in: Internet
  • Be the first to comment

はじめてのオリジナルテーマ制作

  1. 1. はじめての オリジナルテーマ制作 松戸WordPress部 2014年11月26日
  2. 2. 自己紹介 • 名前 三柴 誠一郎(フリーランス) • 職業 Webのディレクションとかフロントエンドとか • 経歴 IT業界17年 ⇒ ニート9ヶ月 ⇒ フリーランスもうすぐ1年 • 最近の気になる事 ベスト3 猫がついてくる 鞄からおでん(ちくわ)が出てきた
  3. 3. 本日のテーマ ①スターターテーマ(_s)を導入する ②CSSフレームワーク(Foundation)を導入する ③アイコンフォント(Genericons)を導入する ④オリジナルテーマ制作(Let’s ハンズオン!)
  4. 4. 本日のテーマ ①スターターテーマ(_s)を導入する ②CSSフレームワーク(Foundation)を導入する ③アイコンフォント(Genericons)を導入する ④オリジナルテーマ制作(Let’s ハンズオン!)
  5. 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. 6. お得!
  7. 7. 入手方法 以下にアクセス! http://underscores.me/ ①テーマ名を入力して ②クリック! Sass対応版は ココをチェック!
  8. 8. こんな感じ
  9. 9. こんな感じ Sass対応版の場合
  10. 10. 使い方 ①ダウンロードしたファイルを解凍! ②テーマディレクトリ配下にコピー(移動)! ※テーマディレクトリはココ /wp-content/themes/ ③ダッシュボードの[外観]-[テーマ]でテーマを変更
  11. 11. 画面イメージ
  12. 12. 本日のテーマ ①スターターテーマ(_s)を導入する ②CSSフレームワーク(Foundation)を導入する ③アイコンフォント(Genericons)を導入する ④オリジナルテーマ制作(Let’s ハンズオン!)
  13. 13. CSSフレームワーク? HTMLを記述する時にフレームワークにそった 記述(クラスを指定)するだけでいい感じにしてくれる! STRUCTURE Bootstrap, Foundationなどが有名! Grid レイアウトを均等に分割し、コンテンツをマス目上に配置する Visibility 画面サイズや向きによって表示・非表示を制限する 他にも Block Grid などなどあります NAVIGATION Off-canvas 左や右からスライドするメニューを作成 他にも Top Bar, Sub Nav, Breadcrumb, Pagination などなどあります 他にも FORMやBUTTON, TYPOGRAPHY などなど、様々な用途に対応したクラスが用意されている!
  14. 14. お得!
  15. 15. 入手方法〜Foundation編〜 以下にアクセス! http://foundation.zurb.com/ ①クリック!
  16. 16. 入手方法〜Foundation編〜 or or Sass対応は ②クリック! この先を参照
  17. 17. こんな感じEssential版の場合
  18. 18. こんな感じComplete版の場合 cssも全部 (サイズが大きい) jsが全部
  19. 19. こんな感じSass対応版の場合 この画面では見えないけど・・・ Gitのリポジトリも作られる
  20. 20. 使い方〜grid〜 レイアウトを均等に分割し、 コンテンツをマス目上に配置することができる 初期値:  横幅1000px  分割数12 row 分割するコンテンツを挟む columns 分割するコンテンツ large-? おもにPC用の分割数 medium-? おもにタブレット用の分割数 small-? おもにスマホ用の分割数 HTML 初期値:  small - 横幅40emまで  medium - 横幅64emまで  large - 横幅90emまで
  21. 21. 見え方PC タブレット largeが縦に mediumとsmallは 指定した分割数で配置 スマホ largeとmediumが縦に smallは指定した分割数で配置
  22. 22. gridの初期値を変更 _settings.sass の以下を変更 Sassの場合 横幅 分割数 マージン(rowの外側)
  23. 23. 本日のテーマ ①スターターテーマ(_s)を導入する ②CSSフレームワーク(Foundation)を導入する ③アイコンフォント(Genericons)を導入する ④オリジナルテーマ制作(Let’s ハンズオン!)
  24. 24. アイコンフォント? 画像っぽいフォント! フォントなのでfont-sizeで大きさが変更できる! フォントなのでcolorで色が変更できる! Genericons - Automatticのアイコンフォント Foundation - ZURBのアイコンフォント 他にも いろいろあるよ
  25. 25. という事は?
  26. 26. &$#`*@+><
  27. 27. 入手方法〜Genericons編〜 以下にアクセス! http://genericons.com/ ①クリック!
  28. 28. こんな感じ 利用(指定)するファイル 読み込まれるファイル
  29. 29. HTMLファイルに記述 HTML Copy HTML をクリックして 表示されたコードを貼付ける
  30. 30. スタイルシートに記述 Copy CSS をクリックして表 示されたコードを貼付けるHTML CSS
  31. 31. メニュー毎にアイコン変更 タイトルの属性を使う - リンクタグ[a]のtitle属性 HTML CSS classを使う - liのclass属性 CSS
  32. 32. 本日のテーマ ①スターターテーマ(_s)を導入する ②CSSフレームワーク(Foundation)を導入する ③アイコンフォント(Genericons)を導入する ④オリジナルテーマ制作(Let’s ハンズオン!)
  33. 33. サンプルサイト サンプルサイトを参考に作ってみよう!
  34. 34. 課題① Google Fontsを利用 Genericonsを利用 ヘッダー画像を表示
  35. 35. 課題② gridで横3列に配置 特定の固定ページの アイキャッチ、タイトル、抜粋を表示 スマホでは縦に配置
  36. 36. 課題③ gridで配置(最新記事を右に) 古い記事はリストで表示 最新の投稿ページの タイトル、アイキャッチ、抜粋を表示 gridで配置 (最新記事を上に)
  37. 37. おわり!

×