ブログを読んでいただき、ありがとうございます。
私のブログは、WordPressテーマのCocoonを使っています。
Cocoonには、親テーマと子テーマがあり
(WordPressテーマCocoonのダウンロードとセットアップ手順)
親テーマで、機能追加や、WordPressのバージョンアップに合せて、バージョンアップがされてきています。
メインは、親テーマのCocoon-Masterを使っていくのですが、
テーマは、親子テーマそろってインストールして、
「有効化」するのは、子テーマの方です。
なぜなら、独自で行うカスタマイズの対象は子テーマのcocoon-child-master方だからです。
親テーマを対象に、カスタマイズは出来ないこともないのですが、注意が必要です。
先ほども触れたように、親テーマはWordPressのバージョンアップに合せてバージョンアップされるからです。
親テーマで、カスタマイズを行っていると、そのカスタマイズをバックアップしていないと、
親テーマのバージョンアップで消えてしまうから(入れ替えられてしまうから)です。
これは、親テーマに付属するスキン(Skin:着せ替え:自分好みにデザインを変更する)も同様で、
親テーマのバージョンアップで置き替えされてしまいます。
カスタマイズ化したスキン(のcss)は、親テーマ配下ではなく、
スキン:/wp-content/themes/cocoon-child-master/skins/skin-neumorphism2/style.css
の様に、子テーマ配下に置く必要があります。
このブログは、そのスキンの開発者に宛てた、メールの部分を一部引用しています。
Cocoonフォーラムで、新しいスキンが発表される前に、
そのスキン開発者(北さん)と、意見交換をする機会(チャンス)があり、
スキン機能に、追加要望を出し、
その要望を受け入れて下さって以来、
メールでの交流が続いています。
既に、新しい機能を盛り込んだ、スキン凸凹2の開発も着手しており
およそ8割方出来ていて、
リクエストすれば、先行して戴けるという
ありがたいお話も戴いております。
今回は、そのスキン「凸凹」を使って
Cocoon機能の、アピールエリアに、独自カスタマイズを行おうとした時に、
キーボード操作ミスで、サイトが壊れた(真っ白になってしまった)時の
経緯と、バックアップからの復旧と修復、そして目的達成までの顛末をお話しします。
顛末
ショックのあまり一度は挫折しかけたこと
編集時点の操作ミス(今となっては、どのような操作をミスしたか定かではありませんが、)で
サイトの画面が真っ白になってしまったこと
何とか素の状態(スキン無しの状態)まで戻せたものの
もう一度立ち返って、元の状態へ戻し、
さらに「目的を達成する事」への困難を想像し、挫折しかかった。
アピールエリアで動画再生は無理なのか?
たとえ、元の状態へ戻すことができても、
「アピールエリアで動画再生は無理なのか?」と、
経緯
背景画面に動画部分が隠れてしまう

開発(Local)環境:凸凹スキン:新グローバルメニュー
背景画面に動画部分が隠れてしまっている

レスポンシブウェブデザインが壊れる
開発環境:凸凹スキン:新グローバルメニュー
背景画面があっても動画部分を表示することはできたが、
テキストのオーバーライドがずれていることと
「Next Movies」のボタンが大幅にズレ、他の「ボタン」が見当たらない
薄い白の枠線が見えるでしょうか?(これは、ボタン枠です。)

スマホ表示

開発環境Cocoon表示のスマホイメージ
オバーライドのテキストもズレるし、動画ははみ出してしまい、レスポンシブが壊れる
レスポンシブ ウェブ デザイン が壊れてる
次も!

オーバーライドのテキスト、「MORE」ボタンはうまく収まったが枠線がおかしい、「SOUND」や「Next Movie」ボタンの配置と背景のコントロールがうまく行かない

未だ、「SCROOL DOWN」や「PAGETOP」のコントロールがおかしい!
同じ状態で、Cocoonスマホ表示

こちらは、レスポンシブデザインが完全に壊れている
やはり、背景画像があるとコントロールできないのか?
さらに
オーバーライドのテキストはうまく収まったが、
「MORE」や「Next Movies」ボタンの配置と背景のコントロールがうまく行かない

固定ページ
開発環境:各ブラウザでの表示
同様の処置を行った、固定ページ(グローバルメニューは旧メニュースタイル)では、
ボタンやテキストの配置は異なるが、
固定ページ(背景画像無し)ではうまく行っている様に見える

