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

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

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

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

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

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

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

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

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

スポンサーリンク

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

作成するタイトルロゴのサイズですが、大きさに関しては個人の好みがあるのでコレじゃないとダメという事はありせん。ちなみに当サイトのロゴの大きさは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>
									<!-- ロゴ又はブログ名ここまで -->
									<!-- キャプション -->

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

/* 記事タイトル */
.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;
}

/* 中見出し */
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;/*下線*/
}

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

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

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でのサイドバー見出しの表記が変わります。

参考

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

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

まとめ

今回は、No.1「ヘッダー編」という事で、ぱっと目につく大きなカスタムをしました。

今後もSTINGER8を使ってカスタマイズを行った部分を領域(例えば、メニューBOX)ごとに備忘録のような形で書いていこうと思います。

何処のコードがどこを表しているのか？この部分は全くの初心者にとってはとても難しいと感じるところです。

そんな時は、Google chromeのデベロッパーツールを使うと分かりいやすいですよ。

最後まで読んでいただき有難うございました。