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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

501閲覧

cssが読み込まれません。(Wordpress オリジナルテーマ)

yoko00

総合スコア20

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/02/26 03:03

編集2022/02/26 07:38

1.発生している問題

Wordpress オリジナルテーマを制作しています。
CSSが反映されません。

2.該当のソースコード

function.php

1/************************************************** 2CSSファイルの読み込み 3**************************************************/ 4function my_enqueue_styles() { 5 wp_enqueue_style('ress', 'https://unpkg.com/ress/dist/ress.min.css', array(), false, 'all'); 6 wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css', array('ress'), false, 'all'); 7} 8add_action('wp_enqueue_scripts', 'my_enqueue_styles'); 9 10/************************************************** 11JSファイルの読み込み 12**************************************************/ 13function st_enqueue_scripts() { 14 wp_enqueue_script('jquery'); 15 wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false); 16 wp_enqueue_script('script', get_theme_file_uri('js/script.js'), array('jquery'), false, true); 17} 18add_action('wp_enqueue_scripts', 'st_enqueue_scripts');

3.自分で調べたことや試したこと

フォルダ階層は
└ cssーstyle.css
└ jsーscript.js
└ sassフォルダ
└ index.php
└ header.php
└ style.css

この様にしております。
DartSassを使用し、css/style.cssにコンパイルはされているのですが、
google Chrome検証機能で見るとcssが反映されておりません。

DartSassもWordPressも初学者のため、2日間調べたものの解決に至りませんでした。
どなたかご教授いただけないでしょうか。
どうぞよろしくお願いいたします!!!!!

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
下記に質問の追加をしました。
どうぞよろしくお願いいたします。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

お返事いただきありがとうございます!
また、質問の仕方に不備があり申し訳ありません。

CSS が反映されないというのは、

<link rel="stylesheet" href="/〜.css"> が出力されない状況です。

いらない情報かもしれないのですが、自分の知識に自信がないため
こちらが検証ツールに表示されたコードとブラウザに表示された画面です。

イメージ説明

イメージ説明

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

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

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

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

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

CHERRY

2022/02/26 03:41

CSS が反映されないとは どのような状況でしょうか。 たとえば... - HTMLのソースコードに `<link rel="stylesheet" href="/〜.css">` が記載されているが、スタイルが反映されない。 - `<link rel="stylesheet" href="/〜.css">` が出力されていない - その他
yoko00

2022/02/26 07:34

お返事いただきありがとうございます! 上記の質問文に詳細を追加いたしました。 今一度、どうかよろしくお願いいたします!
tabuu

2022/02/26 08:42

標準のstyle.cssはhtmlに出力されていませんか?出力されている場合はidはどのようになっていますか? 作成されているテーマは子テーマではないですか?
yoko00

2022/02/26 10:09

お返事ありがとうございます! 申し訳ありません。標準のstyle.cssがhtmlに出力されていること・idがどこにあるのかを確認するにはどうしたらよいのでしょうか…。 WordPress化する前に作成したhtml/cssを検証ツールを使って確認すれば良いのでしょうか。 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> とありますが、idは見つけられません…。 また、自作した静的HTMLサイトをWordPress化しようとしているのですが、この場合は親テーマに当てはまると解釈しているのですが、間違っていますでしょうか。 知識が浅すぎて答えになっておらず、申し訳ありません!
tabuu

2022/02/26 11:35

funtion.phpではなくfuctions.phpですがファイル名はお間違いないでしょうか? >標準のstyle.cssがhtmlに出力されていること・idがどこにあるのかを確認するには 出力されたhtmlのソースをご確認ください。 >この場合は親テーマに当てはまると解釈しているのですが、 テーマ直下のstyle.cssに /* Template: xxx */ というような記述があれば子テーマです。
yoko00

2022/02/26 12:10

ありがとうございます!!! tabuu様、解決しました! funtion.php になっていました。 細部までチェックしていただき感謝いたします。 これで前に進めます。嬉しいです!!!! 今後は自分でもしっかりチェックできるよう努力します。 tabuu様、CHERRY様、お忙しい中本当にありがとうございました!
guest

回答1

0

自己解決

解決いたしました。
原因はfunctions.phpをfunction.phpと記載してしまったことでした。
アドバイスしてくださったtabuu様、CHERRY様、ありがとうございました!!!

投稿2022/02/26 21:54

yoko00

総合スコア20

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問