HTML5+CSS3でレスポンシブな、最低限のWordPressテーマを作りました[配布有]

スクリーンショット 2013-04-14 0.59.42

最近弊社にもブログブームが来ている(?)みたいなので、カスタマイズすることを前提とした、最低限で構成されるWordpressのテーマ [wp_flat_theme]を作りました。(ちょうど適用してます。)

きっかけとしては、シロクのエンジニアたちのブログ開設も理由の1つではありましたが、やっぱり時流にあったHTML5 + CSS3 + レスポンシブの組み合わせでブログのテーマを変更することも勉強として大切だろうなと思い立った矢先に、「そもそもWordpressでブログを開設するための最低限のリソースってなんだろう。」と、素朴な疑問が浮かび、これらをまとめておこうときめました。

構成は wp_flat_theme ディレクトリの中から見て、

■php

・index(メインページテンプレート)

・header(ヘッダーモジュール)

・footer(フッターモジュール)

・sidebar(サイドバーモジュール)

・single(単一ページテンプレート)

・functions(テーマ独自の関数群)

という形でブログっぽく動いてくれているので、アーカイブテンプレートは用意しませんでした。あと、フッターとサイドバーのウィジェットも追加できるようにしてます。

■css

・style(グローバルスタイル)

・css/modern (モダンブラウザ用のスタイル)

・css/mobile (スマートフォン用のスタイル)

css自体は、単一のcssでかつメディアクエリでPC/スマフォの表示を分けてしまっても良かったんですが、ソースが長くなると編集が面倒くさい気がしたので分けて管理しようと思ったため、html上でcssを分けて読み込んでいます。中規模開発くらいだったら、機能別にちゃんとcss分けて、そこに各デバイスに対してメディアクエリを記述したほうが、全デバイス共通で適用したいcssが書きやすそうだなと思いました。

みんな大好きエリックメイヤーさんのリセットcssを使っています。なにかとネックなie8以下対応には、html5.jsとcss3-mediaqueries.jsを読ませいるので多分動くかなと。jQueryも読ませているので不要ならサイトに応じて消しちゃって下さい。

制作から早四時間、とりあえず完成しましたが、共通化があまり出来てないのでまだまだテーマ自体はまだ軽く出来る気がします。改変とかご自由にという感じなので、欲しい方は下記のダウンロードボタンからどうぞ!テーマのインストール方法は各々で調べて下さい♪

【ダウンロード】 wp_flat_theme

← Previous post

Next post →

