スタイル

目次

交互にclassを付与するゼブラ機能(js-zebra)

a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能(zebra)の設定が標準で実装されています。(Ver. 1.3.0より)この機能を使用してクラスが付与される要素は次のとおりです。

  • tableのtr
  • ul, olのli
  • dlのdt, dd

デモ

1つ目のdt(1行目)
1つ目のdd(2行目)
2つ目のdd(3行目)
3つ目のdd(4行目)
2つ目のdt(5行目)
1つ目のdd(6行目)

設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-------
// zebra
zebraMark       : '.js-zebra',
zebraOddClass   : 'odd',
zebraEvenClass  : 'even',


zebraMark ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。
zebraOddClass 奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。
zebraEvenClass 偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。

使い方

HTML

指定したクラスをHTMLのtable要素やul要素、ol要素、dl要素に記述します。例)zebraMarkで「.js-zebra」と指定した場合

<dl class="js-zebra">
  <dt>1つ目のdt(1行目)</dt>
  <dd>1つ目のdd(2行目)</dd>
  <dd>2つ目のdd(3行目)</dd>
  <dd>3つ目のdd(4行目)</dd>
  <dt>2つ目のdt(5行目)</dt>
  <dd>1つ目のdd(6行目)</dd>
</dl>

出力後のソースコード

<dl class="js-zebra">
  <dt class="odd">1つ目のdt(1行目)</dt>
  <dd class="even">1つ目のdd(2行目)</dd>
  <dd class="odd">2つ目のdd(3行目)</dd>
  <dd class="even">3つ目のdd(4行目)</dd>
  <dt class="odd">2つ目のdt(5行目)</dt>
  <dd class="even">1つ目のdd(6行目)</dd>
</dl>

CSS

必要に応じてスタイルを指定します。

スタイルを切り替える(styleswitch)

a-blog cmsでは、link要素で参照しているCSSを切り替える設定が標準で実装されています。(Ver. 1.2.1より)

デモ

スタイルを[a]に切り替える

スタイルを[b]に切り替える

a-blog cmsはいつも使っているWebブラウザから更新ができ、直感的で使いやすく、便利な機能についてを重視したシステムになっています。

設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

config.js

// スタイルの切り替え
styleSwitchMark: 'a.styleswitch',
styleSwitchStyleMark: 'link.styleswitch'

使い方

スタイルを参照するlink要素と切り替えるa要素に、config.jsで指定されているclass名をHTMLに記述します。そしてそれぞれの要素に、スタイルを対応させる属性(link要素にはtitle属性、a要素にはrel属性)を記述します。

例)styleSwitchMarkで「.styleswitch」と指定した場合head要素内:

<link rel="stylesheet" type="text/css" href="xxx.css" title="a" class="styleswitch" />
<link rel="stylesheet" type="text/css" href="yyy.css" title="b" class="styleswitch" />

body要素内:

<a href="#" class="styleswitch" rel="a">スタイルを[a]に切り替える</a>
<a href="#" class="styleswitch" rel="b">スタイルを[b]に切り替える</a>

このように記述すると、指定したclassがあるアンカーリンクをクリックしたときに、それぞれに対応するスタイルが切り替わります。

文字色のカラーコントラストの調整(js-contrast-color)

概要

背景色が動的に変化する場合(CMSでカラー設定ができるようにしたり、ランダムで色を変えるなど) 文字色によって、文字が読みにくくなる場合があります。この組み込みJSを使用すると、背景色からコントラストが高い文字色(黒系・白系)を設定できるようになります。

デモ

ラベル

ラベル

ラベル

<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: #333;" >ラベル</span>
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: tomato;" >ラベル</span>
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: skyblue;" >ラベル</span>

使い方

「js-contrast-color」クラスを振った要素の背景色から、その要素の文字色を変更します。

<span class="js-contrast-color">ラベル</span>

設定について

設定は data属性で指定します。

データ属性名詳細デフォルト値
data-black-color黒系の文字色のカラーをhex色で指定します#000000
data-white-color白系の文字色のカラーをhex色で指定します#ffffff
data-bg-colorコントラスト計算に使用する背景色を固定で指定します。要素の背景色
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" >ラベル</span>

キーワードをハイライトする

a-blog cmsでは、CMSでの検索結果ページで検索キーワードにマッチしている文字列をハイライト表示する設定が標準で実装されています。(Ver.1.2.1より)
この設定をおこなうと、検索キーワードにマッチした文字列に独自のスタイルを設定することができるため、検索結果内のどこに検索キーワードがマッチしているのかが分かりやすいというメリットがあります。

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

config.jsの内容

// 検索ワードのハイライト
searchKeywordHighlightMark: '.entry, .entryColumn, .entryTitle', 
searchKeywordMatchTag: 'mark',
searchKeywordMatchClass: 'highlight'


searchKeywordHighlightMark 検索結果ページで、ここで指定したセレクタ内に検索ワードが含まれているときに、該当部分がハイライトします。「.entry」の場合は、class="entry" の要素内に検索ワードが含まれていたらハイライトします。
searchKeywordMatchTag ハイライト部分に付与されるHTMLタグを指定します
searchKeywordMatchClass ハイライト部分に付与されるclass名です。ドット「.」なしで指定します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.searchKeywordHighlightMark = '.sample-contents'';
  ACMS.Config.searchKeywordMatchTag  =  'mark';
  ACMS.Config.searchKeywordMatchClass = 'sample-highlight';
});

