Tweet

Share on Tumblr

Jimdo（以下、ジンドゥークリエイター）の標準レイアウトは、CSSやJavaScriptを使ってカスタマイズすることができます。CSSを使ったカスタマイズは、ページ内の特定の要素のスタイルを変更することで可能で、要素のID属性やCLASS属性を指定して行います。

このとき、ID属性を指定してカスタマイズするととても楽な反面、複数の同じフォーマットのページを作るときには、都度カスタマイズしているCSSのコードを書き足したりページ毎に追加していく必要があり実用的ではありません。そこで今回は、フォーマット化されているページのカスタマイズ方法について紹介します。今回は初心者向けではなく、上級者向けのテクニックとなるため、CSSに精通していない人はちょっとわかりにくい内容となっていますことご承知おきください。

ID属性指定がダメな理由

ジンドゥークリエイターで制作されているページのほとんどの要素には、ID属性が定義されています。ID属性の値はページ内で一意の値を取る必要があるため、ページ内では同一名の値が出現することがありません。そのため、特定の要素をピンポイントで抽出してスタイルを定義するのにはとても便利な指定方法です。

ただし、ID属性でスタイルを定義する際に注意が必要な点があります。それは、カスタマイズ済みのページを複製して再利用する場合です。

このパターンで良くあるのが、複数の商品やサービスを取り扱っているサイトで、ページのデザインは同じだけれどもページ内の商品画像やテキストだけが違う複数のページを作る場合です。

ジンドゥークリエイターのProプラン以上では、ページの複製機能が使えるので同じフォーマットのページを複製しながら内容だけを書き換えてページを増やしていけるのでとても便利なのですが、同一フォーマットのページを複製して使う場合、複製の度にID属性が再発行されるため、カスタマイズ済みの元となるページを複製すると、複製されたページのカスタマイズが解除されます。

そのため、ページの複製の度にカスタマイズコードのID属性値を変える作業が必要になります。HTMLやCSSに精通している人であれば、書き換えの作業自体は面倒くさいと思う以外はさほど問題はないのですが、クライアントがページを複製して新商品を追加するような際には、結構難易度があがります。

そのため、ID属性を指定したカスタマイズはかなり慎重に行う必要があるのです。

特定の位置にある特定の要素を指定してデザインを変更

CSS3では、CSS2.1以前よりもスタイルの指定方法が増え、多くのブラウザがその指定方法に対応してきたこともあり、複雑なデザインレイアウトを実現できるようになってきました。

例えば、表を1行おきに背景を変えて指定するといったことや、特定の要素の中のn番目に出現する要素に対してのみスタイルを定義するといったことなど、よりプログラム言語に近い方法でスタイルの指定ができるようになっています。

定型フォーマットのページでは、ページ内の構成はすべて同じというパターンがほとんどだと思います。例えば、

1. 大見出し
   1. リード文
   2. 中見出し
      1. 商品画像
      2. 商品概要
      3. 商品詳細情報
      4. 画像
   3. 中見出し
      1. 注意書き文章

このようなパターンのコンテンツでページが構成さえていて、商品毎に内容だけが異なるようなページの場合、それぞれの要素の出現順位も同じです。

そのため、スタイル指定をする際に、:nth-child() 擬似クラスを使うことで、ID属性値に左右されないスタイル指定ができるのでオススメです。

実際にどのように定義するのかをサンプルサイトをベースに解説していきます。

子セレクタ、隣接セレクタとの組合せで:nth-child() 擬似クラスを活用

:nth-child()疑似クラスというセレクタは、起点となる要素からみたn番目の要素を指定することができます。このコードは、あるサイトを実装した際に定義したidセレクタです。

    #cc-m-12794932199  {
        margin-left: -50%;
        padding-left: 50% !important;
        background: #DFEDEE;
        margin-top: 50px;
    }

ただし、先述の通りページ複製機能を使ってページ複製をすると、id属性値が変わりスタイルが外れてしまうので、以下のコードに書き換えて、ページ複製時もスタイルが外れないようにしました。

    #content_start + div > div:nth-child(5)  {
        margin-left: -50%;
        padding-left: 50% !important;
        background: #DFEDEE;
        margin-top: 50px;
    }

普通に考えれば、idセレクタで指定してしまえば非常に簡単なのですが、なぜこのような複雑な指定にしたのか、まずはこのコードが何を意味するのかを解説します。

まずこのセレクタの意味は、「id属性値content_startを持つ要素に隣接しているdiv要素の直接の子要素である5番目のdiv要素」という意味になります。id属性値content_startは、ジンドゥークリエイターのコンテンツが入るエリアの最初に必ず書かれているdiv要素で、コンテンツエリアの最初以外に出現しません。このdiv要素に隣り合っているdiv要素の中に編集画面では「コンテンツの追加」でコンテンツが追加されていくのですが、このdiv要素はclass属性は指定されて居らず、id属性のみが定義されています。ジンドゥークリエイターでは、id属性値はページ内だけでなくページ毎にも全く異なる値が定義されるので、id属性は指定せず、id属性値content_startを持つ要素に直接隣り合っている要素を指定しています。これが「+」に当たる部分です。

