Cocoon ブロック内に配置される <p> タグをベタ組みします。
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
Cocoon 謹製ボックス
まずは Cocoon にて利用できるボックスがどの様な margin 、 border 、 padding を持っているかを調べてみます。 （このページではベタ組みによる css 調整を打ち消しています。）
ボックスの種類
.toggle-checkbox:checked~.toggle-content {
padding: 1em;
border: 1px solid #ccc;
} 案内ボックス
.secondary-box {
padding: 15px;
} タブボックス
@media screen and (max-width: 440px) {
.container .blank-box {
margin-left: 0;
margin-right: 0;
}
}
.blank-box {
border: 2px solid #999;
padding: 1.2em 1em;
margin: 1em 2%;
}
.blank-box.bb-tab {
position: relative;
margin-top: 2em;
} 白抜きボックス
@media screen and (max-width: 440px) {
.container .blank-box {
margin-left: 0;
margin-right: 0;
}
}
.blank-box {
border: 2px solid #999;
padding: 1.2em 1em;
margin: 1em 2%;
} 付箋風ボックス
@media screen and (max-width: 440px) {
.container .blank-box {
margin-left: 0;
margin-right: 0;
}
}
.blank-box.sticky {
border-width: 0 0 0 6px;
}
.blank-box {
padding: 1.2em 1em;
margin: 1em 2%;
} まずは 「margin: 1em 2%;」 の有無で大別でき、 更に各々に border 、 padding の指定がなされています。
選択肢は 2 つ？
それぞれのボックスに割り当てられているクラスと、 それによって付加されるスタイル指定が判明したのでベタ組みは可能です。
ではどの様にスタイル指定を行うか？には二通りの手法があります。
現状の padding を元に計算
各ボックス毎に与えられている 「margin・border・padding」 からコンテンツ幅を計算する。
しかし、 ベタ組みを行う <p> タグが他のオブジェクト （<pre><code> や <image> など） と左右の面が合わなくなってしまう。 （よって、 前回の記事が必要になりました。）
そこで、 各ボックス毎に与えられている既存の 「margin・border・padding」 を調整していきます。
計算しやすい様にカスタマイズ
前回の結果より、 現状のコンテンツ幅はフォント幅の整数倍になっています。 よって、 各ボックスの 「margin＋border＋padding」 もフォント幅の整数倍にする必要があります。
各ボックスの調整
アイコンボックス
mixin
@mixin common-icon-box {
border-width: 1px;
padding-left: ($thx_site_font_width * 4) - 1px;
padding-right: $thx_site_font_width - 1px;
} 既存 css の 「padding: 20px 20px 20px 72px;」 より、 左を４文字、 右を１文字分 padding します。
メディアクエリ
/* アイコンボックス */
.common-icon-box {
@include common-icon-box;
$contents_width:
$thx_main_column_contents_width
- $thx_site_font_width * 5
;
@for $i from 2 through 6 {
.wp-block-columns.has-#{$i}-columns{
.wp-block-column{
@include thx-column-margin(
$contents_width,
$thx_site_font_width,
$i,
$thx_beta_column_margin
);
}
}
}
} ボックスの padding で使用される５文字分のフォント幅をコンテンツ幅から引き、 その幅を元にカラム間マージンを設定します。
トグルボックス
mixin
@mixin toggle-checkbox {
border-width: 1px;
padding-left: ($thx_site_font_width - 1px);
padding-right: ($thx_site_font_width - 1px);
} 既存 css の 「padding: 1em;」 より、 左右１文字分 padding します。
メディアクエリ
/* トグルボックス */
.toggle-checkbox:checked~.toggle-content {
@include toggle-checkbox
};
.toggle-content {
$contents_width:
$thx_main_column_contents_width
- $thx_site_font_width * 2
;
@for $i from 2 through 6 {
.wp-block-columns.has-#{$i}-columns{
.wp-block-column{
@include thx-column-margin(
$contents_width,
$thx_site_font_width,
$i,
$thx_beta_column_margin
);
}
}
}
} ボックスの padding で使用される２文字分のフォント幅をコンテンツ幅から引き、 その幅を元にカラム間マージンを設定します。
カラム間マージンを 「.toggle-checkbox:checked~.toggle-content」 にて作成すると後述するオーバーライドより優先順位が勝ってしまうので、 「.toggle-content」 にて処理を行います。
案内ボックス
mixin
@mixin secondary-box {
padding: $thx_site_font_width;
} 既存 css の 「padding: 15px;」 より、 左右１文字分 padding します。
メディアクエリ
/* 案内ボックス */
.secondary-box {
@include secondary-box;
$contents_width:
$thx_main_column_contents_width
- $thx_site_font_width * 2
;
@for $i from 2 through 6 {
.wp-block-columns.has-#{$i}-columns{
.wp-block-column{
@include thx-column-margin(
$contents_width,
$thx_site_font_width,
$i,
$thx_beta_column_margin
);
}
}
}
} ボックスの padding で使用される２文字分のフォント幅をコンテンツ幅から引き、 その幅を元にカラム間マージンを設定します。
タブボックス・白抜きボックス
mixin
@mixin blank-box {
margin-left: 0;
margin-right: 0;
border-width: 2px;
padding-left: ($thx_site_font_width - 2px);
padding-right: ($thx_site_font_width - 2px);
}
既存 css 「margin: 1em 2%;」 の左右マージンを０にします。
また、 「padding: 1.2em 1em;」 より、 左右１文字分 padding します。
メディアクエリ
/* 白抜きボックス */
.blank-box {
@include blank-box;
$contents_width:
$thx_main_column_contents_width
- $thx_site_font_width * 2
;
@for $i from 2 through 6 {
.wp-block-columns.has-#{$i}-columns{
.wp-block-column{
@include thx-column-margin(
$contents_width,
$thx_site_font_width,
$i,
$thx_beta_column_margin
);
}
}
}
} ボックスの padding で使用される２文字分のフォント幅をコンテンツ幅から引き、 その幅を元にカラム間マージンを設定します。
付箋風ボックス
mixin
@mixin blank-box-sticky {
border-width: 0 0 0 ($thx_site_font_width * 2);
padding-left: $thx_site_font_width;
padding-right: $thx_site_font_width;
} 既存 css は 「border-width: 0 0 0 6px;」 ですが、 個人的な好みで２文字分の border にします。
また、 「padding: 1.2em 1em;」 より、 左右１文字分 padding します。
メディアクエリ
/* 付箋風ボックス */
.blank-box.sticky {
@include blank-box-sticky;
}
.sticky {
$contents_width:
$thx_main_column_contents_width
- $thx_site_font_width * 4
;
@for $i from 2 through 6 {
.wp-block-columns.has-#{$i}-columns{
.wp-block-column{
@include thx-column-margin(
$contents_width,
$thx_site_font_width,
$i,
$thx_beta_column_margin
);
}
}
}
} ボックスの padding で使用される４文字分のフォント幅をコンテンツ幅から引き、 その幅を元にカラム間マージンを設定します。
トグルボックスと同様にオーバーライドされないので、 「.sticky」 にて処理を行います。
オーバーライド
.wp-block-columns.has-2-columns .wp-block-column,
.wp-block-columns.has-3-columns .wp-block-column,
.wp-block-columns.has-4-columns .wp-block-column,
.wp-block-columns.has-5-columns .wp-block-column,
.wp-block-columns.has-6-columns .wp-block-column {
&:last-child {
margin-right: 0px;
}
} カラム内の最後の子要素のみ、 右マージンをを０にします。
今回のカスタマイズにて、 カラム間マージンの指定が多岐に渡ってしまったため、 css の一番最後で纏めて一括処理します。
まとめ
フォント幅の整数倍ベースで組み立てていくと、 思いの外スムーズでした、、、 が、 残念ながらこの取り組みは、 またもや大きな方針変更が必要となりました。
方針変更の理由
勘の良い方、 css に造形の深い方はとうに気付かれていると思われますが、
んですよ。 となると、 文字間がパラパラしてしまうので、 「text-align: justify;」 は寧ろ不要。 やっぱデフォルトの 「text-align: left （start ？） ;」 が最強やん。 ってなっちゃいます ；；
となると、 この取り組みの使い所は、 スマホ・タブレットだけになってしまいます。
実りが少ない処か、、、
このテーマのその ① にて、
手間の割には実りの少ないテーマです。
段落を整えて表示する − その ①
と述べましたが、 ホントに少なくなりました、、、 まぁ、 気を取り直して、 せっかくここまで来たのでモバイル対応だけでもしてみたいと思います。
今後の課題
現在、 このベタ組みに関する css のみで 600 行オーバーです。 素人目で見てもまだまだ改善の余地がありそうなので勉強が必要です。
特に、 メディアクエリ周り。 そもそも、 「モバイルファースト」 なのか 「PC ファースト」 なのか。
「Cocoon Child: スタイルシート」 のメディアクエリは 「max-width」 表記なので 「PC ファースト」 なのかな？
対して 「.wp-block-columns」 のメディアクエリは 「min-width」 表記なので 「モバイルファースト」 なのかな？
この辺りの 「知識の整理整頓」 が必要です ；；
コメント