Shop OrdinarySoundをオープンしました(VISA, MASTER CARD, American Express)

Simplicity2の使い方

テーマのアップデート

【手順】

  1. 新バージョンのテーマをダウンロード
    https://wp-simplicity.com/downloads/downloads2/
  2. Smooth Updateを有効化
  3. インストールしている旧バージョンのSimplicity2を削除
  4. 新バージョンのSimplicity2をインストール
  5. Simplicity2の子テーマを有効化

ボタン作成

WordPess(当サイト)のテーマをSimplicity2に変更して数日経過。使い慣れないテーマは目的に辿り着くのに手間取りますが、改めてSimplicity2にして良かったと思う中の一つがボタン作成機能です。

これまでのテーマ(Lion Media)はWordPressを始めるのに相応しいテーマだと今でも思いますが、ボタンを使いたかったのでプラグインに頼っていました。現在もプラグインによるボタンは至る所に存在しています。

今後は出来るだけプラグインを使わず軽快な動作を目指しているので、ボタンはどうしたものかと調べてみるとSimplicity2にはボタン作成機能が備わっていることがわかったので備忘録として書いておきます。

現在使用中のボタン機能:Shortcords Ultimate ※ボタンに限らず様々お世話になっています。

試したボタン機能:Gutenberg標準搭載のボタンブロック。リンクを別タブで開く方法がわからなかったのとデザイン的にあまり使いたくない。

そんな訳で調べるとSimplicity公式サイトにボタンの作り方が丁寧に載っていました。

Simplicity文字装飾のボタン拡張クラスの使い方
Simplicity2.2.1からボタン拡張クラスを追加しました。 以下では、ボタン拡張クラスの使用例を紹介します。 様々な色のボタン ボタン拡張クラスでは、クラス名を変更することで色や、大きさを変更することができます。 レッド <

できること

  • ボタンの色指定:18色
  • ボタンのサイズ:s, m, l
  • ボタンのアイコン(Font Awesome)

カラー指定

<p><a href="#" class="btn btn-red">ボタン</a></p>

レッド
red

ボタン

ディープ
deep

ボタン

ライトブルー
light-blue

ボタン

グリーン
green

ボタン

イエロー
yellow

ボタン

ディープオレンジ
deep-orange

ボタン

ピンク
pink

ボタン

インディゴ
indigo

ボタン

シアン
cyan

ボタン

ライトグリーン
light-green

ボタン

アンバー(琥珀色)
amber

ボタン

ブラウン
brown

ボタン

パープル
purple

ボタン

ブルー
blue

ボタン

ティール
teal

ボタン

ライム
lime

ボタン

オレンジ
orange

ボタン

グレー
grey

ボタン

ボタンサイズ

<p><a href="#" class="btn btn-pink btn-m">ボタンテスト</a></p>

ボタン

ボタンM

ボタンL

アイコン

<p><a href="#" class="btn btn-red"><span class="fa fa-envelope fa-fw" aria-hidden="true"></span>メール</a></p>

https://fontawesome.com/icons?d=gallery&m=free

Font Awesome

メール

この記事が気に入ったら最新ニュース情報を、
いいねしてチェックしよう!
IT
OrdinarySoundをフォローする
オーディナリーサウンド
タイトルとURLをコピーしました