てがろぐ
- Fumy Otegaru Memo Logger -
No.5502, No.5501, No.5500, No.5498, No.5497［5件］
そういえば最近はホットケーキを食べていないような……。🥞🥞🥞
🥞Re:5501◆外側スキンに [[IMAGELIST:LB]] と書くと、新着画像群がLightboxを使ってその場で拡大表示されるためのHTMLは出力されるのですが、『Lightboxスクリプトそのもの』は読み込まれないのです。Lightboxが動作するためには、そのページでjQueryとLightboxが読み込まれている必要があります。おそらく、お使いのギャラリー用スキンやサイトマップ用スキンには、 [[JS:LIGHTBOX:JQ]] の記述がどこにもないのではないでしょうか？ それが原因です。外側スキン（skin-cover.html）の末尾あたりにでも [[JS:LIGHTBOX:JQ]] を書いて下さい。すると動作します。
➡ 詳しくは、リファレンスの【新着画像リスト要素】区画内にある[[IMAGELIST:LB:個数]]項目の直下にある水色の囲み内に書かれた注釈部分をお読み下さい。
🥞Re:5501◆外側スキンに [[IMAGELIST:LB]] と書くと、新着画像群がLightboxを使ってその場で拡大表示されるためのHTMLは出力されるのですが、『Lightboxスクリプトそのもの』は読み込まれないのです。Lightboxが動作するためには、そのページでjQueryとLightboxが読み込まれている必要があります。おそらく、お使いのギャラリー用スキンやサイトマップ用スキンには、 [[JS:LIGHTBOX:JQ]] の記述がどこにもないのではないでしょうか？ それが原因です。外側スキン（skin-cover.html）の末尾あたりにでも [[JS:LIGHTBOX:JQ]] を書いて下さい。すると動作します。
➡ 詳しくは、リファレンスの【新着画像リスト要素】区画内にある[[IMAGELIST:LB:個数]]項目の直下にある水色の囲み内に書かれた注釈部分をお読み下さい。
すみません助けていただけると嬉しいです😭
モードを何も指定していない時は新着画像リストの画像クリックで画像がその場で大きくなる（？）のですが、ギャラリーモード、サイトマップモードで新着画像リストの画像をクリックすると原寸大の画像だけのページに飛びます。
これはギャラリーモード、サイトマップモードのCSSなどの設定が間違っているんでしょうか？
それともどこかで指定の方法があるんでしょうか？
通常スキンで[[IMAGELIST:LB]] と書いたので、それをコピペして他のスキンにも貼ったのですが上記の状態です😭
他にもどこか確認した方がいい項目があれば教えていただけると嬉しいです🙇♀️
モードを何も指定していない時は新着画像リストの画像クリックで画像がその場で大きくなる（？）のですが、ギャラリーモード、サイトマップモードで新着画像リストの画像をクリックすると原寸大の画像だけのページに飛びます。
これはギャラリーモード、サイトマップモードのCSSなどの設定が間違っているんでしょうか？
それともどこかで指定の方法があるんでしょうか？
通常スキンで[[IMAGELIST:LB]] と書いたので、それをコピペして他のスキンにも貼ったのですが上記の状態です😭
他にもどこか確認した方がいい項目があれば教えていただけると嬉しいです🙇♀️
返信ありがとうございます！
JSのコードのおかげでWordPressのヘッダーが表示されるところまで来ました！
後はWordPress内のCSSコードと競合したり、自作したハンバーガーメニューが表示されない不具合があるため、そこを地道に過去のコードから整理していこうかなと思います…スパゲッティコードすぎる…
おかげさまで表示の兆しが見えました、ありがとうございます！
JSのコードのおかげでWordPressのヘッダーが表示されるところまで来ました！
後はWordPress内のCSSコードと競合したり、自作したハンバーガーメニューが表示されない不具合があるため、そこを地道に過去のコードから整理していこうかなと思います…スパゲッティコードすぎる…
おかげさまで表示の兆しが見えました、ありがとうございます！
🍎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で生成された内容を合成する」というのは、そこそこ知識が必要なので、いきなりそこから始めるのはハードルが高すぎるのではないかと思います。
Re:5496 返信ありがとうございます！
にしし様から教えていただいた方法で、今までうんともすんともしなかったヘッダーがなんとか表示されるようになりました！
ただ、新たな問題が出てきてしまいまして…。
WordpressのCSSが反映されなくなってしまったのと、今度はてがろぐの操作が効かなくなってしまいました。
該当のてがろぐのリンクはこちら です！
にしし様から教えていただいた方法で、今までうんともすんともしなかったヘッダーがなんとか表示されるようになりました！
ただ、新たな問題が出てきてしまいまして…。
WordpressのCSSが反映されなくなってしまったのと、今度はてがろぐの操作が効かなくなってしまいました。
該当のてがろぐのリンクはこちら です！
