賢威メモ

今回はちょっとメモ。 

長年賢威を使ってきていますが、
私の場合、DreamWeaverに予めサイトのCSSを読み込ませているテンプレートを
作っておき、そこで書いてからコピペで記事を作成していたのであまり使った事が
なかったんですが、賢威には便利なCSSが用意されているんですね。

いったん記事を上げた後にちょこっと修正するときに手書きでやっていたので
覚えておくと便利かなと。

 

■よくあるようなチェックボックスの一覧

<ul class="checklist">
<li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li>
<li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li>
<li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li>
</ul>
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

 

 

■文字色

<ul>
<li><span class="black">文字色を黒色に変更することができます。</span></li>
<li><span class="red">文字色を赤色に変更することができます。</span></li>
<li><span class="blue">文字色を青色に変更することができます。</span></li>
<li><span class="green">文字色を緑色に変更することができます。</span></li>
<li><span class="yellow">文字色を黄色く変更することができます。</span></li>
<li><span class="navy">文字色を紺色に変更することができます。</span></li>
<li><span class="gray">文字色を灰色に変更することができます。</span></li>
<li><span class="orange">文字色をオレンジに変更することができます。</span></li>
<li><span class="pink">文字色をピンクに変更することができます。</span></li>
<li><span class="purple">文字色を紫色に変更することができます。</span></li>
<li><span class="olive">文字色を黄土色に変更することができます。</span></li>
<li><span class="lime">文字色を黄緑に変更することができます。</span></li>
<li><span class="aqua">文字色を水色に変更することができます。</span></li>
</ul>
  • 文字色を黒色に変更することができます。
  • 文字色を赤色に変更することができます。
  • 文字色を青色に変更することができます。
  • 文字色を緑色に変更することができます。
  • 文字色を黄色く変更することができます。
  • 文字色を紺色に変更することができます。
  • 文字色を灰色に変更することができます。
  • 文字色をオレンジに変更することができます。
  • 文字色をピンクに変更することができます。
  • 文字色を紫色に変更することができます。
  • 文字色を黄土色に変更することができます。
  • 文字色を黄緑に変更することができます。
  • 文字色を水色に変更することができます。

 

 

■背景色

<ul>
<li><span class="box-yellow">文字を黄色いボックスで囲むことができます。</span></li>
<li><span class="box-aqua">文字を水色のボックスで囲むことができます。</span></li>
<li><span class="box-gray">文字を灰色のボックスで囲むことができます。</span></li>
<li><span class="box-red">文字を赤色のボックスで囲むことができます。</span></li>
</ul>
  • 文字を黄色いボックスで囲むことができます。
  • 文字を水色のボックスで囲むことができます。
  • 文字を灰色のボックスで囲むことができます。
  • 文字を赤色のボックスで囲むことができます。

 

 

■文字サイズ

<ol>
<li><span class="b">文字を太字にすることができます。</span></li>
<li><span class="f12em">文字を「120%」の大きさにすることができます。</span></li>
<li><span class="f15em">文字を「150%」の大きさにすることができます。</span></li>
<li><span class="f18em">文字を「180%」の大きさにすることができます。</span></li>
<li><span class="f08em">文字を「80%」の大きさにすることができます。</span></li>
</ol>
  1. 文字を太字にすることができます。
  2. 文字を「120%」の大きさにすることができます。
  3. 文字を「150%」の大きさにすることができます。
  4. 文字を「180%」の大きさにすることができます。
  5. 文字を「80%」の大きさにすることができます。

 

 

■アイコン付き文字

<p class="caution1">先頭にCHECK!という画像が付いた状態で表示されます。</p>
<p class="caution2">先頭にCHECK!という画像が付いた状態で表示されます。</p>
<p class="caution3">先頭にPOINT!という画像が付いた状態で表示されます。</p>
<p class="caution4">先頭にPOINT!という画像が付いた状態で表示されます。</p>
<p class="caution5">先頭にCHECK!という画像が付いた状態で表示されます。</p>
<p class="caution6">先頭にPOINT!という画像が付いた状態で表示されます。</p>
<p class="caution7">先頭に注意!という画像が付いた状態で表示されます。</p>
<p class="caution8">先頭に注意!という画像が付いた状態で表示されます。</p>

