超初心者のためのstinger5カスタマイズ~ヘッダーのデザイン変更編

シェアお願いします!

スポンサーリンク


読者数

今日の訪問者 480人

昨日の閲覧者 2715人

累計購読者数 4869人

ここではワードプレスを始めて、四苦八苦している初心者のための簡単なstinger5カスタマイズ方法を紹介していきます。

必ずバックアップを取ってから行いましょう。あくまで失敗しても自己責任でお願いします。当ブログでもバックアップ方法は、

ロリポップのFTPを使いこなす方法を紹介します。主に使い方はテーマやデータのバックアップが目的となります。 データベースはまた別のツー...

で紹介しているので参考にしてみてください。

ヘッダーカスタマイズ

stinger
以前はサイドバーとフッターカスタマイズを書いたので、ここではヘッダーのCSS変更などを書いていきます。

ここでは、ワードプレスでstinger5を導入した際の、簡単な初心者でもわかるアレンジを紹介しています。 必ずバックアップをとってから、カス...

上記も色々書いているので参考にしてみてください。テーマカスタマイザーの削除も忘れないようチェックしてから編集しましょう。

functions.phpの//テーマカスタマイザーで編集しない方は削除して下さい(ここから)~(ここまで)を削除してからCSSを編集しましょう。色はカラーチャートなどを参考にしてください。

ブログタイトルカスタマイズ

a0002_011007
まずはブログ名の色や大きさなどから。外観→テーマの編集→スタイルシート (style.css)

/*ブログタイトル*/

header .sitename {
font-size: 22px; あなたのブログタイトル名の大きさ
color: #fff;
line-height: 30px;
font-family: ‘Oswald’, sans-serif;
padding: 10px 0px 0px;
margin-bottom: 10px;
}
header .sitename a {
color: #333; ブログタイトル名の色
text-decoration: none;
font-weight: bold; ブログタイトル名を太くするかしないか
}
header .sitename a:hover {
-moz-opacity: 0.8;
opacity: 0.8;
}
/*ブログ名の下のキャプション */

header h1 {
font-size: 20px;
color: #666;
font-weight: normal;
}
header a {
color: #FFF;
text-decoration: none;
}
header .descr {  ブログタイトル下の簡単な自分のブログの説明文

font-size: 12px; その文字の大きさ
color: #666; 
font-weight: normal;
margin-bottom: 0px;
line-height: 20px;
padding-bottom: 10px;
}

ファビコン変更

自分のブログのURL左に黒い背景で5という画像があると思います。それをオリジナルの画像に変更しましょう。アイコン変換ツールなどを利用してください。

アイコン画像がほしい人は、外国のサイトですがFIND ICONSなどを利用しても中々便利です。

外観→テーマ編集→ヘッダー(PHP)手が当たって、文字を消すことなどで壊れないよう気をつけてください。

47行目あたりに下記記述があります。

link rel=”shortcut icon” href=”/images/logo.ico” /

これを消して下記に上書き変更してください。< >は全角で記述しているので<>半角に直してください。赤いところです。

link rel=”shortcut icon” href=”画像のURL” /
画像のURLとはメディアを選択して、メディアライブラリ→ファビコン予定の画像を選ぶ→と右横にURLがあるので、それをコピペして上記「画像のURL」と差し替えてください。
st
stinger5の一番大きい画像は、外観→ヘッダー→ヘッダー画像で簡単に画像が差し替えられますので、頑張ってください。

スポンサーリンク

メニューバー変更

外観→テーマの編集→スタイルシート (style.css)の中段あたりに下記記述があります。
/*——————————–
メニュー
———————————*/
nav li { background-color:#fff;←これをコピペすればメニューボタンの色が白になります。

position: relative;
float: left;
font-size: 13px;メニューの文字大きさ
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {  color:#fff;この色を入れるとマウスオーバーの色が変わります。はじめからは何も書いていません。

text-decoration: underline;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333; メニューの文字色
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}
ちなみにメニュー背景の色を画像にしたい場合は、下記で変更可能です。位置の微調整が必要な場合があるので、そこは割愛します。

background-image: url(“画像のURL”);

サイドバーの見出しなども上記で変更可能です。background-color: #色;を上記に変更すれば画像にさし変わります。

スマホのMENU表示変更

スマホで自分のブログを見ると上段に三MENUという表示があるのですが、これを「メニュー」とか「コンテンツ」とかに変える場合は、外観→テーマ編集→ヘッダーPHPに下記記述があるので、MENUという部分を変更してください。

<!– アコーディオン –>
<nav id=”s-navi” class=”pcnone”>
<dl class=”acordion”>
<dt class=”trigger”>
<p><span class=”op”><i class=”fa fa-bars”></i>&nbsp; MENU</span></p>
</dt>
<dd class=”acordion_tree”>
<ul>
<?php wp_nav_menu(array(‘theme_location’ => ‘navbar’));?>
</ul>
<div class=”clear”></div>
</dd>
</dl>
</nav>
<!– /アコーディオン –>

MENUのカスタマイズ

ここではスマホ表示の色の変更などを紹介しています。
/*——————————–
アコーディオン
———————————*/
#s-navi dl.acordion p {
margin: 0;
}
#s-navi dl.acordion {
margin: 0 10px;
}
#s-navi dt.trigger {
text-align: right; MENUの位置を変更したいならここを leftかcenterに変えましょう。
padding: 10px 0px;
cursor: pointer;
}
#s-navi dt.trigger .op {
font-size: 14px; MENUの文字の大きさはここを変更
color: #333; MENUの色はここを変更
padding: 0px 10px;
}
#s-navi dd.acordion_tree {
padding: 0px 10px;
display:none;
overflow: hidden;
}

まとめ

matome
始めたらキリがないデザインのカスタマイズですが、ブログを立ち上げたときは記事を書く事に専念して、記事が思いつかない時に気分転換で行う方が、おすすめです。

どちらにしても初心者の人は、デザインはあまりいじらずにできる日本語テンプレートなどを選んでいきましょう。

スポンサーリンク



シェアお願いします!

厳選記事

ここではスマホでお小遣い稼ぎや副業する方法などを紹介しています。自分のライフスタイルにあったものを見つけて、しっかり稼ぐコツを掴んでいきまし…
ここでは人気のポイントサイトからマイナーな所まで幅広く紹介していきます。特徴もそれぞれ載せているので、自分のライフスタイルに合ったお小遣いサ…

広告