Jimdoクラス名一覧

Jimdoの独自レイアウト作成に役立つチートシートを配布します。

レイアウトを調節するのに使用するであろうクラス名をまとめたチートシートです。

Jimdoクラス名一覧
独自レイアウトに役立つクラスの一覧です。
Jimdoクラス集.pdf
Adobe Acrobat ドキュメント 71.2 KB
用途 タグ Class名 初期プロパティ・値 出現場所
ページ別のレイアウト body body   全ページのbodyタグ
cc-page   全ページのbodyタグ
cc-content-parent   全ページのbodyタグ
cc-page-index   トップページ、利用規約ページ、返品条件ページ、ショップ情報ページ、精算ページ、サイトマップページのbodyタグ
cc-pageindex   トップページ、利用規約ページ、返品条件ページ、ショップ情報ページ、精算ページ、サイトマップページのbodyタグ
cc-pagemode-default   トップページ、下層ページ、概要ページ、ブログページのbodyタグ
cc-pagemode-sitetemplate   利用規約ページ、返品条件ページ、ショップ情報ページ、精算ページのbodyタグ
cc-pagemode-overlay   プライバシーステートメント、サイトマップページのbodyタグ
cc-page-blog   ブログページのbodyタグ
ナビゲーションのレイアウト
navi(standard)
ul mainNav1   第一階層ページに該当するulタグ
mainNav2   第二階層ページに該当するulタグ
mainNav3   第三階層ページに該当するulタグ
a level_1   第一階層ページに該当するaタグ
level_2   第二階層ページに該当するaタグ
level_3   第三階層ページに該当するaタグ
current   現在表示しているページに該当するaタグ
parent   現在表示しているページが子ページの場合、親ページに該当するaタグ
ナビゲーションのレイアウト
navi(nested)
ul cc-nav-level-0    第一階層ページに該当するulタグ
 j-nav-level-0   第一階層ページに該当するulタグ
cc-nav-level-1   第二階層ページに該当するulタグ
j-nav-level-1   第二階層ページに該当するulタグ
cc-nav-level-2   第三階層ページに該当するaタグ
 j-nav-level-2   第三階層ページに該当するaタグ
フッターのレイアウト div leftrow float: left; 印刷用、サイトマップなどへのリンクを囲むdivタグ
text-align: left;
width:  55%;
rightrow float: right; ログイン、ログアウトなどのリンクを囲むdivタグ
text-align: right;
width:  42%;
コンテンツメニューのレイアウト div n height: 1%; コンテンツメニューから作成した各エレメントを囲むdivタグ
padding:  5px;
見出しエレメント div j-header padding:  1px !important 見出しエレメントを囲むdivタグ
写真エレメント div j-imageSubtitle   写真エレメントを囲むdivタグ
文章エレメント div j-text   文章エレメントを囲むdivタグ
写真付き文章エレメント div j-textWithImage   写真付き文章エレメントを囲むdivタグ
カラムエレメント div j-hgrid padding:  1px !important; カラムエレメントを囲むdivタグ
cc-m-hgrid-column float: left; 作成したカラムを囲むdivタグ
padding:  0 2% 0 0;
余白エレメント div j-spacing min-height: 1px; 余白エレメントを囲むdivタグ
表エレメント div j-table   表エレメントを囲むdivタグ
フォトギャラリーエレメント div j-gallery   フォトギャラリーエレメントを囲むdivタグ
ファイルダウンロードエレメント div j-downloadDocument   ファイルダウンロードエレメントを囲むdivタグ
leftDownload width:  52px; ファイルのアイコンを囲むdivタグ
float: left;
rightDownload margin-left: 55px; ファイルのタイトルや説明が表示される部分を囲むdivタグ
padding-left: 6px;
フォームエレメント div j-formnew   フォームエレメントを囲むdivタグ
  clear:  both;  
