digital lemonのデジタル通信

ちょっとお得なマネー情報や、投資、ギャンブル。使えるツール・ガジェット・PC機器・PCDJなどをご紹介

ブログカスタマイズ 未分類

WordPressテーマ「STINGER3」の見出しをカスタマイズ

投稿日:2014年5月15日 更新日:

ブログのテーマで使わせていただいているWordpressのテーマ「STINGER3」ですが、
正直言って僕みたいな人間が見出しをカスタムなど言い出す必要は皆無な程、デフォルトの見出しが美しいテーマです。
ただ少しだけ、ブログのカラーに合わせて「STINGER3」の見出しをいじってみたので、その方法をご紹介します。

STINGER3の標準の見出しはどうなっているか

STINGER3ではh1が記事タイトルになっています。
よって、h2、h3、h4くらいを主に使うと思います。
今回はh2の見出しをカスタムしていきます。

用意した画像をSTINGERのimagesフォルダにアップロードする

今回は画像を変更したので、Wordpressの管理画面からでなく、FTPソフトで用意した画像をアップロードしなくてはいけません。
画像を任意の画像に変えるために、まず60x60くらいで画像を用意します。
ファイル名は○○.png等。
そしてFTPソフトのwp-content→themes→stinger3ver20140327→imagesフォルダに用意した画像をアップロードします。

STINGER3のCSSを変える

WordPressの管理画面→外観→テーマ編集→スタイルシート (style.css)
その中のh2がデフォルトではこうなっています。

h2 {
    font-size: 24px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 35px;
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: #1a1a1a;
    color: #333;
    line-height: 30px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: -40px;
}

その下にある隠しCSSのほう

.demo h2 {
    font-size: 24px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 75px;
    color: #000;
    line-height: 30px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: -65px;
    background-image: url(images/cah2-bk.png);
    background-repeat: no-repeat;
    background-position: left top;
}
}

こちらの.demoを消して、元のh2も消します。
その時点でこのようになります。

無題
引用元:本家STINGERさんのブログ
https://stinger3.com/

そしてそれをベースに、用意した画像を加え、その他少しだけいじっていき

h2 {
	font-size: 24px;
	border-bottom: 4px dashed #FFD700;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 75px;
	color: #000;
	line-height: 30px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: -65px;
	background-image: url(images/○○.png);
	background-color: #FFFACD;
	background-repeat: no-repeat;
	background-position: left top;
}

このCSSのbackground-imageのURLのファイル名を先ほどの画像のファイル名に書き換えます。

このようなCSSになりました。
元々気に入っていたので、画像を変えて文字の位置と余白、色を変えたくらいでしょうか。
これで先ほどからうざいくらいでてくるレモンさんの見出しができあがりました。

無題

まとめ

今回参考にさせていただいたのは本家「STINGER」さんのブログになります。
より細かく説明されていますので、参考にしてください。

STINGER

無題
https://stinger3.com/seo/blog-design/

-ブログカスタマイズ, 未分類
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

2014最新版!WordPressに人気記事を表示させる「WordPress Popular Posts」の簡単な設定方法

ページの目次1 「WordPress Popular Posts」とは?2 「WordPress Popular Posts」の設定方法3 WordPressテーマ「STINGER」を使用している場合 …

WordPressで目次を作るプラグイン「Table of Contents Plus」 の使い方

このブログにも設置してあります、記事内容の目次。 目次があることで自分も記事の内容の段落を意識して書くことになり、読み手にとっても知りたい情報へ素早くアクセスすることができます。 今回はWordPre …

WordPlessのプラグイン(SyntaxHighlighter Evolved)を使ってソースコードを記事内に表示する方法

「記事の中にソースコードを表示させたい。」 ということはよくありますよね。 しかし当然ながら、そのままソースを書いてもコードは表示されません。 そんなときに便利なのが、WordPressのプラグイン「 …

初心者向け!見出し(hタグ)を使って見やすいブログデザインにしよう

ブログを始めた人の中で、ある日「読みづらいな」と思った経験はありませんか? そんなブログ初心者の方に向けて、hタグを使って見出しを付けたブログの書き方をご紹介します。 ページの目次1 hタグって何?2 …

WordPressのコメント欄をFacebookに変更

@dgtllemonです。 前回のブログ「SI CAPTCHA Anti Spam」でブログコメント欄に画像認証を追加を投稿した直後、もっと簡単な方法でスパムコメントを排除し、かつFacebookとの …

デジタルレモン

まだギリギリ20代。

人生をちょっと楽しく刺激的にする情報などを配信中。