あなたのように見えます'IE11を使用して再…

webデザインで使用される”breadcrumb”という用語について初めて聞いた場合、それがどのように見えるかをお見せしましょう。

私はあなたが訪問したウェブサイトでそれに遭遇したと確信しています。 さて、あなたの上に一つを追加してみましょうwebsite.To ブレッドクラム要素を追加し、要素パネルで”ブレッドクラム”を検索し、ブレッドクラム要素をコンテンツペインにドラッグします。

次のようなものが表示されます。

ビルダーやCornerstoneに表示されているテキストは、サイトのフロントエンドに表示される実際のテキストではありません。 それは単なるプレースホルダです。 フロントエンドには、webページの階層が表示され、左端にホームへのリンクから始まり、さらに右側に1つの子が移動します。この場合、作成しているページは会社概要であり、この例では会社概要ページの子であるため、構造は次のとおりです。Home>>会社

設定フィールドグループの下に、次のフィールドが表示されます。

ホームラベルタイプ

ホームページリンクにプレーンテキスト（ホームなど）を使用するか、代わりにアイコンを使用するかを選択できます。

Home Label

上記のホームラベルタイプフィールドでテキストを選択した場合、テキストを”Home”から他のもの（例：ブログ、ニュース）に変更することができます。

アイコンを選択した場合、使用するアイコンを選択するオプションが表示されます。

幅&最大幅

ブレッドクラム要素のデフォルトの幅を設定できます。 また、最大幅を設定して、その幅を超えないようにすることもできます。

Justification&Direction

ブレッドクラム要素のFlex CSSプロパティの設定を変更できます。 Flexboxに精通していない場合は、ここで役立つ紹介があります。

背景

要素に背景色を追加することができます。

ブレッドクラム要素のフォント、余白、パディング、ボックス影、境界線、境界線の半径を設定できます。 これらのプロパティは、コントロールパネルに表示されます:

言及されたこれらのプロパティは、設定された場合、breadcrumb要素全体であり、前記要素内の個々のリンクではないことに注 つまり、パディングを設定すると、要素全体に適用されます。

後では、ブレッドクラム内の個々のリンクを設定する方法について説明します。

ブレッドクラムでは、”区切り文字”は各リンクの区切り文字です。

デフォルトの区切り文字は矢印ですが、それを変更して完全に削除することもできます。 設定は、Delimeter Setupフィールドグループにあります。

さて、個々の設定について説明しましょう。

Enable

デフォルトでは、区切り文字はオンになっていますが、オフにすることができるため、区切り文字は削除されます。

区切り文字の種類

前に説明した設定フィールドグループのホームラベルの種類と同様に、区切り文字の種類にテキストまたはアイコンを使用するかどうかを選択できます。 私たちが”テキスト”と言うとき、それは必ずしも言葉を意味するものではありませんが、言葉は許可されています。 一般的に使用されているのはASCIIコードです。 デフォルトの区切り文字→は、矢印を生成するASCIIコードです。

区切り文字の種類としてIconを選択すると、使用するアイコンを選択するアイコンセレクタフィールドが表示されます。

LTR&RTLデリミタ

LTRは”左から右”を意味し、RTLは”右から左”を意味します。 これらは基本的に私たちが手紙をどのように読むかの方向性を意味します。 たとえば、この記事を左から右に読んでいるので、これはLTRです。 アラビア語やヘブライ語のような言語は、右から左に行く彼らの文字や単語を読んでいます。

一部のウェブサイトでは、LTRとRTLの両方がサポートされている複数の言語をサポートしています。 この設定では、ltr区切り文字だけでなく、RTLが有効になっているときに使用するものも設定できるようにすることで、ブレッドクラム区切り文字

間隔

ここに入力した値は、区切り文字の左側と右側の両方の距離として設定されます。 したがって、値として10pxを設定すると、各区切り文字の左側に10pxのスペースがあり、右側に別の10pxがあります。

リンクの設定は、セットアップとデザインの設定を組み合わせたものと実質的に同じです。 主な違いは、リンクの設定は個々のリンクに固有であり、最初の2つは階層リンク要素自体に適用されることです。

リンク設定では、マウスがリンク上にホバリングしているブレッドクラム内のすべてのリンクのテキスト色と背景色を設定することもできます。

Customize

customizeセクションは、HTML、CSS、Javascriptを使用している場合、要素をカスタマイズするためのコントロールで構成されています。

• ID-要素のHTML IDを設定するには、このオプションを使用します。 IDはページ上で一意である必要があります。
• Class-要素のHTMLクラスを設定するには、このオプションを使用します。 このクラスは、カスタムCSSコードに使用できます。
• 要素CSS-このオプションを使用して、要素の内部タグにアクセスするために要素をよりよく制御するには、$elをCSS選択として使用します。 詳細はこちらをクリックしてください。
• ブレークポイント中に非表示-このオプションを使用して、さまざまなデバイスサイズの要素を非表示にします。 より多くの情報のためにここにかちりと鳴らしなさい。
• カスタム属性-このオプションを使用して、要素のラッパー HTMLタグにカスタム属性を追加します。 たとえば、data-info=123などです。 このオプションを使用すると、カスタマイズコードで使用する要素にカスタム情報を挿入できます。

Demo

Breadcrumbs要素のライブデモを見るにはここをクリックしてください。

Summary

わずか数分で、Cornerstone/Content Builderにブレッドクラムを追加して設定する方法を学びました。 ブレッドクラム要素とその個々のリンクを設計する方法を学びました。 最後に、あなたはまた、あなたの好みに合わせて区切り文字を設定する方法を学びました。