役立った!と思ったら共有

【Simplicity】見出しのデザインを変更

【Simplicity】見出しのデザインを変更

3学期制の方は中間お疲れ様です。2001Yです。

この当ブログもSimplicityを利用させていただいています。少しずつカスタマイズしているのですが、気になったのでただの素人ですがSimplicityの見出しについて調べてみました。

SimplicityはH1がない

Simplicityでは記事内でH1が使われていません。

161014-0002

記事タイトルがH1とされ、記事内最大<h>タグはH2ということになります。

161014-0003

今回は記事内の見出しデザインを変更するのでH2以降を変更します。

Simplicityは普通の<h>タグじゃない

Simplicityにかぎた話ではないですが、テーマでは<h>タグを使用した時に被らないようにこのような一般的なCSS、<h>タグになっていません。それとここに出て来るclassはSimplicityのものですが、中身はSimplicityではありません。

.h2{
    font-size: 30px;
}
.h3{
    font-size: 25px;
}
.h4{
    font-size: 20px;
}

実際は記事用には.articleが目についたclassになります。一応、Articleとは記事という意味です。なので、このようにCSSを書いていきます。

.article h2 {
    font-size: 30px;
}
.article h3 {
    font-size: 25px;
}
.article h4 {
    font-size: 20px;
}

ちなみにはサイドバーでは#sidebarが使われています。

#sidebar h3 {
    font-size: 30px;
    color: red;
}

いざデザイン変更!

と言ってもCSSを一からかけるような技術はないので他の素晴らしいコードを見せていただきます。

とばいしたい方はこちら

▼まずは今回参考にパクらさせていただいたチャーミング愛知!様のCSSです。本当にたまたまですが当ブログと色が似てます(苦笑

【simplicity】見出しタグをカスタマイズ。h2,h3,h4を色変更でブログをあなた色に染める - チャーミング愛知!
Wordpressのテーマsimplicityの見出しタグカスタマイズ方法。コピペで出来ます。

▼以前livedoorでお世話になったNxWorld様のCSSです。フラットで綺麗なデザインですね。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなも

▼第0版様という難しいお名前ですが可愛らしいデザインがたくさんあったので紹介させていただきます。

CSSコピペでカスタマイズする見出しデザイン10個
こんにちは、とみーです。 ブログをお持ちの方必見! スタイルシートをコピペするだけでOKな見出しを作成しました…

▼賢威カスタマイズ研究所様のデザインは非常にシンプルで使いやすいと思います。

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所
記事中に使用する見出しタグ「、」。 この見出しタグのデザインを変更するだけで、ブログ内のイメージはガラッと変わります。 賢威はシンプルな・・・

▼WEB道様のジェネレーター。有名ですね!非常に使いやすいジェネレーターの一つです。

CSS見出し-ジェネレーター | WEB道
画像を使用せずCSSのみで見出しを作成するCSSジェネレーター。吹き出し型、リボン型なども生成可能。

▼WEB道様とは違ってちょっと可愛らしいデザインのジェネレーターです。

好きな色でCSS見出しが作れます | スタイルシート見出しメーカー
スタイルシート見出しメーカーは好きな色で簡単にさまざまなCSS見出しが作成できるツールです。好きな色を選んで作成ボタンを押せばシンプルなスタイルシート見出しのHTMLとCSSを自動生成します。使い方もコピーアンドペーストでOKだから簡単です!

Simplicity用に調節

いただいたCSSをSimplicityに合うように調節していきます。

NxWorld様の「下ボーダー × 先頭の文字大きく」を例に挙げていきたいと思います。まずそのままのコードです。

h1 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
h1:first-letter {
	margin-right: .1em;
	font-size: 1.5em;
}

先ほども説明したようにこれではタイトルにデザインが適用されてしまいます。これだけでは適用されないのですが。そこで、h1の部分を.article h2に変えていきます。

.article h2 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
.article h2:first-letter {
	margin-right: .1em;
	font-size: 1.5em;
}

こうなります。これで完成です。

このように、「」の後の部分は変更せずに前の部分のみを変更します。h1:beforeの場合は.article h2:beforeとなります。

どこに書き込めばいいのか

わかる方は飛ばしていただいて結構です。

子テーマをインストール

テーマに直接書き込んでしまうと、テーマがアップデートした時に今まで変えてきた設定が全てなくなってしまうため、子テーマというものがあります。

子テーマのインストール方法については公式サイトの方をご覧ください。

Simplicityの子テーマをインストールする方法
Simplicityは、そのままでも利用できますが、カスタマイズを念頭に置いて作成したWordpressテーマです。 子テーマを作成してスタイルシートから外観を変更しやすいように作りました。 「そもそもなんで子テーマを使う必要があるんだ?

スタイルシートに記入

capture_9サイドバーの外観>テーマ編集でスタイルシートに変更を加えます。

参考

【simplicity】見出しタグをカスタマイズ。h2,h3,h4を色変更でブログをあなた色に染める - チャーミング愛知!
Wordpressのテーマsimplicityの見出しタグカスタマイズ方法。コピペで出来ます。

最後に

myiconSimplicityは非常に追加いやすいテーマでいつも感謝してます。WordPressずっと使ってみたくて使ってるんですが、本当はPHPよりもHTMLやCSSをやってみたかったり笑
でも、WordPressは記事を書くのたとっても楽です!!
では!

!
 
好きなものはAppleと音楽! 最近カメラにも手を出し始めてみたり? 勉強はできないけど好きなことは好きなだけする男子中学生!2001年生まれ。お誕生日は9/20。

役立った!と思ったら共有

2001Y のアカウント