WordPress

WordPressのCSSを編集する方法｜自分でカスタマイズしよう！【初心者向け】

WordPressの各テーマで使用されているcssファイルを編集する方法を、管理画面から行う方法とFTPクライアントを使用してファイルを更新する方法の二つを紹介します。自分でカスタマイズできるようになりましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

今回は、WordPressのCSSを自分で編集するカスタマイズの方法を解説します。

既存で用意されたテーマやプラグインでもCSSを少し修正するだけで、サイトの印象を変えたりオリジナリティの高いWordPressデザインにできますので覚えておくと便利です。

解説では実際に編集する画像などを使っていますので、自分のやりやすいカスタマイズ方法を見つけてください。

「WordPressのデザインを自分好みにしたい！」と悩んでいるのであれば、本記事を最後まで読むとカスタマイズの方法が分かるようになるので、ぜひ参考にしてみてください！

WordPressの初期CSSの状態
WordPress管理画面からCSSを編集する
FTPクライアントからWordPressのCSSを編集する
テキストエディタでWordPressにCSSを追加する
「追加CSS」でWordPressを編集する
まとめ：CSSをマスターしてWordPressを魅力的にデザインできるようになろう！
執筆してくれたメンター
WordPressを学習中の方へ

田島メンター！！WordPressのテーマを自分なりに修正したいんですが、どうしたらいいですか！？

テーマのCSSを修正するとできるよ。ちょっとやってみようか？

はい、お願いします！！！

WordPressの初期CSSの状態

今回はwordpress.orgで配布されている公式テーマTwenty Fifteenを使用します。
カスタマイズなどを行っていない状態だと、PCではこのように表示されています。

WordPress管理画面からCSSを編集する

CSSの編集でもっともシンプルな方法が、WordPress管理画面から直接編集する方法です。
以下では、WordPress管理画面から背景色の変更とフォントの変更を実際に行ってみます。

背景色の変更

WordPress管理画面の左メニュー「外観」から「テーマエディタ」を選択します。

右のファイル一覧から「スタイルシート(style.css)」を選択します。

wpcss_p_3

この画面からCSSの編集を行います。
テーマによっては作成者による解説も表記されているため、編集の際に参考にできます。

Ctrl＋Fを押すと、表示しているページ内で検索ができます。
変更したい箇所に関する単語などを入れると便利です。

wpcss_p_5

最初に背景の色を変更してみます。
青枠の部分がサイトの背景色のコードになります。

wpcss_p_6

色コードの値を変えて、「ファイルを更新」をクリックします。

wpcss_p_7

サイトに戻り、右クリックから「再読み込み」を選択しページを更新させます。
背景の色が変更されました。

投稿ページの背景色修正

CSSの編集によってデザインを変更できる箇所は、各テーマによって異なります。
例えば記事の背景色だけを変更する場合は、「posts」で検索し、以下の青枠部分の色コードを編集します。
(Twenty Fifteenの場合)

wpcss_p_t_1

フォントの変更

次に、フォントを変更してみます。
このテーマは初期の設定では「Noto Serif」を使い、それが閲覧者のPCにインストールされていない場合は「serif(明朝体)」になるように表記されています。

wpcss_p_9

フォントの部分を「sans-serif(ゴシック体)」に変更しました。
※Noto Serifのように、フォント名の中に半角スペースがある場合は””で囲みます。

wpcss_p_10

「ファイルを更新」をクリックしたあと、ページを更新すると変更が反映されています。

変更前と変更後の比較です。

変更前（明朝体）

変更後（ゴシック体）

[PR] Webサイト制作で副業する方法とは

FTPクライアントからWordPressのCSSを編集する

FTPクライアントを使用して、編集したCSSファイルをアップロードする方法です。

wp-content/themes/から、編集したいテーマのフォルダを選択します。
フォルダ内の「style.css」を右クリックし、「表示/編集」を選択します。
(FileZillaの場合)

wpcss_p_12

style.cssがエディタで開かれるので、「テーマの編集」を使用した時と同じように背景の色コードを変更してみます。

wpcss_p_13

wpcss_p_14

編集が完了したら上書き保存をします。
以下のような画面が出るので「はい」をクリックします。

wpcss_p_15

ページを更新すると変更が反映されます。

CSSの編集によって変更したものを元に戻したい場合は、管理画面からテーマをいったん削除してインストールし直すか、あらかじめ「style.css」のファイルを保管しておき、上書きでアップロードすることで最初の状態に戻せます。

テキストエディタでWordPressにCSSを追加する

テキストエディタを利用した修正は、複雑な修正を行う際のミスを減らせるメリットがあります。
FTPのエディタと違い、テキストエディタではコードの補完機能とコードの色表示機能があるからです。

以下では、実際に「VSCode」というテキストエディタを利用して、コードの補完機能と色表示機能を解説します。

VSCode以外にもテキストエディタはたくさんあるので、以下の記事で自分の使いやすいものを探してみると良いでしょう。

プログラミングに使える！フリーのテキストエディタ15選 | TechAcademyマガジン

コードの補完機能

「backgr」と入力すると、「background-color」や「background」などの入力コードが補完されます。
どのコードを選択するかで、意図する表示結果になったりエラーになったりは変わりますが、タイプミスを減らすことが可能です。

また水色の四角部分にマウスカーソルを当てると、以下の画像のように右上にカラーパレットが表示されます。

カラーパレットとは色見本を表示する機能です。
変更したい色を感覚的にクリックするだけで色の変更ができます。

コードの色表示機能

bodyとbackgroundと#00ced1というコードの指定値が、すべて別の色で分けられることでタイプミスを減らせます。

以下の画像のように、body要素のbackgroundという背景色に指定した色が水色で表示されることで、現状どの色を利用しているかも判別可能です。

「追加CSS」でWordPressを編集する

追加CSSから修正する方法は初心者でも簡単に編集できる方法の一つです。

ただし、追加するCSSのコードだけ確認することになるので、既存で用意されているCSSへ上書きしてしまう可能性があることに注意しましょう。

まず、「カスタマイズ」を選択します。

次に、「追加CSS」を選択します。

追加CSSを追記するフォームが表示されますので、このフォームにCSSを追記することで、追加CSSの実装が可能です。

今回は背景色を赤色にしてみます。

body {background:red}と入力して、公開ボタンを押してみてください。

リアルタイムで背景色が赤色になることを確認できます。

まとめ：CSSをマスターしてWordPressを魅力的にデザインできるようになろう！

以上でCSSを編集する方法は終わりです。
編集方法はいくつかありますが、自分のやりやすい方法で試してみてください。
どれかひとつでもやり方を覚えておけば問題ありません！

また、具体的なWordPressの使い方を知りたいのであれば「WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説」の記事も参考にしてみてください！

おしゃれなWebサイトを作りたいのであれば、いくつかのWordPressのテーマもチェックしてみるとよいでしょう。

執筆してくれたメンター

中本賢吾（なかもとけんご）
アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか？

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

ちょっとCSSに慣れる必要がありますけど、色を変えたりするのは簡単にできますね♪

そうだね。CSSを勉強すればもっと大幅に変更できるようになると思うから、ドンドン経験していこうね。

はい！！！

Redirectionの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を紹介する記事です。サイトが移転した時や別のサイトに移動させたい時に便利なプラグイン、Redirectionの使い...

WordPress

EWWW Image Optimizerの使い方ーWordPressプラグイン【初心者向け】

WordPressで作ったサイトの表示速度が遅いといった方におすすめのプラグインを紹介する記事です。 WordPressのページ表示速度を高速化できるプラ...

WordPress

Head Cleanerの使い方ーWordPressプラグイン【初心者向け】

WordPressは、HTMLで作成した普通のサイトと比較して表示速度が遅くなってしまいがちです。サイトの表示速度が遅くなると、せっかくアクセスがあっても、表示...

WordPress

Easy FancyBoxの使い方ーWordPressプラグイン【初心者向け】

自分のサイトを運営していてたまにもっと動きが欲しいなと思ったりすることはあるでしょう。普通サイトで動きを出そうとすると、JavaScriptを書かなけれ...

WordPress

WordPressで人気記事を表示できるプラグイン3選【初心者向け】

