【STINGER8】サイトロゴの画像化・ｈ１～ｈ３・サイドバー見出しのカスタマイズ

こんにちは、トッド（Todd）です。

WordPressでブログを始めてから丸3ヶ月が経過し、２０記事ほどSTINGER8のカスタムなどブログを始めてからの備忘録のようなものを中心に書いてきました。

ポツポツと観てもらえるようになりましてモチベーションの方も上がって参りました。

ブログそのもの自体がまだ理解に欠けていると言いますか、ブログというものが何なのか分かりません。(消さないのは成長を感じる為です)

そう思いまして、まずはブログの基礎を作ろうではないか！という事でWPテーマSTINGER8を使って当ブログ『スリーフロッグ』のサイトレイアウト大改造にチャレンジしていきたいと思います。

HTML&CSSというWEB制作に関して僕は素人でございます。なので、学びながら始めたいと思います。(WEB制作とか、言っちゃってるけど言葉の使い方あってるのか…)

最終的に自由なレイアウトが出来るようになる事が僕の目標です。

長々とすいません。それではここから本題です。

サイトタイトルを自作した画像に変更する
- タイトルロゴ(画像)を中央にする
記事内で表示される記事タイトル(h1)の装飾
見出しｈ２の装飾
アイコン付き見出しｈ３の装飾
サイドバー見出しの装飾

サイトタイトルを自作した画像に変更する

という事でまずは、タイトルロゴの話になります。

作成するタイトルロゴのサイズですが、大きさに関しては個人の好みがあるのでコレじゃないとダメという事はありせん。ちなみに当サイトのロゴの大きさは600×130pxで作成したものになります。(参考程度に)↓

僕がオススメなのがCANVAというサイトがあります。最近になって日本語対応がされたのでテキストで日本語が使えるよになり、テンプレートも豊富で幅と高さが1px単位で決められるところが使いやすくなっています。上記にある画像はCANVAで作成しました。

もしくはGIMP2など、どちらも無料で作成することが出来るので知っていて損は無いと思います。

※ここから先は、ロゴ作成済みという話で進めていきます。↓

ブログタイトルを画像に変更する。まずは、Wordpress管理画面から「外観」→「テーマの編集」へ進みます。

そこから親テーマからSTINGER8 childへFTPソフトを使って移行してきたテーマヘッダー(header.php)を押してもらって以下の部分を探してください。

<!-- ロゴ又はブログ名 -->
									<p class="sitename">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
											<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
										</a>
									</p>
									<!-- ロゴ又はブログ名ここまで -->
									<!-- キャプション -->

上記の中から<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>と書かれている箇所を下記のコードに書き換えます。↓

<img src=”画像のURL”>

これに書き換え、「””」の間に表示させたい画像のURLを記して更新すると画像化が出来ています。

しかし、この状態では左端に表示させられてる状態になっていて、僕は中央に表示させたかったので変更しました。

ここからはCSSを触って整えていきたいと思います。この状態でも構わないという方は飛ばしていただいて大丈夫です。

タイトルロゴ(画像)を中央にする

以下コードを子テーマのCSSへ記入して更新します。

#header-l {
	padding-top: 5px;
	text-align: center;
	float: none;
	max-width: initial;
}

コレで中央に寄ります。

記事内で表示される記事タイトル(h1)の装飾

次は、記事内で表示されるトップタイトル(h1)の部分を変更していこうと思います。

STINGER8のデフォルトで表示では、境目がはっきりとしない印象を受けたので線をつけて(ここは、タイトルですよ感を出そうと思います。)

子テーマに記入するCSSは以下のコードになります。

/* 記事タイトル */
.entry-title, 
.post .entry-title {
	font-size: 22px;
	line-height: 30px;
    background: #fff;
	color: #333;
	margin-bottom: 5px;
	font-weight:bold;
    padding-bottom: .5em;
    border-bottom: 2px solid #000;
}

#st-page .entry-title {
	margin-bottom: 10px;
}

.entry-title a:hover {
	text-decoration: underline;
}

.entry-title a {
	color: #333;
	text-decoration: none;
}

このコードを記入することでh1タイトルに下線がつき、文中とのメリハリがつけられます。

記入するのは子テーマのstyles.heetへ場所はどこでも構いません。

見出しｈ２の装飾

h3に関しては、以下で「アイコン付き」で話そうと思いますがアイコンなんていらない。そんな風に思われる方は、ここで書く「見出しh2の装飾」と同じように変更していけば大丈夫です。

まずは、ｈ２について書かれているコードを探します。stinger8の親テーマのstyle.sheetを見ると以下のようになっています。

/* 中見出し */
h2 {
	background: #f3f3f3;
	color: #1a1a1a;
	font-size: 19px;
	line-height: 27px;
	margin: 20px 0;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top:2px solid #ccc;
	border-bottom:1px solid #ccc;
}

このｈ２｛から、｝までの中の部分を書き換えることで見出しｈ２のデザイン変更をすることが出来ます。

親テーマからｈ２のコピーを取ってきて子テーマに貼り付けてから中身を変更していくとごちゃごちゃしません。

このサイトのh2見出しは文字に対して上下に線をつけたものになります。↓

h2 {
font-size: 27px;
color: #000;/*文字色*/
background: #fff;
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #000;/*上線*/
border-bottom: solid 3px #000;/*下線*/
}

コピペをしてデザインを装飾することが出来る初心者でも簡単にできる。記事最後に(参考)で書いておきます。

アイコン付き見出しｈ３の装飾

以前に書いた記事があるのでこちらを参照してください。↓

[blogcard url=” http://threefrog.com/wp-midasi-aikon/”]

Font Awesomeを使ったアイコン表示です。

サイドバー見出しの装飾

サイドバー見出しというのは、記事エリアの右側にある部分で「カテゴリー」とか「プロフィール」などが書いてあるところの見出しのことになります。

このサイトの見出しでは、グラデーションが掛かっている所になります。コードに書くとこんな感じになります。↓

/*サイドバー見出しカスタム*/
#side .st-aside .menu_underh2{
position: relative;
padding: 0.2em 0.5em;
background: -moz-linear-gradient(to top, #4481eb 0%, #04befe 100%);
background: -webkit-background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
background: linear-gradient(to top, #4481eb 0%, #04befe 100%);
color: white;
font-weight: bold;
text-align: center;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

#side .st-aside .menu_underh2{から｝までの中を変えるとSTINGER8でのサイドバー見出しの表記が変わります。

参考

今回はデザインを考えて、そこからコーティングをしてというスキルが僕には無いので以下のサイトを参考にさせていただきました。

どのサイトもバリエーションが豊富にあり、僕みたいな初心者にとってはありがたく思います。

[blogcard url=”https://www.nxworld.net/tips/50-css-heading-styling.html”] [blogcard url=”https://saruwakakun.com/html-css/reference/h-design”] [blogcard url=”http://web-dou.com/tool/css_gen_h.php”]