18周年記念キャンペーン中
チャンス&お得がいろいろ(9/30迄)エックスサーバー

テーマSWELLの「カスタム書式」が超便利!スルーしたら勿体ない

カスタム書式

アップデートの度にすごい機能が追加される「SWELL」。

1回買い切りなのに、追加機能がてんこ盛りで嬉しすぎます。

SWELLの詳細【公式サイト】

SWELLの機能の良いところは、考え方・設定・使い方そのどれもが簡単でわかりやすい点です。

最近追加された「カスタム書式」がまた便利!

あらかじめ設定した書式をワンクリックで反映できる機能です。よく使う書式を登録しておけば、何度もツールに手を伸ばさなくて一発反映です。

記事の内容(もくじ)

SWELLのカスタム書式

記事を書く時、強調したい単語や文章に装飾をほどこします。

文字色を替えるだけ、とかだと簡単ですが、更に太字にするとか、枠を付けるとか…複数を組み合わせるのは結構面倒。

独自のCSSをパターンに登録しておく…なんて方法などやり方はいくつかありますが、カスタム書式は最も簡単なやり方な気がします。

登録できるのは2パターンです。

カスタム書式の設定

SWELL設定 → エディター設定 → カスタム書式

  1. 「カスタム書式 – 1」と「カスタム書式 – 2」にわかりやすい表示名を設定
  2. カスタム書式用CSSを書く
カスタム書式

表示名はわかりやすく(まんまですwww)、サンプルですから…

  1. フォントサイズL・フォントカラー 渋い赤・太字
  2. 背景色渋い赤・白文字・枠色グレー・枠内の空き(padding)天地4px/左右6px・枠の左右に4pxの空き

サンプルのCSS

.swl-format-1{
font-size:1.2em;
color:#cc0000;
font-weight:700;
}
.swl-format-2{
color:#fff;
background:#cc0000;
border:solid #ccc 1px;
padding:4px 6px;
margin:0 4px;
}

カスタム書式の使い方

使い方はとても簡単。

記事中の目的のテキストを選択し、ツールのSWELLマークから反映させたいスタイルを選ぶ。

カスタム書式

間違えたら「書式クリア」または反映させた項目をクリックすると、プレーンなテキストに戻ります。

カスタム書式

CSSサンプル集

swl-format-1で案内しますが、swl-format-2でも同じです。

.swl-format-1{
display: inline;
padding: 2px;
background: linear-gradient(transparent 64%,#b7e3ff 0%);
}

太字にブルーのマーカーです!

.swl-format-1{
background-color: #f5cdbd;
color: #333;
border-bottom: 1px solid #bf9288;
padding:4px;
margin-right:4px;
}

背景色+アンダーラインです!

.swl-format-1{
font-weight:700;
color: #cc0000;
border-bottom: 1px dotted #cc0000;
padding:4px;
margin-right:4px;
}

背景色+アンダーラインです!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容(もくじ)
閉じる