いろんなサイトで人気記事を表示していますよね。 WordPressでは、プラグインを使用して各記事の閲覧数からランキングを自動的に生成し人気記事をサイドバ...

WordPress

Custom Field Templateの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、WordPressのカスタムフィールドを追加できるプラグイン、Custom...

WordPress

あわせてよく読まれている記事

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。大石ゆかりなんだか難しそうですね・・・。田島悠介きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。大石ゆかりよろしくお願いします！！！目次 WordPressのインストール手順初期設定とインストール WordPress管理画面の基本設定記事の投稿方法カテゴリーとタグの管理ユーザー管理パーマリンクの設定テーマの使い方プラグインの使い方 WordPressで知っておきたいその他の設定 WordPressのインストール手順用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。本体の入手とサーバーへのアップロードまずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード以下のボタンをクリックしてWordPress本体をダウンロードします。ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。 [PR] Webサイト制作で副業する方法とは初期設定とインストールデータベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。また、データベースの文字コードは「UTF-8」にしておきます。「インストールを実行」をクリックします。ここではWordPressサイトの基本的な設定を行います。また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。管理画面の基本設定ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。サイトの基本情報変更左メニューの「外観」から「カスタマイズ」を選択します。「サイト基本情報」を選択します。サイトのタイトルとキャッチフレーズはここからいつでも変更できます。ログイン・ログアウト方法管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。記事の投稿左メニューの「投稿」から「新規追加」を選択します。「タイトルを追加」の部分にタイトル、「文章を入力、または…」の欄に本文を入力します。なお、WordPressではバージョン5.0からエディタが「ブロックエディター」に変更になっています。この記事でもブロックエディターの説明を行っています。また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。予約投稿の方法「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。カレンダーが表示され、日時を自由に決めることができます。トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。新規カテゴリーの作成方法ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。新規タグの作成方法ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。管理画面のユーザーをクリックすると、新規登録・編集画面になります。権限グループごとに何ができるのか新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。購読者 WordPressにログインすることが可能。プロフィールの変更が出来る寄稿者記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません投稿者記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない編集者他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない管理者全ての権限があるとなっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。新規ユーザーの登録方法管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。ユーザーの削除方法管理者の権限を持つユーザーでログインすると、削除することが出来ます。パーマリンクの設定パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。この部分をある程度自由に変更することが出来ます。パーマリンクの変更パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。パーマリンクのカスタム構造パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。テーマの変更方法左メニューの「外観」から「テーマ」を選択します。インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。テーマの例「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。おすすめのテーマ各シチュエーションで使えるWordPressのテーマを紹介します。国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。ブログサイトアルバトロスかなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。アルバトロス賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。賢威 Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。ダウンロード / DEMO Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。個人のブログサイトとしても活用できるので、ぜひ活用してみてください。ダウンロード / DEMO ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。ダウンロード / DEMO YITH Proteo ファッションやアパレル系のECサイトにおすすめです。カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。ダウンロード / DEMO Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。ブランディングとしての見せ方としても使えるのでおすすめです！ダウンロード / DEMO コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。ダウンロード / DEMO Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。ダウンロード / DEMO 他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。プラグインの検索とインストール左メニューの「プラグイン」から「新規追加」を選択します。テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。プラグインの有効化左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。プラグインの例 SNSボタンのプラグイン「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方 WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方 Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google

WordPress

今さら聞けない！WordPressとは【初心者向け】｜現役エンジニアが解説

