sample

テンプレートファイルにコーディングしたものへジャンプ▼
↓↓ブロックエディタで入力したもの↓↓

投稿のタイトル用の見出しです。投稿のタイトル用の見出しです。投稿のタイトル用の見出しです。

見出し１見出し１

テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入りますテキストが入ります

見出し２

見出し２

見出し２

最初の文字を赤くするには右側パネル＞スタイル＞最初の文字を赤く

テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります

見出し３

見出し３装飾有り

テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります

見出し４

見出し４赤丸20px=1.25rem　フォントサイズはブロックエディタの機能で指定してください

見出し４赤丸18px=1.125rem　フォントサイズはブロックエディタの機能で指定してください

フォントサイズは必ずrem単位にしてください。
計算式は「設定したい値÷16」です。
例：20pxにしたい場合は20 ÷ 16 = 1.25rem

見出し４装飾有り

テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります

見出し５
見出し５装飾有り

テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります

見出し６

テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります テキストが入ります

  1. リスト項目です
  2. リスト項目です
  3. リスト項目です
  • リスト項目です
  • リスト項目ですリスト項目ですリスト項目ですリスト項目ですリスト項目ですリスト項目ですリスト項目ですリスト項目ですリスト項目です
  • リスト項目です

↑この区切り線は、「区切り」ブロックの「幅広線」を選択することで実装できます。

タイトルタイトル
タイトルテキストテキストテキストテキスト
タイトルテキストテキストテキストテキスト
タイトルテキストテキストテキストテキスト
「デフォルト」を選択した場合のデザインです。タイトル部分は「HTMLとして編集」から手動でthタグにしてください。
※デフォルトのテーブルブロックです。基本的には使わないでください。
タイトルタイトル
タイトルテキストテキストテキストテキスト
タイトルテキストテキストテキストテキスト
タイトルテキストテキストテキストテキスト
「ストライプ」を選択した場合のデザインです。タイトル部分は「HTMLとして編集」から手動でthタグにしてください。
※デフォルトのテーブルブロックです。基本的には使わないでください。
タイトルタイトル段落のテキストが入ります。段落のテキストが入ります。
タイトルタイトル段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。
タイトルタイトル段落のテキストが入ります。段落のテキストが入ります。
flexible table blockで作成したテーブルです。
タイトルタイトル
テキストテキストが入ります
テキストテキストが入ります
flexible table blockで作成したテーブルです。基本的には従来のテーブルブロックではなくこちらを使用してください。
タイトルタイトル
テキストテキストが入ります
テキストテキストが入りますテキストリンク
flexible table blockで作成したテーブルです。基本的には従来のテーブルブロックではなくこちらを使用してください。
タイトル
dldtddタグによる説明リストです。dlタグにクラスdl-standardを指定するとこちらの見た目になります。
タイトル
カスタムHTMLです。
ボタン
ボタン
ボタン
ボタン

テキストリンク

テキストリンク

テキストリンク

別窓へのリンクボタンは「高度な設定＞追加 CSS クラス」にicon-newtabを、
PDFへのリンクボタンは 「高度な設定＞追加 CSS クラス」 にicon-pdfを入力してください。

運用しやすい設計・構築

グループ要素です。右側パネルから背景色を指定しています。
余白や角丸は追加CSSに「br-10 py-12 px-6 px-lg-12」とすることで設定しています。

小見出しはこちら小見出しです小見出しはこちら小見出しです

グループ要素を灰色の枠線付きの見た目にしたい場合は高度な設定＞追加CSSクラスに「gray-border-box」を入力してください。

影付きボックス。
右側パネル＞スタイル＞影付きから選択できます。
影の内側の余白はpx-n、py-n、p-nでつけてください。
影の外側の余白はmx-n、my-n、m-nでつけてください。

色＞背景から背景色を指定できます。

スペーサー↓

スペーサー↑
余白は高度な設定＞mb-nで微調整

