*

WordPress (stinger3)の細かなカスタマイズ~ブログタイトルや記事内hタグ~

はじめに

今回は、当ブログ表示画面の細かいカスタマイズを行ったのでそのやり方をご紹介していきます。
同じくWordpressでテーマがstinger3を使っている方の参考になればと思います。

ブログタイトルのCSSの編集

常にブログ最上部に表示されている「ブログタイトル」のCSSを少し変更しました。
まずは管理画面から以下の箇所まで移動しましょう。

ダッシュボード→外観→テーマ編集→スタイルシート(style.css)

上記の箇所より「/*ブログタイトル*/」の部分の内容を変更します。

CSSの編集

・変更前

#container #header #header-in #h-l .sitename {
	font-size: 30px;
	color: #fff;
	margin-bottom: 10px;
	line-height: 30px;
}

#container #header #header-in #h-l .sitename a {
	text-decoration: none;
	font-weight: bold;
}

・変更後

#container #header #header-in #h-l .sitename {
	font-size: 30px;
	color: #fff;
	margin-bottom: 10px;
	line-height: 30px;
	letter-spacing: 2px;
	text-shadow: 2px 2px 2px rgba(51,51,51,0.6);
}

#container #header #header-in #h-l .sitename a {
	text-decoration: none;
	font-weight: bold;
	color: #FFFDE6;
}

#container #header #header-in #h-l .sitename a:hover {
	color: #FFDE00;
	text-decoration: none;
	font-weight: bold;
}

表示のされ方

・変更前
スクリーンショット_110514_103309_AM

・変更後
スクリーンショット_110514_104041_AM

変更箇所

とてもシンプルなカスタムですが、追加したのは以下のCSSです。

/*行間を2px空けて表示させる*/
	letter-spacing: 2px;
/*文字に影を付ける(2pxで透過率が60%)*/
	text-shadow: 2px 2px 2px rgba(51,51,51,0.6);
/*文字色を変更させる*/
	color: #FFFDE6;
/*リンクをマウスオーバー(a:hover)したときのCSSを追記*/
#container #header #header-in #h-l .sitename a:hover {
/*マウスオーバー時のスタイルを指定*/
	color: #FFDE00;
	text-decoration: none;
	font-weight: bold;
}

記事内h2タグのcssの編集

続いて、投稿記事内のh2タグの編集をしていきます。

先ほどと同様の箇所より「/*中見出し*/ h2」の部分の内容を変更します。

CSSの編集

・変更前

h2 {
	font-size: 25px;
	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;
}

・変更後

h2 {
  position: relative;
  color: #fff;
  background: #99cc99;
  font-size: 23px;
  line-height: 1;
  text-shadow: 2px 2px 2px rgba(51,51,51,0.6);
  margin: 40px -50px 10px -50px;
  padding: 15px 5px 10px 40px;
  box-shadow: 0 1px 3px #777;
}
h2:after,h2:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #336633;
}
h2:after {
  left: 0;
  border-right: 5px solid #336633;
}
h2:before {
  right: 0;
  border-left: 5px solid #336633;
}

表示のされ方

・変更前
スクリーンショット_110514_110942_AM

・変更後
スクリーンショット_110514_115028_AM

変更箇所

こちらのサイト様でわかりやすく説明しております。
http://weboook.blog22.fc2.com/blog-entry-348.html

記事内h4タグのcssの編集

続いて、投稿記事内のh4タグの編集をしていきます。
当ブログでは文章を囲うときに使用します。

先ほどと同様の箇所より「/*子見出し*/ .post h4」の部分の内容を変更します。

CSSの編集

・変更前

.post h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f3f3f3;
	line-height: 28px;
}

・変更後

.post h4 {
	font-size: 14px;
	font-weight: normal;
	padding: 5px;
	margin-bottom: 20px;
	background-color: #f3f3f3;
	line-height: 20px;
}

表示のされ方

・変更前
スクリーンショット_110514_114733_AM

・変更後
スクリーンショット_110514_115059_AM

変更箇所

フォントの太字指定をなくし、サイズも小さめに書き直したくらいです。

最後に

以上がWordpressでstinger3のテーマを使用している方むけの、タグの細かい部分の変更方法でした。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 0 follow us in feedly

関連記事

スクリーンショット_102514_125258_AM

Benri500札幌~新しいSEO対策について

Benri500札幌のご紹介 こないだ私たちが札幌市のホームページ製作代行という業務を始めまし

記事を読む

スクリーンショット_111114_020302_PM

1カラムの高級感あるデザインテンプテート

はじめに 今回は前回の2カラムとは違い、1カラムのホームページのレイアウトサンプルをご紹介いたしま

記事を読む

紹介チケット

美容室ロゴ・看板・名刺デザイン

美容室のロゴ・看板・名刺デザインをさせていただきました。 ロゴ 4つ提案させていただき、こち

記事を読む

スクリーンショット_070215_105010_PM

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成②~基本的な設定~

はじめに 「コピペでできる!!サクサクっとwordpressオリジナルテーマの作成」2回目ですが、

記事を読む

スクリーンショット_102814_094432_PM

XHTMLとCSSを使って、固定幅で崩れないトップページのレイアウトを作る

はじめに またホームページ関連の内容になりますが、まずは前回までのおさらい。 先日こちらのブログ

記事を読む

スクリーンショット_110914_025524_PM

2カラム左ナビゲーションの別バージョンサンプル

はじめに 前回に引き続き、今回もホームページのレイアウトサンプルをご紹介いたします。 前回の

記事を読む

スクリーンショット_110814_063055_PM

2カラム左ナビゲーションのテンプレート

はじめに 今回は、札幌市格安ホームページ製作のbabyhoodで使用しているテンプレートのご紹介を

記事を読む

スクリーンショット_122815_033611_PM

クライアント向けにwordpressサイトを作ったときに役立つプラグイン10選

はじめに 今回はwordpressでクライアント向けにホームページやブログ等を作ったときに入れると

記事を読む

スクリーンショット_070115_021223_PM

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成①~準備~

はじめに このブログでも姉妹ブログでも、私はwordpressを使っています。 wordpres

記事を読む

スクリーンショット_060215_121053_PM

最新版!!オススメFTPソフト「WinSCP」のダウンロードとインストール、使用方法まで

はじめに ファイル転送のFTPソフトを探していて、使いやすさの点などでこのWinSCPというフリー

記事を読む

e2941cce339456cc46d8e9ee35a23a7f
モンスト!!天地開闢の始神「イザナギ」を徹底攻略!!

天地開闢の始神「イザナギ」 この記事はモンストの天地開闢の始神「

2016-11-02_11h29_48
モン玉ガチャ!!排出率や当たり確率について分析してみた

新しく始まったモン玉ガチャ。今回が初開催で、今後は定期的に開催される模

2016-11-01_16h51_05
Firefoxに必須の基本アドオン「FireGestures」の使い方

Firefoxを使うならまず入れていきたい基本的なアドオンのひとつ「F

2016-07-05_14h18_37
プログラミング学習サイト!!初心者でも楽しく覚えられるProgateがすごい!!

はじめに プログラミングを勉強したいと思ったときに、まず何からしてい

2016-06-30_13h31_04
画面が狭くてやりずらいときに試してほしい、作業レベルに合わせた3つの対策

PCで作業をしていると、画面がいっぱいになってしまい作業がやりずらいこ

→もっと見る

PAGE TOP ↑