WordPressをご存知でしょうか？最近ではホームページの制作をするときにも、よくWordPressを使う場面が多くなってきています。しかし、そもそもWordPressとは何か？と質問されたら説明するのは難しいものです。この記事では、WordPress初心者の方でも、そもそもWordPressとはどんなものであって、どんなメリットやデメリットがあるのかが分かるように解説したいと思います。ぜひ、WordPressの使い方を覚えましょう！なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！あのちょっと聞きたいことがあるんですけど〜田島悠介ん？何がわからないの？大石ゆかりあの、WordPressってなんですか？田島悠介あぁ、WordPressかー。WordPressはCMSと呼ばれるものの一つで、プログラミングなんかをしなくても簡単にサイトを作ることができるものだよ。大石ゆかり CMS、ですか。具体的にどういうことができるんですか？田島悠介それじゃあ１つずつ説明していくね。大石ゆかりはい♪お願いします！！！目次 WordPressとは WordPressが人気な理由 WordPressでできること WordPressでサイト運営する上で必要なもの WordPressで作られた実際のサイト WordPressの学習方法 WordPressと一緒に使うと便利なツール WordPress利用時の注意点そもそもWordPressとは何か WordPressとは、いわゆるコンテンツマネジメントシステム（CMS）というものです。簡単にいうと、「ホームページの制作ができない人でも、簡単にコンテンツを管理できる仕組み」ということです。通常、ホームページに新たに記事を追加しようとすると、HTMLという言語を勉強して、自分でコードと記事の文章を書いていかなくてはなりません。それがWordPressの場合は、HTMLのコードがわからなくても、マイクロソフトのワードに文章を書いたり写真を挿入したりする感覚で、記事やニュースを更新していくことができます。 [PR] Webサイト制作で副業する方法とはWordPressが人気な理由プログラミングができなくてもWebサイトが作れる上記したように専門知識なくしてWebサイトの管理等ができますが、ここでの専門知識とは主にプログラミングに関することです。特別な機能を持たせる開発をするような場合を除き、情報発信ができるようなメディア立ち上げをする場合にはWordPressそのものの操作に慣れるだけで作ることができるのです。通常自分でゼロから作成しようとすると「HTML」や「CSS」、そしてもう少し華やかさや簡単な機能を加えるには、「JavaScript」や「PHP」等も知っておくと有利になりますが、WordPressを使えば全くこれらの知識がなくとも作れてしまいます。無料であるなにより、無料でこれらのシステムを使えることによって未経験者にも敷居が下がり使用者の増加に繋がっています。しかしながら、インターネット上に公開するにはWordPressの利用とは別に、ドメインの取得やレンタルサーバーなどが必要となりこれらには当然費用が必要となります。 WordPressでできること画像引用元：https://unsplash.com/photos/tZc3vjPCk-Q それでは、具体的にWordPressのメリットとデメリットをご紹介します。 WordPressのメリット HTMLがわからなくても自分でニュースを追加、更新できる WordPressは記事更新の管理画面が、わかりやすいインターフェースで設計されています。そのため、直感的に記事の追加や編集、画像や動画の挿入が可能です。HTMLの知識は不要です。 Webサイトの構築が簡単もし自分でWordPressのサイトを立ち上げたいと思った時でも、各サーバー会社が予め”かんたんインストール”という設定をしてくれている場合がほとんどです。 WordPressはデータベースという、記事のデータが入った箱から、ページの読み込みごとにそのデータを取ってくるという動きをするのですが、これらデータベースの設定も自動でサーバー会社が行ってくれます。拡張性が高くてお手軽たとえば、お問い合わせフォームを設置したいというときにHTMLであればCGIやPHPというものを勉強する必要がありますが、WordPressの場合はそれが不要です。プラグインという便利な拡張機能が無料で、豊富に用意されているので、そのプラグインを”インストールする”ボタンを押すだけで実装できてしまいます。 WordPressのデメリット HTMLのサイトより表示スピードが遅い HTMLは、ページごとにコードを書いたファイルをサーバーに置いてあるだけなので、ページの表示スピードが早いです。それに比べてWordPressは、ページの表示ごとにデータベースから、ページを構成するパーツをその都度呼び出してページを構築するため、HTMLに比べると表示スピードがどうしても遅くなってしまいます。セキュリティの心配 WordPressはPHPというプログラミング言語でできている関係上、不正な操作や攻撃を受けやすいというデメリットがあります。例えばログイン画面に、IDとパスワードをランダムに超高速に試されることで、不正ログインされてしまう可能性もあります。そのため、WordPressのバージョンは常に最新にしておく必要があります。この点は、Windows(ウィンドウズ)などのパソコンと同じです。常にバージョンは最新のものを利用しましょう。実際に自分でWordPressを運営したいという方は、WordPressをインストールする方法をご覧ください。 WordPressでサイト運営する上で必要なもの画像引用元：https://unsplash.com/photos/gcsNOsPEXfs 独自ドメイン自分のサイトを公開するには、ドメインというものを取得する必要があります。有名なところで言うと「お名前.com」「ムームードメイン」などがあります。初心者でもすぐ使える！ドメインが取得できるサイト10選レンタルサーバー誰がアクセスしてもサイトを公開させるためにはサーバーが必要です。サーバーを自作する人もいますが、基本的にはレンタルサーバーを月額1000円程度で利用します。レンタルサーバー比較・10選【Webサイト制作の初心者におすすめ】を参考に選んでみてください。「ロリポップ」や「さくらのレンタルサーバー」は初心者の方にも人気です。 Webサイトのデザインテンプレートサイトの見た目を整形するデザインを用意する必要があります。 WordPressの管理画面上に用意されているものもありますが、無料で利用できるおしゃれなテーマも多いので、そちらがおすすめです。初心者におすすめ！無料で使えるWordPressのテーマ20選【日本語対応のみ】 WordPressで作られた実際のWebサイト画像引用元：https://unsplash.com/photos/OGOWDVLbMSc それでは、実際にWordPressで動いているサイトを6つほど紹介していきます。 AdverTimes(アドタイ) 宣伝会議の運営している広告や宣伝に関するメディアです。記事だけでなく、FacebookやInstagramの写真を載せることもできます。田中直染料店オンラインショップ機能を追加しているWordPressサイトです。商品登録を、お店のスタッフの方が追加更新できるようにしているものと思われます。浦和レッドダイヤモンズ公式サイトスポーツチームの公式ホームページでもWordPressが使われている例はいくつかあります。過去の試合結果などを溜めておくことも、WordPressであれば簡単に行えます。イルカ交通名古屋の交通会社のホームページ。ニュースの定期発信にWordPressを役立てています。渋谷教育学園渋谷中学高等学校学校の発信するニュースを、複数のカテゴリに分割して管理しています。 TechAcademy magazine 実は、このサイトもWordPressで作られています。こういった記事を発信していくようなサイトとの相性は非常にいいでしょう。 WordPressの学習方法画像引用元：https://unsplash.com/photos/QklJV_Q0Pig 人気が高く利用者も多いWordPressなので、その分学習環境も整えられています。本も多く出版されていて、また学習サイトに関しても無料で多くのサイトが公開されています。学習サイトドットインストールドットインストールではWordPressの基本的な操作方法から細かい構築手順まで幅広く学ぶことができます。ドットインストールバズ部こちらの特徴はWordPressの使い方全般に加えて、サイト構築後の集客等についてもまとめられているというところです。バズ部 Webクリエイターボックス WordPressにおけるポイントやコツなどが多く紹介されており、オリジナルテーマの作り方といった中級者以上に向けられた内容も学ぶことができます。 Webクリエイターボックス書籍いちばんやさしいWordPressの教本プログラミングスキルがなくてもパソコンやスマートフォンに対応したWebサイトの完成ができるように丁寧に解説されています。本格ビジネスサイトを作りながら学ぶ　WordPressの教科書こちらは初級的な内容から発展的なことまで含まれており、本格的に使おうとする人に向いています。 WordPressと一緒に使うと便利なツール画像引用元：https://unsplash.com/photos/hpjSkU2UYSU WordPressにはプラグインというツールを導入して機能を拡張することができます。よく使われているプラグインを紹介します。 WP Social Bookmarking Light SNSへのリンクボタンを追加できるプラグインです。現在ではWebサイトの投稿をSNSでシェアしたり、逆にSNSの投稿をWebサイトで引用したりということが当たり前に行われています。Webサイトを構築した際、早い段階で必要になるのがSNSへのリンク機能でしょう。このプラグインは各SNSの公式のボタンを使った表示ができるのが特徴です。 WP Social Bookmarking Light Table of Contents Plus 投稿ページが増えてくると、目次ページ（サイトマップ）が欲しくなります。このプラグインは、長い固定ページ内の目次のほか、サイト全体の目次ページ（サイトマップ）の作成も可能です。手作業で目次ページを作成するのと比較して圧倒的に容易ですので試してみるといいでしょう。 Table of Contents Plus Contact Form 7 Webサイトにお問い合わせフォームを追加するプラグインです。鉄板中の鉄板プラグインであり、とても多く利用されています。導入が容易であり、広く利用されていることから設定方法などの情報も多く得られることができます。 Contact Form 7 WP-PageNavi ページナビゲーションを行うプラグインです。このプラグインを導入することで、分かりやすいページ送り機能を実装することができます。とても多く利用されているプラグインの１つです。 WP-PageNavi All-in-One WP Migration WordPressで構築したWebサイトの移設を行うためのプラグインです。 Webサイトの設定や投稿などを全て１まとまりのファイルにエクスポートすることができます。 Webサイトをリニューアルする際に別環境にサイトのコピーを立ち上げたり、自分のパソコンでWordPressを動作させる場合など、幅広く活用できます。またサイトのバックアップを取得するツールとしても有用です。 All-in-One WP Migration なお、プラグインを導入すると、その分WordPressの動作も少しずつ遅くなります。プラグインの導入は必要なものに限定し、多用しないようにしましょう。 WordPressの利用時の注意点 WordPressは便利な反面、利用する際にいくつか注意点があります。画像引用元：https://unsplash.com/photos/iEiUITs149M ページ構成を考えておく WordPressは自由度が高いため、かなり複雑なWebサイトも構築可能です。そのためページ構成を考えずに適当にWebサイトを構築してしまうと、収集がつかなくなってしまいます。通常の記事で投稿するのか、固定ページと呼ばれるページで作成するのか、ページ間のナビゲーションはどうするか等、ページ構成を考えながらサイトを構築するといいでしょう。動画や画像を多用しない前述のとおり、WordPressには表示がやや遅いという弱点があります。また一般的にユーザーがWebサイトのページ読み込みを待てる時間は約3秒程度と言われています。特にWebサイトのトップページで容量の大きい画像や動画を貼り付けることは表示を遅くする原因となるため、控えるようにしましょう。また素材自体を軽くするテクニックも様々ありますので活用するといいでしょう。具体的には写真であれば、カメラで撮った写真のファイルはそのままでは画像サイズとファイルの容量が大きいため、画像編集ソフトでサイズを縮小する、または減色処理を行うなどの方法があります。 Webサイトがレスポンスよく表示されるよう、心がけましょう。自動アップデートを有効にする WordPressは既定値で自動アップデートが有効になっています。以前はアップデートによりシステムの動作が不安定になるなどの事象が発生することがありましたが、最近では安定してきていますので、自動アップデートは有効にしていて問題ないでしょう。むしろアップデートによりセキュリティやバグ（不具合）への対応が行われますので常に最新版にしておくことが重要といえます。必要最低限のSEO対策を行う Googleなどの検索結果でWebサイトが上位に表示されるよう対策を行うことをSEO対策と呼びます。 SEO対策は専門の会社もあるぐらいで非常に奥が深い領域です。とはいえWebサイトの構成を整えるという意味でも、必要最低限の対策は行っておいたほうがいいでしょう。「WordPress SEO by Yoast」というプラグインを使うと、ガイダンスに従いながらSEO対策を行うことができます。試してみるといいでしょう。 WordPress SEO by Yoast 広告（アフェリエイト）の導入は慎重に Webサイトを構築するモチベーションの１つに広告収入（アフェリエイト）もあると思います。しかし最初は広告を入れず、投稿を増やすことに専念したほうがいいでしょう。広告の導入を考えているのであれば投稿のテーマや方向性を決めておくことが重要です。投稿数が増えてユーザーの流入数が増加傾向にあることを確認できるようになったら、AdSenseなどに接続して広告導入の手続きを行いましょう。 AdSenseヘルプ – コード導入ガイド A8.net – アフェリエイトの始め方！いかがだったでしょうか。普段皆さんがご覧になっているウェブサイトも、WordPressで作られているかもしれませんね。最後に、もし「WordPressって何？」と誰かに聞かれたら、「ホームページに自分で記事の追加や更新ができるツールだよ」と教えてあげましょう。実際、どんなWebサイトが作れるのかイメージするために無料で使えるWordPressのテーマ30選も合わせてご覧ください。執筆してくれたメンター太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかりなるほど！！結構色々なサイトがWordPressを使って作られているんですね！！！田島悠介そうだね。1からコーディングしなくても簡単にデザインを作ったり記事を更新したりできるから、様々な場面で活用されているよ! 大石ゆかり私も今度使ってみます！！田島悠介うん、何かサイトを作ったら見せてね♪ 大石ゆかりはい！！頑張ります！！！ TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressコースを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。オンラインの説明動画や無料体験も実施中です！まずはこちらからお気軽に試してみてくださいね。人事・研修担当の方は、WordPress研修も提供しているので、合わせてご覧ください。