検索文字列の指定

ACMS.Config.keywordに検索対象文字を代入

検索する文字列は「ACMS.Config.keyword」に検索対象の文字を代入することで指定できます。

例)「いろ」と「ほへ」を検索文字列として指定する

ACMS.Ready(function(){
  ACMS.Config.keyword = "いろ ほへ";
});

URLコンテキストにkeywordを指定

URLの末尾に「/keyword/検索したい文字列」を追記することで、ACMS.Config.keywordに自動で値が設定され、上記のJavaScriptを書かなくても文字列の検索が可能です。

https://example.com/keyword/いろ%20ほへ

keywordを検索するためのフォームを作成

また以下のようなフォームを用意することで自動でURLを組み立てることも可能です。ポイントとしては、1つのinput要素のname属性には「query」とvalue属性に「keyword」を指定し、もう1つのinput要素にはname属性に「keyword」とvalue属性に「検索したい文字列」を指定したものを用意することです。

<form action="" class="search-form" method="post" role="search" aria-label="検索フォーム">
  <input type="hidden" name="tpl" value="/entry.html">
  <input type="hidden" name="query" value="keyword">
  <input type="hidden" name="bid" value="6">
  <input type="text" name="keyword" class="search-form-text" value="" size="15" placeholder="検索キーワード">
  <span class="search-form-btn-wrap">
    <button type="submit" name="ACMS_POST_2GET" class="search-form-btn"><span class="acms-icon-search"></span></button>
  </span>
</form>

HTMLとCSSの編集

HTML

config.jsで指定したクラスをHTMLに記述します。

例)「.entry」を指定した場合 検索対象:

いろはにほへと

検索キーワード:「いろ」「ほへ」

検索結果:

<span class="highlight1">いろ</span>はに<span class="highlight2">ほへ</span>と

項目1の内容で指定した場合、class="entry"のあるdivが検索対象となり、検索キーワードにマッチしている文字列がある部分に自動でハイライト表示のスタイルが付与されます。

CSS

ハイライト表示のスタイル指定はCSSで以下のように記述します。例えば、「いろ」「ほへ」の検索結果では、「いろ」に「.highlight1」というクラスが付与され、「ほへ」に「.highlight2」というクラスが付与されます。 複数キーワードで検索されることが予想されるならその分スタイルを用意する必要があります。

例)

/* ハイライト */
.highlight1 {
	color: #000;
	background: #ffff66;
}
.highlight2 {
	color: #000;
	background: #a0ffff;
}
.highlight3 {
	color: #000;
	background: #99ff99;
}
.highlight4 {
	color: #000;
	background: #ff9999;
}
.highlight5 {
	color: #000;
	background: #ff66ff;
}
.highlight6 {
	color: #000;
	background: #880000;
}

ロールオーバー(js-rollover)

a-blog cmsでは、画像をロールオーバーする(hover時の画像切り替え)設定が標準で実装されています。(v1.2.1より)マウスカーソルを画像にhoverしたとき、画像ファイルの名前が自動で切り替わることでロールオーバーが実現できます。Webサイトのナビゲーション画像を切り替える場合などに利用できます。

デモ

デモ画像

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

rolloverImgMark    : 'img.js-rollover, img.imgover',
rolloverImgSuffix  : '_o',


rolloverImgMark ロールオーバーを適用させるセレクタを指定します。
rolloverImgSuffix ロールオーバー時に表示する画像ファイル名の末尾に付与される接尾辞です。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.rolloverImgMark = 'img.js-sample-rollover, img.js-sample-imgover';
  ACMS.Config.rolloverImgSuffix =  '_sample'
});

使い方

config.jsで指定した要素・属性をHTMLに記述します。

例)rolloverImgMarkを「img.js-rollover」、rolloverImgSuffixを「_o」と指定した場合

通常時(テンプレートに記述するソース):

<img src="xxx.gif" alt="xxx" width="100" height="15" class="js-rollover" />

ロールオーバー時(表示画面上でのソース):

<img src="xxx_o.gif" alt="xxx" width="100" height="15" class="js-rollover" />

マウスオーバー(js-hover)

a-blog cmsでは、マウスオーバーしている要素に任意のクラスを付与する(hover)機能の設定が標準で実装されています。(Ver. 1.3.0より)

例)

<div class="js-hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

div要素が表示されている部分にマウスオーバーすると、その要素自身に追加でクラスが付与されます。

マウスオーバーした時の出力ソースコード

<div class="js-hover hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

デモ

スタンダードライセンス

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

プロフェッショナル/エンタープライズライセンス

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

特別ライセンス

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-------
// hover
hoverMark   : '.js-hover',
hoverClass  : 'hover',


hoverMark ここで指定したセレクタにhoverClassで指定したクラスが付与されます。
hoverClass マウスオーバーした時に付与されるクラス名の指定です。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.hoverMark = '.js-sample-hover';
  ACMS.Config.hoverClass = 'is-hover';
});

使い方

HTML

指定したクラスをHTMLに記述します。

例)hoverMarkで「.js-hover」、hoverClassで「hover」と指定した場合

<div class="js-hover">
  <p>あああ</p>
  <p>いいいい</p>
  <p>うううう</p>
</div>

CSS

必要に応じてスタイルを指定します。

例)

.hover {
  background-color: #CCCCCC;
}