モンスト中心、映画やアニメ、DIY…興味あることをその都度発信

269 views

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

変更箇所

こちらのサイト様でわかりやすく説明しております。
https://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

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

GIMPで簡単!!よく使われている文字加工のやり方

はじめに 今回は、ホームページのロゴ部分や、見出し部分、画像の上に掲載する文字など、少し目立った感

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む




PAGE TOP ↑