WordPress

ゼロからの始め方！WordPressでブログサイトを作る手順とは【入門向け】

Webサイトを作成する上で人気が伸びているWordPress(ワードプレス)。今回は、WordPressを使ってブログサイトを作る手順についてTechAcademyの現役エンジニアが解説しています。 WordPressについてそもそもよく分からないという方は、WordPressとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。目次 WordPressとはサイト作成に準備するものブログサイト公開までブログサイト公開後今回の登場人物田島悠介（29）あらゆる言語をマスターしている万能型エンジニアでTechAcademyのメンター。人の成長を見るのが一番のやりがい。好きな映画は『トスカーナの休日』大石ゆかり（24） TechAcademyの受講生。 Instagramには3つの写真加工アプリで編集してからアップするという。大石ゆかり田島メンター、私今アメブロでブログ書いてるんですけど、もっとおしゃれな感じにしたいんですっ！なんか良いサービス知らないですか？田島悠介ってか、ゆかりちゃんアメブロやってたんだ！教えてよ！笑大石ゆかりそれは秘密です♪（スッピン写真とか載せてるし、絶対見せられない）田島悠介ええー。。ブログやるなら「WordPress(ワードプレス)」っていうのがおすすめだけど知ってる？大石ゆかり Word(ワード)なら知ってますけどそれとは違うんですか？田島悠介 Wordでは無いんだけど、同じような使い方で自分のサイトを作れるんだよ！大石ゆかりへえ〜そんな便利なものがあるんですね！具体的に教えてくださいっ！田島悠介おっけ〜！教えたら今やってるブログも教えてね！大石ゆかりそれはダメです！！ WordPressとは WordPressとは、CMS(コンテンツマネジメントシステム)と呼ばれるサービスの一つで、無料で使えることで有名です。ちなみにCMSとは簡単にサイト上のコンテンツを管理することができる仕組みです。普通、サイトを作ろうと思ったらHTML/CSSといった言語を使いながらプログラミングの作業が必要になります。しかし、WordPressの場合は、プログラミングを一切することなく自分のサイトを作ることができるのです。下の画像は、当サイトのTechAcademy magazineですが、このサイトもWordPressを使って動いています。ブログのように記事配信を行っていくようなサイトにはWordPressが適していると言えるでしょう。最近では企業のコーポレートサイトもWordPressで作成されているサイトがどんどん増えてきています。大石ゆかりなんでWordPressってすごい人気なんですか？田島悠介やっぱり無料で手軽なのに機能が多く何でもできるところじゃないかな！大石ゆかり私アメブロしかやったことないんですが、大丈夫ですかね？笑田島悠介もちろん！特に専門スキルは必要ないよ！ [PR] Webサイト制作で副業する方法とは準備するもの WordPressを使い、実際にWebサイトとして動かしていく上で必要なものを紹介しています。とは言ってもWordPressを使えるレンタルサーバーを利用すれば、とても簡単に済みます。現在、ほとんどのレンタルサーバーでWordPressを利用できます。初心者にも人気なレンタルサーバーには以下のようなものがあります。さくらインターネットエックスサーバーロリポップ ConoHa WING レンタルサーバーを利用すれば月額500~1,000円程度でWebサイトを運営することができます。またレンタルサーバーではアドレスが「https://◯◯.sakura.ne.jp/」のようになりますが、「◯◯.com」や「◯◯.jp」のように自由にアドレスを決めたい場合、独自ドメインサービスも利用する必要があります。独自ドメインサービスには以下のようなものがあります。お名前.com ムームードメインそれでは、さくらインターネットを例に、WordPressを利用する手順を確認していきましょう。さくらインターネットでWordPressを利用する場合、スタンダードプラン以上で契約する必要があります。以下で紹介している手順は、さくらインターネットで公開されている手順「【新コントロールパネル：クイックインストール】WordPress(ブログ)のインストール」をもとにしています。【新コントロールパネル：クイックインストール】WordPress(ブログ)のインストール WordPressを利用する手順は以下のとおりです。 WordPressをクイックインストールする Webサイトのタイトルなどを決めるでは、一つずつ解説していきます。 1. WordPressをクイックインストールするさくらのレンタルサーバ「サーバコントロールパネル」にアクセスしてログインします。サーバコントロールパネルサーバコントロールパネルホームの左側のメニューから「Webサイト/データ>クイックインストール」を選択します。 WordPressの「新規追加」ボタンをクリックします。はじめてWordPressを導入する場合は、WordPressの設定や記事を格納するデータベースと呼ばれるものを作成する必要があります。「データベース作成」をクリックします。データベースや接続用パスワードを決めて入力します。データベース文字コードは「UTF-8」のままとします。入力が終わったら「同意する」にチェックを付けて「作成する」をクリックするとデータベースが作成されます。インストールURLには「blog」などとすると良いでしょう。その他は既定値のままでかまいません。「ライセンス・利用規約に同意する」にチェックを付けて「作成する」をクリックします。インストールが完了すると以下のように表示されます。簡単ですね！次に管理画面URLにアクセスしてWebサイトのタイトルなどを決めましょう。 2. Webサイトのタイトルなどを決めるブログサイトの「サイトのタイトル」、WordPressの管理画面にログインする際の「ユーザー名」「パスワード」「メールアドレス」を入力しましょう。あとで変更することも可能です。「検索エンジンがサイトをインデックスしないようにする」にチェックすると、ブログサイトが検索結果に出てこなくなります。通常はチェックしなくて大丈夫です。 WordPressをインストールし、「成功しました！」と表示されれば無事完了です。実際にログインしてみましょう。設定したユーザー名、パスワードでログインするとWordPressの管理画面に入ることができます。無事ログインできればWordPressの管理画面に入ることができるはずです。上記の画像がWordPressの管理画面になります。ブログを投稿したり、サイトの設計を編集したり、アカウントを追加するなどは基本的にこの管理画面上で行うことが可能です。サイドメニューに情報が多く、慣れるまで少し大変かもしれませんが毎日ログインして利用していればすぐ使えるようになるはずです。大石ゆかりわぁ、WordPressっていろんな機能があるんですね。田島悠介管理画面の使い方についてはこの後詳しく見ていくから付いてきてね！大石ゆかりは、はいっ（汗）ブログサイト公開まで実際にWordPressが利用できたらWebサイトのデザインや構成を編集していきます。これから作っていこうと思っているブログ記事やカテゴリなどデザインを整える必要があるでしょう。 Webサイトの構成(サイトマップ) テーマの選択公開するブログサイトの構成、つまりサイトマップを考える必要があります。作る前から細かく設定する必要はありませんが、サイト内にどんなページが必要なのか書き出しておくとテーマも選びやすくなります。簡単にブログサイトのサイトマップを作ってみました。テーマとは、簡単に言えばサイトのデザインです。 WordPressが人気な理由の一つとして最初にも紹介しましたが、HTMLやCSSなどデザインやプログラミングの作業をしなくてもテーマを選択するだけで一つのサイトにすることができます。何もしなければサイトデザインはデフォルトテーマ「Twenty Twenty」が適用されています。このテーマでも十分魅力的なWebサイトを作成することができますが、「もっとおしゃれなテーマにしたい」、「ヘッダーやフッターをつけたい」などサイトに合わせてテーマを選んでいきましょう。テーマを変更する際は、「外観」>「テーマ」で変更することが可能です。テーマ自体は、WordPressだけでなくいろんな企業や個人で提供しているので、調べてみることをおすすめします。無料で使えるWordPressのテーマ30選も合わせて紹介しておきます。大石ゆかりサイト上に大きく動画が流れるようなデザインとかもできますか？田島悠介もちろん動画が流れるテーマはたくさんあるよ！大石ゆかりおお、そうなんですね♪ 下から浮き上がったり横からスライドしたり動きのあるサイトとかも作れます？田島悠介パララックスっていうサイトかな。もちろんあるよ！WordPress自体世界中で使われてるからテーマを作る人も世界中にいて、種類に困ることは無いと思うよ！固定ページについて固定ページは更新することが少ないページで利用します。企業ページの場合、会社概要やお問い合わせページなどが該当します。また、デザインテーマによっては、固定ページで設定した内容を上部のナビゲーションメニューで自動的に表示してくれます。例えば、次のように、ニュース・インタビュー・テクノロジー・キャリア・お問い合わせという5つの固定ページを作成した場合、ページ上部にこの様に表示されるイメージになります。投稿ページについて WordPressは元々ブログを作成するために開発されたアプリケーションです。投稿ページでは日々のブログを投稿するイメージで、ページが作成されます。固定ページと異なり、デザインテーマの標準状態で、ページ上部のナビゲーションメニューに投稿ページの内容が表示されることは、ほぼありません。通常は、トップページに投稿日の新しい順に表示されます。ブログサイト公開後 WordPressが選ばれている理由の一つにカスタマイズの柔軟性がよく挙げられます。記事を追加、更新できるだけでなくWebサイトのSEO対策や会員機能の追加など簡単に行えるのです。せっかくブログサイトを作ったらより多くの人に見てもらいたいはずです。プラグインの導入ブログ記事の投稿プラグインの導入は「プラグイン>新規追加」から行います。キーワードなどで検索を行い、導入したいプラグインの「今すぐインストール」をクリックします。プラグインをインストールしたら「有効化」を行います。ちなみに以下のプラグイン「WooCommerce」はWordPressでECサイトを構築する定番中の定番のプラグインです。プラグインはいつでも設定できるので、必要に応じてインストールしましょう。 WordPressでまず最初に入れるべきプラグインを参考にしながらより本格的なサイトにしていきましょう。続いてブログ記事を実際に投稿してみましょう。新規でブログ記事を作成する場合は「投稿>新規追加」で新しく公開することができます。 WordPressはバージョン5.0からエディタがブロックエディタに変更されています。/か+ボタンで要素を選択しながら、ブロックを組み立てるように記事を作成していくのが特徴です。文章だけでなく画像や動画を記事内に挿入し、素敵な記事を作成すると良いでしょう。サイドメニューの「投稿」>「投稿一覧」で現在公開している、下書きの記事を一覧で見ることができます。サイトデザインはデフォルトテーマ「Twenty Twenty」が適用されていますが、以下のように「Hello world!」というタイトルのブログ記事を読むことができました。大石ゆかりついにブログ更新が始まるって感じですね♪ 田島悠介そうだね！ちなみにゆかりちゃんはどんな事書いていくの？大石ゆかりんー特に決めてないんですけど海外の映画とか見た感想をつらつらと書いていこうかなって思ってます♪ 田島悠介おお、いいね！じゃあ、僕の好きな「トスカーナの休日」もぜひ紹介してね！おさらい WordPressとは誰でも簡単にサイトを作れる便利なサービス！ WordPressはレンタルサーバーで簡単に始められる！サイトを作る上でサイトマップを作成しよう！ WordPressはテーマとプラグインが充実している！初めてWordPressでサイトを作る際、サーバーやドメインの契約、新しいツールの導入など慣れない作業が多いかもしれませんが、サイトを公開してしまえば後はどんどんブログ記事の作成に集中できます。 WordPressの使い方を覚えて、ぜひ自分だけのブログサイトを作ってみましょう。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressコースを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。オンラインの説明動画や無料体験も実施中です！まずはこちらからお気軽に試してみてくださいね。