先頭にCHECK!という画像が付いた状態で表示されます。

先頭にCHECK!という画像が付いた状態で表示されます。

先頭にPOINT!という画像が付いた状態で表示されます。

先頭にPOINT!という画像が付いた状態で表示されます。

先頭にCHECK!という画像が付いた状態で表示されます。

先頭にPOINT!という画像が付いた状態で表示されます。

先頭に注意!という画像が付いた状態で表示されます。

先頭に注意!という画像が付いた状態で表示されます。

 

 

■後アイコン付き文字

<p class="al-r"><span class="mail-back">一行なら文章の終わりにも使えます。</span></p>
<p class="al-r"><span class="pdf-back">一行なら文章の終わりにも使えます。</span></p>
<p class="al-r"><span class="zip-back">一行なら文章の終わりにも使えます。</span></p>
<p class="al-r"><span class="rss-back">一行なら文章の終わりにも使えます。</span></p>

一行なら文章の終わりにも使えます。

一行なら文章の終わりにも使えます。

一行なら文章の終わりにも使えます。

一行なら文章の終わりにも使えます。

 

 

■文字線付き

<ul>
<li><span class="underline">文字に下線を引くことができます。</span></li>
<li><span class="del">文字に取り消し線を引くことができます。</span></li>
</ul>
  • 文字に下線を引くことができます。
  • 文字に取り消し線を引くことができます。

 

 

■次ページなど

<p class="link-next"><a href="/">次のページへ</a></p>
<p class="link-back"><a href="/">前のページへ</a></p>

 

 

■Youtube動画の埋め込み

<div class="v-wrap al-c m30-b">
<iframe width="420" height="315" src="http://www.youtube.com/embed/-ujaHz-RwNs" frameborder="0" allowfullscreen></iframe>
</div>

 

 

■売れ筋ランキング

<ul class="ranking">
<li class="no01">
<p class="item-name">商品名1</p>
<p class="item-img"><img src="http://j-press.info/wp-content/themes/keni6_wp_cool_130218/images/dummy-item01.jpg" width="162" height="162" alt="AAA社画像" /></p>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="./item01/">「商品名1」の詳細を見る</a></p>
</li>

<li class="no02">
<p class="item-name">商品名2</p>
<p class="item-img"><img src="http://j-press.info/wp-content/themes/keni6_wp_cool_130218/images/dummy-item02.jpg" width="162" height="162" alt="AAA社画像" /></p>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="./item/item02/">「商品名2」の詳細を見る</a></p>
</li>

<li class="no03">
<p class="item-name">商品名3</p>
<p class="item-img"><img src="http://j-press.info/wp-content/themes/keni6_wp_cool_130218/images/dummy-item03.jpg" width="162" height="162" alt="AAA社画像" /></p>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="./item/item03/">「商品名3」の詳細を見る</a></p>
</li>

<li class="no04">
<p class="item-name">商品名4</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="#">「商品名4」の詳細を見る</a></p>
</li>

<li class="no05 end">
<p class="item-name">商品名5</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p class="link-next02"><a href="#">「商品名5」の詳細を見る</a></p>
</li>
</ul>
  • 商品名1

    AAA社画像

    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

  • 商品名2

    AAA社画像

    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

  • 商品名3

    AAA社画像

    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

  • 商品名4

    ここにテキストが入ります。ここにテキストが入ります。

  • 商品名5

    ここにテキストが入ります。ここにテキストが入ります。

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった

 

ネットビジネス速報メールマガジン

 

メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。

Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。

お名前(必須)
メールアドレス(必須)

記事「賢威メモ」にコメントを残す

サブコンテンツ

危険な高額塾

タグ

