カエテンジョイSeesaa版(旧デザインシステム)

記事装飾パーツ(ショートコード)

●掲載ソースを追加して正しく表示されないときは次を確認ください。

 

・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。

・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。

 

●画像は説明用のイメージサンプル画像です。

 

実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。

 

●CSS/HTMLソースの行数の番号/色は説明用です。

 

実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。

記事装飾パーツ(ショートコード)

個別記事内の見出しタグについて

カエテンジョイは、
これまでのKAETEN・カエテンクロスとは h1〜h4 の割当てが違い、こちらで説明しているとおり
個別記事では h2〜h6 が使えて、h4〜h6 はデザイン指定をしていません。

また、見出しデザインの種類を増やすために記載方法が違います。
<h3>タイトル</h3>とだけ入力しても見出しデザインは表示されません。

下記で紹介するマニュアルサイトで説明している記載方法で入力してください。
例:h3見出しタグの場合 <h3 class="h3-00">タイトル</h3>と入力ください。




次の記事装飾パーツを予めご用意しています。

●見出しH2タグ
●見出しH3タグ
●ul・olリストタグ
●パーツタグ
●テーブルタグ
●引用タグ

記事装飾パーツは、
個別記事・サイドバー・メインカラムとフッターのフリースペースで利用できます。

記事装飾パーツはショートコードとして登録しています。
ショートコードをコピペするだけで使えます。



記事装飾パーツは次の2種類があります


1.基本記事装飾パーツ (メインCSSに記載済みです)
2.追加記事装飾パーツ (専用CSSのアップロードが必要です)



追加記事装飾パーツを利用する場合


追加記事装飾パーツの専用CSSをアップロードしてください。


【1】
管理画面 → ファイルマネージャ で、
ファイル名: shortcode.css のファイルをアップロードしてください。
ファイルのアップロード方法は、
公式マニュアルのこちらをご覧ください。
http://faq.seesaa.net/article/422864498.html


【2】
メインHTMLの<head>内に次の記述を予め入れていますので、
アップロードするだけで使えるようになります。
<link rel="stylesheet" href="/image/shortcode.css" type="text/css" />



マニュアル(記事装飾パーツの種類・色パターン・記述方法)


こちらのページで説明していますのでご覧ください。
※上記ページは商品に含まれるマニュアルです。レビュー記事等にリンクを貼ることは禁じます。
※閲覧するにはユーザー名とパスワードの入力が必要です
 ユーザー名:hidezo
 パスワード:hidezo

CSS3でデザインした箇所がインターネットエクスプローラー(IE)では全て表示されませんので、「Mozilla Firefox」「Google Chrome」等でご覧ください。



記事装飾パーツのカラー変更


この説明はアップデート版(2015-12-10以降のリリース分)から適用します


基本記事装飾パーツと追加記事装飾パーツの内1色は、
あなたが決めたベースカラーに変更ができます。

書き替えした メインCSSの■記事装飾パーツのカラー から次の箇所を見つけてください。
4ヶ所のカラーコード #a7a7a7 をベースカラーと同じにしてください。

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■記事装飾パーツのカラー  4ヶ所のカラーコードを変更ください
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.table-00 th,.table-01 th {
    background: #a7a7a7;
}

.h2-02-main,.h2-04-main,.h2-05-main:before,.h3-04-main,.h3-05-main:before,.ul-02-main li:before,.ul-03-main li:before,.ol-01-main li:before,.ol-02-main li:before,.parts-01-main,.parts-02-main,.parts-03-main,.parts-04-main,.parts-05-main {
    background: #a7a7a7;
}

.h2-02-main,.parts-01-main,.parts-03-main {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7a7a7', endColorstr='#ffffff/*←変更不可*/',GradientType=0 );/*forIE9*/
}

.h2-00,.ul-00 li,.h2-01-main,.h3-06-main,.ul-01-main li,.ul-04-main li:after,.ul-05-main li:before,.h2-03-main,.h3-01-main,.h3-02-main,.h3-03-main,.h3-07-main,.ol-00 li:before,.ul-04-main li:before,.ol-03-main li:before,.ol-04-main li:before,.h2-03-main {
    border-style: solid;
    border-color: #a7a7a7;
}

※参考:カラーコード表 http://www.colordic.org/
※カラーコードの後にある ; を削除しないでください。




ホーム RSS購読 サイトマップ
設置マニュアル SEO対策の設定 カスタマイズ デザイン変更 Seesaa公式マニュアル