WordPress

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。目次動画で学ぶ！メディアクエリとはメディアクエリとは Web制作で推奨されているメディアタイプメディア特性メディアクエリの書き方複雑なメディアクエリの組み合わせを実現する方法実際に書いてみよう田島悠介今回はメディアクエリを利用する方法を解説しよう。大石ゆかり田島メンター！！メディアクエリというのは何ですか〜？田島悠介スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。大石ゆかりなるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！動画で学ぶ！メディアクエリとは今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webサイト制作で副業する方法とはメディアクエリとは今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。メディアタイプの種類メディアタイプ対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビなお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。 Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。 all すべてのメディアタイプに適用されます。コード例 @media all { p { color: green; } } 表示結果解説次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。今回はcolor: white;で色が緑色になります。 screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。 screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。 print 印刷用に適用されます。印刷プレビュー画面で確認できます。 print表示結果解説 screenのコードを印刷プレビューすると、青色になります。 speech 音声読み上げ機能の際に適用されます。今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } } メディア特性メディア特性名メディア特性 any-hover マウスを該当要素の上に移動させた場合に処理をします。この移動をホバーと言います。 any-pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。 aspect-ratio ビューポートの幅対高さのアスペクト比に応じて表示するcssを変更できます。 color 機器の表示色数性能に応じて表示するcssを変更できます。 color-gamut 機器の表示色域に応じて表示するcssを変更できます。 color-index 機器の色参照テーブルの項目数に応じて表示するcssを変更できます。 device-aspect-ratio 機器の幅対高さのアスペクト比に応じて表示するcssを変更できますが非推奨です。 device-height 機器のレンダリング面の高さを指定できますが、非推奨です。 device-width 機器のレンダリング面の幅を指定できますが、非推奨です。 display-mode cssのdisplay-modeで指定した内容に応じて表示するcssを変更できます。 forced-colors カラーパレットを制限している場合に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 grid 機器がグリッドとビットマップ画面のどちらを利用するか指定できます。 height ビューポートの高さを指定できます。 hover マウスホバーした際のcssを指定できます。 inverted-colors 色が反転している場合にcssを適用できますが、Safariのみ利用可能です。メディアクエリ5以降の追加機能です。 light-level 明るさに応じて表示するcssを変更できますが、メディアクエリ5以降の追加機能です。 monochrome 機器のモノクロ出力情報に応じて表示するcssを変更できます。 orientation ビューポートの向きに応じて表示するcssを変更できます。 overflow-block ブロック軸方向にあふれたコンテンツの扱いに応じて表示するcssを変更できます。 overflow-inline インライン軸方向にあふれたコンテンツがスクロールできるかに応じて表示するcssを変更できます。 pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。ただし、 any-pointerのほうがより正確に処理できます。 prefers-color-scheme ユーザーが表示させたい明るさに応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 prefers-contrast 隣接色のコントラスト量の増減に応じて表示するcssを変更できます。ただ、実験段階のため表示できるブラウザは存在しません。 prefers-reduced-motion ユーザーが表示上で動きを少なくしたい場合に適用できます。前庭運動障害をお持ちの方向けの設定です。メディアクエリ5以降の追加機能です。 prefers-reduced-transparency ユーザーが透明度を下げたいと希望している場合に適用できます。メディアクエリ5以降の追加機能です。 resolution 機器のピクセル解像度に応じて表示するcssを変更できます。 scan 機器のスキャン処理方式に応じて表示するcssを変更できます。 scripting JavaScriptなどのスクリプト利用に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 update コンテンツ表示更新頻度に応じて表示するcssを変更できます。 width ビューポートの幅に応じて表示するcssを変更できます。メディアクエリの書き方メディアクエリの書き方は以下の通りです。 link要素として指定する場合スタイルシートに指定する場合 CSS内で@importする時に記述する CSS内で@mediaを記述する詳しく解説していきます。 link要素として指定する場合 headerのlink要素でメディアクエリを指定する方法を解説します。サンプルコード <link rel="stylesheet" href="./media.css" media="screen and (max-width: 780px)"> 解説 href=”./media.css”では、読み込むファイルのパスを、同じ階層にあるmedia.cssで指定しています。 media=”screen and (max-width: 780px)”では、メディアタイプの指定 and (メディア特性の指定)を行っています。今回は表示デバイスの最大幅が780pxの場合適用されます。つまり実際の表示の変化はmedia.cssの実装が適用されます。 CSS内で@importする時に記述するスタイルシート内に@importを利用してメディアクエリを適用する方法について解説します。サンプルコード @import url('media.css') screen and (max-width: 780px); 解説 @importでインポートすることを宣言しています。 url(‘media.css’)でmedia.cssをインポートしています。 screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。つまり実際の表示の変化はmedia.cssの実装が適用されます。 CSS内で@mediaを記述するスタイルシート内に@mediaを利用してメディアクエリを適用する方法について解説します。サンプルコード @media screen and

