この手順でテヌマを䜜りたした。WordPressのテヌマを䜜成したずきの流れや道具、参考になった本や蚘事に぀いお

  • 曎新日:
  • 公開日:

ある皋床このブログのテヌマが出来䞊がっおきたので、テヌマを䜜成したずきの流れや道具に぀いおたずめおみたす。

実際の䜜り方だずかそういうモノではなく、「僕の䜜業の流れはこんな感じでした。このツヌル䟿利だよ、この本良いよ」っおいう内容です。

玙に軜くレむアりトをスケッチ

最初に、実際にペンを動かしお玙でレむアりトをスケッチ。巊に蚘事コンテンツ、右にサむドバヌの2カラムレむアりトはこのずきに決めたした。

パ゜コンでもモックアップを䜜るツヌルはありたすが、なるべく目を䜿いたくないので玙に曞いおたす。

ラフデザむンにはこのクロッキヌ垳を䜿っおいたす。

マルマンのクロッキヌ垳は枚数が倚く100枚、柔らかさずは裏腹に消しゎムを䜿っおも砎れ蟛い良質な玙を䜿っおいたす。持ち運んだりしないのであれば、この倧サむズをオススメしたいです。

実際にPCでデザむン

レむアりトが決たったらPhotoshopで倧たかにデザむンを開始したした。

CIが倧事な䌚瀟のホヌムペヌゞや、パヌ゜ナルブランディングが目的のブログでもない、ただの個人ブログなので「䜕ずなく」でデザむン。

デザむンにはPhotoshopの他、黄金比や癜銀比の蚈算ツヌル「Metallic Ratio」を䜿いたした。

Metallic Ratio

Metallic Ratio

はおブ数
Metallic Ratio | 黄金比、癜銀比などの貎金属比の比率を蚈算するWebツヌル。by B-SHIKI Fld. http://www.b-shiki.com

長蟺か短蟺に数倀を入力するず、メニュヌで遞択した黄金比や癜銀比などの数孊的比率で蚈算しおくれるWebサヌビスです。サむズに悩んだら迷わず䜿っおたす。

たた、デザむンで特に意識した点はコントラストず敎列です。この意識付けの圱響元は「ノンデザむナヌズ・デザむンブック」です。

デザむンの普遍的な考えが孊べる本です。䞻にデザむンの4぀の基本原則である近接、敎列、コントラスト、反埩のこずが曞かれおいたす。英文字フォントの基本的な知識も曞かれおいお勉匷になりたす。

デザむンからHTMLファむルを䜜成

デザむンが倧䜓出来たら、暡写するようにHTMLファむルを䜜成したした。レスポンシブデザむンにするのでHTML5/CSS3をベヌスにコヌディングしおたす。

HTML5のテンプレヌトフレヌムワヌクには「HTML5 Boilerplate」を䜿っおいたす。

CSSのコヌディングではメタ蚀語の「SASSSCSS」を䜿うずずおも効率的。さらに、SASSのフレヌムワヌクである「Compass」を䜿うずめっちゃ捗りたす。ホヌムペヌゞ制䜜にSASS/Compassを導入するならこの本が分かりやすくお人気がありたす。

BoilerplateのCSSファむルをSCSSファむルにする方法は「css2sass」を䜿っおいたす。

BoilerplateはHTMLの、SASS/CompassはCSSのブラりザ互換を補っおくれるので、あの人間ずしお倧事な䜕かを倱いそうになるデバッグ䜜業が倧分軜枛されたす。Boilerplateに぀いおは正確に蚀うず同梱のJavascriptのおかげです

あず、CSS3のbox-shadowの数倀指定が苊手だったので「CSS3 box-shadowゞェネレヌタヌ」ずいうWebサヌビスを䜿いたした。

CSS3 box-shadowゞェネレヌタヌ

CSS3 box-shadowゞェネレヌタヌ

はおブ数
CSS3で䜿うbox-shadowのゞェネレヌタヌです。ざっくりず䜜っおくれたす。FirefoxずChrome甚も出したす。぀いでにborder-radiusも蚭定出来たす。

box-shadowは数倀だけでは実際の芋え方のむメヌゞが難しいのですが、このWebサヌビスはスラむダヌを操䜜するず同時にbox-shadowの芋え方゜ヌスコヌドを確認できるんです。圱のデザむンに圹立ちたした。

その他「だれでもWebデザむンができる本」を参考に、文章䞭の画像ず文字の間隔や文字サむズを調敎しおたす。

この本は最近買っおパラパラっずめくっお読んでみたのですが、「画像ず文字の間隔は8~14px」「芋やすい行の高さは1.52.0em」ず、ずにかく具䜓的な数倀で教えおくれたす。

「ここの間隔は䜕pxにしよう 」ずか「行の高さっお䞀般的にはどのくらいなの」ず悩んだずきは結構重宝するず思いたす。

WordPressテヌマ化phpファむル化

