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で指定しています。)

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

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

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

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

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

GTmetrix
GTmetrixのSpecify image dimensions改善方法

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

「SiteOrigin Editor」で分割表示させた画面
WP[Page Builder by SiteOrigin]固定ページで画像を横に並列表示、TOPページを簡単カスタマイズ

WordPressのTOPページに固定ページを使って、画像を横に2列や3列に横に …

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

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

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

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

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

Wordpressプラグイン
WorPressプラグイン「Broken Link Checker」の使い方

WordPressプラグインに「Broken Link Checker」というの …

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

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

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