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

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

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

IIS(Internet Information Services)はマイクロソフト社によって開発されたwebサーバーです。Windows上で動作します。

WordPress

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

PHP

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

Windows Server

Windows Serverとは、Microsoft社のサーバ用オペレーティングシステムの総称です。 企業内ネットワークなどで利用されるサーバ機へ導入することを想定して開発されているため高い安定性があり、 管理機能を提供するソフトウェアが多く含まれています。

Q&A

解決済

2回答

3474閲覧

Localhost だとCSSが読み込まれるのにその他のPCから接続すると読み込まれない

KeilyX07

総合スコア29

IIS

IIS(Internet Information Services)はマイクロソフト社によって開発されたwebサーバーです。Windows上で動作します。

WordPress

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

PHP

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

Windows Server

Windows Serverとは、Microsoft社のサーバ用オペレーティングシステムの総称です。 企業内ネットワークなどで利用されるサーバ機へ導入することを想定して開発されているため高い安定性があり、 管理機能を提供するソフトウェアが多く含まれています。

0グッド

0クリップ

投稿2021/04/30 16:01

編集2021/05/01 06:18

はじめてのサーバー構築です

IISにwordpressをインストールして、localhostで接続するとページが正常に読み込まれるところまで完了しました。
しかし、同一ネットワーク内の作業用PCから接続すると、テキストのみが読み込まれてCSSが飛んでいる状態です。
また、複数ブラウザでの検証も行いました。

画像(作業用PC)

ローカル環境下PC

画像(localhost)

サーバーPC

どなたかご教授お願いいたします...

環境

・Windows Server 2016
・PHP7
・MySQL
・IIS

追記依頼について

IISを使ったホスティング自体が初めてで、どのようにソースコードを参照すればよいのかわかりません。そのため、ここに示しているソースコードは正常に読み込みできているWebサーバーのブラウザより抽出したものです。
また、開発者ツールよりNetworkタブを確認したところ、大量のエラーがありました。

ソースコード

php

1<!doctype html> 2<html lang="ja" > 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>TITLE &#8211; Just another WordPress site</title> 7<meta name='robots' content='max-image-preview:large' /> 8<link rel='dns-prefetch' href='//s.w.org' /> 9<link rel="alternate" type="application/rss+xml" title="TITLE &raquo; フィード" href="http://localhost/feed/" /> 10<link rel="alternate" type="application/rss+xml" title="TITLE &raquo; コメントフィード" href="http://localhost/comments/feed/" /> 11 <script> 12 window._wpemojiSettings = {"baseUrl":"https://s.w.org/images/core/emoji/13.0.1/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/13.0.1/svg/","svgExt":".svg","source":{"concatemoji":"http://localhost/wp-includes/js/wp-emoji-release.min.js?ver=5.7.1"}}; 13 !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings); 14 </script> 15 <style> 16img.wp-smiley, 17img.emoji { 18 display: inline !important; 19 border: none !important; 20 box-shadow: none !important; 21 height: 1em !important; 22 width: 1em !important; 23 margin: 0 .07em !important; 24 vertical-align: -0.1em !important; 25 background: none !important; 26 padding: 0 !important; 27} 28</style> 29 <link rel='stylesheet' id='dashicons-css' href='http://localhost/wp-includes/css/dashicons.min.css?ver=5.7.1' media='all' /> 30<link rel='stylesheet' id='admin-bar-css' href='http://localhost/wp-includes/css/admin-bar.min.css?ver=5.7.1' media='all' /> 31<link rel='stylesheet' id='wp-block-library-css' href='http://localhost/wp-includes/css/dist/block-library/style.min.css?ver=5.7.1' media='all' /> 32<link rel='stylesheet' id='wp-block-library-theme-css' href='http://localhost/wp-includes/css/dist/block-library/theme.min.css?ver=5.7.1' media='all' /> 33<link rel='stylesheet' id='twenty-twenty-one-style-css' href='http://localhost/wp-content/themes/twentytwentyone/style.css?ver=1.3' media='all' /> 34<style id='twenty-twenty-one-style-inline-css'> 35body,input,textarea,button,.button,.faux-button,.wp-block-button__link,.wp-block-file__button,.has-drop-cap:not(:focus)::first-letter,.has-drop-cap:not(:focus)::first-letter,.entry-content .wp-block-archives,.entry-content .wp-block-categories,.entry-content .wp-block-cover-image,.entry-content .wp-block-latest-comments,.entry-content .wp-block-latest-posts,.entry-content .wp-block-pullquote,.entry-content .wp-block-quote.is-large,.entry-content .wp-block-quote.is-style-large,.entry-content .wp-block-archives *,.entry-content .wp-block-categories *,.entry-content .wp-block-latest-posts *,.entry-content .wp-block-latest-comments *,.entry-content p,.entry-content ol,.entry-content ul,.entry-content dl,.entry-content dt,.entry-content cite,.entry-content figcaption,.entry-content .wp-caption-text,.comment-content p,.comment-content ol,.comment-content ul,.comment-content dl,.comment-content dt,.comment-content cite,.comment-content figcaption,.comment-content .wp-caption-text,.widget_text p,.widget_text ol,.widget_text ul,.widget_text dl,.widget_text dt,.widget-content .rssSummary,.widget-content cite,.widget-content figcaption,.widget-content .wp-caption-text { font-family: sans-serif; } 36</style> 37<link rel='stylesheet' id='twenty-twenty-one-print-style-css' href='http://localhost/wp-content/themes/twentytwentyone/assets/css/print.css?ver=1.3' media='print' /> 38<link rel="https://api.w.org/" href="http://localhost/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/xmlrpc.php?rsd" /> 39<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp-includes/wlwmanifest.xml" /> 40<meta name="generator" content="WordPress 5.7.1" /> 41<script>document.body.classList.remove("no-js");</script> <script> 42 if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) { 43 document.body.classList.add( 'is-IE' ); 44 } 45 </script> 46 <script src='http://localhost/wp-includes/js/hoverintent-js.min.js?ver=2.2.1' id='hoverintent-js-js'></script> 47<script src='http://localhost/wp-includes/js/admin-bar.min.js?ver=5.7.1' id='admin-bar-js'></script> 48<script id='twenty-twenty-one-ie11-polyfills-js-after'> 49( Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach ) || document.write( '<script src="http://localhost/wp-content/themes/twentytwentyone/assets/js/polyfills.js?ver=1.3"></scr' + 'ipt>' ); 50</script> 51<script src='http://localhost/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js?ver=1.3' id='twenty-twenty-one-responsive-embeds-script-js'></script> 52<script src='http://localhost/wp-includes/js/wp-embed.min.js?ver=5.7.1' id='wp-embed-js'></script> 53 <script> 54 /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",(function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}),!1); 55 </script> 56

