WordPress/sango 1.8.2でヘッダーアイキャッチ内にいろんな物を置く方法（途中）

業務目標

↑こういうのを実現したい。

環境

• WordPress 4.7.13 / AWS
• Sangoテーマ 1.8.2
• FTPの権限なし
• MySQLの権限なし
• SSHの権限なし

制約

テーマのアップデート時にリバートされるので、html/phpには手をつけられない。
子テーマのstyle.cssを編集することしかできない。

作戦

疑似要素(::before, ::after）をつかおう。

まずは理解する

何も理解していないので、基礎的な学習から手をつける。

（ⅰ）ブロック要素にする
    /** define it as a block element **/
    display: block;
(ⅱ)内容は
content: 
に入るものしか定義できない（例えば<script>をねじ込んでしまうようなのは無理ではなかろーか）

例えば、引用した現代ビジネス社のものを単純になぞるなら、

• "HEADLINE"などの画像
• h1 / h2の見出し
• なキャプション
• 著者の顔写真

• な著者名

が入っていればいいことになる。
つまり、content: に(ⅰ)画像以外も入ること、(ⅱ)改行できることが条件となるが、一応できそうであった。
（これらがくっつくか否かは別問題）

階層化

コンテンツを前後にくっつけることが可能になったとしても、
htmlを弄っているわけではないので、親要素内に入れ子にできるわけではない。何より、全部インライン要素じゃないか。
かくなる上は、カバー画像をz-indexで後背に沈めるか？それでメニューバーに対する::before指定をすればうまくいくかもしれない。かもしれない。。

z-index

原則：数字が大きい方が上
カバー画像の後ろに::beforeで同じサイズの、background-color: black;なレイヤーを作る。

実践

style.css

#header-image::before{
    z-index: 10;
    background-color: #000000;
    opacity: 0.6;
    position: absolute;
    content:' ';

    /*以下は #header-image textから流用*/
    max-width: 1080px;
    margin: 0 auto;
    padding: 13% 20px 15%;
    color: #fff;
    text-align: center;
    line-height: 1.5;
}

⇒一応動作した。次いで、中身のコンテンツを入れることを考えるが、
sangoテーマの見出し／説明文を使った方がよさそう。ただし初期状態ではセンタリングされててひどい状態なので、こちらも別途レイアウトする。

style.css