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

  関連記事

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

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

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

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

WordPress
[WordPress]URLにカテゴリーを入れるパーマリンクと日本語を英語にするスラッグ設定

先日WordpressでURL内にカテゴリーを入れるディレクトリー型構造の設定を …

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

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

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

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

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

WorePress
WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

WordPressの投稿画面で「B」を押すと、<b>タグでは無く&l …

WPプラグイン「Limit Login Attempts Reloaded」インストール画面
Widget logic teamから通知!WPプラグインLimit Login Attempts Reloadedの設定

先日、僕のWordpressのログイン後の画面にメッセージがやってきました。上が …

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

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