※文字数制限でかなりカットしています。

localhost環境のNetwork画面

localhost

クライアントPCのNetwork画面

Client

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

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

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

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

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

KojiDoi

2021/04/30 17:12

CSSはどのように参照しているのですか? ソースを示してもらわないと分かりません。
m.ts10806

2021/04/30 22:41

どのようなコードなのでしょうか。
guest

回答2

0

href='http://localhost/ ...

これでは駄目です。

localhostは「自分自身」を指します。開発中にそのマシンから当該ウェブページに試験的アクセスを試みる場合、ブラウザを起動したマシン=サーバソフトが走っているマシン=htmlやcssファイルが置いてあるマシンです。その試験自体は開発マシン上で完結しているので問題なくウェブページが表示できるでしょう。

しかし「その他のマシン」からこのページにアクセスしようとした場合、localhostはそのブラウザが動いているマシン自身であって、サーバが動いているマシンではありません。localhostをhrefに指定すると、ブラウザはそれぞれ自分自身が持っているCSSファイルを参照しようとし、当然そんなものは存在しないので、「読み込まれない」ことになります。

hrefには、公開用サーバに割り当てられているはずのホスト名を書きましょう。

127.0.0.1とlocalhostと0.0.0.0の違い - Qiita

投稿2021/05/01 06:41

KojiDoi

総合スコア13692

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

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

KeilyX07

2021/05/01 06:58

ご回答ありがとうございました!わかりやすい説明ありがとうございます!
guest

0

ベストアンサー

<link rel='stylesheet' id='dashicons-css' href='http://localhost/wp-includes/css/dashicons.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost/wp-includes/css/admin-bar.min.css?ver=5.7.1' media='all' />

WordPress と思われますが、CSS を localhost から読み込んでいるからではないでしょうか?

サイトURL と WordPress アドレスを localhost から 外部の PC からアクセスしている URL ( http://IPアドレス/ 等でしょうか?) に変更してみてください。

投稿2021/05/01 06:41

編集2021/05/01 06:43
CHERRY

総合スコア25218

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

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

KeilyX07

2021/05/01 06:57

ご回答いただきありがとうございました!無事にCSSを読み込みました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問