HTML、CSSそしおJavascriptを䜿った静的ペヌゞを䜜り終えたら、Wordpressでテヌマずしお読み蟌めるようにphpファむル化䜜業に入りたす。

この「HTML → WordPressテヌマ化phpファむル化」の方法ですが、基本的なやり方はこの蚘事が理解しやすいです。

おそらく最もわかりやすいWordPressテヌマ制䜜チュヌトリアル | Stocker.jp / diary

おそらく最もわかりやすいWordPressテヌマ制䜜チュヌトリアル | Stocker.jp / diary

はおブ数
はじめおブログ甚のオリゞナル WordPress テヌマを制䜜される方向けに曞いたチュヌトリアル蚘事です。サンプル付きで、PHPやWordPressが初めおの方...

この蚘事を参考にミニマルな䜜業で少しず぀理解を深めたら、次は䜓系的な知識を孊べる本をオススメしたす。䟋えば僕は「WordPress 逆匕きデザむン事兞PLUS」ずいう本でWordPressのテヌマ構造を勉匷したした。

”逆匕き”ずタむトルにありたすが、テヌマを構成するテンプレヌトに぀いお぀ず぀解説しおいたす。条件分岐タグやURL出力などのテンプレヌトタグに぀いおも詳しく蚘茉されおいるので、これ䞀冊でWordPressに関する知識を広く網矅出来たす。

あず、「WordPressテヌマっおphp知らないず䜜れないよねphpの勉匷が必芁なんじゃないの」ず億劫になっおしたっおいる方もいるかもしれたせん。しかし、WordPressテヌマ制䜜には蟌み入った、オリゞナルな機胜を盛り蟌たない限りphpの深い知識は必芁ありたせん。

ただ、「最䜎限のphpの知識は知っおおきたい」ず考えおいる方にはオススメのプログラミング勉匷サむト「ドットむンストヌル」があるこずを玹介しおおきたす。

ドットむンストヌル – 3分動画でマスタヌする初心者向けプログラミング孊習サむト

ドットむンストヌル – 3分動画でマスタヌする初心者向けプログラミング孊習サむト

はおブ数
3分動画でマスタヌする初心者向けプログラミング孊習サむトです。すべおの動画は無料でご芧いただけたす。

ドットむンストヌルは「プログラミングを3分動画で勉匷しよう」ずいうコンセプトの元䜜られたWebサヌビスです。プログラミングを知らない初心者をタヌゲットにしおいたす。

ナニットテストデヌタでデザむン挏れをチェック

「さお、WordPressテヌマ化したし埌は蚘事を曞くだけでござる」ず生き急ぐなかれ。

  • コメントが来た堎合
  • 画像が回り蟌みした堎合
  • 耇数ペヌゞの堎合

ず、WordPress特にブログはコンテンツ内容が倉化するので、あらゆる状況のスタむリングをしおおく必芁がありたす。

だからっお自分で様々な状況の蚘事を甚意するのは想像しただけでや぀れたす。想像や぀れです。

なので僕は「テヌマナニットテストデヌタ」を䜿いたした。テヌマナニットテストデヌタずは぀たりダミヌの蚘事です。

WordPressテヌマナニットテストデヌタ日本語版を曎新したよ ‹ nuuno

WordPressテヌマナニットテストデヌタ日本語版を曎新したよ ‹ nuuno

はおブ数
WordPressのテヌマを開発する際に、テヌマの衚瀺を確認するための「テヌマナニットテストデヌタ」ずいうものがありたす。 投皿や固定ペヌゞやコメ...

コメント、画像の回り蟌み、耇数ペヌゞ、芋出しタグ、匕甚タグなど基本的な状況の党おをカバヌしおいたす。これらを぀぀挏れ無くスタむリングしおいくのは結構骚が折れたすが、ダミヌ蚘事を甚意する耇雑骚折レベルの䜜業よりは栌段ず楜になるでしょう。甚意しおくれた方に感謝しおたす。

あずはWordPressのテヌマ氎準に達しおいるかチェックしおくれる「Theme-Check」がありたすが、䜿うのは自分だし、特に気にする必芁はないず思うので䜿っおいたせん。

このナニットテストデヌタを䜿っおスタむリングした所で、ひずたずテヌマの初期段階の完成ずしたした。现かい郚分は蚘事を曞きながら少しず぀修正しおいたす。

こんな感じでWordPressテヌマを䜜成したした。1぀の参考になったら嬉しいです。

曞いた人

Symbol Mark

Ryoichiし぀

陀菌ティッシュを買い蟌んで䜿いきれずによく也かす人。

療逊目的で退職し、どうやっお生きおいくか暡玢䞭。最近は勉匷目的でLaravelやVue.js匄ったり、趣味で音で遊んでたす。

※2019幎10月16日珟圚ブログリニュヌアル䞭です。厩れなどが発生しおいたらすみたせん。

うぇぶ: @s_ryone