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

  関連記事

GTmetrix
GTmetrixのSpecify image dimensions改善方法

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

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

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

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

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

WorePress
[WordPress]記事内の画像リンクを全部まとめて外す方法

WordPressにはデフォルトで、画像をリンクする設定になっています。スマホで …

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

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

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

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

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

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

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

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

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

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

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