セレクタ同士を「+」で繋ぐのは、隣接セレクターと呼ぶもので、特定の要素に隣り合っている要素を指定します。例えば、

<div id="content_start"></div>
<div id="cc-matrix-3341814599">（コード省略）</div>
<div id="cc-matrix-3341815600">（コード省略）</div>

このようなコードがあった場合、「#content_start + div」の指定は、最初のid属性値cc-matrix-3341814599を持つdiv要素にのみ適用されます。「#content_start div」の場合は、#content_startを持つ要素内のDIV要素を指定することになるので、「+」で繋ぐことで、隣り合った要素を指定することができます。

続いて、「#content_start + div > div:nth-child(5)」の「div > div:nth-child(5)」の解説です。要素同士を「>」で繋いで指定をする場合、親要素の直接の子要素を指定することができます。ジンドゥークリエイターの場合、編集画面上でコンテンツエリアを指定するために多くのdiv要素が出現しているため、親要素配下すべてのdiv要素にスタイルが定義されてしまい、意図した表示になりません。そのため、要素をよりピンポイントで指定するために、「>」で繋ぎます。

このとき直接の子要素として指定した要素が、htmlの要素だと直接の子要素divすべてに適用されてしまうので、さらに場所を特定させる必要があります。そこで使うのが:nth-child() 擬似クラスです。

「div > div:nth-child(5)」は、div要素の直接の子要素の5番目のdivを指しています。この例を以下のコードで解説します。

これは、ジンドゥーで作られているとあるサイトの実際のコードです。「div > div:nth-child(5)」の最初のdivは、このコードで言うところにid属性値「cc-matrix-2241814599」だけが定義されているdivを指します。そのコードの上部にある「content_start」を持つdiv要素の取り合っているdivでもあります。その部分が「#content_start + div」ということになります。そして、直接の子要素であるdiv要素は「div > div」で指し示されており、合計12のdiv要素で構成されています。

「#content_start + div > div:nth-child(5)」が指定している部分はマーキングしている部分になります。本来であれば、id属性値で指定するのが最も簡単なのですが、ページの複製を行うとid属性値が変わるため、このマーキングされている部分にピンポイントでスタイルを定義するために、このような複雑なコードを用いています。「#content_start + div > div:nth-child(5)」で指定することで、「#content_start + div」内すべてのdiv要素に適用されるわけではなく、あくまでも「cc-matrix-2241814599」のid属性をもったdiv要素内にある5番目の直接の子要素divだけにスタイルを定義することができるのです。

このページは、複製されて再利用されることを前提とした、サービスの詳細ページなのですが、ページの構造として、

• 余白コンテンツ
• キャッチ用イメージ
• 大見出し
• リード文
• カラム1　←　ここにスタイルを当てたい
• 余白コンテンツ
• カラム2
• 余白コンテンツ
• カラム3
• 余白コンテンツ
• ボタン
• 余白コンテンツ

となっていて、最初に出てくるカラムコンテンツにスタイルを適用させたかったので、この構造が崩れない前提でスタイルを定義したのが、#content_start + div > div:nth-child(5)の指定になります。

:nth-child() 擬似クラスは完璧ではない

ここで注意が必要なのが、5番目に出現するdivという指定方法の危うさです。先述の通り、定型フォーマットを意識して構造が変わらない前提であるため、カラム1の前にコンテンツの追加で他のコンテンツが入ってくると、カラム1は直接の親要素からみると6番目のdivとなるため、スタイルが適用されなくなります。

そういう点では、コンテンツ追加に対して厳密に行う必要があるため、運用時にはここは注意が必要です。

もう一つ注意があります。それは、編集画面とは見た目が異なる点です。:nth-child()擬似クラスは、要素の出現順位をカウントするため、出現順位が異なると想定外の所にスタイルが定義されます。ジンドゥーの編集画面では、ブラウザビューの時と異なり、編集時にのみ出現するコードがあります。その影響でブラウザビューをベースにカウントしていたdivの数が異なり、編集画面上で表示が変わったりスタイルが定義されていないと言うことが起こります。そのため、編集時の画面とブラウザ表示が異なる旨をあらかじめ運用者に伝えておく必要があります。みたまま編集というジンドゥーの利点を損なうという点を鑑みると、:nth-child()擬似クラスを積極的に利用することはお勧めできません。

ただし、そういった点を含めて問題を感じないような状況に置いては、非常に便利なセレクタであることは間違いありません。特に、position:relativeで要素の位置を変えるようなトリッキーなことを行うような場合、かえって編集ができないような状況が起こりうることがあるのですが、:nth-child()擬似クラスを使用することで編集画面上ではスタイルが適用されず、それによって編集ができるようになるといった利点もあります。

利用用途はかなり制限されますが、複製されることを前提としたページのカスタマイズは、:nth-child()擬似クラスを上手に活用することで、コード編集を改めて行う必要が無いという点に置いては有効な手段だと思います。

それでは！

ジンドゥークリエイターのカスタマイズ本書きました！

Tweet

Share on Tumblr