賢威メモ

今回はちょっとメモ。 

長年賢威を使ってきていますが、
私の場合、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情報、その他ネットビジネスに関する情報をいち早く配信しています。

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

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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