見栄えの良い CSS カスタム スタイル (タイトル h1 h2 h3)

見栄えの良い CSS カスタム スタイル (タイトル h1 h2 h3)

レンダリング

Blog Gardenでよく使われるスタイル

/*タイトル h1 h2 h3 スタイル*/
#コンテンツ {
    色: 黒;
    フォント: 0.875em/1.5em「Microsoft YaHei」、「PTSans」、「Arial」、サンセリフ;
    フォントサイズ: 16px;
}
#コンテンツ h1 {
    背景: #2B6695;
    境界線の半径: 6px 6px 6px 6px;
    ボックスの影: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    色: #FFFFFF;
    フォント ファミリ:"Microsoft YaHei"、"Songti"、"HeiTi"、Arial;
    フォントサイズ: 18px;
    フォントの太さ: 太字;
    高さ: 25px;
    行の高さ: 25px;
    マージン: 18px 0 !重要;
    パディング: 8px 0 5px 5px;
    テキストシャドウ: 2px 2px 3px #222222;
}
#コンテンツ h2 {
    背景: #2B6600;
    境界線の半径: 6px 6px 6px 6px;
    ボックスの影: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    色: #FFFFFF;
    フォント ファミリ:"Microsoft YaHei"、"Songti"、"HeiTi"、Arial;
    フォントサイズ: 15px;
    フォントの太さ: 太字;
    高さ: 24px;
    行の高さ: 23px;
    マージン: 12px 0 !重要;
    パディング: 5px 0 5px 10px;
    テキストシャドウ: 2px 2px 3px #222222;
}
#コンテンツ h3 {
    背景: #5B9600;
    境界線の半径: 6px 6px 6px 6px;
    ボックスの影: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    色: #FFFFFF;
    フォント ファミリ:"Microsoft YaHei"、"Songti"、"HeiTi"、Arial;
    フォントサイズ: 13px;
    フォントの太さ: 太字;
    高さ: 24px;
    行の高さ: 20px;
    マージン: 12px 0 !重要;
    パディング: 5px 0 5px 10px;
    テキストシャドウ: 2px 2px 3px #222222;
}

ボタンスタイル

CS

/*おすすめ/嫌いボタン*/
#div_digg {
    位置:固定;
    下:10px;
    幅:140ピクセル;
    右:390px;
    境界線:2px 実線 #6FA833;
    パディング:10px;
    背景色:#fff;
    境界線の半径:5px 5px 5px 5px !重要;
    ボックスの影:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

上記は、より美しい CSS カスタム スタイル (タイトル h1 h2 h3) の詳細です。CSS カスタム h2 h3 スタイルの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  MySQLにインデックスを追加しても効果がないいくつかの状況について簡単に説明します。

>>:  html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果

推薦する

Xmeter APIインターフェーステストツールの使用状況の分析

XMeter API は、以下のサービスを含む、JMeter に基づくワンストップのオンライン イン...

プロセスごとにネットワーク帯域幅を監視する Linux ツール Nethogs のインストールと展開

概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...

js 配列 fill() 充填メソッド

目次1. fill() 構文2. fill() の使用3. まとめ序文:配列の初期化方法についてはよ...

Vue のスロットスコープの詳細な理解(初心者向け)

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

Linux システムで HugePages をすばやく構成するための完全な手順

序文Linux システムの HugePages と Oracle データベースの最適化については、関...

HTML で特定のテキストを非表示にするにはどうすればよいでしょうか?

テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...

JavaScript配列についてさらに詳しく知るのに役立つ記事

目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...

Docker イメージのローカル Elasticsearch ポート操作へのアクセス

dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...

Docker イメージのインポートとエクスポートのコード例

Dockerイメージのインポートとエクスポートこの記事では、移行、バックアップ、アップグレードなどの...

CentOS 7 で MySQL 8 の複数のインスタンスを設定する詳細なチュートリアル (必要な数だけ設定できます)

原因最近、プロジェクトのリファクタリングを始めたのですが、マスタースレーブと読み取り書き込み分離を使...

Windows で nginx を素早くインストールし、自動的に起動するように設定する

目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...

純粋な CSS3 を使用して、円の動的な光る特殊効果アニメーションを実装するためのサンプル コード

この記事では、主に、円形のダイナミックな光る特殊効果アニメーションを実現するための純粋な CSS3 ...

HTML 名 ID とクラスの違い_PowerNode Java アカデミー

名前タグの名前を指定します。形式 <input type="text" n...