↓実績用パネル。パネルブロック＞高度な設定＞追加css＞achievement-panelsで実装できます。
パネルの子要素は「パネル（自由入力 / ブロックリンク）」です。

実績用パネル

●●●●様採用サイト

●●●●様採用サイト

●●●●様採用サイト

●●●●様採用サイト

〇〇〇につながりました

お客様の声。
グループブロックとカラムブロックで実装しています。

見出しのフォントサイズは右側パネルからrem単位で指定しています。

〇〇〇につながりました

お客様の声。
段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。段落のテキストが入ります。

Q
質問が入ります
A

Snow Monkey Blocks製です。

Q
質問が入ります
A

回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります
回答が入ります回答が入ります回答が入ります回答が入ります

Q
質問が入ります
A

回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります
回答が入ります回答が入ります回答が入ります回答が入ります

↑↑ブロックエディタで入力したもの↑↑
↓↓テンプレートファイルにコーディングしたもの↓↓

v3についての説明

v3は脱Bootstrapしました。
フレックスボックス周りはBootstrapを踏襲したユーティリティクラスを用意してあります。
余白については0.25rem刻みでpt-1、mb-5といったクラスを使用可能です。
0.25rem刻みで、12まで用意してあります。
変更を加えたい場合は必要に応じてcss/scss/utility/_margin.scss及び_padding.scssを編集してください。
rowやcolは、Bootstrapと似たような感覚で使用できます。
ただし、カラム間の余白はデフォルトでは付いていません。
「.sidespace-□」を使用することで、左右の余白のサイズを調整できます。
「.side-space-□」はデフォルトでは0～6まであります。0.25rem刻みです。
指定すると指定した要素の左右にネガティブマージン、子要素の左右にpaddingが適用されます。 「side-space-sm-3」といった具合にブレイクポイント毎に余白サイズを変更することも可能です。
「.vertical-space-□」はrow-gapです。
row-gapは各カラムにmargin-bottomを指定するのと違って、一番下の段に余白が付かないので調整しやすいです。
side-spaceと同様0.25rem刻みで、ブレイクポイント毎に余白サイズを変更することも可能です。
「align-items-center」はありますが、「align-items-start」や「align-items-lg-center」はありません。
htmlがごちゃごちゃしすぎるのを防ぐために使用頻度の低そうなものは敢えて採用していません。
containerのサイズはデフォルトではBootstrapから-24pxしたものを用意してあります。
定義はcss/scss/base/_variables.scssとcss/scss/layout/_container.scssで行っています。
案件に応じて自由に編集してください。
※Bootstrapと違い、containerそのものには左右にpaddingを付けていません。
定義した横幅と、実際にコンテンツが収まる幅が違うとややこしいためです。
左右の余白は、基本的にはcontainerの外側の要素（sectionタグ等）にpx-basicを付けることで確保するという形にしたいと思っています。

Title Pattern 1

class="ttl-pattern-1 ttl-pattern-1--left"を指定するとこちらの見た目になります。

Title Pattern 1

class="ttl-pattern-1 ttl-pattern-1--center"を指定するとこちらの見た目になります。

見出しパターン２添え字有り

TITLE SUB

見出しパターン２添え字有り

TITLE SUB

見出しパターン２添え字有り

TITLE SUB

見出しパターン２

見出しパターン２

見出しパターン２

class="ttl-pattern-2"を指定するとこちらの見た目になります。

見出しパターン３

class="ttl-pattern-3"を指定するとこちらの見た目になります。

見出しパターン４

class="ttl-pattern-4"を指定するとこちらの見た目になります。

見出しパターン５

class="ttl-pattern-5"を指定するとこちらの見た目になります。

見出しパターン６

class="ttl-pattern-6"を指定するとこちらの見た目になります。

Title Pattern 7

TTL PATTERN 8

見出しパターン８

