Enviar búsqueda
Cargar
はじめてのオリジナルテーマ制作
•
25 recomendaciones
•
5,740 vistas
Seiichiro Mishiba
Seguir
松戸WordPress部スライド
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 37
Recomendados
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
もっとはじめてのオリジナルテーマ制作
もっとはじめてのオリジナルテーマ制作
Seiichiro Mishiba
松戸WP部バックアップとリストア
松戸WP部バックアップとリストア
Seiichiro Mishiba
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
Kei Nomura
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
Shinichi Nakagawa
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
Agile Baseball Science - アジャイル脳によく効く野球のハナシ
Agile Baseball Science - アジャイル脳によく効く野球のハナシ
Shinichi Nakagawa
価値を見せる技術 #DevLOVE ベースボールからみる技術
価値を見せる技術 #DevLOVE ベースボールからみる技術
Shinichi Nakagawa
Recomendados
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
もっとはじめてのオリジナルテーマ制作
もっとはじめてのオリジナルテーマ制作
Seiichiro Mishiba
松戸WP部バックアップとリストア
松戸WP部バックアップとリストア
Seiichiro Mishiba
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
Kei Nomura
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
Shinichi Nakagawa
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
Agile Baseball Science - アジャイル脳によく効く野球のハナシ
Agile Baseball Science - アジャイル脳によく効く野球のハナシ
Shinichi Nakagawa
価値を見せる技術 #DevLOVE ベースボールからみる技術
価値を見せる技術 #DevLOVE ベースボールからみる技術
Shinichi Nakagawa
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
Takeaki Inoue
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会
Kazuaki KURIU
WordPress 運用前の初期設定
WordPress 運用前の初期設定
Shigeki Takai
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
20160430co-edo
20160430co-edo
Chieko Aihara
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordPress オリジナルテーマを作ろう!
WordPress オリジナルテーマを作ろう!
Yusuke Hayasaki
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
Wordpress 子テーマってなにさ
Wordpress 子テーマってなにさ
HOTTA SATOMI
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
簡単・多機能・スタイリッシュなビジネステンプレート
簡単・多機能・スタイリッシュなビジネステンプレート
Hidekazu Ishikawa
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
Seiichiro Mishiba
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Seiichiro Mishiba
Más contenido relacionado
Similar a はじめてのオリジナルテーマ制作
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
Takeaki Inoue
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会
Kazuaki KURIU
WordPress 運用前の初期設定
WordPress 運用前の初期設定
Shigeki Takai
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
20160430co-edo
20160430co-edo
Chieko Aihara
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordPress オリジナルテーマを作ろう!
WordPress オリジナルテーマを作ろう!
Yusuke Hayasaki
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
Wordpress 子テーマってなにさ
Wordpress 子テーマってなにさ
HOTTA SATOMI
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
簡単・多機能・スタイリッシュなビジネステンプレート
簡単・多機能・スタイリッシュなビジネステンプレート
Hidekazu Ishikawa
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
Similar a はじめてのオリジナルテーマ制作
(20)
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会
WordPress 運用前の初期設定
WordPress 運用前の初期設定
テーマ作成のアプローチ
テーマ作成のアプローチ
20160430co-edo
20160430co-edo
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
WordPress オリジナルテーマを作ろう!
WordPress オリジナルテーマを作ろう!
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Wordpress 子テーマってなにさ
Wordpress 子テーマってなにさ
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
簡単・多機能・スタイリッシュなビジネステンプレート
簡単・多機能・スタイリッシュなビジネステンプレート
一歩踏み込むWordPress
一歩踏み込むWordPress
Más de Seiichiro Mishiba
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
Seiichiro Mishiba
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Seiichiro Mishiba
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
Seiichiro Mishiba
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Seiichiro Mishiba
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
はじめてのGit
はじめてのGit
Seiichiro Mishiba
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
Seiichiro Mishiba
はじめてのカスタマイズ
はじめてのカスタマイズ
Seiichiro Mishiba
データベースと仲良くなろう
データベースと仲良くなろう
Seiichiro Mishiba
ゆるゆるカフェに行ってきました
ゆるゆるカフェに行ってきました
Seiichiro Mishiba
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
Seiichiro Mishiba
Más de Seiichiro Mishiba
(11)
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
CSS の歩き方
CSS の歩き方
はじめてのGit
はじめてのGit
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
はじめてのカスタマイズ
はじめてのカスタマイズ
データベースと仲良くなろう
データベースと仲良くなろう
ゆるゆるカフェに行ってきました
ゆるゆるカフェに行ってきました
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
はじめてのオリジナルテーマ制作
1.
はじめての オリジナルテーマ制作 松戸WordPress部
2014年11月26日
2.
自己紹介 • 名前 三柴
誠一郎(フリーランス) • 職業 Webのディレクションとかフロントエンドとか • 経歴 IT業界17年 ⇒ ニート9ヶ月 ⇒ フリーランスもうすぐ1年 • 最近の気になる事 ベスト3 猫がついてくる 鞄からおでん(ちくわ)が出てきた
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 - 横幅90emまで
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.
おわり!