ブログで発信したい、だけどデザインもこだわりたい、そんなあなたへ贈るWordPress テーマblanc note.

customizeblanc note.のカスタマイズ
blanc note.のカスタマイズ

【WordPress初心者向け】デザインをカスタマイズするときは、どのファイルを編集すればいい?

blanc note.のカスタマイズ

レンタルブログと比べ、WordPressは編集できる範囲がとっても広いです。
いざカスタマイズしてみようと思ったとき、何を編集すればいいのか戸惑ってしまいますよね。
まずはWordPressテーマを構成するファイルについて学んでみましょう!

WordPressテーマは3種類のファイル+αで出来ている

WordPressのテーマは、

  1. php(php + html)
  2. css
  3. Javascript

の3種類のファイルと、画像ファイル(gif / jpg / png)出来ています。
この中でデザインのカスタマイズに関わってくるファイルはどれだと思いますか?
えっへっへ、正直に言えば「すべて」だったりします。

1.php(php + html)

madori
お家に例えると、phpファイルは設備や間取りにあたります。
デザインはデザインでも「導線設計」や「UI(ユーザーインターフェース)」の部分になります。
この部分を変えたくなったら、一大リフォームが必要です。
思い通りにした〜い! なんて場合は1から設計して作る必要も……。

2.css

お家に例えると、壁や建具の色だったり、家具の配置にまつわる部分です。

  • 壁紙を一面だけピンクに変えたいの〜!
  • この棚の色、白に塗り替えたいなぁ。
  • ちょっと模様替えしてみようかな!

頑張れば自分でもできる(かもしれない)、DIY的なポジションです。
壁紙やペンキ、ステッカー・壁を彩る絵画のような存在が画像になります。
こちらも、描いたり買ってきたり、自分で探せるのが楽しいですね。

3.Javascript

unitbath
お家に例えると、あなたが帰宅すると明るく家を照らす、センサー付きのライトや、タイマーでお風呂を沸かしてくれるユニットバスのような存在です。
って、この例えはちょっと無理があるやも……。ゴメンなさい。
Javascriptは、ある一定の条件下で何かのアクションを起こすことができます。
例えば、マウスが乗ったら画像がフワ〜っと表示するようにしたり、画像をクリックしたらポップアップ(Lightbox)したり、画像がスライドショーになったり。
大きな構造の部分ではないギミックをプラスαするもので、Javascriptがなかったところでブログとしての挙動に問題があるわけではありません。ちょっとリッチになったり、手間を省いてくれるものだと考えていただければと思います。

ビジュアルエディタで記事を書くと自動的にHTMLでマークアップされる

さて、WordPressのテーマ自体はphp(PHP + html)、css、Javascriptで出来ていますが、管理画面から記事を書くときに使うのはなんでしょう?
じゃ〜ん! 見出しにもあるようにHTMLという言語です。
ビジュアルエディタを使って記事を書く場合、HTMLの存在は意識しなくて大丈夫。
いわゆるブログ(日記)を書く上で使うHTMLは、下記のタグではないでしょうか?

  • 見出し(h1〜h6)
  • 段落(p)
  • 文字のスタイル:太字(strong)斜体(i)打消し(strike)
  • リスト(ul)数字付きリスト(ol)定義リスト(dl)
  • リンク(a)
  • テーブル(table)
  • 画像を挿入(img)

ご安心あれ。
これらは、ビジュアルエディタからちゃちゃっとスタイリングすることができるんです。
post-visualeditor01
「ちょっと凝ったレイアウトにしたい」
なんてときはテキストエディタ側からHTMLを入力し、CSSでスタイルをコントロールする必要が出てくることもあります。

記事のHTMLを編集したいときは、「テキスト」タブに切り替えましょう

見た目をカスタマイズしたいときは.cssを編集する

さて、HTMLの説明の最後に、「CSSでスタイルをコントロールする」と書きました。
CSSは、カスケーディングスタイルシートという言語で(簡単な英単語の羅列みたいなものです)、ちょっとした癖がありますが、覚える分には難しくありません。
WordPressの無料テーマをお使いでしたら、レイアウトを整えるためのCSSはすでに記述されています。
そのため、あなたが使いたくなるスタイルは限られています。
例えば、ポイント用の枠が欲しい! 吹き出しが欲しい! 等です。(よろしかったら下記の記事を合わせてごらんください)。

