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

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

画像（作業用PC）

画像（localhost）

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

環境

・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画面

クライアントPCのNetwork画面

KojiDoi

2021/04/30 17:12

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

m.ts10806

2021/04/30 22:41

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

行動規範の内容に同意します

回答2件

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

総合スコア13671

KeilyX07

2021/05/01 06:58

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

行動規範の内容に同意します

ベストアンサー

<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