WordBenchTokyo-20111126

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

CSSだけでもけっこうイケル
Twenty Tenのカスタマイズと
そこから踏み出す第一歩

WordPressをわくわくしながらインストール
したけど、中のファイルを見たらそ∼っと
閉じたくなっちゃったあなたへ....

...

自己紹介
うえぶるじょん
フリーでWebなこととかそうでもないこととか
Webourgeon(http://webourgeon.com/)というブログで
主にWordPresssのことについて書いています

WordPress
HTMLコー...

Twenty Eleven Twenty Ten

Twenty Eleven Twenty Ten

ファイルが多い！

なんですか？
この宇宙語は？

というわけで今日は

CSSだけでもけっこうイケル
Twenty Tenのカスタマイズと

そこから踏み出す第一歩

についてお話ししたいと思います。

http://webourgeon.com/onlycss/

早速やってみましょう

1．準備する 5. 投稿部分
2．全体の調整 6．サイドバー
3. ヘッダー 7．コメントフォーム
4. メニュー 8．フッターウィジェット

1．準備する準備する

1．子テーマをつくろう

2．ソースをみてみよう

3．便利なCSSテクニック

1-1. 子テーマをつくろう準備する

必要なことはここにある！

WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/

ここにCSSをどんどん

上書きしていけばいいだけ

1-2．ソースをみてみよう
準備する

1.ブラウザでソースを見る

2.便利機能を使う

ブラウザでソースを見る

ロゴ部分

該当CSSを探す

勉強になるけど
ちょっと
めんどくさい

便利機能を使う

便利機能を使う

HTMLの構造も分かりやすい

CSSもひと目でわかる！

1-3．便利なCSSテクニック
準備する

使えると便利でそんなに難しくないCSSの小技

背景画像
画像置き換え（＊使い方注意）
絶対配置
Webフォント（＊日本語はまだ難しい...

2．全体の調整背景やフォント色などの
基本設定を変えてみる

Before After

構造
#masthead
Twenty Tenの #header
レイアウト構成

...

1．全体の調整
背景やフォント色などの
基本設定を変えてみる
CSS
body {
font-family: ver...

1．全体の調整
背景やフォント色などの
CSS 基本設定を変えてみる

#wrapper{ #wrapper...

1．全体の調整
背景やフォント色などの
基本設定を変えてみる
ヒント

コンテンツとサイドバーの幅を変えてみる

コンテンツとサイドバーの位置を変えてみる

3カラムにしてみる

3．ヘッダーヘッダーのデザインを
変えよう
Before

After

3．ヘッダーヘッダーのデザインを
変えよう

1．ロゴを変える
2．カスタムヘッダーをつかう
3．サイトの説明文を移動する

3-1．ロゴを変えるヘッダーのデザインを
変えよう

構造
#site-title
#site-title a

3-1．ロゴを変えるヘッダーのデザインを
変えよう

Google web fonts
http://www.google.com/webfonts

3-1．ロゴを変えるヘッダーのデザインを
変えよう
CSS
@importでも使...

3-1．ロゴを変えるヘッダーのデザインを
変えよう

弱点

Google Fonts には日本語がない

その他webフォントも
日本語フォントの使用は
まだ現...

3-2．カスタムヘッダー
ヘッダーのデザイン
Before 変えよう

After

3-2．カスタムヘッダー
ヘッダーのデザイン
変えよう

カスタムヘッダーの使い方

3-2．カスタムヘッダー
ヘッダーのデザイン
構造変えよう
＃branding

img

3-2．カスタムヘッダー
ヘッダーのデザイン
CSS 変えよう

#branding img {
border-top: none...

3-3．サイトの説明文を移動
ヘッダーのデザイン
変えよう
Before After

After

3-3．サイトの説明文を移動
ヘッダーのデザイン
構造変えよう

#site-description

3-3．サイトの説明文を移動
ヘッダーのデザイン
CSS 変えよう

#site-title{
ﬂoat: none;
...

3-3．サイトの説明文を移動
ヘッダーのデザイン
#wrapper{ 変えよう
position: relative;
...

4．メニューグローバルナビを
デザインする
Before

After

4．メニューグローバルナビを
デザインする

1．カスタムメニューをつかう
2．デザイン変更

4-1．カスタムメニューをつかう
グローバルナビを
デザインする

4-2．デザイン変更グローバルナビを
デザインする
構造デフォルトの場合

#access
div.menu .page_item...

4-2．デザイン変更グローバルナビを
デザインする
構造カスタムメニューの場合

.menu-header
ul #menu-global .menu
...

4-2．デザイン変更グローバルナビを
デザインする
CSS 背景色を消してボーダーを入れます
#access {
backgrou...

4-2．デザイン変更グローバルナビを
デザインする
CSS
テキストの色を調節します
#access a {
color: #3...

4-2．デザイン変更グローバルナビを
デザインする
CSS
カスタムメニューで付けたクラス名を利用して
RSSをアイコンに変えます
#access...

4-2．デザイン変更グローバルナビを
CSS デザインする
絶対配置を利用してメニューを右上に
#access {
position: absolute;
top : ...

5．記事部分記事部分の
カスタマイズ
Before

After

5．記事部分記事部分の
カスタマイズ
1. 記事部分の構成

2. カテゴリーごとに記事タイトルに
アイコン

3. 投稿日・作成者
4. 写真をおしゃれに
...

51．記事部分の構成記事部分の
カスタマイズ
構造
.entry-title
.post
.en...

52．カテゴリーごとに
記事部分の
記事タイトルにアイコン
カスタマイズ
カテゴリーごとに
違うアイコン

52．カテゴリーごとに
記事部分の
記事タイトルにアイコン
カスタマイズ
構造
<div id="post-62" class="pos...

52．カテゴリーごとに
記事部分の
記事タイトルにアイコン
カスタマイズ
CSS
#content .entry-title{
pa...

5-3．投稿日・作成者記事部分の
カスタマイズ
構造
.entry-meta

.meta-prep
...

5-3．投稿日・作成者記事部分の
カスタマイズ
CSS

.entry-meta .meta-prep,.entry-
...

5-3．投稿日・作成者記事部分の
カスタマイズ
CSS .entry-date{
position: absol...

5-3．投稿日・作成者記事部分の
カスタマイズ
CSS
.entry-meta .author {
backgr...

5-4．写真をおしゃれに記事部分の
カスタマイズ
Before
After

5-4．写真をおしゃれに記事部分の
カスタマイズ
構造
img.alignleft

img.alignright

...

5-4．写真をおしゃれに記事部分の
カスタマイズ
CSS
border: 1px ...

5-4．写真をおしゃれに記事部分の
カスタマイズ
Before After

5-4．写真をおしゃれに記事部分の
カスタマイズ
構造

<div id="a...

5-4．写真をおしゃれに記事部分の
カスタマイズ
CSS .wp-caption{
b...

5-4．写真をおしゃれに記事部分の
カスタマイズ
CSS
.wp-caption p.wp-caption-text {...

5-5．「続きを読む」記事部分の
カスタマイズ
Before
After

5-5．「続きを読む」記事部分の
カスタマイズ
構造

.more-link .meta-nav

5-5．「続きを読む」記事部分の
.entry-content .more-link{
...

6.サイドバーサイドバーの
カスタマイズ
Before After

6.サイドバーサイドバーの
カスタマイズ
#primary .widget-area...

6.サイドバーサイドバーの
カスタマイズ
CSS #main .widget-title{
...

6.サイドバーサイドバーの
カスタマイズ
CSS
#main .widge...

7. コメントフォームコメントフォームの
カスタマイズ
Before

After

7. コメントフォームコメントフォームの
カスタマイズ
＃comments
.reply-title
...

7. コメントフォームコメントフォームの
カスタマイズ
CSS

h3#comments-title, h3#reply-title{
b...

7. コメントフォームコメントフォームの
カスタマイズ
CSS
input[type="text"],
texta...

8. フッターウィジェットフッターの
カスタマイズ
Before

After

After

8. フッターウィジェットフッターの
カスタマイズ
構造
#footer-widget-area

...

8. フッターウィジェットフッターの
カスタマイズ
CSS
#footer-w...

お疲れ様でした。

でも・・・

ここまで出来たら
欲が出ます・・・よね？

知ってる部分がある！！

<?php bloginfo( 'description' ); ?>

サイトの説明文のところらしい

ループって何？

調べる

ついでに覚える

使い方をチェック

新しい子テーマを作る

Twenty Tenから
header.phpをコピー

#brandingの下に置いてみる

サイトの説明文の位置が変わった！

またCSSで調整すればOK!

ロゴが画像に変わった！

余計なボーダーは
CSSで調整すればOK!

このように今まで見てきたHTMLのタグや
CSSのid名・クラス名などを目印に

テンプレートタグやPHPで
何が出されているのか
考えていきます。

入れ替えたり書き換えたり・・

消したり足したり・・

わからないところはどんどん調べて
自分にとって必要なところから
覚えていくのも
ひとつの方法ではないかと思います

実は。。。。

ここまで来たらオリジナル
のテーマ作成まであと一歩

サイトの説明
ロゴ問い合わせサイトマップ

きちんとHTMLと
画像
CSSを書いたら
ナビゲーション

...

サイトの説明
ロゴ問い合わせサイトマップ

header.php
画像
ナビゲーション

...

たくさんの先輩の方々のブログ、
フォーラム、書籍、
色々なところに情報が
たくさんあります

読んだり、聞いたり。。

自分が悩んだこと
できるようになったこと、

今度は誰かの役に立つかも
しれません。

みんなで
WordPressを
楽しみましょう!

ありがとうございました

本日のスライドは
http://webourgeon.com/
続きも書きます
で公開予定です

Twitter
@Webourgeon_com

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構... by タカシキタジマ 25822 views
ノンプログラマーのためのカンタンWordPressテーマ作成入門　〜子... by Mignon Style 59976 views

View on Slideshare

1 of 101 Ad

View on Slideshare

1 of 101 Ad