IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

[Stinger3]小見出しのデザインを変更する方法 - スタイルシート(CSS)

      2015/02/15  あとで読む   はてブする

stinger3
どうも、リョータ(@itbenricho)です。Stinger2からStinger3に変更し、その関係でStinger2で設定したことを再設定する必要があったので、忘備録を含めてそれらを紹介します。

スポンサーリンク

H2やH3の小見出しの変更

第2弾は、小見出しのデザイン変更です。
デザインはスタイルシート(CSS)を使用しています。スタイルシートを変更すると、すべての記事の小見出しが一括変更できます。Stinger3は小見出しをh3で指定しています。「ビジュアル」から「テキスト」にし、<h3>サンプル</h3>とすると下のように表示されます。

komidashi6

komidashi7
↑小見出しのデザインとは、文字(サンプル)左にある縦の点線のことです(Stinger3初期設定)。小見出しは記事の中でいくつか見出しが必要になるときに配置します。
(縦線をドットに指定。横線は入れていない。)

 

 

komidashi8
↑上の初期設定の小見出しを、今回はこの小見出しに変更してみます。
(縦線を実線(太字)、横線をドットで指定。色をオレンジ色に変更する。)

 

スポンサーリンク

小見出しのデザイン変更

1.[外観]→[テーマ編集]をクリックします。
小見出し変更

 

2. 右下のスタイルシート(style.css)を選択すると、真ん中の画面がスタイルシートに変更されます。
komidashi2

 

3. スタイルシートの313行目から328行目に「小見出し (.post h3)」とあります。これを変更します。

フォントサイズは文字サイズ18ピクセルになっています。また、marginは外側、paddingは内側にどれだけ隙間を作るかです。colorは文字の色です。それぞれ好きな文字サイズ、隙間を設定してください。

 

重要なのは下3行です。↓
komidashi7

border-left-widthが左側の線を1pxの太さで、border-left-styleはドットで指定、border-left-colorは線の色(濃いグレイ)の指定です。ここを変更します。

 

 

komidashi8

上3つは文字(サンプル)横のオレンジ色太線の設定です。縦線を10px、実線(solid)、オレンジ色にしています。
下3つは文字(サンプル)下のオレンジ色点線の設定です。線を1px、点線(dotted)、オレンジ色にしています。

 

どうでしょうか。参考になりましたか。Stinger3は一つ一つ丁寧に書かれていますが、下のようにまとめて書く方法もあります。間は半角スペースです。お忘れなく。

 

最後に

今回は小見出しの左と下の変更でした。当然、上や右も同様に設定できるので、文字の周りを四角で囲んだり、背景色を付けたりすることもできますよ。

これはStinger3だからというわけではなく、スタイルシート(.css)を使っているものであれば全て同じです。(Stinger3は小見出しをh3で指定しています。)

みなさんもお好みで設定してみてください。

スポンサーリンク

 - WordPress

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

  関連記事

WordPress
「All in one SEO pack」でTwitterカードを簡単に設定する方法

WordPress(ワードプレス)のプラグイン「All in one SEO p …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像 …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

Google XML Sitemaps 4の調子が悪いので3にダウングレードしました

Google XML Sitemaps 4以上(現在4.0.4)は、サイトマップ …

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …

ブログがインデックスされない時は「All in One SEO」の設定「カテゴリーをnoindexにする」をチェック!

サーチコンソールで見たときに送信数の割りにインデックスに登録済の数が少ないことが …

WordPress
WPプラグイン「Akismet」の設定方法、APIキーの取得

新しいサイトを立ち上げるたびに必要なのがWordPressのプラグイン「Akis …

HTMLの使い方。とを両方使った例
ホームページHTML<p>と<br>の違いは応用例から理解しよう

僕がホームページを作り始めたのが1998年、丁度「Windows 98 2nd …