てがろぐ
- Fumy Otegaru Memo Logger -
No.5498
🍎Re:5496◆拝見しました。
いろいろ問題がありますが、一気に解決する方法はないので、1つずつ試してみて下さい。
まず、WordPress側のCSSが完全に適用されない理由は、てがろぐスキン側で読み込んでいる tegalog.css があるためです。
なので、とりあえず、てがろぐスキン(skin-cover.html)の中から<link type="text/css" rel="stylesheet" href="tegalog.css?1.2">の1行を丸ごと消してみて下さい。
それで、WordPress側の見栄えは現れるようになるはずです。（その代わり、てがろぐ生成部分の装飾はなくなりますが。）
その後、『本当に必要なCSSだけ』を add.css などに書いて、それを読み込むと良いと思います。
あと、そもそも合成したいヘッダのページ側にいくつか問題があります。
確かに、単独でアクセスするとヘッダ部分だけが存在するように見えるのですが、このHTMLソースを見ると、<!DOCTYPE html>から始まって、headもbodyも何もかもが存在するフル仕様のHTMLになっていますね。
これをこのまま「別HTMLのdiv要素の中」に丸々放り込んでしまうと、HTMLの文法的に正しくなくなりますから、予想しない問題がいろいろ起きそうです。
その状態では原因究明が困難になりますから、まず、この状態で合成するのはやめる必要があります。
まず、wp-header.php を以下のように分割しましょう。
※wp-header.phpは、他のページに合成するためだけに用意するデータなので、これが単独で「1つのHTMLとして成立する」必要はありません。なので、<!DOCTYPE html>から書き始めてはいけません。ここに書くのは、「div要素の中に挿入して大丈夫な必要最低限のソース」だけです。
ただ、おそらく、動的に変化するのは②だけですよね？
①は固定的な内容だと思いますので、合成はせずに、てがろぐスキン(skin-cover.html)内に直接コピーして書けば良いのではないかと思います。
ただ、それでも（①は）かなり膨大なソース量になっていますが、本当にこの莫大な行数が必要なのかどうかを確かめてみて下さい。
<link rel="preload" as="font"～だけで350行以上ありますが、これ、たぶん要らないですよね……？(^_^;)
あと、メインのCSSですが <style id='main_style-inline-css' type='text/css'>～</style>までの間に5千行近くありますよね!? このヘッダ部分の見栄えを作るためだけに、こんな莫大なCSSソースはたぶん要らないと思うんですよね……。^^;
いや、まあ、あっても良いんですが、それならそれで、これは1つの独立したCSSファイルに保存して、link要素で読み込むように書く方が、何かとメンテナンスしやすいと思います。
この莫大なソースを合成すると、どこの記述が何に影響しているのか？が分かりにくくなりますので、とにかくまず、『必要最小限のソースになるまで削って』から、それを合成してみて下さい。
……というわけで、いろいろ書きましたが、
それを全部ぶった切ることになりますけども、
たぶん、一番の近道は、以下のような手順で試してみることではないかな……と思います。
「PHPで生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。
いろいろ問題がありますが、一気に解決する方法はないので、1つずつ試してみて下さい。
まず、WordPress側のCSSが完全に適用されない理由は、てがろぐスキン側で読み込んでいる tegalog.css があるためです。
なので、とりあえず、てがろぐスキン(skin-cover.html)の中から<link type="text/css" rel="stylesheet" href="tegalog.css?1.2">の1行を丸ごと消してみて下さい。
それで、WordPress側の見栄えは現れるようになるはずです。（その代わり、てがろぐ生成部分の装飾はなくなりますが。）
その後、『本当に必要なCSSだけ』を add.css などに書いて、それを読み込むと良いと思います。
あと、そもそも合成したいヘッダのページ側にいくつか問題があります。
確かに、単独でアクセスするとヘッダ部分だけが存在するように見えるのですが、このHTMLソースを見ると、<!DOCTYPE html>から始まって、headもbodyも何もかもが存在するフル仕様のHTMLになっていますね。
これをこのまま「別HTMLのdiv要素の中」に丸々放り込んでしまうと、HTMLの文法的に正しくなくなりますから、予想しない問題がいろいろ起きそうです。
その状態では原因究明が困難になりますから、まず、この状態で合成するのはやめる必要があります。
何かに何かを合成するときの鉄則は、最小限から1ステップずつです。
いきなり、どっかーん！と全部を放り込めば、何がどこにどう影響しているのかが分からなくなりますので。
まず、wp-header.php を以下のように分割しましょう。
- HTMLのhead要素内に入れるべき内容（CSSやmeta要素など）
- Webページのヘッダ部分になる内容（body要素の中身）
※wp-header.phpは、他のページに合成するためだけに用意するデータなので、これが単独で「1つのHTMLとして成立する」必要はありません。なので、<!DOCTYPE html>から書き始めてはいけません。ここに書くのは、「div要素の中に挿入して大丈夫な必要最低限のソース」だけです。
ただ、おそらく、動的に変化するのは②だけですよね？
①は固定的な内容だと思いますので、合成はせずに、てがろぐスキン(skin-cover.html)内に直接コピーして書けば良いのではないかと思います。
ただ、それでも（①は）かなり膨大なソース量になっていますが、本当にこの莫大な行数が必要なのかどうかを確かめてみて下さい。
<link rel="preload" as="font"～だけで350行以上ありますが、これ、たぶん要らないですよね……？(^_^;)
あと、メインのCSSですが <style id='main_style-inline-css' type='text/css'>～</style>までの間に5千行近くありますよね!? このヘッダ部分の見栄えを作るためだけに、こんな莫大なCSSソースはたぶん要らないと思うんですよね……。^^;
いや、まあ、あっても良いんですが、それならそれで、これは1つの独立したCSSファイルに保存して、link要素で読み込むように書く方が、何かとメンテナンスしやすいと思います。
この莫大なソースを合成すると、どこの記述が何に影響しているのか？が分かりにくくなりますので、とにかくまず、『必要最小限のソースになるまで削って』から、それを合成してみて下さい。
……というわけで、いろいろ書きましたが、
それを全部ぶった切ることになりますけども、
たぶん、一番の近道は、以下のような手順で試してみることではないかな……と思います。
- まずは、合成するのではなく、『skin-cover.htmlに全部のHTMLソースを直接書く形』で、望みのページデザインを確実に作る。
- その上で、『WordPress側と共通する部分』は合成する方法が採用できないか検討する。
「PHPで生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。
- ユーザ「にしし」の投稿だけを見る (※時系列順で見る)
- この投稿と同じカテゴリに属する投稿：
- この投稿日時に関連する投稿：
- この投稿に隣接する前後3件ずつをまとめて見る
- この投稿を再編集または削除する
