新規トピックボタンのカスタマイズ

コミュニティWiki 開発者
1

こんにちは、

新しいトピックボタンの作り方をご紹介します。少しの CSS です :slight_smile:

これには色変数（tertiary、secondary、primary-medium）を使用しています。

新規トピックボタン

new-topic

下書きを開くボタン

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

良い一日を！:slight_smile:

「いいね！」 10
Developer Index
2021: The Year in Review
2

前

image
image303×115 2.82 KB

後
image
image294×106 2.54 KB

何も変わっていません :no_good_man:

3

@valsha 推測ですが、その CSS 技はホバー状態を変化させているため、ホバーしていないのでは？

一般的に、多くの方がご存知かと思いますが、ホバー（および他の多くのこと）の変化は、マウスを使用しているシステムでのみ表示されます。モバイル端末では表示されません。なぜなら、ユーザーは単にボタンをタップするだけだからです :wink:

「いいね！」 2
4

あのボタンのデザイン、素敵ですね。どうやって作られたのですか？

そして、完全に本題から外れてしまいますが…そのGIFを録画・変換する際に使っているツールは何ですか？

（しまった…間違った返信ボタンを押してしまったかな？つまり：@Don）

「いいね！」 2
5

こんにちは、

これは Dracula テーマ のようです。ソースを確認しました。

上書きするには、#create-topic の前に button を追加する必要があります。

したがって、以下のように始まるはずです：:arrow_down:

button#create-topic {

緑色の success カラーを維持したい場合は、var(--tertiary) を var(--success) に変更してください。次のようになります：:arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
「いいね！」 2
6

はい、このボタンは Dracula Theme からのものでした。
@Don、相変わらずあなたは救世主ですね :+1:

「いいね！」 2
7

さて、みなさん、これは「自分が何をしているか少しも考えない人がいるとどうなるか」のデモンストレーションでした。今回は、人を誤ってタグ付けし、不適切な場所で質問を投げかけることで混乱を招いています。幸いにも、これはCSSやテーマに関する話題で、世界平和や42、あるいはそれ以上の重要なことではありません :rofl:

実は、@Donのボタンが気になっていたのですが、もちろんあのネオングリーンも素敵ですね :+1:

「いいね！」 2
8

テキストを「New Topic」から「Create a new Topic」に変更する方法を教えてください。@Don

9

こんにちは、

/admin/customize/site_texts にアクセスし、テキストを検索して変更してください。:slightly_smiling_face:

10

テーマ自体からこれを行うことは可能でしょうか？

11

テーマ経由でこれを行うには、I18n.translations オブジェクトを変更するスクリプトを追加します。

「いいね！」 2
13

これで、テキスト、アイコン、その他の関連ボタンの動作を簡単にカスタマイズできるテーマコンポーネントが利用可能になりました。

ボタンのスタイルを変更することはできませんが、将来的には追加できる可能性があると思います。

「いいね！」 2