テーマを Cocoon に変更しました。そのカスタマイズの覚え書き。
テーマファイル編集
スマホ表示時のみ『大きなカード』で一覧表示
各一覧表示についてスマホだけ『大きなカード』表示っぽくしたくて、【Cocoon 設定】→【インデックス】→【カードタイプ】は【エントリーカード（デフォルト）】のまま、子テーマの style.css に以下のコードを追加しました。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
（中略）
/*480px以下*/
@media screen and (max-width: 480px) {
/*必要ならばここにコードを書く*/
/* スマホ表示時にエントリーカードの画像サイズを拡大 */
.entry-card-thumb {
width: 100%;
margin-bottom: 0.4em !important;
float: none;
}
}（以下は何かのミスで上手くいかなかったときの記述）
これで一瞬上手くいったのですが、何かの拍子で効かなくなり…。style要素で展開されている以下のコードが影響しているみたい。
<style id='cocoon-style-inline-css'> （中略） .entry-card-thumb{width:38%} （以下略） </style>
これの style要素は【Cocoon 設定】の出力らしいのですが、どこをどう変えたかわからず。検証のために新たに WordPress を設置して先の style.css を試すも再現せず。僕は夢を見ていたのか…。ということであきらめて、別の方法を模索しました。
【Cocoon 設定】→【インデックス】→【カードタイプ】を【大きなカード】にして、PC 表示をエントリーカード風になるように修正しました。同じことを試した人が過去にいないわけないので、探してみたらあっさり発見。
スマホ表示時のみ『大きなカード』で一覧表示（別の方法）
エントリーカードの表示を変更するのではなく『大きなカード』をエントリーカード風にする方法もあります。
参考 カードタイプの「大きなカード」をスマホだけ適用し、画像のぼやけを解消したい | Cocoonテーマに関する質問 | Cocoon フォーラム
【Cocoon 設定】→【インデックス】→【カードタイプ】を【大きなカード】にしてから、以下のコードを子テーマの style.css に追加。
/*【インデックス】で【大きなカード】選択時、*/
/* PC のみエントリーカード風に表示 */
.ect-big-card > a article {
display: flex;
justify-content: space-between;
}
.ect-big-card > a article::after {
content: none;
}
.entry-card-thumb.card-thumb.e-card-thumb {
width: 38%;
}
.entry-card-content.card-content.e-card-content {
width: 59%;
}
@media screen and (max-width: 480px) {
.ect-big-card > a article {
display: block;
}
.ect-big-card > a article::after {
content: "";
}
.entry-card-thumb.card-thumb.e-card-thumb {
width: 100%;
}
.entry-card-content.card-content.e-card-content {
width: auto;
}
}前述の方法が上手くいかない場合はこちらを試してみるのも良し。
スマホ表示時のみ関連記事の画像サイズを拡大
投稿シングル表示下部の関連記事についても各一覧表示と同じく画像を拡大してレイアウト調整。子テーマの style.css に以下のコードを追加。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
（中略）
/*480px以下*/
@media screen and (max-width: 480px) {
/*必要ならばここにコードを書く*/
（中略）
/* 関連記事の画像サイズも拡大・レイアウト調整 */
.related-entry-card-thumb {
width: 100%;
margin-bottom: 0.4em !important;
float: none;
}
.related-entry-card-content {
padding-bottom: 0.4em !important;
}
}
このままだと小さい画像が引き伸ばされて表示されるので、大きい画像になるように以下を修正。
cocoon-child-master/tmp/related-entry-card.php の 15行目あたり。
echo get_the_post_thumbnail($post->ID, 'thumb320', array('class' => 'related-entry-card-thumb-image card-thumb-image', 'alt' => '') ); //サムネイルを呼び出す?>もうちょっと柔軟性があるように書いたらええんやろけどとりあえずこれで。
サムネイル画像に枠線を付ける
サムネ画像に枠線を付けたい派なので。以下を子テーマの style.css に追加。
/* サムネ画像に枠線 */
.entry-card-thumb img {
border: solid 1px #ddd;
}
.related-entry-card-thumb img {
border: solid 1px #ddd;
}
/* 『人気の記事』のサムネ画像に枠線・ランキングの数字位置を調整 */
.popular-entry-card-thumb img {
border: solid 1px #ddd;
}
.widget-entry-cards.ranking-visible .card-thumb::before {
top: 1px;
left: 1px;
}
ついでにランキングの数字の位置も調整。
アドセンス広告のレイアウト調整
関連記事の上に表示しているアドセンス広告のレイアウトをちょっと調整（PCのみ）。べつにやらなくてもよいけど気になるので。
/* 広告表示レイアウト調整 */
.gad-left {
margin-right:0.4em;
}
.gad-right {
margin-right:0;
}
レクタングルを2つ連続表示しているその隙間を調整。
プラグイン
プラグインは最低限にとは思っているけども思っているだけ。
Highlighting Code Block
本文中のコードがいい感じに表示されます。
Highlighting Code Block の使い方 | LOOS,Inc.
導入については以下を参考にしました。
参考 Cocoonのソースコード表示ではなく「Highlighting Code Block」を導入してみた | はっぴ～ぐぅ♪
ファイル名表示はクラシックエディタでは UI が無いんですが、pre 要素に data-file 属性として設定してやれば表示されます。同様に行ハイライトは data-line、スタート行数は data-start、言語名は data-show-lang=”1″ で設定可能（data-file と data-show-lang は排他利用で data-file が優先される）。
こんな感じに書くと…
<div class="hcb_wrap">
<pre class="prism line-numbers lang-php" data-file="foo.php" data-lang="PHP" data-line="3" data-start="2" data-show-lang="1">
<code>
echo esc_html($foo1);
echo esc_html($foo2);
echo esc_html($foo3);
</div>↓こう表示されます。（ファイル名は foo.php、スタート行数 2行、行ハイライトは3行目）
echo esc_html($foo1);
echo esc_html($foo2);
echo esc_html($foo3); 長いコードで横スクロールバーが表示されるように、以下を子テーマの style.css に追加。
/* pre 要素のコードを折り返さずに横スクロールバーを表示する */
pre,
pre * {
word-wrap: normal;
}
【コードブロックに言語名を表示する】のオプションが効いてないのは謎（ブロックエディタだと個別に設定できるので問題なし）。面倒なので、ええ加減ブロックエディタを使うようにしたほうが良いですね。
（これからも追記予定）