CSS

「飲食店・美容院・病院」に特化したWordPressのテーマとは[PR]

飲食店や美容院、エステサロン、病院などのWebサイトを作ろうと考えている方向けにWordPressのおすすめテーマ（テンプレート）を紹介しています。ホットペッパーや食べログなどのポータルサイトに掲載するだけでなく、自社サイトを持つことは非常に重要です。自社サイトを持つことで、公式サイトとしての信用を獲得、お客さんに繰り返し見てもらう仕組みを作ることにつながります。さらには、独自でドメインやサーバーを管理することで、集客に役立つメルマガや割引クーポンなども送ることができるようになります。今回紹介するのは、それぞれの分野に特化したWordPressテーマです。初めてWebサイトを作る人にも、もちろんWordPressビギナーにもおすすめ。活用することで少ない手間で本格的なサイトを作ることができるでしょう。 WordPressとは WordPressは、世界中で利用されている無料のCMSプラットフォームです。ブログや会社のホームページなどコンテンツを更新するWebサイトを作るのに向いているサービスです。難しい技術を使わなくても手軽におしゃれなサイトを作れるのが特徴ですが、おしゃれなサイトにするためには良いテーマを選ぶ必要があります。 WordPressのテーマには、無料と有料のものがありますが、本格的にサイトを運用するのであれば有料のテーマが良いでしょう。有料テーマを使うべき理由についても紹介しているので、合わせて読んでみてください。今回は、飲食店や美容院など店舗を持っている方向けに使い勝手の良いTCDのWordPressテーマを紹介していきます。機能面やSEOはかなり充実しているので、初めてサイトを作る方でもかなりクオリティの高いサイトになるはずです。飲食店向けのテーマ KADAN あらゆる「和」の情報発信を底上げする。訴求に必要な要素が全部入ったテーマトップページは、動画やスライドショーなどで洗練された画を見せることができます。トップページに載せる情報も自由に選んで並び替えることができる形になっています。デザインも「縦書き」という今まであまり見なかった、和のイメージを伝えることができます。（もちろん横書きに編集することもできます。）飲食店や旅館では、コース料理や宿泊プランなど時期によって都度変わるものもあるでしょう。KADANでは、プランやお知らせなど更新が必要なコンテンツも簡単に投稿できる設計になっています。「見出し」「文章」「画像」「Googleマップ」「表」などページ内に必要なコンテンツもすぐに追加することができ、色やサイズといったデザイン面も簡単にカスタマイズできるようになっています。また、あまり更新頻度が高くないお店の内観・外観や客室のページは、固定ページのテンプレートを使って作成することもできます。決められた入力項目に文章や写真を入れることで、スマホにも綺麗に対応したページを作ることができます。ここまでクオリティの高いページもテンプレートに沿って内容を埋めていくだけで作成されます。料理の写真や店舗の外観など自分たちが持っている素材を使ってサイト上でも良さを100%伝えられるテーマになるでしょう。おすすめの業種温泉旅館、和菓子店、酒造会社、神社、和食レストラン、呉服屋など WordPressテーマ「KADAN」 / DEMO [PR] Webサイト制作で副業する方法とは美容院・サロン向けのテーマ BEAUTY 最新の「ヘアスタイル検索」など、安心と期待を膨らませるページ構成を手軽に。スタイリストのページ、スタイルを紹介するページなど、集客する上でビジュアルが重要な事業者にとっては使い勝手の良いテーマだと思います。スタイリストの出勤時間、その人が得意とするスタイルなども掲載することができます。美容院で一番重要で一番更新が多いページは、スタイルの紹介でしょう。スタイルの写真やスタイルの説明を登録すれば自動でレイアウトも調整され、スタイリストも選択するだけで表示が可能です。更新が多いページである分、手間なく登録できる設計になっているのが特徴です。パーマやカラーなどのメニューも簡単に登録を行うことができます。新しいメニューを追加したり、すでにあるメニューを編集することも簡単に行えます。美容院やサロンでは、スタイリストや施術メニューなど都度更新が必要なページがあると思います。新しいスタイリストの紹介や新しいメニューの追加など簡単に設定が行えるので、集客の機会損失も防ぐことができるはずです。おすすめの業種理髪店、ネイルサロン、まつ毛・眉毛サロン、貸衣装、モデル事務所など WordPressテーマ「BEAUTY」 / DEMO 病院・クリニック向けのテーマ BIRTH 洗練された医療機関のWebサイトをいとも簡単に構築できるテーマ。病院やクリニックなど医療機関のサイト作成におすすめのテーマとなっています。トップページでは、画像や動画で目を引く構成になっていて、「医師紹介」「診療科目」「お知らせ」などのコンテンツはドラッグ&ドロップで並び替えができるので、手軽にサイトを組み立てることができます。重要なお知らせを上部に表示するなど柔軟に変更することも可能です。また、DEMOページを見れば分かるように画像や動画を前面に押し出しているので、第一印象のインパクトはかなり大きいでしょう。病院の施設内の案内も以下のようにスライドショーで紹介することもできます。 https://techacademy.jp/magazine/wp-content/uploads/2018/05/1bfc3ff954f7e345286a5477c83dc938.mp4 TCDのテーマを使えば、診察で忙しい院長でも手軽にかつ本格的なサイトを完成させることができるはずです。難しいスキルも必要ないので、別の担当者に引き継ぐことも時間をかけずに済むでしょう。このテーマの特徴でもあるのがFAQの設置です。病院や医療施設であればサイト内に「よくある質問」を掲載しているところが多いですし、利用者も疑問に思う点が多いでしょう。質問の項目をクリックするとプルダウンで回答が表示されるようになっていますが、あらかじめ質問と回答を入力しておけば自動でレイアウトを組んでくれます。簡単にFAQを設置できるので、病院に問い合わせをしなくてもその場で解決することができるでしょう。 FAQの一部抜粋また、各ページのフッターエリアは、診療予約や問い合わせといったアクションの誘導をすることができます。サイトへの集客だけでなく来院を増やすためにも電話番号や予約ページへのリンクを載せておくことが重要です。おすすめの業種歯科、整形外科、美容クリニック、鍼灸・マッサージ、国立・大学病院、介護施設など WordPressテーマ「BIRTH」 / DEMO TCDテーマの特徴 SEOに強い飲食店にせよ美容院にせよ「新規顧客の獲得」は必須でしょう。そして新規顧客を獲得する上では、Googleなどで検索した際に上位表示されていることが理想です。検索した時に上位に表示されるためには、サイトの設計や載せるコンテンツを考えなければいけません。ゼロからSEOについて学んだり、WordPressのプラグインの使い方を覚える時間が無いという方にとっては、使い勝手が良いテーマでしょう。 SEOにおいて必要なmeta titleやmeta descriptionの項目も元から用意されており、今や欠かせないモバイルにも対応しています。パンくずリストも階層ごとに表示されるので、Googleのクローラーもサイト構造を把握しやすいテーマになっています。機能の充実さ TCDのテーマは、プラグインを使わなくても対応できる機能が多く備わっています。そして、どの機能も非常に使いやすくページの更新も簡単に行えるので、これまで出来ていなかったWebサイトへの集客にも効果を発揮するはずです。技術面のスキルがなくサイトの運用もなかなか出来ていなかった人にとっては、かなり手軽に本格的なサイトを作ることができるでしょう。どの分野のビジネスでも合うテーマが用意されているのが特徴です。どのTCDテーマにも共通して用意されているのが「TCDテーマオプション」です。 Webサイトを作る上で細かいかもしれませんが、重要な部分を担う画面になります。ロゴやファビコンの設定、ソーシャルボタンの設定、SEOにおいて重要なパンくずの設定など様々な設定を一括で管理することができます。それぞれプラグインやツールを導入して設置するのではなく、ここさえ見ておけば良いので、運用管理もしやすいでしょう。 TCDのWordPressテーマを利用していればどのテーマにも付いているとても便利な機能です。サポートが手厚い TCDでは「メールサポート」もあります。初めてWordPressを使う人にとってはどの機能がどんな役割を果たすのか分からないことも多いでしょう。WordPressを触ったことがある人もカスタマイズについては課題にぶつかることもあるでしょう。 TCDではWordPressでサイトを作っていく中で分からない点をメールで問い合わせることができます。実際にあった質問と回答の事例を紹介します。質問メニューページが簡単に作れるTCDページビルダーという説明があるのですが、どのようにしたらいいのかがわかりません。スタイルギャラリーページはダッシュボードの左メニューにあるスタイルの個所を編集して作成方法は理解できました。テーマの紹介ページにはメニュー名や料金、説明文をいれるページ作成機能があるように記載されていますが、それがどこにあるのかがわかりません。宜しくお願い致します。回答平素は当社サービスをご利用いただきありがとうございます。株式会社デザインプラスの●●でございます。お問い合わせいただいたページビルダー機能ですが、投稿やカスタム投稿、固定ページ等の編集画面にございますエディタ画面右上にございますタブの「ビジュアル」「テキスト」「ページビルダー」から「ページビルダー」を選択いただくとご使用いただけます。ページビルダー機能についての詳細は下記をご参照ください。 design-plus1.com/tcd-w/2016/12/page-builder.html BeautyデモページのMenuページは固定ページにページビルダー機能を用いて作成しています。デモサイトの管理画面のキャプチャ画像を添付しますのでご参照いただければと思います。今後ともどうぞよろしくお願い申し上げます。自分の思い通りのサイトを作るために些細な問題でも質問でき、解決するまで回答が返ってきます。また、購入前の質問も可能ですので、悩まれている方は問い合わせすることをおすすめします。質問 TCDテーマの購入を検討しておりますが、他テーマと悩んでいます。事業を始めるにあたってのサイト制作なので費用を掛けた制作会社への依頼も検討しているところです。それぞれと比較してTCDテーマを採用するメリットを教えてください。回答 ●●様株式会社デザインプラスカスタマーサービスの●●と申します。弊社サービスをご検討頂きまして誠にありがとうございます。 TCDテーマは●●様のような中小企業を営まれている方、始めたばかりのサービスに対してのサイト構築に特にお勧めです。分野・業種に特化した機能とデザインを完備したWordPressテーマであるTCDを採用いただくことで、他の汎用性をウリにしたWordPressテーマと比較して簡単に、そして明確に差別化をすることが可能です。コツは色々とカスタマイズなどを施そうとせず、テンプレートの設問に従って構築いただくことです。それだけで効果を追求したサイトになるようにテーマ制作をしておりますので、不慣れなサイト構築に時間を割くよりも●●様がやるべきことに力を集中していただくことのメリットが大きくなります。事業を営んでいる方には差別化することの重要性について、ご理解いただけると思います。 TCDテーマ制作の裏側には、お客様の売上に対して効果を上げる為に考えつくしたデザインがあります。独自で、またはパートナーとなる制作会社と白紙からオリジナルの構成を練り上げるということも、価値があることです。しかし、その作業が時間と労力が想像以上必要なことであることも紛れもない事実です。 TCDテーマなら、その大変な工程を担うことが可能です。まずはTCDテーマでサイトを構築していただき、驚くほど簡単に制作ができること、実際のお客様のリアクションからデザインの力を体験していただけたらと思います。制作にあたっての不明点はメールでのサポートが可能ですので、そちらも検討材料としていただけたらと思います。また何かありましたらお気軽にお問合せください。以上となりますが今後ともよろしくお願いいたします。また、TCDが運営しているTCD LABOでは、WordPressのテーマをカスタマイズする上で役に立つ情報をまとめています。 1つのWordPressテーマでも人によって求めている機能や期待するサイトの見た目は違うでしょう。TCDでは、カスタマイズする際のやり方を事例として紹介しているので、参考になるはずです。今回紹介した飲食店や美容院などはサイトの更新作業も必要になるでしょう。高いお金を払って外注するよりも安価で本格的なサイトが作れるテーマが揃っています。サイトを更新、運用するためにも使い勝手の良いWordPressのテーマを選びましょう。 TCDのWordPressテーマを見てみる