左から、Chrome、Firefox、Edge
こちら(固定ページ)は、一見問題なさそうに見えるが、
アピールエリアの方が崩れるので、問題外
Skin(スキン)無し
スキン無しにした、場合(こちらの動画はモノクロ加工後のもの)
、背景画像も無しにして、
さらに、外部参照css無しの状態

当然、cssによるコントロールが無いので、
動画の上に、画像とテキスト、「動画」、「Youtube」ボタンがオーバーライドされていない状態
原因は、外部css参照
CocoonのアピールエリアにはHTML記述ができる。
しかし、Head項目とBody項目の区別がない
通常、HTML記述で、外部cssのLINKは、Head項目内(<head>と</head>の間)に
<ink>要素で外部CSSファイルを呼び出して適用する
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”xxx.css”>
</head>
<body>
の様に記述する。
アピールエリアにHead項目とBody項目の区別がないが、
<link rel=”stylesheet” type=”text/css” href=”xxx.css”>
の様に記述でき、css参照もできるが、どうもこれがいけない様だ。
これで、外部css参照は出来ない(この様な場合は、参照してはいけない)と判断。
さて、どうするか
残るは、既に読み込んでいるSkinのcssを加工編集(追記・変更)するか、
インラインcss(HTML内にcssを書く方法)
<style>要素で文書単位に適用する
ただ、これだと使用するページ毎に記載が必要となり面倒。
HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。
適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。
style属性によるスタイル指定は、部分的にスタイルを優先指定する際などには便利ですが、
HTMLソースが複雑になってスタイル管理が煩雑になりがちです。効率の良いスタイル管理を目指す場合には、 CSS部分を外部ファイル化するのが一般的です。
最終的には、Skinのcssを加工・編集することになると思うが、
<style>タグを使って、インラインcssでうまく行くかやってみよう
<body>
<p style=”color:blue; line-height:1.5;”>段落・・・・・</p>
</body>
の様に、インラインcssを書けば良いんだ!・・・と、
ここで、悲劇が!

クラッシュ


