ブログ - a-blog cms

ablogcms

a-blog cms

a-blog cmsのメディアバナーモジュールで、画像名を使った細かい調整の指示方法

課題

  • バナー画像の色味やその他の条件に合わせて、細かな調整を実装したい
  • その際に、ソースメニューは使わず、バナーの画像タイプを利用して、問題を解決したい

解決方法

  • メディアバナーを登録する際のファイル名に「指示を明示した」文字列を追記しする

具体的な例

上記のバナーモジュールでは、

  • PC表示ではサブテキストの文字列は黒で良いが
  • SP表示では黒では文字がみえないため、文字を白く変更している

実装方法

ファイル名に明示的な文字列を含む

  • 今回は「スマレジ_sp_white.png」とした

html側で文字列を評価する

<div class="main-visual-box<!-- BEGIN_IF [{img}/lk/_sp_white] --> sp_white<!-- END_IF -->">
<h1 class="main-visual-catch">{attr1}[raw]</h1>
<p class="main-visual-catch-sub">{attr2}[raw]</p>
<p class="main-visual-catch-sub_button"><a href="{url}" class="button is-lg is-width-lg">{alt}[raw]</a></p>
</div>

ポイント

<!-- BEGIN_IF [{img}/lk/_sp_white] --> sp_white<!-- END_IF -->
  • ファイルパスに「_sp_white」が含まれている場合に
  • sp_whiteというclassをラッパー部分のdivに追加

CSSを調整する

@media (max-width: 480px) {
.sp_white p.main-visual-catch-sub {
color: #ffffff;
}
}

として、スマートフォンの時のみ、文字が白になるように指定をした

投稿がお役に立ちましたら、いいねをしていただけると嬉しいです。

お困りごとをお聞かせください。

a-blog cmsについてのご相談、ご依頼など。
頂いた内容については、3営業日以内の返信を心がけております。

他社作成のa-blog cms修正、コーディング済htmlへのa-blog cms導入もOK。
小さなことから、お気になさらずお気軽にご相談ください。

  • 必須

    詳細を入力してください。

  • 必須

    お名前を入力してください。

  • 必須

    メールアドレスを入力してください。

    正しいメールアドレスを入力してください。

関連タグ

この記事をシェアする

投稿がお役に立ちましたら、いいねをしていただけると嬉しいです。

その他のa-blog cms一覧

カテゴリーリスト