Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[WordPress] SWELL 「カスタム書式」の使用例

Swellカスタム書式

このサイトで使用している人気のWordPressテーマ「SWELL」のカスタム書式はお使いですか?とても便利なので、ぜひ活用して頂きたい機能です。基本的な設定方法とコピペでできるリンクのスタイルをシェアします。

INDEX

カスタム書式とは

CSSの装飾を登録し、テキストに登録したCSSスタイルをワンクリックで設置できる機能です。

今のところ、2種だけ登録できるので、何を設定するか悩みますが、今回はリンクのアニメーションをコピペで出来る様にご紹介します。

SWELLをお持ちでない方はこちらから

このリンクにマウスオーバーしてみて下さい。アンダーラインが入ります。今回は、これを設定します。

設定方法

Swell設定のエディタ設定を開きます。「カスタム書式」タブをクリック

カスタム書式

クラス名はswl-format-1に決められているので、自分で分かり易い表示名を入力します。(任意の名前でOKです)spanに対して、class=”swl-format-1″が付きます。

カスタム書式

swl-format-1に対しての、カスタム書式用CSSを記載します。機能してますがCSSあってるかしら?

currentColorは、aに対して指定してあるカラーが適応されます。

.swl-format-1 a{
 text-decoration:none;
  padding-right: 10px;
  background: linear-gradient(currentColor 0 0) 
  0 100% /var(--d, 0) 2px 
no-repeat;transition:0.5s;}
.swl-format-1 a::after{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 85%;
  content: "\f061";  
  padding-left: 4px;}
.swl-format-1 a:hover{--d: 100%;}
  

アイコンはお好きな物にして下さい。

使い方

「文字を入力します」にリンクをつけるとします。文字を選択し、Swellロゴをクリック。
先程設定した「リンク」書式がリスト表示されるのでクリックします。

カスタム書式

そのまま、リンクボタンをクリックし、URLを入力とタブの設定をします。すると、リンクになり□が表示されます。□はFontawesomeのアイコンは付いている部分です。プレビューや公開で矢印になっている事が確認できます。

カスタム書式

htmlはこの様になります。

<span class="swl-format-1"><a rel="noreferrer noopener" href="https://・・・" target="_blank">文字を入力します</a></span>

最後に

ただテキストに色をつけたりするだけでなく、工夫次第でいろいろ出来ると思います。

おすすめのテーマ
このブログもSWELLです

\ ぜひ使って欲しい /

高速最適化済み、高機能、驚きの使い心地
深い知識不要で素敵なサイトが作れます。

支払は一度だけ。アップデートはずっと

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX