質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

2回答

1200閲覧

WordPressのデザインについて紹介しているガイドブックが欲しい

ZZ-TOP

総合スコア36

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/12/26 08:24

さくらのレンタルサーバーを用意して、WordPressをインストールしました。
とりあえず
「できる100ワザ WordPress必ず集客できる実践・サイト運営術WordPress 4.x対応 」
http://amzn.to/2kWRG5B

というガイドブックを半分くらいやってみました。

ですが、このガイドブックはプラグインのインストール、などの内容が多く
外観のデザインについての解説がほとんどありません。

WordPressの外観、デザイン、お勧めのテーマなどを紹介しており、
デザインの設定を説明しているようなガイドブックが欲しいと思っております
ご存じでしたら、デザインについて詳しく書かれているガイドブックを教えて下さい。

追記1
webサイトでもOKです。

追記2
画像のようなデザインで以下のように設定したいと思っています

1)ヘッダー下のカテゴリーのリスト表示について
画像のように濃いミドリの枠(親カテゴリ)にマウスポインターを乗せた時に、
薄いミドリの枠の子カテゴリがスライドして全部表示される

2)子カテゴリーを選択した時に表示される記事のリストのデザインが赤い枠のような感じ
A)左側にアイキャッチ(サムネイル)が表示される=あまり大きくな方がいいです
B)右側に記事の内容がテキストで表示される
C)記事のタイトルが上に表示される

慣れていないので、とにかくWordPressのデザインの勉強をしたいというのが、本音です。

デザインの勉強のためのヒント、参考になるガイドブック、Webサイトでも十分です。
詳しい方、よろしくお願いします。

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

私もmizさんの意見に賛成ですね。

たまに「Wordpressってちょっと触ればキレイで高機能なページできるんでしょ?」みたいな事を思ってる人がいるんですが大きな間違いです 笑

結局は表示部分に関しては普通にホームページを作ってるだけなのでHTMLやCSSの知識が無いとオリジナルのデザインになりませんし、結局はJavascriptの理解がないとメニューの部分等が思った通りに作れないと思います。

個人的にですが、ここの質問を見ててもしょっちゅう出てきますがテーマを流用するような事はまず見た目においても結局CSSそのものや継承などをある程度は理解してないと直せないですし、メニューの動きを変更したい!とかなると今度はJavascriptが分かってないと直せない。
ですのでどれもドットインストールの動画等を流して見る程度はしておかないと全く手つかずで始めるとはまるでしょうね・・

投稿2017/12/26 13:57

landy77

総合スコア1614

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ZZ-TOP

2017/12/26 14:21

ご解答ありがとうございます 「はてなブログ」で思い通りのデザインが出来なくて、物足りなくなったので、 レンタルサーバーを用意してやってみました。 ですが、、、WordPressのガイドブックをみたのですが デザインに触れているものがほとんどないです。 CSSの知識がないのでCSSのガイドブックを購入したのですが、 WordPressのページ上のどこでCSSをどこで使っていいのかわかりません。 なので「こんな事なら、ちゃんと勉強してフレームから作った方がいいのかも」 と思い始めていたところです。※関連知識の勉強も含めて >ドットインストールの動画 ↓ https://dotinstall.com/ これですね。知らなかったです。参考にします。 みなさんいろいろありがとうございます。 一応、解決したのですが、いろんな意見を聞いてみたいので、 ※今回の「ドットインストールの動画」みたいな感じで もう少し質問は開けておきます。 今回はご解答頂きありがとうございます。機会がありましたらまたお願いします。
guest

0

HTML/CSS、JavaScriptの知識はどの程度ありますか。
例として挙げられた1)、2)のどちらも、基本はHTML/CSS、JavaScriptで表示、機能しています。

HTML/CSS、JavaScriptの基本を習得してから、WordPressについて学んだ方が効率がいいと思います。


追記(2017/12/29)

直接WordPressを触るよりWordPressなしで、HTML/CSS、JavaScriptを使って、
なにかページを構築してみた方が勉強になるということでしょうか?

はい。
WordPressの機能がおこなうことは結局のところ、IDやクラスが付与されたHTMLのコードを出力するだけです。
サイトのデザインや動的な動きはCSSとJavaScriptでおこないます。

たとえば、1)のメニューを作成しようとした場合の手順は、

  1. wp_nav_menu関数で<ul></ul>のリストを出力する。
  2. リストをCSSで装飾する
  3. リストにJavaScriptで動きをつける

2)だったら、

  1. the_post_thumbnail関数、the_content関数、the_title関数でアイキャッチ画像、投稿の本文、投稿のタイトルを表示する
  2. 上記で表示したHTMLをCSSで装飾する

となります。

WordPressでのデザイン設定を学びたいのであれば、まずはHTML/CSS、JavaScript単体の基本を身につけておき、それから「じゃあ、このHTMLやテキストを表示するにはWordPressのどの関数を使えばいいの?」と分けて考えたほうがシンプルです。
(その際は、既存のテーマの解析とカスタマイズからおこなうとより理解が深まりやすいかも)

投稿2017/12/26 10:04

編集2017/12/29 09:44
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ZZ-TOP

2017/12/26 11:01

ご解答ありがとうございます。 順番にいきますね >HTML/CSS、JavaScriptの知識はどの程度ありますか。 HTMLは普通に、リンクを貼ったり、表を作成したり、レイアウト枠、文字の色、etc.くらいです。 CSSは知識がないので、勉強をしたいと思いレンタルサーバーを借りました。 ※もともと「はてなブログ」で普通にブログを書いており、 ページ(記事)上で見た目をキレイにするために、htmlで表を入れたり、 別窓のリンクを貼ったり、バナーを貼り付けたりしてました。 HTML/CSS、JavaScriptの基本を習得してから、WordPressについて学んだ方が効率がいいと思います。 ↓ 直接WordPressを触るよりWordPressなしで、HTML/CSS、JavaScriptを使って、 なにかページを構築してみた方が勉強になるということでしょうか? 差支えなければ、この件について、「Yes」/「No」でご返答して頂ければ嬉しいです。 ※ご面倒でしたらスルーでOKです。 今回はご解答ありがとうございます。機会がありましたらまたお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問