はじめてのWordPressテーマ作成で、これは便利だ&役に立ったと思った5つのTips

スポンサード リンク

@_harashinです。

昨日、WordPressのテーマを自作したぞ!という記事を書きましたが、今回はその作業の中で知った、便利&役立ちそうな5つのTipsを参考リンクと共に紹介したいと思います。

これからテーマを自作してみようかなーという方の参考になれば幸いです。

作業をラクにするために

1. 本を見ながらコードを書くならブックスタンドが便利!

コードを書くときはデザインブック[AA]を見ながら進めていったんですが、本を開いたままにしておくのは結構メンドクサイです。

コレを解決してくれるのが、そうブックスタンド

本を開いて立てた状態で固定できるので、ストレスなくコーディングに集中できます。

■参考リンク:

愛着品紹介 002:プログラミング時の頼れる相棒「カール ブックスタンダー」 * ラクイシロク
プログラミングは、書籍に書いてあるコードを一字一句間違えずタイプすることで学んでいくのが一般的だと思います(コピー&ペーストでは、泣けるほど身に付かないです)。 なので、手元にあるプログラム本を覗き …

2. 頻出するコードを簡単に入力するために補助アプリを使う!

WordPressはphpファイルの塊なので、たとえば”<?php ~ ; ?>”というのを何度も何度も書くことになります。

はじめのうちは写経する気持ちで入力していましたが、コードをある程度覚えてしまった中盤からは入力が億劫になります。

そのときはそう!

TextExpander(Macの場合)やPhraseExpress(Winの場合)といった、入力補助アプリを使うと、決まった文字や文章を書くのがすんごいラクになります。

前述の”<?php ~ ; ?>”など頻繁に入力する文字は、僕の場合”,php”と打てば即座に反映されるようになっています。

コーディング以外でも、ブログを書く際などによく使うタグを登録しておいたり、メールでよく書く定型文を登録しておいたりしておけば、効率よく作業ができるでしょう。

■参考リンク:

TextExpanderを使うとブログHTMLとかメアドとか署名とかが一瞬で入力出来てすんげー快適 | ごりゅご.com
簡単に言うと「単語登録」みたいなモノなんですが、単語登録では出来ない快適さがやっぱりTextExpanderには存在します。 実にちょっとした違いだけれども、ちょっとした事でかなり違うのです。 詳 …

無料のスニペットアプリ「PhraseExpress」×「いつものテンプレート」で世界が変わります | 化学系メーカー研究職です
少し前に導入したWindows用の無料スニペットアプリ「PhraseExpress」にコツコツと定型文やテンプレートをためることを楽しんでおります。 …

TextExpander for Mac 3.4.2(¥3,000)(記事執筆時)App
カテゴリ: 仕事効率化, ユーティリティ
販売元: SmileOnMyMac, LLC – SmileOnMyMac, LLC(サイズ: 5.2 MB)
全てのバージョンの評価: (2件の評価)

PhraseExpress / Autotext – Clipboard Utility – Snippets Organizer

3. デバッグツールを使ってプレビュー&修正をスムーズにする!

ある程度コードが仕上がったら今度はプレビュー作業に入るわけですが、このとき元ファイルを直す→保存→プレビュー、直す→保存→プレビューというのはちょっと手間です。

しかも、「なんか表示がおかしい…」→「paddingの値を変えればいいのか?」→「全然見た目が変わってないぞ!」

CSSに慣れていないうちはこういうことが頻繁に起こります。

FirefoxならFirebug、Google Chromeならデフォルトで付いてるデバッグツールを使えば、このプレビュー作業がスムーズにできるようになります。


▲Firebugの場合。ページ内で右クリック→「Firebugで要素を検証」
これでページのソースが表示され、同時にどんなスタイルが適用されているかの確認ができるようになります。

スタイル適用のON/OFFの切り替えや、数値の変更が手軽にでき、見た目をリアルタイムで確認しながら直すことができてとっても便利です。

表示の乱れの原因を特定するのも、コレで比較的簡単にできます。

ちなみにFirefoxにはデフォルトでデバッグツールが付属していますが、こちらよりもFirebugのほうが操作しやすい感じがします。


▲Google Chromeの場合。ページ内で右クリック→「要素を検証」
これも上記と同様の機能があります。

■参考リンク:
・Firebug :: Add-ons for Firefox

納得いくデザインを作るために

4. 他サイトのデザインを参考にしてみる


photo credit: turtlemom4bacon via photopin cc

デザインに関しては右も左もわからないひよっこの僕がやったのは、他のブログのデザインを参考にすることでした。

ヘッダーには何を置いたらいいか、記事タイトルはどういう風だと見やすいか、あの機能を実現するにはどうすればいいか、などなど考えながら細かく見ていきました。

カッコよさげなブログが見つかったら、とりあえずページのソースやスタイルシートを確認して、使えそうなところがあれば、自分流にアレンジして使っています。
(コピペはダメ!)

特にスタイルシートの書き方やタグなんかは、いろんなページを見ておくと参考になると思います。

5. 配色にこだわってみる


photo credit: tlindenbaum via photopin cc

せっかく作るんだったら、多くの人に見てもらいたいですよね。

そのためには見やすい画面を作ることが大事です。

下のスライドを参考にして、ページに配色をしてみました。

ちなみにこのブログは、ベースカラーを白(70%)、メインカラーを紺(25%)、アクセントカラーをオレンジ(5%)くらいの感覚で作ってみました。

あと色の指定には下記のサイトを参考にしましたよ。

・カラーチャート[HTMLカラーコード・カラーネームの一覧] – TAG index Webサイト

その他参照したリンク

リファレンス関連は常にブラウザのタブに表示させておきました。

HTMLクイックリファレンス

CSS入門

とほほのスタイルシート入門


少しまとまりがなかったかもしれませんが、何かのヒントになれば幸いです。

以上、5つのTipsでした!

余談ですが、ウェブ制作に興味が湧いたので下の本を買ってみました。
もっとスタイルシートに詳しくなりたいですしね。

スポンサード リンク

最後まで読んで頂きありがとうございます。
気に入って頂けたら、RSSフィードの購読をお願いします。

RSS FEED

« »