5分でできる!WordPressでピンタレスト風テーマ
Upcoming SlideShare
Loading in...5
×
 

5分でできる!WordPressでピンタレスト風テーマ

on

  • 2,733 views

WordBench東京3月: 春のデザイナー祭り!ライトニングトーク

WordBench東京3月: 春のデザイナー祭り!ライトニングトーク

Statistics

Views

Total Views
2,733
Slideshare-icon Views on SlideShare
2,232
Embed Views
501

Actions

Likes
7
Downloads
6
Comments
0

7 Embeds 501

http://yotsuba-d.com 323
http://www.sysbird.jp 126
http://feedly.com 18
http://s.deeeki.com 13
https://twitter.com 9
http://www.slideee.com 7
http://www.feedspot.com 5
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    5分でできる!WordPressでピンタレスト風テーマ 5分でできる!WordPressでピンタレスト風テーマ Presentation Transcript

    • 5分できる!WordPressでピ ンタレスト風テーマ 5分できる!WordPressでピ ンタレスト風テーマ 鳥 山 優 子
    • 2/205分でできる!WordPressでピンタレスト風テーマ 株式会社ベクター 企画・デザイン部 WordPress プラグイン テーマ配布 TORIYAMA Yuko http://profiles.wordpress.org/sysbird/ いままでに 食べたお菓子 2311種 共著
    • 3/20 ピンタレストといえば、 可変 グリッド 5分でできる!WordPressでピンタレスト風テーマ
    • 4/20 ピンタレスト風レイアウト 5分でできる!WordPressでピンタレスト風テーマ NHKスタジオパーク http://www.nhk.or.jp/studiopark/ この家電がカワイイ http://kono-kaden-kawaii.net/
    • 5/20 WordPressのテーマでも、 5分でできる!WordPressでピンタレスト風テーマ Smoothie (themeforest.net) Pinbin (wordpress.org)
    • 6/20 WordPressのテーマでも、 5分でできる!WordPressでピンタレスト風テーマ trinity (wordpress.org) Fabulous (themeforest.net)
    • 7/20 Masonry WordPressでピンタレスト風やるなら、 5分でできる!WordPressでピンタレスト風テーマ http://masonry.desandro.com/ Masonry を使え!
    • 8/20 ダウンロード不要 5分でできる!WordPressでピンタレスト風テーマ
    • 9/20 ココ! Twenty Fourteenでも、 5分でできる!WordPressでピンタレスト風テーマ Twenty Fourteen (wordpress.org) ココ!
    • 10/20 子テーマでやってみよう。 5分でできる!WordPressでピンタレスト風テーマ Twenty Thirteen (wordpress.org) 親テーマ
    • 11/20 用意するテンプレート 5分でできる!WordPressでピンタレスト風テーマ style.css home.php functions.php myscript.js
    • 12/20 <div id="content" class="masonry-wrapper" role="main"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_post_thumbnail(); ?> <h1 class="entry-title"> home.php 5分でできる!WordPressでピンタレスト風テーマ <h1 class="entry-title"> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> </header> </article> <?php endwhile; ?> <?php endif; ?> </div> トップページ
    • 13/205分でできる!WordPressでピンタレスト風テーマ
    • 14/20 @charset "utf-8"; /* Theme Name: Twentythirteen Child Template: twentythirteen Version: 1.0 */ style.css 5分でできる!WordPressでピンタレスト風テーマ @import url("../twentythirteen/style.css"); .masonry-wrapper { width: 930px; margin: 0 auto;} .home .hentry { width: 300px; background: #FFF; margin: 5px; float: left; } グリッドの 幅を設定
    • 15/205分でできる!WordPressでピンタレスト風テーマ
    • 16/20 jQuery(window).load(function() { jQuery('.masonry-wrapper').masonry({ itemSelector: '.hentry' }); }); myscript.js 5分でできる!WordPressでピンタレスト風テーマ Masonryを 適用する
    • 17/20 function my_scripts() { wp_enqueue_script('jquery-masonry'); wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/myscript.js', 'jquery', '1.00' ); } add_action( 'wp_enqueue_scripts', 'my_scripts' ); functions.php 5分でできる!WordPressでピンタレスト風テーマ JavaScript ファイルを 読み込む
    • 18/205分でできる!WordPressでピンタレスト風テーマ
    • 19/20 グリッドを作れるCSSフレームワーク ・Bootstrap ・Foundation 5分でできる!WordPressでピンタレスト風テーマ 無限スクロールのjQueryプラグイン ・Foundation ・Infinite Scroll
    • 20/20 *サンプルテーマ https://github.com/sysbird/twentythirteen-child ありがとうございました!