他には、お使いのテーマの背景色を変えたい。見出しのデザインを変えたい。余白を変えたい。などの要望が出てきたときにCSSを使います。

WordPressテーマのスタイルを編集したいときは、
管理画面から:外観>テーマの編集>スタイルシート (style.css)
theme-editor01
FTPから:WordPressをインストールしたディレクトリ/wp-content/themes/お使いのテーマ/style.css
を編集してください。
ftp-stylecss

テーマの挙動・構造を変えたいときは.phpファイルを編集する

アイキャッチ画像の位置が気に食わないから入れ替えたい。
記事の下に全ページ共通のウィジェットを追加したい。
404 Not Foundのときだけ、広告を入れるウィジェットを非表示にしたい。
そのような希望が出てきたときは、.phpファイルを編集します。
大丈夫! .phpファイルを開いても、php(プログラミング)の言語がズラ〜っと書いてあるわけではありません。
WordPressの大事な挙動の部分は/themes/以外のフォルダにある.phpファイル書いてあります。
テーマの.phpファイルを開くと、HTMLが書いてあり、その中にちょこちょこ<?php から始まるPHPが記述されているはずです。

機能を司どるのはPHP

上の要望の中で「アイキャッチ画像の位置が気に食わないから入れ替えたい」以外は、PHPを使って挙動を制御する必要が有ります。
うわ〜、めんどくさく(いや、難しく)なってきた〜〜〜!
でも絶望する必要はありません!
WordPressのいいところは「自分でプログラミングしなくてもOK」なところ。というのも、Codexに必要な関数やタグが載っているので、必要に応じてコピペしていけばなんとかなるんです。
わたしはHTMLやCSSなら1からコーディングできますが、PHPを書くことはできません。それでもWordPressでオリジナルテーマを開発しちゃうぞ〜なんて言えるのがいい証拠。
ちょっとこみ入った挙動の制御が必要な場合も、素晴らしい先人たちがチップを残してくださっているので、ありがたく使わせて頂けば良いのです。
WordPress Codexを見ると、詳しい使えるタグを知ることができます。必見ですよ。
テンプレート階層 – WordPress Codex条件分岐タグ – WordPress Codexテンプレートタグ – WordPress Codex

文書構造を司るのはHTML

さて、「アイキャッチ画像の位置が気に食わないから入れ替えたい」はHTMLで調整することになります。
個別記事のアイキャッチ画像の位置を変えたいのであれば、WordPress Codexのテンプレート階層を確認します。
記事(個別投稿表示)はsingle.phpにあるとのことなので、お使いのテーマからsingle.phpを探してください。
アイキャッチ画像を表示させるためのタグは<?php the_post_thumbnailから始まるので、single.phpを開いて「the_post_thumbnail」で検索してください。
アイキャッチ画像を出力するためにPHPタグを使っていますが、コピペで使う「魔法のことば」程度に思っておくといいと思います。
the_post_thumbnailのタグを見つけたら、移動したい位置に入れ替えたり、記事にアイキャッチ画像が自動挿入されるのが嫌なのであれば、削除したり。な〜んてことをします。

まとめ

デザインをカスタマイズするときは、どのファイルを編集すればいい? の答えは……

  1. 要素の順番を入れ替えたり、新しいclassやidを振りたいときは→.phpファイルを編集する
  2. 要素のスタイリングを変えたいときは→style.cssを編集する

でした!
わたしが思うカスタマイズのコツは「英単語への苦手意識をなくす」こと。
よくよく見ると簡単な英単語が決まった文法にのっとって並んでいるだけ。
そういう絵柄だと思えば、.phpファイルであろうとhtmlであろうとcssであろうと気にならなくなる気がします。
それでは素敵なブログライフを♪

Category : blanc note.のカスタマイズ
ほんわかクリエイター るこ

Web系のお仕事をしています。
むちゅめ(6歳/早生まれ/小学生1年生)大好きな親バカ系。
LOFT、無印、生活の木、伊東屋が好き。
自然溢れる場所に惹かれはするものの、めんどくさがりの省エネ派。ぐでたまを尊敬してます。

ブログ一覧へ戻る