デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8の記事タイトルをさりげなく装飾してみた。 [WordPress]

投稿日:2018年8月15日 更新日:

デフォルトもシンプルで文字のサイズも大きく見やすいのでいいんですが、せっかくなんで少し手を入れてみました。

こんな感じにしてみました。

デフォルトはこんな感じですよね。

変更した内容は

  • センタリング
  • 背景色(グラデーション)
  • 角丸
  • フォントの変更

2行だとこんな感じです。

H1タグにかかるカテゴリー一覧、タグ一覧、固定ページなども同じ処理になります。

style.cssに追加

差分はこんな感じです。

.entry-title, .post .entry-title {
    text-align: center;
    padding: 10px 20px;
    background: linear-gradient(175deg, #fff, #f3f3f3);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
}

H2タグ以下はまた後日アップしますね。

「h」タグの変更方法は「Stinger8よく使う「h」タグを装飾してみた。 [WordPress]」をご覧ください。

テーマをいじる場合は、必ずバックアップをとり、自己責任で作業してください。
また、子テーマで作業するのが望ましいです。

スポンサーリンク

-WordPress
-, , ,

関連記事

no image

Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 #header-l { text-align: c …

no image

STINGER8の幅を広げてみた。 [WordPress]

記事下広告のAdsenceをダブルレクタングルにしたかったので気持ち幅を広げてみました。 ただ単に広げればいいってもんでもないので、世間一般的なモニター解像度から目標となる幅を決めてみました。 国内に …

no image

Stinger8よく使う「h」タグを装飾してみた。 [WordPress]

ブログを書く上で、よく使うタグの一つが「h」タグではないでしょうか。 なので、カスタマイズしたくもなります。 デフォルトだとこんな感じです。 今回手を入れたのは、「h2」タグと「h3」タグ。 「h4」 …

Stinger8のページトップボタンを目立たせてみた。 [WordPress]

主張が強すぎるのもなんですが、あまりにも目立ってないので手を加えてみました。 ↑右端にあるこれね。 (わかりずらいので、囲ってみました。) style.cssを変更 差分はこんな感じです。 #page …

AmazonJSの画像が表示されないときの回復方法 [WordPress]

AmazonJSはAmazonアソシエイトのリンクを張るときに投稿画面から商品検索ができ、しかもショートコードで貼り付けてくれて、さらに格好良く表示してくれるプラグインなので、ちょーおススメなプラグイ …