>>12
色コードの頭に#を入れたら反映されました！
しち様、ここまで親身に解決策を出して頂き、ありがとうございます！！
また、どうして出来なかったのかという細かい部分までご説明いただき、すごくスッキリしました。
本当にありがとうございました！
色コードの頭に#を入れたら反映されました！
しち様、ここまで親身に解決策を出して頂き、ありがとうございます！！
また、どうして出来なかったのかという細かい部分までご説明いただき、すごくスッキリしました。
本当にありがとうございました！
03/05 14:21
>>11 【配色の設定】で全ての色コードの先頭に『 # 』半角シャープを付けてください！（例：#aa70b3）
の補足です。
なぜプレビューと実際のサイト上で表示に違いが出るのか、なぜ以前のサイトからコピペしてきているのに現在のサイトではできないのか、……という話なので以下は読まなくとも問題ありません。蛇足です。
色コード先頭に『 # 』は必須なのですが、どうやらブラウザによっては文法エラーでも忖度して色を反映してくれるようです。
それがなぜ今回、以前のサイトでは大丈夫だったのに新しいサイトではダメだったのか……。
多分ですが、以前のサイトでは【HEAD編集】に『 <!DOCTYPE html> 』が入っていなかったんだと思います。
今はこの『 <!DOCTYPE html> 』がデフォルトで入るようになっていますが、以前は無記入がデフォルトでした。
ここで、以前のサイト／現在のサイト間に違いが生まれたのだと思います。
この記述は雑に言うと『この文書は、HTML5の規格で書いていますよ〜』という宣言です。
>そしてどうやら、【Safariでは】【HTML5文書で】【色コード先頭に『 # 』を付け忘れると】、文法エラーになって、ブラウザデフォルトの配色になってしまう……ようです。
※FirefoxとChromeでは、シャープを付け忘れていてもブラウザの忖度で意図通りの色にしてくれるようですが。
原理は不明ですが、『 <!DOCTYPE html> 』を宣言されていない状態だとSafariでも #無し色コード を反映してくれるようでした。
じゃあなぜプレビューでは #無し色コード でも配色が反映されていたのかというと、
* ━━━━━━━━━━
* プレビュー中です
* 〔修正する〕
* 〔これで保存する〕
* ━━━━━━━━━━
というテキストが、『 <!DOCTYPE html> 』よりも上に挿入されているせいでした。
『 <!DOCTYPE html> 』は文書の先頭で宣言するものなので、プレビュー画面に上記のテキストが入ったせいで、宣言が無効に
→→ 結果、『 <!DOCTYPE html> 』が入っていないのと同じ状態（＝“以前のサイト”の状態）になる
→→“以前のサイト”同様、プレビュー画面では #無し色コード でも配色が反映される
……という理由で、「プレビュー画面でのみ、以前のサイト同様に配色が反映される」状態となった模様です。
#誤解無きように補足しておくと、
●『 <!DOCTYPE html> 』といった宣言は本来必須。よほどの理由が無い限り消したり書き換えたりはしないことを推奨。
●色コードの先頭に『 # 』は必須。「<!DOCTYPE html>を消せば以前のサイトと同じ表示にできる！」……とは考えずに、とにかく【配色の設定】でも『 # 』は付けてください。
の補足です。
なぜプレビューと実際のサイト上で表示に違いが出るのか、なぜ以前のサイトからコピペしてきているのに現在のサイトではできないのか、……という話なので以下は読まなくとも問題ありません。蛇足です。
色コード先頭に『 # 』は必須なのですが、どうやらブラウザによっては文法エラーでも忖度して色を反映してくれるようです。
それがなぜ今回、以前のサイトでは大丈夫だったのに新しいサイトではダメだったのか……。
多分ですが、以前のサイトでは【HEAD編集】に『 <!DOCTYPE html> 』が入っていなかったんだと思います。
今はこの『 <!DOCTYPE html> 』がデフォルトで入るようになっていますが、以前は無記入がデフォルトでした。
ここで、以前のサイト／現在のサイト間に違いが生まれたのだと思います。
この記述は雑に言うと『この文書は、HTML5の規格で書いていますよ〜』という宣言です。
>そしてどうやら、【Safariでは】【HTML5文書で】【色コード先頭に『 # 』を付け忘れると】、文法エラーになって、ブラウザデフォルトの配色になってしまう……ようです。
※FirefoxとChromeでは、シャープを付け忘れていてもブラウザの忖度で意図通りの色にしてくれるようですが。
原理は不明ですが、『 <!DOCTYPE html> 』を宣言されていない状態だとSafariでも #無し色コード を反映してくれるようでした。
じゃあなぜプレビューでは #無し色コード でも配色が反映されていたのかというと、
* ━━━━━━━━━━
* プレビュー中です
* 〔修正する〕
* 〔これで保存する〕
* ━━━━━━━━━━
というテキストが、『 <!DOCTYPE html> 』よりも上に挿入されているせいでした。
『 <!DOCTYPE html> 』は文書の先頭で宣言するものなので、プレビュー画面に上記のテキストが入ったせいで、宣言が無効に
→→ 結果、『 <!DOCTYPE html> 』が入っていないのと同じ状態（＝“以前のサイト”の状態）になる
→→“以前のサイト”同様、プレビュー画面では #無し色コード でも配色が反映される
……という理由で、「プレビュー画面でのみ、以前のサイト同様に配色が反映される」状態となった模様です。
#誤解無きように補足しておくと、
●『 <!DOCTYPE html> 』といった宣言は本来必須。よほどの理由が無い限り消したり書き換えたりはしないことを推奨。
●色コードの先頭に『 # 』は必須。「<!DOCTYPE html>を消せば以前のサイトと同じ表示にできる！」……とは考えずに、とにかく【配色の設定】でも『 # 』は付けてください。
03/05 02:07
>>7
今気付いたんですが、全ての色コードの先頭に『 # 』半角シャープを付けてください！
#色コードの先頭に『 # 』は必須です。
今までAndroidで確認してみてたんですが、ふと「カメイさんの投稿がiPhoneということは、ブラウザはSafariか？」と思ってiPadのSafariで確認してみたら……全く同じ状態になりました！
（＝プレビューでは配色が反映されるのに、サイト上では反映されず未読リンク：青／既読リンク：紫になる）
多分ですが、色コードに # がついていないせいでHTML文法エラーになり、ブラウザのデフォルト設定（未読リンク：青／既読リンク：紫）になっているのかと……
なぜプレビューでは大丈夫なのかはよく分からないんですが、検証はさておきとりあえず『 # 』を色コードにつけてみてください〜。
今気付いたんですが、全ての色コードの先頭に『 # 』半角シャープを付けてください！
#色コードの先頭に『 # 』は必須です。
今までAndroidで確認してみてたんですが、ふと「カメイさんの投稿がiPhoneということは、ブラウザはSafariか？」と思ってiPadのSafariで確認してみたら……全く同じ状態になりました！
（＝プレビューでは配色が反映されるのに、サイト上では反映されず未読リンク：青／既読リンク：紫になる）
多分ですが、色コードに # がついていないせいでHTML文法エラーになり、ブラウザのデフォルト設定（未読リンク：青／既読リンク：紫）になっているのかと……
なぜプレビューでは大丈夫なのかはよく分からないんですが、検証はさておきとりあえず『 # 』を色コードにつけてみてください〜。
03/05 01:05
>>9
【表紙画面編集】のものでした！
本当にすみません！！
HEADは以下になります！
<link href="//fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet" type="text/css"><style type="text/css"><!--body,td{line-height:17px;letter-spacing:3px; font-size:13px; font-family:"Calligraffitti","ＭＳ 明朝","Hiragino Mincho ProN";}a{text-decoration:none;}
h1{
font-family:"Cinzel","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:170%;
font-weight:normal;
color:#555;
background:#fff;
margin:20px 0;
padding:0;}
--></style>
【表紙画面編集】のものでした！
本当にすみません！！
HEADは以下になります！
<link href="//fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet" type="text/css"><style type="text/css"><!--body,td{line-height:17px;letter-spacing:3px; font-size:13px; font-family:"Calligraffitti","ＭＳ 明朝","Hiragino Mincho ProN";}a{text-decoration:none;}
h1{
font-family:"Cinzel","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:170%;
font-weight:normal;
color:#555;
background:#fff;
margin:20px 0;
padding:0;}
--></style>
03/04 23:49
03/04 23:08
>>6
CSSはいじってないですが、HEADは以下になります。
<br><center>
<table width="80%" bordercolor="#aa70b3" border="1" align="center"><tr><td><div style="margin-left:20px;margin-right:20px;" align="center">##IMAGE_DATA_8##<br>
<font color="#cc749c"><font size="2">革命のキスを<br></font>
<font color="#aa70b3"><a href="#dream_url#">▼</font></a>
<br><font color="#aa70b3"><font size="3">#list#<br><br>
</td></tr></table>
<center><font size="2">#fp2_back#</font>
<br><br>
今まで使っていたHEADと全く同じものです。
コード記入欄の色表示、プレビューせずにそのまま保存も試しましたが反映されませんでした。
画像にて見辛い箇所がありましら教えて下さい。
CSSはいじってないですが、HEADは以下になります。
<br><center>
<table width="80%" bordercolor="#aa70b3" border="1" align="center"><tr><td><div style="margin-left:20px;margin-right:20px;" align="center">##IMAGE_DATA_8##<br>
<font color="#cc749c"><font size="2">革命のキスを<br></font>
<font color="#aa70b3"><a href="#dream_url#">▼</font></a>
<br><font color="#aa70b3"><font size="3">#list#<br><br>
</td></tr></table>
<center><font size="2">#fp2_back#</font>
<br><br>
今まで使っていたHEADと全く同じものです。
コード記入欄の色表示、プレビューせずにそのまま保存も試しましたが反映されませんでした。
画像にて見辛い箇所がありましら教えて下さい。
03/04 23:04
>>5
【配色の設定】で変更されているようですが、
HEADやCSSファイルではリンクの色を一切いじっていないのですね？
【配色の設定】画面では、画像のように、色コード記入欄の横に色付きの■は付いている状態ですか？
（コードの色が■で表示されます）
それと、色コードを入れてプレビューせずにそのまま〔編集〕ボタンを押しても反映されないですか？
（小説機能の【配色の設定】を弄くってみましたが、プレビューで配色変更できてるのに実際アクセスすると反映されていない……という現象は起きませんでした）
【配色の設定】で変更されているようですが、
HEADやCSSファイルではリンクの色を一切いじっていないのですね？
【配色の設定】画面では、画像のように、色コード記入欄の横に色付きの■は付いている状態ですか？
（コードの色が■で表示されます）
それと、色コードを入れてプレビューせずにそのまま〔編集〕ボタンを押しても反映されないですか？
（小説機能の【配色の設定】を弄くってみましたが、プレビューで配色変更できてるのに実際アクセスすると反映されていない……という現象は起きませんでした）
03/04 22:20
2ページ中1ページ目
3560 view
残り書き込み 9987 件
人気スレ