スライドショースライドショースライドショー

WordPress初心者がオリジナルテーマを作る時のヒント

ニャンズとにゃんにゃんしている侍エンジニア塾ブログ編集部のモリシタです。

WordPressを使って自分のブログや企業サイトを作れると、とっても素敵ですよね。

でも、今まで使った事ないし難しそう
自分でデザインをカスタマイズできるか不安
テーマって自作するのは無理なの?

と、思う方は非常に多いと思います。そこで今回は、WordPressのデザインを簡単にカスタマイズできるテーマやプラグインをご紹介します。また、WordPressで自作テーマを作ってみたいあなたのために、自作テーマ作成のヒントもご紹介!

この記事でWordPressテーマのカスタマイズ手段だけでなく、自作テーマの作り方までバッチリ抑えていきましょう!

WrodPressのデザイン基礎知識

画像:shutter stock

WordPressのデザインってどうやるの?

WrodPressのデザインは自分で作ることもできますが、テーマをアレンジする方が楽チンです。ゼロから自分で作っていると、時間もかかるし大変ですよね。そこでテーマが大活躍します。

テーマとは、着せ替え人形で例えるなら、着せ替える服みたいなものです。誰でも簡単にWordPressの見た目を選ぶことができます。

デザインにも流行りがあって、飽きてしまうこともあります。そういった場合でも、テーマを変更することによって簡単にデザインをチェンジできるのです。

WordPressテーマには種類がある

WordPressテーマには、有料と無料があります。当然のことながら有料の方が機能も多く便利ですが、無料でも素晴らしいデザインが豊富にあります。さらに、WordPressテーマには、公式テーマと野良テーマがあります。

オープンソースである強みとして、一般の人でもテーマを作って配布することができます。その特徴を生かし、一般の人が自由に作成して配布しているテーマを野良テーマと呼んでいるのです。

野良テーマの中には、サポートがされてなかったり、バグやセキュリティーが脆弱なテーマがあります。使うときは十分注意して利用するようにしましょう。それぞれの特性を理解した上でカスタマイズしていくと、より素敵なサイトが作れますよ!

WordPressデザインに便利なプラグイン

画像:shutter stock

デザインを考えたけど、実現するのが難しいかも…

というときはプラグインを活用しちゃいましょう!プラグインとは、WordPressに機能を追加することができるものです。設定も簡単なので、初心者でも安心して使うことができます。どんなプラグインがあるのか、ちょっとだけご紹介していきましょう!

ファビコンを設定するプラグイン


引用元:Favicon by RealFaviconGenerator https://ja.wordpress.org/plugins/favicon-by-realfavicongenerator/

ファビコンとは、下図のようにサイトを表示した時にブラウザの上に表示されるアイコンの事です。

意外と設定するのが面倒なファビコン。しかし、このプラグインを利用すれば、ファビコンを簡単に設定できます。

デザインカスタマイズが簡単になるプラグイン


デザインを自分で自由に変更したいけど、WordPressを使い始めたばかりで全然わからない…

そんな時はこれ! プログラミングがまったくできない人でも、デザインのカスタマイズができちゃいます。パワポの資料を作るような感覚で、デザインを自分好みに変えられる優れものです。

スライダーをつけるプラグイン


サイトのトップにある画像がスーッと動くデザインってかっこいいですよね。スライダーというものなのですが、アレをイチから作るのは初心者にはなかなかハードルが高いと思います。でもこのブラグインがあれば、簡単にスライダーが作成・管理できちゃいます。

初心者でもカスタマイズしやすいテーマ3選

画像:shutter stock

ここでは、WordPressを使い始めた、またはこれから使う初心者の方向けに誰でも簡単にカスタマイズできるテーマを3つ厳選しました。

選んだ基準は、初心者でも使いやすいというのはもちろんの事、カスタマイズするための情報が得やすいものをご用意しました。いきなりスタイリッシュなデザインにチャレンジして挫折してしまうより、まずは練習として使ってみましょう。

Lightning


引用元:Lightning https://lightning.nagoya/ja/

こちらのテーマは無料で利用できます。WordPress公式テーマなので、無料でも安心して利用できます。

SNSボタンやサイト内検索などの基本的な機能を揃えていながら、シンプルでカスタマイズしやすいデザインとなっています。また、ユーザにカスタマイズをしてもらう前提なので、カスタマイズ手順が公式サイトに詳しく載っています。