class="bg-lightgray p-5"とするとこのようになります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  1. class="ol-standard"を指定したリスト項目です。
  2. リスト項目（ol）です
  3. リスト項目（ol）です
  • class="round-list"を指定したリスト項目です
  • リスト項目（ul）です
  • リスト項目（ul）です
タイトル
dldtddタグによる説明リストです。dlタグにクラスdl-standardを指定するとこちらの見た目になります。
タイトル
dldtddタグによる説明リストです。
タイトル
dldtddタグによる説明リストです。dlタグにクラスdl-borderを指定するとこちらの見た目になります。
タイトル
dldtddタグによる説明リストです。
tableタグに「table-standard」を指定してください。なお、ブロックエディタのものと異なり、スマホ版ではカラム落ちします。
Tableです テキストテキストテキスト
タイトル table-standard
タイトル テキストテキストテキスト
タイトル テキストテキストテキスト
tableタグに「table-stripes」を指定してください。なお、ブロックエディタのものと異なり、スマホ版ではカラム落ちします。
Tableです テキストテキストテキスト
タイトル テキストテキストテキスト
タイトル テキストテキストテキスト
タイトル テキストテキストテキスト
ボタン
ボタン
ボタン
ボタン

aタグに「btn-pattern-1 btn-pattern-1--size-standard」クラスを指定するとこちらの見た目になります。
別窓用ボタンは「btn-pattern-1--icon-newtab」、PDFボタンは「btn-pattern-1--icon-pdf」クラスを追記することで適用されます。

クラスにbtn-pattern-1--size-largeを加えたもの。
クラスにbtn-pattern-1--bg-whiteを加えたもの。

ボタンのバリエーションを作成する際は新たにwidthを指定したクラスを作成し、class="btn-pattern-1 btn--モディファイア名"としてください。

詳細はこちら
詳細はこちら
詳細はこちら
詳細はこちら
詳細
テキストリンク
テキストリンク
テキストリンク

「text-link」クラスを指定すると上記のようになります。
「text-link text-link--icon-newtab」「text-link text-link--icon-pdf」とするとアイコンが付きます。

クラス「scroll-check」を付けると、スクロールに反応して「scrolled」が付きます。
フェードインエフェクト等に使用できます。
※「scroll-check」に直接cssを指定するのではなく、任意のクラスを新たに足して見た目を指定してください。
最初から開いた状態にするには style="display: none;"がない状態にすればOKです。
モーダル１の中身
吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突-起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。


吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突-起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

タブ機能です。敢えて見た目を整える用のスタイルは当てていません。

タブ１のコンテンツ
jsはこのテンプレに記述してあります。
１ページ内の複数個所にタブを実装する場合は「特定のタブに直接遷移する時用の記述」にカスタマイズが必要になってきたりすると思うので、custom.jsには記述していません。
実際にタブ機能を実装する際はparts-footerjsにコピペの上必要に応じてカスタマイズを行ってください。
js-tab-buttonのidとjs-tab-contentsのaria-labelledbyを、
js-tab-buttonのaria-controlsとjs-tab-contentsのidを同じにものにして紐づけをします。
aria-labelledbyやaria-controls、role属性の記述がなくても動作には支障ありませんが、多少はアクセシビリティを意識したいためこのようにしてあります。
「js-」と接頭辞が付くクラスはjsの動作用のものなので、決してスタイルを当てないでください。
タブの命名規則が統一されたものでない（同じ文字列＋数値ではない）場合でも動作します。
「item-1 item-2」のような名前でなく、コンテンツの内容に応じたもの（例：orange,peach等）でOKです。

before-dotを付けると文頭に・が付きます。
改行されても記号の下に文字は回り込みません。

before-asteriskを付けると文頭に※が付きます。
改行されても記号の下に文字は回り込みません。

↑↑テンプレートファイルにコーディングしたもの↑↑
CONTACT

WEBサイト・システム・採用サイト領域のご相談はお気軽にお寄せください。何かお役に立てることがあるかもしれません。

お問い合わせ・ご相談