cc-m-form-view-element padding:  5px; フォームから作成したすべての項目を囲むdivタグ
cc-m-form-text position: relative; テキストフィールド項目を囲むdivタグ
cc-m-form-email   メールアドレス項目を囲むdivタグ
cc-m-form-calendar   カレンダー項目を囲むdivタグ
cc-m-form-textarea   テキストエリア項目を囲むdivタグ
cc-m-form-number   数字項目を囲むdivタグ
cc-m-form-select   ドロップダウンリスト項目を囲むdivタグ
cc-m-form-radio   ラジオボタン項目を囲むdivタグ
cc-m-form-check   シングルチェックボックス項目を囲むdivタグ
cc-m-form-checkgroup   複数チェックボックス項目を囲むdivタグ
cc-m-form-subheading   カテゴリータイトル項目を囲むdivタグ
cc-m-form-view-captcha   スパム防止項目を囲むdivタグ
cc-m-form-view-submit   送信ボタンを囲むdivタグ
水平線エレメント div j-hr   水平線エレメントを囲むdivタグ
ゲストブックエレメント div j-comment   ゲストブックエレメントを囲むdivタグ
ul com-list margin: 0 0 15px  0; コメントを表示する部分全体を囲むulタグ
li commentstd padding:  0; コメントを表示する部分全体を囲むulタグの直下のliタグ
display: block;
border-top:  1px solid  #CCC;
padding:  12px 0 12px  0;
position: relative;
list-style: none;
YouTube等エレメント div j-video list-style-image: none; YouTube等エレメントを囲むdivタグ
Flickrエレメント div j-flickr   Flickrエレメントを囲むdivタグ
Google マップエレメント div j-googlemaps   Google マップエレメントを囲むdivタグ
ウィジェットエレメント div j-htmlCode   ウィジェットエレメントを囲むdivタグ
商品エレメント div j-product   商品エレメントを囲むdivタグ
商品カタログエレメント div j-catalog   商品カタログエレメントを囲むdivタグ
RSSフイードエレメント div j-rss   RSSフィードエレメントを囲むdivタグ
Twitterエレメント div j-twitter   Twitterエレメントを囲むdivタグ
Facebookエレメント div j-facebook   Facebookエレメントを囲むdivタグ
Google+エレメント div j-googleplus   Google+エレメントを囲むdivタグ
シェアボタンエレメント div j-sharebuttons   シェアボタンエレメントを囲むdivタグ
ブログ表示エレメント div j-BlogSelection   ブログ表示エレメントを囲むdivタグ
j-blogarticle padding:  5px 0; タイトルや日付を囲むdivタグ
datetime float: left; ブログの日付を囲むdivタグ
width:  44px;
height: 45px;
margin: 0 10px 10px 0;
background:
url(/s/img/cc/datesticker-bg.png)
no-repeat center center;
dt-alignment-right float: right; ブログの日付を囲むdivタグ
トップへ戻るボタンのレイアウト ul cc-FloatingButtonBarContainer display: block; トップへ戻るボタンを囲むulタグ
position: fixed;
z-index:  10100;
bottom: 54px;
right: 60px;
list-style-type: none;
li cc-FloatingButtonBarContainer-button-scroll-show display: block; トップへ戻るボタンを囲むulタグの直下のliタグ
margin-right:  2px;
float: left;
ショッピングカートのレイアウト div cc-sidecart-header background: #EEE; タイトル「ショッピングカート」と上部の購入ボタンを囲むdivタグ
margin-top: 10px;
padding:  7px 7px;
border-bottom: 1px solid #CCC;
color: #333;
cc-sidecart-header background: white; 商品写真や商品名を囲むdivタグ 
padding:  10px 5px;
border-bottom: 1px solid #CCC;
min-height: 80px;
cc-sidecart-calculation font-size:  12px; 小計を囲むdivタグ
line-height: 16px;
text-align: left;
cc-sidecart-footer overflow: hidden; 下部の購入ボタンを囲むdivタグ
background: #EEE;
padding:  5px 7px;
margin-bottom: 10px;
border-top:  1px solid  #CCC;
Jimdoクラス名一覧
Jimdoクラス集.pdf
Adobe Acrobat ドキュメント 71.2 KB

 最後までお読みいただきありがとうございます!いかがでしたか?

このページが参考になったら、ぜひ左のボタンでFacebookかTwitterにシェアしていただけると嬉しいです!

押してくれたらもっとこうしんするぴ!