初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

[初心者]STINGER3の基本的なカスタマイズ

      2015/04/20

STINGER3 基本的なカスタマイズ

スポンサーリンク

STINGER3 テキスト色や装飾の変更

stinger3スタイルシート (style.css)のカスタマイズです。

基本的なところばかりですが、「ここどうするんだっけ?」と思う事が多いので(汗)、覚え書きのために作ってみました。

サイト内の文字色や装飾部分のカスタマイズです。

カラーの変更をする場合は、カラーコードを変えて下さいね。

 

カラーコード参考サイト:原色大辞典 さま

 

本文の文字色を変える

記事内の文字の色を変更します。

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

#wrap #wrap-in #main { ←style.cssからこの部分を探します。

マーカー部分を加えて下さい。カラーはお好みで^^

 

 

サイドバーの文字色を変える

サイドバーの文字の色を変更します。

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

#wrap #wrap-in #side { ←この部分を探します。

マーカー部分を加えて下さい。カラーはお好みで^^

 

リンクの変更

リンクの下線を消す

リンクの下線を消して、マウスオーバーした時に下線を付けます。

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

a { ←この部分を探します。

↑最初はこの状態を、下記に書き換えます。

カラーはお好きなカラーで^^

 

 

点線でかわいくカスタマイズ

記事のタイトルの下に点線を入れる

記事タイトルの下に点線を入れてかわいい見出しにします。

タイトル下の点線

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

.entry-title { ←この部分を探します。

↑この部分を変更します。

マーカーの部分を変更します。

線の太さや形はお好みで変えて下さいね。

線の種類
solid  (実線)
double  (二重線)
dotted (点線)
dashed  (破線)
none (線なし)

 

参考サイト えけこのくるる さま

 

トップページの新着記事一覧に区切り線を入れる

新着記事一覧の 区切り線を入れる方法です。

トップページの点線

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

.entry { ←この部分を探します。

↑この部分にマーカー部分を追加します。

 

スマホも変えたい場合は、smart.cssで同じように書き換えます。

線の太さや形はお好みで変えて下さいね。

線の種類
solid  (実線)
double  (二重線)
dotted (点線)
dashed  (破線)
none (線なし)

 

参考サイト りんろぐ。 さま

どの作業も「バックアップ」はお忘れなく!

 

まとめ

以上、このサイトでも行っているSTINGER3のカスタマイズです。

基本、私の覚え書きですが、もし違っているところがあればご連絡ください。

 

 - STINGER , , ,

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

[STINGER3]トップページ・サイドバーのカスタマイズ
[STINGER3]トップページ・サイドバーのカスタマイズ

STINGER3の基本的なカスタマイズ第2弾です。 改めて新しいサイトを作るとき …

STINGER3 ウィジェット広告の設置方法と配置は?
STINGER3 ウィジェット広告の設置方法とサイトの配置は?

前回のウィジェットの設定方法の続きで第2回目となります。 今回はワードプレスのテ …

[stinger3]ワードプレスヘッダー画像と背景色の変更
[STINGER3]ワードプレスのヘッダー画像と背景色の変更方法

今回は、いよいよワードプレスのテーマSTINGER3のカスタマイズです。 ◆今回 …

STINGER5
STINER5インストールとカスタマイザーで色のカスタマイズ

とうとう、STINGER3からSTINGER5にバージョンアップを行いました。 …

[初心者]ワードプレスのテーマSTINGER3をインストールする
[初心者]ワードプレスのテーマSTINGER3をインストールする

今回は、ワードプレスにテーマを設定してみましょう。 スポンサーリンク このページ …

FeedlyボタンとRSSボタンを並べて設置する方法は?
FeedlyボタンとRSSボタンを並べて設置する方法は?

今回は、以前から付けたいと思っていたFeedlyとRSSのボタンの設置方法です。 …

snsボックス
【Stinger3】SNSボックスを縦に トップページ以外は非表示にする

お世話になっているStinger3で、少し気になるところと言えば、追尾してくるS …