ブログを読んでいただき、ありがとうございます。
私のブログは、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フォーラムで、新しいスキンが発表される前に、
そのスキン開発者（北さん）と、意見交換をする機会（チャンス）があり、
スキン機能に、追加要望を出し、
その要望を受け入れて下さって以来、
メールでの交流が続いています。
既に、新しい機能を盛り込んだ、スキン凸凹２の開発も着手しており
およそ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
という訳で、凸凹２の楽しみはお預けです。
============================================
アピールエリアのメッセージエリアのテキスト部分は「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に止め）
本環境に移行しようと思います。
これが、終わったら、
凸凹２を楽しみます。
ここまで、読んでいただいてありがとうございます。
J.Nakayama
~~~~~~~~~~~~~~~~ここまで。~~~~~~~~~~~~~~~~~~~~~
・
・
・
・
・
朝から再チャレンジ
気を取り直して、朝から、Cocoonの子テーマをダウンロードし
フォルダの階層ごとにXSERVERのフォルダにFTPでアップロードで入れ替え
ログインして、Cocoonの子テーマに変更したら、戻るか？と思ったが、
残念、真っ白画面に
子テーマが壊れた訳ではなさそう・・・
まさかデータベース？
そうすると、DBが壊れたか？
データベースをSQLで覗いてみたものの、どのデータが壊れているのか？
直接UPDATEする訳もいかず・・・
最後の手段か・・・・
Data Base
「そういえばXSERVERは、直近7日分の自動バックアップがあるはず・・・」と
復旧
変更直前のバックアップ「6/3」分のバックアップが有ったので
これを指定してリカバリ「実行」
指定した日付のバックアップ分をXSERVERが、リストア（復元）してくれます。
僅か数分で「リカバリ実行中」から、「リカバリ終了」となった。
ログインして、Cocoonの子テーマに変更したら、３日前の状態まで戻りました。
回復
続いて、回復措置です。
・
・
さらに紆余曲折
開発環境でうまく行ったので
本環境に移行しました。
確認もして、「問題ない」様です。
北さんにも見てもらおう
北さんに、見てもらった・・・
「きれいな空の画像があるだけ、ですが・・・」
本環境が、凸凹スキンの旧グローバルメニューのまま???
さらに、背景画面に動画部分が隠れてしまっている
「そんな、私の環境では動画も見えてるのに・・・先祖返り？」
私の環境でもブラウザでこんなにも違う？
真ん中の、Firefoxだけ、アピールエリアの幅が狭い（maxwidth:1920px;が効いていない）
本環境が、スキン凸凹で、旧グローバルメニューのまま？
と
原因は、ブラウザの履歴（クッキーとも言う）と、Serverのキャッシュ
履歴削除で正常に
・
・
・
開発環境：凸凹スキン
スキンのcssを編集・加工して、グローバルメニュー配置を替えてみた
レスポンシブチェック
開発環境凸凹固定ページ
Cocoon機能のレスポンシブチェック
背景無しで、スキンcssでレスポンシブ デザインもクリア
スキン凸凹２を戴きました。
背景画像を消してみた開発環境：凸凹２スキンと、本環境：凸凹スキン
開発環境と本環境
スキンの違いはあるが、どちらもStyle.cssを同様に編集（Classの追加と変更）したのだが、？
左：開発と本環境で、アピールエリアの幅と高さが違う・・・？？？
色違いは、凸凹２スキンでは、色をカスタマイズできるから
開発環境のスキンを凸凹２に変更して、固定ページの表示（ブラウザごと）
左から、Chrome、Edge、Firefox
正規化の結果
開発環境：凸凹２スキン：背景画像を使いたいが、
背景画像を追加すると、やはり動画部分が隠れてしまう
開発環境：凸凹２スキン：背景画像をあきらめる
やはり、背景画像を無くすと、動画部分も正常に表示される
本環境凸凹2：
背景画像を無しに設定して、Style.cssで完全制御
動画と、動画にオーバーライドする形で、テキスト（h2:見出しと、p:テキストの色のコントルール）及び、LINK付き画像および
動画枠外に、「動画」。「Youtube」LINK付きボタンを配置
本環境完成アピールエリア
アピールエリアの完成系
動画は、モノクロに変換しました。
固定ページの動画は、カラーです。
本環境
本環境は、以下の様になりました。
モバイルフレンドリーテスト
そして、モバイルフレンドリーテストの結果
このページはモバイルフレンドリーです。
コメント