WordPress

初心者におすすめ！無料・有料で使えるWordPressのテーマ35選【日本語対応のみ】

WordPressと言えば、豊富なテーマ（テンプレート）で知られています。自分でコーディングをしなくても、テーマを使えばおしゃれなサイトに出来るのがWordPressの良いところですよね。とはいえテーマの種類が多く、良いデザイン分からないという方もいるのではないでしょうか。そこで、今回は無料で使えるテーマを厳選、一部おすすめの有料テーマをまとめましたので、ぜひ利用してみてください。なお本記事で紹介しているテーマは、TechAcademyのWordPressオンラインブートキャンプでも一部を紹介しています。また、テーマのインストール方法がわからない方は、WordPressのテーマインストール方法を解説した記事をご覧ください。カテゴリーポートフォリオブログコーポレートサイト ECサイトパララックスサイト有料テーマポートフォリオ Portfolio ダウンロード/ DEMO 様々なサイズの写真がグリッドで表示されていますね。凝った写真などをトップに表示させたい人にはおすすめのテーマでしょう。 onetone ダウンロード / DEMO 背景に動画を差し込めるテーマです。スクリーンいっぱいに動画を表示させたい人はぜひこちらを利用してみてください。自分で撮った動画や社内風景など、動画にすることで映えるテーマなので、印象にもより残るはずです。 Espied ダウンロード / DEMO 同じサイズの画像がきれいに並んでいます。グリッド形式で自分の作品やプロジェクトを紹介したい場合に使い勝手が良いと思います。デザイン的にもおしゃれなので、ビジュアルメインでポートフォリオを作成したい方におすすめです。 GK Portfolio ダウンロード / DEMO マテリアルデザインを利用していて各タイルが浮き上がって見えます。それ以外には基本的に何も表示されていないので設定も手軽に行えるはずです。それぞれのコンテンツにタグ付けし分かりやすく見せることができるので、カテゴライズしやすいかと思います。 SNSの導線も見やすい位置に置くことが可能です。 Pictorico ダウンロード / DEMO トップには写真が並べられているテンプレートです。シングルカラムなので非常にシンプルに見えますし、自分が撮った写真などを載せるとより際立って見えるでしょう。ファーストビューにはスライドショーが、スクロールすると画像が敷き詰められているデザインになっているので、一つ一つの写真もより印象的な見せ方ができるはずです。他の記事では、ポートフォリオのテーマのみも紹介しているので、WordPressでポートフォリオサイトを作ってみたい人は、参考になるテーマが多いでしょう。 [PR] Webサイト制作で副業する方法とはブログ Yuuta ダウンロード / DEMO ブログ内に記事や動画など色々なコンテンツを表示させたい人におすすめのテーマです。白と黒が基調となっているデザインで、シンプルなので、とても見やすい作りになっています。レイアウトとしては海外っぽいテーマなので、外国人向けのブログなどには良いかもしれませんね。 Baskerville ダウンロード / DEMO 開いてすぐにカテゴリや記事が表示されるテンプレートなので、レイアウトよりもコンテンツを重視する人には良さそうです。各記事にライタープロフィールを載せる欄も用意されているので、複数人で1つのブログを運営する、書いた人を表に出したいと思っている方には使いやすいでしょう。 Boardwalk ダウンロード / DEMO PCだと横スクロールする不思議なデザインを用いているテンプレートです。スマホであれば普通に縦スクロールで見れるので、使いにくさは感じないかと思います。このテーマを使えば、横スクロールしていくので、見ているだけでも記憶に残るサイトになるでしょう。 Hueman ダウンロード / DEMO 左右にサイドバーが設置されていて、一度に多くの記事を表示させることができるテンプレートになっています。それでも散らかっている印象はなく、メニューバーで整理もできるので初めて訪れた人でも回遊しやすいサイトになるでしょう。このテーマを利用している日本人もよく見かけるので、一般的なブログサイトとして使いやすいのでしょう。 Riba Lite ダウンロード / DEMO トップページは、写真がグリッドで表示されていてインパクトは大きいでしょう。スマートフォンで見ると縦に写真が並ぶので、とても今風なデザインになります。「ブログコンテンツも写真もおしゃれに見せたい」という方は使ってみると良いでしょう。 Bulan ダウンロード / DEMO トップの背景に大きく写真を見せるテンプレートです。質の高い写真を入れておけば、自分でブログを見るのも楽しみになるはずです。ベージュを基調としたレイアウトになっているので、柔らかい印象で女性に人気です。 MH Purity Lite ダウンロード / DEMO 様々なスタイルで見せることが特徴のテンプレートでしょう。メインにも2カラムあり、かつサイドバーもあるので記事を表示させる部分が多くあります。自分の好きな見せ方に合わせてカスタマイズすることができます。別の記事では、WordPressでブログサイトを作る手順も解説しているので、これからブログを作りたいと考えている人は、ぜひ参考にしてみてください。コーポレートサイト Sydney ダウンロード / DEMO 今風なコーポレートサイトを作りたいのであれば、十分でしょう。かなり多くの情報も表示させることができそうです。「シンプルなサイトを作りたい人」も「より細かい情報まで伝えたい人」も自由にカスタマイズできるので、様々なケースで活用できるはずです。 Zerif Lite ダウンロード / DEMO 海外のコーポレートサイトでよく見るようなデザインになっています。パララックスを表現できたりもするので、完成度の高いサイトにすることも可能です。コーポレートサイト以外でも、Eコマース機能も設定できるので、ECサイトにもカスタマイズすることができます。自由に目的に応じて利用してみてください。 Business ダウンロード / DEMO 水色を基調としてるテーマです。背景のスライドショーはスクリーンいっぱいに切り替わるので、サイトの印象は強く残るでしょう。 PCでもスマホでもアニメーションのインパクトが強いので、より動きを出したい人には良いかと思います。 West ダウンロード / DEMO hoverを効かせたり、カスタマイズ性に富んだテーマになっています。簡単なブログ機能も付随されているので、自社ブログを書いている会社にも合っているテーマでしょう。過去のプロジェクトや社内メンバーなどを大きく見せたい場合におすすめです。 EDIN ダウンロード / DEMO 明日にでも公開したいということであれば、ぜひこのテーマを。多く情報を載せる必要もないので、すぐに自分のサイトにできそうです。シンプルなコーポレートサイトを作りたい方におすすめです。 Astrid ダウンロード / DEMO スマートフォンにも綺麗に対応しているテンプレートです。会社の印象が一気にかっこよくなるはずです。フォントも他のサイトでは見ないような形なので、デザイン制作会社などに合うでしょう。 Pinnacle ダウンロード / DEMO 表示している情報はそこまで多くないですが、会社のブログやサービスを簡単に紹介できるテンプレートです。シンプルなWebサイトを作るのに向いています。コーポレートサイトのテーマのみも紹介しています。 ECサイト Fukasawa ダウンロード / DEMO 白を基調としているので、洋風な雰囲気が伝わってきます。商品やサービスのブランディングもしやすいと思うので、また見に来たいと思わせるデザインにできるでしょう。 Storefront ダウンロード / DEMO 余計なものが一切なく、非常にシンプルなデザインです。ファーストビューに動画を設置できるので、商品の使用シーンも紹介できるでしょう。 VIRTUE ダウンロード / DEMO ECサイトとしてもブログとしても利用できそうなデザインとなっています。普段はブログを書きながら、たまに自分で作ったものを販売するような人には使い勝手が良さそうですね。 PANTHEA ダウンロード / DEMO このテーマを使えば、スライドショーでセール情報などを表示させて目立たせることができるでしょう。キャンペーンをいろいろ行っている会社などは、同時にスライドショーで表示させることができるので、使い勝手が良いでしょう。 Dazzling ダウンロード / DEMO 「ギャラリー」なんていうカテゴリもあるので、カメラマンなどにはぴったりのテーマです。実際の物ではなく、オンラインのサービスやソフトを販売したい方に良さそうです。 Auberge ダウンロード / DEMO カフェやレストランなど自分の店舗のサイトを作るのに向いているテンプレートです。こういったサイトを持っているカフェがあれば、集客にも役立つでしょう。「新メニュー出しました」というリリースも見やすいデザインになっています。他の記事では、ECサイトのテーマのみも紹介しているので、ぜひ参考にしてみてください。パララックスサイト MOESIA ダウンロード / DEMO 何度でもスクロールしたくなるような動きを表現することができます。コーポレートサイトとしても、サービスのLPとしても間違いなく印象に残るでしょう。 Parallax One ダウンロード / DEMO 背景画像がマウスの動きに合わせて動くという、初めて見る人からしたらちょっと不思議なサイトです。 ONEENGINE ダウンロード / DEMO スライドショーやパララックスな動きだけでなく、多くの情報も一つのページに載せることができます。「ユーザーが何人います」といった数字で表すものもグラフとアニメーションを使って視覚的に表示できるので、より洗練されたWebサイトの印象を与えることができるでしょう。 Aldehyde ダウンロード / DEMO 画像の上にスライドショーで画像が表示されるインパクト重視のテーマとなっています。画像の占める割合が大きいので、写真にこだわってる人には自分で見ていても楽しいでしょう。 PIXOVA LITE ダウンロード / DEMO スクロールに合わせて横からスライドして表示されたり、下から浮き上がってきたりと動きが多くあるテンプレートです。自分で見ていても何度もリロードして見たくなりますね。有料テーマ以下では、有料なもののカスタマイズに優れており、デザインクオリティの高いテーマを紹介していきます。賢威料金：24,800円 SEOで多くの実績を持つウェブライダーが開発しているWordPressのテーマです。様々な企業のメディアを運営してきた実績を元に作成されたテンプレートで、SEOに強いサイトを作りたい方におすすめです。安くない金額と感じるかもしれませんが、SEOに関するマニュアルもセットになって販売されているので、本格的にWebサイトを運営する際には必要になるはずです。アルバトロス料金：7,980円ブログサイトとして3種類のテーマを運営しているオープンケージですが、一番オーソドックスなテーマです。レイアウトも自分でカスタマイズすることができ、気軽に記事も投稿できるので、初めてサイトを作る人に愛用されています。全くスキルがない人でも手軽に扱えるテーマなので、ぜひ試してみてください。アルバトロスのテーマへストーク料金：10,800円最近のブロガーの多くが利用しているWordPressのテーマです。デザイン面、機能面を考えるとこの料金でも非常に安く感じますね。ソーシャルボタンやリンクのボタンなど、すでに用意されているデザインの質が高いので、満足度が非常に高いです。いろんなブロガーもおすすめしている人気のテーマなので、ぜひ使ってみてください。 Emanon 料金：9,800円/12,800円ブログサイトやコーポレートサイトを作成する上で役に立つテンプレートが販売されています。レスポンシブデザインでスマホ上でも見やすく、CTAやランディングページも自由に設定・カスタマイズできるのが特徴です。デザイン面も直感的に編集することができるので、初心者でも本格的なWebサイトを作ることができます。 LIQUID PRESS ブログやオウンドメディア用、ギャラリーサイト用、コーポレートサイト用のテーマを用意しているサイトです。モノによって金額が分かれますが、どれもレスポンシブ対応しており初めてWebサイトを作る人でも本格的な出来栄えになるでしょう。日本語対応もしているので、サポートも安心でしょう。 LIQUID PRESSのテーマへ SWALLOW（スワロー）料金：9,900円プロブロガー八木仁平監修のもと、OPENCAGEが開発したWordPressテーマです。 SWALLOW（スワロー）のテーマへ OOPS! 料金：19,800円ランディングぺージのコンバージョン率を高め、コンテンツマーケティングの効果を最大限に発揮するために開発されたテーマです。 OOPS!（オープス!）のテーマへ /　Demo DIVER（ダイバー）料金：17,980円アフィリエイトに最適化された、SEO対策、サイト回遊率、離脱率、アフィ収益等の対策を行うことができるWordpressテーマです。 DIVER（ダイバー）のテーマへ / Demo PRECIOUS（プレシオス）料金：9,980円スタイリッシュな企業＆ECサイト向けヨーロッパ調の近代的なデザインテーマです。 PRECIOUS（プレシオス）のテーマへ /

WordPress

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

WordPressのCSSを編集する方法｜自分でカスタマイズしよう！【初心者向け】

目次

WordPressの初期CSSの状態