不労所得の神 クラック 定型文 マルウエア ブロック スカイプ IP SyntaxHighlighter 大園式転売塾 権利収入 マニュアル Diamond Affiliate Masters Program tool ネットビジネス バナー アフィリエイト 伊藤虎太郎 XHTML ムーバブルタイプ 新井浩 レンタルサーバー 出店料 表示 android ロリポップ アレックス式ネオせどりスクール サンタ 特定のメールアドレス 掲示板 球体 スタイルシート ドメイン 無料オファー 改竄 LinkShaker ブラウザ Thunderbird 高速ゲーム 放射線 伊藤 歩 ping ソースコード 株式会社Free Agent Style 伊藤 虎太郎 バイマ 加工 Newpost Catch アイコン 情報商材 ざくざく君 音量アイコン ランキング FireWorks ツール 詐欺組織 Login LockDown 管理画面 wp-login.php moza インターネットエクスプローラー 切り抜き Chrome 詐欺 復元 PPC セキュリティ ウイルス ECサイト CS6 Google Maps API インペリアルゴールド 自己アフィリ twitter .htaccess ボタン アフィ匠 スムーズ 株式会社WINGOOD Youtube 百度 ソフト ハート office 人物 SmoothScroll.js 既得権益 Wordpress Content Slide インターネット 池田純矢 リンクシェイカー 加藤 秀吉 BUYMA Firefox アレックス 比較 株式会社SRシステム インフォトップ アクセスアップ デスクトップ 小笠原健一 クリックランキング ネットショップ 土屋ひろし ユーチューブマニアクス2017 プロファイル MasterCollection 優先順位 株式会社SRシステム 自己アフィリエイト せどり ヤフオク ウインドウ 久積篤史 MovableTYpe google 中山秀人 背景 ping送信 wordpress エディタ 秀吉塾天下統一 無断送信 無料 テンプレート モザイク getElementById SKナレッジ CS5 村上省吾 KMS認証 getElementByTagName 個人情報流出 山下 やしろ塾 postpost 株式会社ニュース WP 原田真 レビュー タスクバー ブラシ クラウド入力機能 蝶乃舞 Tiger-Wing プロモーション 自動 Windows 7 CGI カスタマイズ 立体 固定ページ ぼかし 関根義光 やしろひろたみ トラフィック 量産 Cash on Wordpress 宮田麗花 スクロール KMSpico Favicon 短縮URL Google Maps 賢威 81a338 エクスプローラー 配布 トレンドキーワード 上位表示 Extension Manager 改ざん 北川 雅嗣 メモ アンダーグラウンドメソッド エキスパートメール エクスチェンジ アンダーグラウンドアフィリエイトクラブ ビジネス ネットガレージ HTML4.0 High Concept Marketing レイアウト がら空きビジネス 伊藤塾 クラウド変換 Yahoo スマホ 石井匠 ライオンアフィリエイト html 感染 申請金ビジネス css SEO iphone ブロックポリシー ヤフー レイアウト崩れ IBS ネットゲーム 大西良幸 explorer ワードプレス 大園転売塾 サイト改ざん ファビコン RSS Includes Pages BBIZ タイガーウイング ライン 脆弱性 レタープレス @PAGES 大園麗花 FTP 流出 不正送信 テーマ RMT 切抜き MT シャンプー document.all コピーボタン 株式会社バンザイ 与沢翼 Windows ソース ブルートフォースアタック WEB パズル フォローマティック 日本語入力変換ソフト followmatic DTD マイクロソフト ライブチャット 個人情報 IE ブラクラ Adobe DOCTYPE functions.php 高額塾 EC Line PHP アドセンス アクセス制限 クロスアフィリエイト トレンドアフィリエイト ネットビジネス最後の楽園 グラデーション YouTube Maniax 2017 Agency Business 副業術 バックアップ Baidu wpXサーバー バイドゥー 滑らか フレンドシップメール ネットビジネス大全集 RSS メルマガ配信システム もざ 秒速で1億円稼ぐ男 ネオヒルズアカデミー 株式会社A-ブログレス 不正アクセス 画像 ツイッター ヤフーショッピング system 登録禁止 プラグイン 三橋美仁 force puzzle 関根塾 管理ツール 自動化 特権ビジネス 到達率 JavaScript 転売大園塾 Ban Hammer 短縮URLツール 与沢翼×蝶乃舞 インターネットビジネススクール Internet Explorer

アーカイブ

エステトラブル

このページの先頭へ