【a-blog cms】ユニットの仕様がややこしすぎるので調査してみた。

a-blog cms のユニットの仕様って少し難しくないですか??実際に開発している側から見てもそうですし、管理画面から更新する側から見ても「???」となることがあります。その中でも特に分かりづらいのが、配置機能とユニットグループ機能だと思います。どちらも画像やメディアを横並びにすることができ、用途がかぶっているところがあります。それが故に分かりづらいです。今回は、とあるきっかけがあり、a-blog cmsユニットについて詳しく調査してみました。その結果を発表したいと思います。

配置機能とユニットグループ機能

まず、配置機能とユニットグループ機能について、それぞれの機能がどういうものかについて説明していきます。

配置機能

配置機能とは、端的に言うとユニットの要素に特定のスタイルが当たる機能になります。例えば、"左"を選択した場合は下記のようなスタイルになります。

.column-media-left {
    float: left;
    text-align: left;
}

また、"中央” を指定した場合は下記のスタイルが適用できます。

.column-media-center {
    display: block;
    float: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

そして、”全体" を指定すると指定したユニットの上部に

<hr class="clearHidden">

が挿入されます。HTML / CSS を勉強している方ならわかるかもしれませんが、これで、1つ前のユニットに"左” や "右" 配置を指定して float のスタイルがあたっていて、意図しない回り込みが発生してしまっていたとしても強制的に回り込みを解除することができます。

つまり、配置機能とは、 "左” や "右” を選択したときには、floatのスタイルが適用され、"中央" を指定したときは margin: 0 auto のスタイルが適用される機能になります。

ユニットグループ機能

ユニットグループ機能とは

ユニットグループ機能とは、ユニットを div 要素で囲む機能です。囲った div にはラベル(選択時の名前)とクラス(HTMLの要素に適用するclass属性)を自由に追加することができます。公式のドキュメントを読んでいただけると詳しく機能の詳細がわかるかと思います。

ちょっと突っ込んだ説明をすると、デフォルトでは、2カラムを指定すると以下のスタイルが適用されます。

.acms-col-sm-6 {
    float: left;
    width: 50%;
}

3カラムを指定した場合は以下になります。

.acms-col-sm-4 {
    float: left;
    width: 33.33333%;
}

ユニットのややこしいところ

デフォルトのユニットの仕様で最もややこしいところはレイアウトがfloatでつくられている点です。floatでつくられていることにより、意図しない回り込みが発生することがあります。


例えば、上記の画像です。その他のテキストが画像に回り込んでしまって、テキストの装飾が画像の上部に回り込んでしまっているのがわかると思います。リストやテキストであれば、良いのですが、装飾がついていたりするとその装飾が消えてしまったり、ウィンドウ幅を狭めていったときに突然消えてしまうことがあります。


その他に "全体” 配置を設定している画像

その他に "全体” 配置を設定している画像

そんなときは、回り込んでしまっているユニットに対して "全体” を指定してあげることでユニット上部に <hr class="clearHidden"> が出力されることになり、結果として回り込みが解除されます。


テーブルユニットによる回り込み


また、メディア→テーブルの順番でユニットを用意し、メディアに "左" 配置とサイズ中以下を指定し、テーブルに "おまかせ" を指定すると、PC幅のときは問題なく表示されるのですが、スマホ幅になるとテーブルが消えてしまうという現象が起こることが発覚いたしました。(Ver. 2.11.38時点)実際に上記の設定をすると↓のように表示されます。


しかし、スマホ幅にしてみてみると、テーブルが見えなくなっています。


これは実際には消えているのではなく、テーブルが画像の後ろに隠れている状態です。

本来意図している動作としては、メディアに "左" 配置とサイズ中以下を指定し、テーブルに "おまかせ" を指定したときはメディアと画像が並列にならず直列になることです。この不具合を修正するため themes/system/_layouts/unit.htmlのファイル内31行目 @section(table-unit)の下に <hr class="clearHidden"> を記述していただくことで、横並びになることを回避することが出来ます。

実際の記述は以下のようになります。

<!--  themes/system/_layouts/unit.html -->
<!-- BEGIN unit#table -->
@section(table-unit)
<hr class="clearHidden">  <!-- ここを追加 -->
<!-- テーブル -->
<div class="column-table-{align}">
<div class="entry-container">
{table}[raw]
</div>
</div>
@endsection
<!-- END unit#table -->

また、これだと配置機能ではメディアユニットとテーブルユニットの横並びができなくなりますので、横並びをしたい場合はユニットグループ機能を使ってメディアユニットとテーブルユニットに対して "2カラム" を設定してあげることで横並びを実現することができます。

まとめ

今回は、ちょっとややこしいユニットの横並び時の仕様について解説してみました。a-blog cms では ユニットで横並びのレイアウトを実現するときにfloatを使用しているため、意図しない回り込みが発生する場合があります。通常、記事を書いていて、あえて横並びにさせようと思うことは少ないかもしれませんが、頭の片隅においておくと記事作成が楽になると思います。 また、先の話にはなると思いますが、floatでレイアウトをしているところをflexboxでレイアウトできる仕様に変えてみたいなーなんてのも考えています。まずは自分のブログのリニューアルを検討しているので、そのときに実装できたらやってみたいと思います。


関連記事

この記事のハッシュタグに関連する記事が見つかりませんでした。

最新記事

カテゴリー

アーカイブ

ハッシュタグ