現在は状況が異なる可能性がありますのでご注意ください。テーマを制作される方向けに書いたチュートリアル記事です。ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。実際のファイルを見ながら(あるいは作りこみながら)読むと理解が深まると思います。テーマのサンプルファイルのダウンロードはこちら※スタイルは必要最低限しか指定していないシンプルなテーマです。インストールしてください。インストールしておいたほうが良いかもしれません。インストールする場合の作業方法は以下の記事に書いています。あたりを借りている方が多いようです。これらのレンタルサーバーには「WordPressの簡単インストール機能」もついています。テーマをデザインするブログのデザインをされる方は、ここでブログ全体のイメージを制作しておきます。以下の2ページをデザインしておくと良いと思います。トップページヘッダーにブログ名やロゴを入れ、その下は記事一覧とサイドバーの2カラムとしておきます。サイドバーには記事のカテゴリーや検索フォームなどを入れる予定です。フッターにはコピーライト等を入れておきます。記事ページヘッダーの下に記事本文とサイドバーの2カラム構成で、ヘッダー、サイドバー、フッターはトップページと共通で良いでしょう。いうファイル名にしておきます。スタイルシートは1ファイルにまとめておいて下さい。いうフォルダを作り、その中に保存しておいて下さい。テーマ名を「sunshine」という名前にする場合、以下のような構成になります。ここをクリックするとダウンロードできます。※このファイルは完成したテーマではなく、制作途中のデータですのでご注意ください。完成したテーマはこの記事の最初のリンクからダウンロードできます。テーマ形式に作り変えます。理解していなくても一般的なブログ用のテーマ制作は可能です。いう2つのファイルだけでも動作しますが、ここでは一般的なテーマ同様にヘッダー(header.php)サイドバー(sidebar.php)フッター(footer.php)トップページ等(index.php)記事ページ(single.php)テーマのための関数(functions.php)スタイルシート(style.css)の7つのファイルに分けます。関数に置換するだけですので超簡単です。例に切り分けていきます。テーマファイルのサンプルファイルはここをクリックするとダウンロードできます。(記事の冒頭でダウンロードできるサンプルテーマと同じものです。いうファイルを作成します。X)キーを押してカットし、貼り付けます。いっても、決まり通りに書き換えるだけなので全く難しくありません。部分を以下のように書き換えます。ブログ名」のようになります。ブログ名」にしたりといったカスタマイズもできます。次に、head要素内のスタイルシートへのリンク部分を以下のように書き換えます。?>"></head>部分の直前の行に以下のタグを入れます。?>body要素はそのままでも動きますが、以下のようにしておくと便利です。?>>このようにしておくと、トップページ、記事ページなどのbody要素に個別のclassが付くため、ページごとにスタイルを当てたい場合などに便利です。ブログのロゴ部分は、おそらくテキストではなく画像になっているだろうという想定で解説します。?>/を付ける必要があります。部分は、実際にWordPressテーマとして表示した際には「テーマファイルのURL」に置き換えられます。場合、https://example.com/wp-content/themes/sunshineに置き換えられます。フォルダに入れた画像がリンク切れとなってしまい、表示されません。よって、ロゴ画像(images/logo.png)の箇所は以下のようになります。つけるのを忘れないで下さい。height="33">あと、一般的にブログのロゴ画像はトップページヘのリンクになっていると思います。要素でトップページヘのリンクにします。?>と書けばトップページヘのリンクになります。サンプルは以下のようになります。いうファイルを新規作成します。</html>)までをコピペします。サンプルは以下のようになります。テーマのための関数(functions.php)サイドバーは、カテゴリの一覧、リンク、検索フォームなどを表示するという前提ですすめさせて頂きます。実はサイドバーにそういった要素を表示する場合、いちいち手動でソースを書かなくても、管理画面から簡単に「ウィジェット」とよばれるものを追加することでサイドバーにそのような要素を表示することができます。管理画面にログインしてください。管理画面のアドレスはhttp://ブログをインストールした場所/wp-admin/です。PCでXAMPPやMAMPのhtdocsフォルダ内のwordpressフォルダにインストールした場合、http://localhost/wordpress/wp-admin/になるはずです。(WordPressインストール時に送られてきたメールを見れば、インストール場所がわかります。)管理画面にログインしたら、左サイドバー内の[外観]をクリックして下さい。利用可能なテーマの中のTwentySeventeenなど最初から入っているテーマの上にマウスカーソルを乗せ、[有効化]をクリックして下さい。サイドバーの中で[ウィジェット]をクリックし、左側の[利用できるウィジェット]の中から[アーカイブ]や[カテゴリー]など適当なものを右側の[メインサイドバー]または[サイドバー1]の中にドラッグします。ブログを表示すると、サイドバーに先ほどドラッグしたものが入っているはずです。いうファイルを作成し、以下のコードを書きます。));これを入れておかないと、管理画面の「ウィジェット」の部分で「このテーマではウィジェットは使用できません」と表示されてしまいます。ウィジェットが設定されていない場合、ここが表示されます。ウィジェットが設定されていない場合、ここが表示されます。</section>もしウィジェットが1つも指定されていない場合は、3〜4行目が表示され、ウィジェットが1つ以上設定されていればウィジェットが表示されます。トップページ等(index.php)では、今までに制作したファイルを1つにまとめるためのファイルを制作します。読み込むためのPHPを書きます。読み込む」という意味です。記事一覧のループ(繰り返し)一般的なブログであれば、トップページはこんな感じになっていると思います。これをよく見ると、タイトル・日付・本文(概要)・リンクなどが同じレイアウトで繰り返しになっている(ループしている)ことが分かると思います。(記事は新しい順に並んでいます)この繰り返しの部分のことを「ループ」と呼びます。ループ部分のサンプルは以下の通りです。?>一見ややこしく見えるかもしれませんが、これがどういう動作をするかというと、「表示できる記事があるかぎり、4行目から9行目までを繰り返して表示する」という意味になります。ブログとして表示された場合、ループ部分は以下のようなHTMLになります。名などは変更しても構いません。要素でマークアップします。ソースコード全体は、以下のようになります。サンプルは以下の通りです。「ここに記事本文を表示する」という意味です。スタイルシート(style.css)WordPressにおけるstyle.cssは、テーマのスタイルを指定するだけでなく「テーマの概要(テーマ名、作者名など)」を指定するという役割もあります。先頭に以下のようなコメントを加えます。後にはテーマ名を書きます。後にはテーマの配布場所のURLを書きます。配布する予定がなければ、とりあえずブログのURLでも入れておきましょう。テーマの解説を書きます。テーマのバージョンです。テーマの制作者名です。テーマの作者のサイトのURLです。無ければブログのURLを書いておきましょう。コメントの下は、通常通りのスタイルシートの書き方で構いません。url(“images/bg.jpg”);のような書き方で構いません。フォルダ内の以下のフォルダーの中に入れます。wp-content/themes/WordPress管理画面にログインしてサイドバーの[外観]をクリックします。style.cssのコメントがきちんと書かれていて、テーマをフォルダを間違えていなければ、先ほど制作したテーマ[Sunshine]が表示されるはずです。[Sunshine]の枠の上にマウスカーソルを乗せます。[Sunshine]の枠の中の[有効化]をクリックします。最後に、管理画面の[外観]の[ウィジェット]からお好みのウィジェットを入れればオリジナルテーマの完成です。記事の投稿さあ、オリジナルのブログテーマができたら早速記事を投稿してみましょう。管理画面のサイドバーにある[投稿]から[新規追加]をクリックし、タイトルと本文を入力します。記事の途中に画像を挿入するには、本文の枠の上にある[メディアを追加]ボタンをクリックします。普通に記事を書くと記事の最後までトップページなどの記事一覧に表示されますが、これを途中までしか表示させないようにするには、本文の途中の任意の場所で[「続きを読む」タグを挿入]ボタンをクリックします。カスタマイズするにはここまでで基本的なブログテーマはできましたが、レスポンシブWebデザイン、スマートフォンやRetinaディスプレイへの対応、管理画面からのメインビジュアルの変更などには対応していません。「WordPressカスタマイズ講座」ではそれらの対応をはじめ、スマートフォンにも対応した更新しやすい企業サイトをWordPressで制作する方法などについても実習します。詳しくは以下のページをご覧ください。WordPressカスタマイズ講座テンプレートタグの一覧は、以下のページが分かりやすいかと思います。関数について詳しく知りたいという場合は、公式サイトをご覧ください。日本語版スマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。PHP徹底入門講座・WordPressカスタマイズ講座を開きます「PHP徹底入門講座」は、「HTMLはわかるけどプログラミングは未経験」の方向けの日曜講座です。プログラミングを始めてみたい方は、まずはこちらへどうぞ。別途、「WordPressカスタマイズ講座」も開講します。管理画面から更新可能な中小企業サイト」制作までやります。スマートフォンやRetinaディスプレイに対応した新しい内容にリニューアルしました。渋谷にお越し頂くのが難しい場合、ご自宅で動画受講も可能です。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。コーディングAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。2019年12月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。