ついでに、頭も真っ白に ・・・ ・・・ ・・・ ・・・
____ここからは、北さんにメールした内容です。___________
実は、アピールエリアでの動画再生は、「あきらめ」ました。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
と、いうのは「スマホでのレスポンシブ表示ができない」からです。
パソコンでは、問題ないのですが、
「本環境」にセットして見たら
スマホで表示すると、
動画と「動画にオーバーレイ表示させている「文字」と「ボタン」群が、
横にはみ出してしまい
スマホの画面がタップすると「ユラユラ」表示するからです。
スマホで見るとレスポンシブでない
Cocoon機能のスマホ表示でも
原因は、外部CSS参照
————————————————————————
その後、ちょっとだけ悲惨な目に遭いました。
長文ですが、顛末を「読んでやって」ください。m( _ _ )m
という訳で、凸凹2の楽しみはお預けです。
============================================
アピールエリアのメッセージエリアのテキスト部分は「HTMLの入力も可能」となっていますが、
カスタムHTMLブロックの様にはいかない様です。
<head>タグを書かなくても、
<link rel=”stylesheet” href=”http://work.local/wp-includes/j-css/j7-style.css”>を書くことで、
外部のcssファイルを参照できますが、
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”/>を書いても無視されますし、
<!doctype html><html lang=”ja”><head>この中に書いても</head> 無視されます。
「スマホでのレスポンシブ表示ができない」
夜間になんとかしたい(気に入らないので)と、
外部cssファイル参照を止めて
インラインcssにしようと、
<style type=”text/css”>
.box {
margin : auto;
width : 150px;
height : 150px;
background : linear-gradient(to bottom, #ffffff, #ffffff);
}
</style>
などと書き始めたのですが、
メッセージエリアの背景が透明にならないので、
body {
background-color: transparent;
}
を入れたら、
撃沈(本環境の画面が真っ白になってしまいました)・・・
クラッシュ
ついでに、頭も真っ白に ・・・ ・・・ ・・・ ・・・
別のブラウザからログインして、Cocoonの親テーマに変更したらサイトは表示されましたが、
デフォルト設定なので味気ない画面
スキンを凸凹設定して表示すると大分良くなったけど
Font Awesomeの表示も一部出来ていないし
アピールエリアは表示しない(デフォルトに戻って、入力していたものもない・・・これは親テーマだから仕方ない)
ここで、Cocoonの子テーマにすると、マタマタ、真っ白画面に
「壊れた~~~」
コンテンツは残っているので親テーマを有効にし
(最悪「子テーマを入れ替えれば良いか」と)
———————————————————
就寝・・・、でも、なかなか寝付けない・・・・・・
———————————————————
============================================
と、いう訳で2日分の手戻りです。
今後は、Localのテスト環境で、
もう少し・確認してから
(アピールエリアのメッセージ部分は背景画像と透過デザイン大文字とLinkに止め)
本環境に移行しようと思います。
これが、終わったら、
凸凹2を楽しみます。
ここまで、読んでいただいてありがとうございます。
J.Nakayama
~~~~~~~~~~~~~~~~ここまで。~~~~~~~~~~~~~~~~~~~~~
・
・
・
・
・
朝から再チャレンジ
気を取り直して、朝から、Cocoonの子テーマをダウンロードし
フォルダの階層ごとにXSERVERのフォルダにFTPでアップロードで入れ替え
ログインして、Cocoonの子テーマに変更したら、戻るか?と思ったが、
残念、真っ白画面に
子テーマが壊れた訳ではなさそう・・・

まさかデータベース?
そうすると、DBが壊れたか?
データベースをSQLで覗いてみたものの、どのデータが壊れているのか?
直接UPDATEする訳もいかず・・・
最後の手段か・・・・

Data Base
「そういえばXSERVERは、直近7日分の自動バックアップがあるはず・・・」と

復旧
変更直前のバックアップ「6/3」分のバックアップが有ったので
これを指定してリカバリ「実行」
指定した日付のバックアップ分をXSERVERが、リストア(復元)してくれます。
僅か数分で「リカバリ実行中」から、「リカバリ終了」となった。
ログインして、Cocoonの子テーマに変更したら、3日前の状態まで戻りました。

回復
続いて、回復措置です。
・
・
さらに紆余曲折
開発環境でうまく行ったので
本環境に移行しました。

確認もして、「問題ない」様です。
北さんにも見てもらおう
北さんに、見てもらった・・・
「きれいな空の画像があるだけ、ですが・・・」
本環境が、凸凹スキンの旧グローバルメニューのまま???

さらに、背景画面に動画部分が隠れてしまっている
「そんな、私の環境では動画も見えてるのに・・・先祖返り?」
私の環境でもブラウザでこんなにも違う?
真ん中の、Firefoxだけ、アピールエリアの幅が狭い(maxwidth:1920px;が効いていない)
本環境が、スキン凸凹で、旧グローバルメニューのまま?
と

原因は、ブラウザの履歴(クッキーとも言う)と、Serverのキャッシュ
履歴削除で正常に
・
・
・
開発環境:凸凹スキン
スキンのcssを編集・加工して、グローバルメニュー配置を替えてみた

レスポンシブチェック
開発環境凸凹固定ページ
Cocoon機能のレスポンシブチェック

背景無しで、スキンcssでレスポンシブ デザインもクリア
スキン凸凹2を戴きました。
背景画像を消してみた開発環境:凸凹2スキンと、本環境:凸凹スキン

開発環境と本環境
スキンの違いはあるが、どちらもStyle.cssを同様に編集(Classの追加と変更)したのだが、?
左:開発と本環境で、アピールエリアの幅と高さが違う・・・???
色違いは、凸凹2スキンでは、色をカスタマイズできるから

開発環境のスキンを凸凹2に変更して、固定ページの表示(ブラウザごと)
左から、Chrome、Edge、Firefox

正規化の結果
開発環境:凸凹2スキン:背景画像を使いたいが、
背景画像を追加すると、やはり動画部分が隠れてしまう
開発環境:凸凹2スキン:背景画像をあきらめる
やはり、背景画像を無くすと、動画部分も正常に表示される
本環境凸凹2:
背景画像を無しに設定して、Style.cssで完全制御
動画と、動画にオーバーライドする形で、テキスト(h2:見出しと、p:テキストの色のコントルール)及び、LINK付き画像および
動画枠外に、「動画」。「Youtube」LINK付きボタンを配置

本環境完成アピールエリア
アピールエリアの完成系
動画は、モノクロに変換しました。
固定ページの動画は、カラーです。

本環境
本環境は、以下の様になりました。

モバイルフレンドリーテスト
そして、モバイルフレンドリーテストの結果
このページはモバイルフレンドリーです。

コメント