204 Comments

  1. Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor. [url=http://www.cohucc.com/]nike blazer high[/url] nike blazer high

  2. Door frame set 80 mm

  3. httpwww.amarias.netreadyluckonlineshoppingcheapoakleysunglasses Page 71

  4. buyacomplia20mge

  5. Sound Advice For outlet Using Affiliate Marketing In Your Favor Powered by Discuz

  6. Star Wars Devastation WHERE IS EVERYONE

  7. Ksiega goci w hodowli BARNALI

  8. Theme Poem BBS

  9. Chichuahueo Campeon Mexicano

  10. Poze Porno Poze Funduri copilsperiat

  11. Welcome to Joomla

  12. Modern business woman

  13. LOTnet TV BBS

  14. CGIWrap Error Real UID could not be changed

  15. Online Casino

  16. 15ml0.5oz by Yahoo

  17. TV9 Nasi Lemak Kopi O Live Show in Shah Alam ExactPack Machinery Blog

  18. Employee Benefits Diablo Valley Benefits Official Website

  19. fashion style modern indian business man9Express News Fasion

  20. 8. 23 PM730 UCC

  21. SushiDating Free Online Dating Site Internet Dating Services

  22. Guild Morgenstern Gesellschaft BBS

  23. I medici Scienze Alimentazione

  24. MDCUSA External Assembly Executive Meeting scheduled for Sunday January 24, 2010 Movement For Democratic Change

  25. Image Gallery Diwali Party 021

  26. Sony Bravia 3D TV

  27. MatheLusi Profil von Andy

  28. boysplanet

  29. Viva Mexico Andres Cuervo Blog

  30. Karikatrcler Dernei 00012

  31. SI mbc, mbc, cha .

  32. SereneEditing Lair Forums Announcements. New members post here. cheap shoes

  33. Google Play 28

  34. Edition 748 9 September 2011 BUC News Doczine.com

  35. Copy of Copy of En construction

  36. ….Government of South Sudan Ministry of Higher Education….

  37. NEWS FROM 23RD SEPTEMBER 2010 Karagwe News

  38. Franks Spoiled Movie Endings Add a Film

  39. ABOUT RUBLARO

  40. Sai Balaji TechLegal Services Pvt Ltd Consectetuer adipiscing elit

  41. More Ferarum Italian Community Galeria Galleria Utenti MFIC sulla neve IMG0376.JPG

  42. Delhi University to take action against admission discrepancies CoolAge

  43. Modelltrucks in 1 zu 8 LKW Modelle Rundhauber vicky1309.08.2012002.jpg

  44. Obama drew laughs in referring to him as a late bloomer.

  45. sector role that your particular online marketer contains. Discovering this specific, you must find an affiliate marketing in which urges yourself to stay up to par concerning

  46. variations taking place while using software programs you happen to be marketing and advertising. Should they be giving latest merchandise or a new challenge to dab ones own website page,

  47. Julio saluta i tifosi 300 volte grazie acchiappasogni AmoreNeroazzurro

  48. Vendo Canon Powershot G12 SPAZIOIMMAGINE Blog

  49. for Kakao

  50. Amrica Latina Remix cultural

  51. Yalanc İkembe orbas

  52. Hotelul Posada Curtea de Arges

  53. Content Demo 1.3.1

  54. NAILS CBLUE BBS

  55. Illuminated Manuscript, Album of Indian miniatures and Persian calligraphy, Walters Art Museum Ms. W.669, fol.4a Calligraphy Calligraphy

  56. TttH Talk to the Hand Neuigkeiten Battlefield 3 Spyware

  57. Purple and Lambskin Harlequin Flip cases expand into Apple Retail Pipetto Blog

  58. Mission Impossible Ghost Protocol

  59. Certes. Je suis d’accord avec tout plus haut par dit.
    finiteer bb4arg48

  60. How Can I Pick the best Shoes In line with Myself Type

    Should you be including the numerous girls that wish to choose your shoes in accordance with the body type, you are certainly doing the right thing. Predominantly, you can find five major types that your body can be put into. This gives you the best of looks while using pair you want your feet.

    The most typical one is the apple shape. This can be the shape wherein your ex top torso is heavier versus the underlying part from the body. There are many types of shoes they will choose from the Louboutin replica shoes. Any shoes with straps about them is fine out fine. More straps, such as the gladiator shoes, the higher should it be. The straps within the shoes will stabilize the heavier limbs.

    The pear shape: May be the sort of shape that is certainly heavy in the thighs and hips instead of the top. Such a woman will surely desire her legs to check slender. She will try some of the [url=http://www.votedoheny.net/]Christian Louboutin outlet[/url] shoes that contain high heel shoes and they are delicate. She shouldn’t ever have shoes that contain ankle straps that will only go on to accentuate the heavier legs.

    Several for women who live a physique that’s lean and muscular. This is actually the form of woman who’s got worked hours when you exercise to acquire a well-toned body. They are in a position to wear one of the shoes through the [url=http://www.votedoheny.net/]Christian Louboutin outlet uk[/url] Christian Louboutin replica shoes collection. Our prime heels will certainly be a wonderful strategy to showcase their slender, suntanned, long legs.

    Ankle travails: Should you have ankles which might be thick and somewhat like this of the football player then you will want not despair as you’re able just disguise them. The high heeled strappy shoes are going to be ideal to generate feet look longer and slender personal computer is actually. Should you be the type who likes boots then boots also are the right thing to make use of simply because this can help in concealing your ankles and you will not feel self-conscious about the subject.

    If you’re petite and would like to be taller, then touch base for shoes wealthy in heels. You can build the slinkiest of stilettos or boots using the highest of heels possible. This will make you appear taller compared to that you are.

    An element that you must do not forget that a study conducted brought to the forefront that many women aren’t very pleased with themselves image. The best set of footwear can really help you a ton to allow you to look how we wish to.

  61. This is why none of us is speaking of watch and the things that you should do right now.

  62. buy final fantasy xiv gil style along with confertable. Equals)

  63. [url=http://singulair-for-allergies.top/]singulair[/url] [url=http://buyvaltrex.eu/]buy valtrex[/url] [url=http://buy-tretinoin.top/]where can i buy tretinoin cream[/url]

  64. QCwtH2 I think this is among the most significant info

  65. Very informative blog post. Awesome.

  66. You generated some decent points there. I looked on-line for that challenge and identified most people will go coupled with with all of your website.

  67. Major thankies for the blog article.Thanks Again. Want more.

  68. Really appreciate you sharing this post.Much thanks again. Much obliged.

  69. Really appreciate you sharing this blog.Really thank you! Great.

  70. Im obliged for the article. Fantastic.

  71. Really appreciate you sharing this post.Thanks Again. Keep writing.

  72. Welcome to Affordable Auto Body CARSTAR Auto Body Repair Experts Franklin, WI

  73. pretty handy material, overall I feel this is worthy of a bookmark, thanks

  74. Thank you ever so for you blog.Much thanks again. Great.

  75. Major thanks for the post. Really Great.

  76. Thanks again for the blog article.Thanks Again. Great.

  77. Thanks so much for the blog post. Really Great.

  78. Thanks so much for the article post.Really thank you! Really Great.

  79. Thankyou for this marvelous post, I am glad I found this website on yahoo.

  80. What as up, I log on to your blogs regularly. Your story-telling style is witty, keep it up!

  81. Normally I do not learn article on blogs, however I wish to say that this write-up very forced me to try and do so! Your writing style has been amazed me. Thank you, very great article.

  82. Precisely what I was looking for, appreciate it for posting.

  83. Very neat blog post.Really thank you! Fantastic.

  84. I cannot thank you enough for the article.Really looking forward to read more. Cool.

  85. I value the blog post. Awesome.

  86. Hey, thanks for the blog post.Really looking forward to read more. Awesome.

  87. Major thanks for the article. Great.

  88. Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is fantastic, as well as the content!. Thanks For Your article about sex.

  89. A round of applause for your post. Really Great.

  90. This is one awesome article. Much obliged.

  91. Great blog article.Really thank you! Really Cool.

  92. Really informative blog post.Really looking forward to read more.

  93. I really liked your blog.Thanks Again. Want more.

  94. Thanks a lot for the article.Really looking forward to read more.

  95. Really informative article post.Really thank you! Will read on…

  96. Say, you got a nice blog.Really thank you! Fantastic.

  97. Hey, thanks for the article post. Cool.

  98. Im grateful for the article. Fantastic.

  99. I truly appreciate this article post.Really thank you!

  100. Very informative article. Want more.

  101. Thanks-a-mundo for the post.Thanks Again.

  102. Muchos Gracias for your article.Thanks Again. Really Cool.

  103. I really like and appreciate your article post.Really looking forward to read more. Awesome.

  104. Great, thanks for sharing this blog.Thanks Again. Cool.

  105. I really liked your post.Much thanks again. Really Cool.

  106. This is one awesome blog post.Really thank you! Really Cool.

  107. I simply want to say I’m beginner to weblog and seriously enjoyed your web-site. Almost certainly I’m planning to bookmark your blog post . You absolutely come with good writings. Regards for sharing your blog site.

  108. Hey, thanks for the blog post.Really looking forward to read more. Fantastic.

  109. Great, thanks for sharing this blog.Really looking forward to read more. Will read on…

  110. I truly appreciate this blog.Much thanks again. Cool.

  111. Im obliged for the blog. Fantastic.

  112. We all talk a little about what you should talk about when is shows correspondence to because Maybe this has much more than one meaning.

  113. This very blog is really awesome and also amusing. I have found a lot of interesting things out of this amazing blog. I ad love to go back again soon. Cheers!

  114. Intriguing post reminds Yeah bookmaking this

  115. What as up Dear, are you really visiting this website daily, if so afterward you will without doubt obtain pleasant know-how.

  116. Its like you read my mind! You appear to know so much

  117. The players a maneuvers came on the opening day. She also happens to be an unassailable lead.

  118. My searches seem total.. thanks. Is not it great once you get a very good submit? Great ideas you have here.. Enjoying the publish.. best wishes

  119. This is a excellent blog, would you be involved in doing an interview about just how you designed it? If so e-mail me!

  120. Way cool! Some very valid points! I appreciate you writing this article plus the rest of the site is also very good.

  121. Thanks for the article post.Much thanks again. Keep writing.

  122. Spot on with this write-up, I actually feel this site needs a great deal more attention. I all probably be back again to read more, thanks for the information!

  123. If you know of any please share. Thanks!

  124. Really informative blog.Thanks Again. Want more.

  125. wow, awesome article post.Much thanks again. Will read on…

  126. Wow, great post. Great.

  127. I think this is a real great article.Really thank you! Will read on…

  128. Thanks for sharing, this is a fantastic blog. Keep writing.

  129. Very good blog.Really looking forward to read more. Really Great.

  130. Major thankies for the blog article.Really looking forward to read more. Much obliged.

  131. You have touched some fastidious factors here.

  132. Major thankies for the article.Really thank you! Great.

  133. magnificent points altogether, you just won a brand new reader. What may you suggest in regards to your publish that you made a few days ago? Any sure?

  134. There is perceptibly a lot to know about this. I suppose you made certain good points in features also.

  135. Great post. Great.

  136. Thanks so much for the blog post.Thanks Again. Will read on…

  137. Thanks for sharing amazing Article.

  138. visit this website What is the best blogging platform for a podcast or a video blog?

  139. LOUIS VUITTON OUTLET LOUIS VUITTON OUTLET

  140. Thanks a lot for the article. Keep writing.

  141. Thanks for sharing, this is a fantastic article post.Much thanks again. Really Great.

  142. This is one awesome article.Thanks Again. Fantastic.

  143. Im thankful for the article.Thanks Again. Really Great.

  144. Really informative blog post.Thanks Again. Want more.

  145. Very informative blog post.Really looking forward to read more. Much obliged.

  146. I really enjoy the article.Much thanks again. Really Cool.

  147. Appreciate you sharing, great article post.Much thanks again. Really Great.

  148. I appreciate you sharing this blog article.Really looking forward to read more. Fantastic.

  149. Many thanks for sharing this first-class article. Very inspiring! (as always, btw)

  150. I am so grateful for your article.Thanks Again. Awesome.

  151. Sweet blog! I found it while surfing around on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I ave been trying for a while but I never seem to get there! Cheers

  152. I really liked your blog post.Much thanks again. Awesome.

  153. Please switch your TV off, stop eating foods with genetically-modified ingredients, and most of all PLEASE stop drinking tap water (Sodium Fluoride)

  154. Major thanks for the article post. Really Cool.

  155. Wow, great blog.Thanks Again. Cool.

  156. I cannot thank you enough for the blog.Really thank you! Awesome.

  157. Looking for in advance to finding out further from you afterward!

  158. Really enjoyed this article.Really looking forward to read more. Awesome.:)

  159. A big thank you for your blog. Really Cool.

  160. I cannot thank you enough for the article post.Really thank you! Much obliged.

  161. Thanks for the blog article.Much thanks again. Really Cool.

  162. Thank for the article. Worth reading

  163. Really appreciate you sharing this blog. Awesome.

  164. Hey, thanks for the article.Thanks Again. Want more.

  165. Thank you for your article.Thanks Again. Cool.

  166. Really appreciate you sharing this post. Awesome.

  167. Thanks again for the blog post.Really looking forward to read more. Much obliged.

  168. I think this is a real great article.Really thank you!

  169. C8Q7Po Thanks for sharing, this is a fantastic article.Much thanks again. Keep writing.

  170. Major thanks for the blog article.

  171. I value the blog article.Much thanks again.

  172. Very neat blog article.Really thank you! Will read on…

  173. Thanks for the article.

  174. Really appreciate you sharing this article.Much thanks again. Want more.

  175. Great, thanks for sharing this blog post. Want more.

158 Pingbacks

  1. sZBHAKYk
  2. gucci bags on sale
  3. gucci bags outlet
  4. gucci handbags
  5. GUCCI HANDBAGS
  6. chanel outlet
  7. Gucci Outlet
  8. chanel bags
  9. gucci handbags
  10. Celine Outlet
  11. Chanel Bags
  12. GUCCI HANDBAGS OUTLET
  13. Hermes Bag
  14. OpKqaxvL
  15. chanel handbags
  16. ナイキ エアフォース
  17. 2013tokei
  18. My Homepage
  19. Google
  20. Happiness
  21. Diy Home Energy System Review
  22. cut resistant gloves
  23. home decor
  24. Who is David Miscavige?
  25. cat food
  26. witchtalismans
  27. luxury vibrator
  28. g spot vibrator
  29. Online Personality Test FREE
  30. what is my personality
  31. best new books
  32. scientology
  33. korean sex stories
  34. free software download for pc
  35. best work at home jobs
  36. tamil sex story
  37. Truck Stop
  38. How to cleanse your body
  39. Body Detox
  40. TAXI DUBROVNIK
  41. full software download for pc
  42. Las Vegas PRP Hair Treatment
  43. manage dedicated server
  44. free software download for pc
  45. Toned In Ten Review
  46. ways to earn money from home
  47. Travel agencies
  48. Guttering Repairs
  49. wordpress theme
  50. Drug rehabilitation programs
  51. Free 2 days shipping
  52. Сталик
  53. インフルエンザ
  54. Pet Friendly Hotels
  55. Virginia Beach Hotels
  56. cloud ibox 3
  57. love quotes
  58. male masturbator
  59. Male Sex Toys
  60. Free Download
  61. penis vacuum pump
  62. Radio Jahan
  63. Persian Music Radio
  64. full download for windows 10
  65. My personality test
  66. Human
  67. bunny rabbit vibrator
  68. Endless Pleasure Thrusting Vibrator
  69. nipple teasers
  70. free download games
  71. インフルエンザ
  72. content management system
  73. インフルエンザ
  74. インフルエンザ
  75. Descargar mp3
  76. Bialetti Replacement Gasket Seal For 3 Cup Stovetop Espresso Coffee Makers
  77. LIVE TV
  78. pc games free download full version for windows 8
  79. consumer electronics audio
  80. More Help
  81. European River Cruises
  82. pc games free download for windows 7
  83. IPVPN
  84. How the mind works
  85. Donate a Gift Card
  86. herpes leg
  87. Trenda Trending News
  88. Best Vibrators
  89. opportunity
  90. download apk games
  91. download android games
  92. dildos
  93. pc games free download full version for windows 10
  94. mario games free download
  95. Basques and Corsets
  96. kala jadoo
  97. kala jadoo
  98. signs of genital herpes in males pictures
  99. Email Database Australia
  100. Deluxe G-Spot Vibrator
  101. Red Hearts
  102. nighties
  103. trucchi slot machine
  104. pc games free download full version for windows 7
  105. ways to make money
  106. how to make quick money
  107. pc games free download full version for windows 10
  108. full download for windows
  109. 福井歯医者
  110. 福井歯医者
  111. 福井歯医者
  112. expert essay service
  113. barrie movers.ca
  114. free video slots
  115. football template
  116. free pc games download full version for windows xp
  117. free pc games download full version for windows 10
  118. Jaguar
  119. Best love spell caster
  120. life insurance rule of thumb
  121. free pc games download full version for windows 7
  122. free pc games download full version for windows 8
  123. Spain summer vacation
  124. Used Surplus
  125. hawaiian kona coffee company
  126. best Hawaiian coffee
  127. coffee beans kona
  128. best coffee kona
  129. Rajamangala University of Technology Thanyaburi
  130. screen
  131. kona coffee company
  132. best kona
  133. bangla choti
  134. coffee from kona
  135. 100% kona
  136. fresh games
  137. 100% kona coffee
  138. coffee from kona
  139. coffee from kona
  140. Free Mixtape Downloads
  141. 808 Mafia Mixtapes
  142. Vic Spencer Mixtapes
  143. Discover New Artists
  144. Trey Songz Mixtapes
  145. It Leaked Online
  146. adult toys
  147. sex stories
  148. basketball
  149. Sex Stories
  150. Decals for your home
  151. free domain auction
  152. toronto apartments
  153. best price for hotel rooms
  154. classifieds
  155. USA dating
  156. chat room
  157. Optimus Prime Figures
  158. usuwanie dpf

コメントを残す