Simplicity


引用元:Simplicity https://wp-simplicity.com/

シンプルなデザインで余計なものがありません。しかし、SEO対策や必要なSNSボタンなどの機能が標準で設定されています。

また、広く使われているテーマなので、カスタマイズの情報が手に入りやすくなっています。シンプルだからこそデザインの汎用性が高く、デザイン変更はほとんど子テーマでできちゃいます。

DIVER


引用元:DIVER https://tan-taka.com/diver/

こちらは有料テーマで17,980円(税込)有料テーマの中でもサポートが手厚く、初心者でも安心してカスタマイズすることができます。

まず、バージョンアップが無料で、メールサポートが無期限・無制限です。カスタマイズ方法がわからなくても、メールで何回でも質問できるのはありがたいですね!

WordPressでデザインを自作するメリット

画像:shutter stock

デザインを自分で作ると、下記のようなメリットがあります。

  • テーマ構造がわかっているので、カスタマイズしやすい
  • ベースを作れば、応用して様々なデザインのテーマを作れる
  • 無駄な機能をつけなくてすむ
  • 機能を自在に追加できる

人気テーマを利用するのは手軽なんですが、他のサイトとデザインが被りやすいんですよね。しかし、自分で作ってしまえばこっちのもの。完全オリジナルのデザインで、あなただけのサイトを作ることができます。

テーマ構造が自分でわかっているので、機能やデザインの追求もガンガンいけちゃいますよ! また、自作テーマを配布したり、そのスキルが仕事につながる可能性もあります。

簡単にテーマを自作する方法

初めて自作テーマを作る人は、ブランクテーマを使うのがオススメです。ブランクテーマとは、ほとんど何も作られていないテーマです。骨組みだけある状態で、骨組みに自分でデザインや機能を肉付けていきます。

まずはブランクテーマから自作テーマの練習をして、さらにスキルアップしたらゼロから作ってみるのも良いですね。

オススメのブランクテーマ

Bones


引用元:Bones https://themble.com/bones/

名前の通り、「骨」組しかない状態です。有名なブランクテーマなので、一度は使ってみてはいかがでしょう。

Roots


引用元:Roots https://roots.io/sage/

Bootstrapをよく利用する人にオススメです。HTML5 Boilerplateベースのレスポンシブテーマです。

WP-Flex


HTML5 Boilerplateベースのレスポンシブデザイン対応テーマです。公式WordPress Codexの厳しいガイドラインにしっかりと沿って作られています。なので、今後公式テーマを作りたい人にはオススメのテーマです。

デザインの参考にしたい素敵サイト

デザインを考えるとき、なかなかいいアイデアが浮かばない時ってありますよね。

そんなときは、他の素敵なサイトを参考にしちゃいましょう! 全部をそのままにするのは流石にまずいですが、ちょっとインスピレーションをいただくくらいなら全然OK。そんなアイデア出しに繋がるような素敵なサイトをご紹介しましょう。

企業・組織サイト

博報堂


引用元:博報堂 https://www.hakuhodo.co.jp/

株式会社LIFULL


引用元:株式会社LIFULL about:blank

メディアサイト

マイナビウーマン


引用元:マイナビウーマン https://woman.mynavi.jp/

ダヴィンチニュース


引用元:ダヴィンチニュース https://ddnavi.com/

その他

東京国立近代美術館


引用元:東京国立近代美術館 https://www.momat.go.jp/

くまモンオフィシャルサイト


引用元:くまモンオフィシャルサイト http://kumamon-official.jp/

まとめ

いかがでしたか?

WordPressをカスタマイズするのは自分には無理かも・・・

と思いがちですが、カスタマイズしやすいテーマやプラグインを利用すれば、初心者でも全然問題なくできちゃいます。自作に挑戦したいあなたも、まずはブランクテーマから練習をしてスキルアップをしていきましょう。

今回ご紹介した参考サイトをみながら、どんなサイトにしたいか自分なりに考えてくださいね。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

モリシタ

モリシタ

猫をこよなく愛する、侍エンジニア塾ブログ編集部のモリシタです。
価値ある情報をお届けする為、日々精進しながら執筆活動に取組んでいます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説