Jimdoでエレメントを追加した際に挿入されるCSSのclass名一覧

JimdoはクリックとドラッグでWebサイト作成ができる非常に画期的で手軽なツールです。しかしその便利さは、ガッチリしたシステムがあるからこそなのです。システムに逆らっちゃいけませんが、それでもCSSを微調整したい!というのはクリエイターの性。出現するclassを一覧にまとめました。

Screenshot 2013-06-19 19.10.39

Jimdoはクリックしてエレメントと呼ばれる内容を付け足して、Webサイトを構成していきます。kれにより、テキストや画像が簡単に挿入できるわけですね。そしてこのエレメントには必ず付与されるCSSのクラス名があります。

中にはプロパティは空だったりとルールはまちまちなのですが、このようなネーミングでclassが当たっている!ということを事前に何となくわかっていれば、それをきっかけにレイアウトの調整が可能です。

Jimdo レイアウト用クラス集

エレメントを中心にまとめています。この中でも特にキモとなるのは。<div class=”n”>でしょう。初期でheight: 1%と、padding: 5pxが付与されています。

Jimdoの独自レイアウトを利用して、自分で用意した見出しのCSSがちょっとズレる、なんて言うときはこのあたりを確認してみてください。

PDF版もあります:Jimdo-classes-cheatsheet

Jimdo クラスチートシート

用途タグClass名初期プロパティ・値出現場所
ページ別のレイアウトbodybody 全ページの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タグ
ナビゲーションのレイアウトulmainNav1 第一階層ページに該当するulタグ
mainNav2 第二階層ページに該当するulタグ
mainNav3 第三階層ページに該当するulタグ
alevel_1 第一階層ページに該当するaタグ
level_2 第二階層ページに該当するaタグ
level_3 第三階層ページに該当するaタグ
current 現在表示しているページに該当するaタグ
parent 現在表示しているページが子ページの場合、親ページに該当するaタグ
フッターのレイアウトdivleftrowfloat: left;
text-align: left;
width: 55%;
印刷用、サイトマップなどへのリンクを囲むdivタグ
rightrowfloat: right;
text-align: right;
width: 42%;
ログイン、ログアウトなどのリンクを囲むdivタグ
コンテンツメニューのレイアウトdivnheight: 1%;
padding: 5px;
コンテンツメニューから作成した各エレメントを囲むdivタグ
見出しエレメントdivj-headerpadding: 1px !important見出しエレメントを囲むdivタグ
写真エレメントdivj-imageSubtitle 写真エレメントを囲むdivタグ
文章エレメントdivj-text 文章エレメントを囲むdivタグ
写真付き文章エレメントdivj-textWithImage 写真付き文章エレメントを囲むdivタグ
カラムエレメントdivj-hgridpadding: 1px !important;カラムエレメントを囲むdivタグ
cc-m-hgrid-columnfloat: left;
padding: 0 2% 0 0;
min-height: 1px;
作成したカラムを囲むdivタグ
余白エレメントdivj-spacing 余白エレメントを囲むdivタグ
表エレメントdivj-table 表エレメントを囲むdivタグ
フォトギャラリーエレメントdivj-gallery フォトギャラリーエレメントを囲むdivタグ
ファイルダウンロードエレメントdivj-downloadDocument ファイルダウンロードエレメントを囲むdivタグ
leftDownloadwidth: 52px;
float: left;
ファイルのアイコンを囲むdivタグ
rightDownloadmargin-left: 55px;
padding-left: 6px;
ファイルのタイトルや説明が表示される部分を囲むdivタグ
フォームエレメントdivj-formnew フォームエレメントを囲むdivタグ
cc-m-form-view-elementclear: both;
padding: 5px;
position: relative;
フォームから作成したすべての項目を囲むdivタグ
cc-m-form-text テキストフィールド項目を囲む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タグ
水平線エレメントdivj-hr 水平線エレメントを囲むdivタグ
ゲストブックエレメントdivj-comment ゲストブックエレメントを囲むdivタグ
ulcom-listmargin: 0 0 15px 0;
padding: 0;
コメントを表示する部分全体を囲むulタグ
licommentstddisplay: block;
border-top: 1px solid #CCC;
padding: 12px 0 12px 0;
position: relative;
list-style: none;
list-style-image: none;
コメントを表示する部分全体を囲むulタグの直下のliタグ
YouTube等エレメントdivj-video YouTube等エレメントを囲むdivタグ
Flickrエレメントdivj-flickr Flickrエレメントを囲むdivタグ
Google マップエレメントdivj-googlemaps Google マップエレメントを囲むdivタグ
ウィジェットエレメントdivj-htmlCode ウィジェットエレメントを囲むdivタグ
商品エレメントdivj-product 商品エレメントを囲むdivタグ
商品カタログエレメントdivj-catalog 商品カタログエレメントを囲むdivタグ
RSSフイードエレメントdivj-rss RSSフィードエレメントを囲むdivタグ
Twitterエレメントdivj-twitter Twitterエレメントを囲むdivタグ
Facebookエレメントdivj-facebook Facebookエレメントを囲むdivタグ
Google+エレメントdivj-googleplus Google+エレメントを囲むdivタグ
シェアボタンエレメントdivj-sharebuttons シェアボタンエレメントを囲むdivタグ
ブログ表示エレメントdivj-BlogSelection ブログ表示エレメントを囲むdivタグ
j-blogarticlepadding: 5px 0;タイトルや日付を囲むdivタグ
datetimefloat: left;
width: 44px;
height: 45px;
margin: 0 10px 10px 0;
background: url(/s/img/cc/datesticker-bg.png) no-repeat center center;
ブログの日付を囲むdivタグ
dt-alignment-rightfloat: right;ブログの日付を囲むdivタグ
トップへ戻るボタンのレイアウトulcc-FloatingButtonBarContainerdisplay: block;
position: fixed;
z-index: 10100;
bottom: 54px;
right: 60px;
list-style-type: none;
トップへ戻るボタンを囲むulタグ
licc-FloatingButtonBarContainer-button-scroll-showdisplay: block;
margin-right: 2px;
float: left;
トップへ戻るボタンを囲むulタグの直下のliタグ
ショッピングカートのレイアウトdivcc-sidecart-headerbackground: #EEE;
margin-top: 10px;
padding: 7px 7px;
border-bottom: 1px solid #CCC;
color: #333;
タイトル「ショッピングカート」と上部の購入ボタンを囲むdivタグ
cc-sidecart-headerbackground: white;
padding: 10px 5px;
border-bottom: 1px solid #CCC;
min-height: 80px;
商品写真や商品名を囲むdivタグ 
cc-sidecart-calculationfont-size: 12px;
line-height: 16px;
text-align: left;
小計を囲むdivタグ
cc-sidecart-footeroverflow: hidden;
background: #EEE;
padding: 5px 7px;
margin-bottom: 10px;
border-top: 1px solid #CCC;
下部の購入ボタンを囲むdivタグ

Jimdoに関するハウツーサイト

この情報はJimdo虎の巻にも掲載されていますので、併せてぜひチェックしてみてください。

tora

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。