速報・最新ネタ

ニュースネットでお小遣い稼ぎ

STINGER5サイドバーのNEWPOSTをプロ仕様の素敵な枠にカスタマイズしてみました!!

      2015/12/31

Sponscred Links

サイドバーのカスタマイズをしてみました。

デフォルトのNEWPOSTは、

サイドバー編集NEWPOSTカード型に変更befor

こんな風にカスタマイズしてみました、簡単にできますのでよろしければどうぞ。

サイドバー編集NEWPOSTカード型に変更after

必ずSTINGER5をバックアップしてから自己責任で行ってください

このサイトの情報より行ったカスタマイズによるすべての責任は負いかねます

目次
■ NEWPOSTの抜粋文を削除しすっきりさせる
■ NEWPOSTのタイトルの文字の大きさをを変更してみました
■ NEWPOSTに影付きの枠を設定してみた

■ NEWPOSTの抜粋文を削除しすっきりさせる

デフォルトのNEWPOSTだとタイトルが長いと読みにくくなりますし、抜粋分まで読む訪問者はいないのではないかと思います。

なのでこの抜粋分を削除してみます。

ワードプレスの管理メニュー(ダッシュボード)から「外観」→「テーマの編集」→「newpost.php」をクリックします。

サイドバー編集NEWPOST抜粋分削除

サイドバー編集NEWPOST抜粋分削除1

下記コードを探してください。

サイドバー編集NEWPOST抜粋分削除2

探しましたら削除し「ファイルを更新」をクリックしてください。

ハイ出来ました、ずいぶんすっきりしたと思いませんか?

■ NEWPOSTのタイトルの文字の大きさを変更してみました

ここではNEWPOSTのタイトルの文字の大きさを自由に変更する方法を紹介いたします。

管理メニュー(ダッシュボード)から「外観」→「テーマの編集」→「style.css」をクリックします。

サイドバー編集NEWPOST抜粋分削除

サイドバー編集NEWPOSTカード型に変更

下記コードを以下の画像の個所に張り付けてください。

#kanren dd h5 {
font-size: 11px;
}

サイドバー編集NEWPOSTカード型に変更

 ↓   ↓   ↓

サイドバー編集NEWPOSTフォントの大きさを調整
出来ましたでしょうか?

この11pxの数字の部分が文字の大きさになります、自分の好みの数値に変更してサイトを確認してください。

ここでは、文字変更の画像は省略させていただき、次に進んでいきます。

■ NEWPOSTに影付きの枠を設定してみた

最初に示したカスタマイズ後の画像のような枠を設定してみます。

ちょっとプロ仕様って感じでいいと思いませんか?

では、管理メニュー(ダッシュボード)から「外観」→「テーマの編集」→「style.css」をクリックします。

サイドバー編集NEWPOST抜粋分削除

サイドバー編集NEWPOSTカード型に変更

以下のコードを先ほど貼り付けた、文字サイズ変更のコードの下に張り付けます。

サイドバー編集NEWPOSTフォントの大きさを調整

#kanren dl {
padding: 10px;
background: white;
height: 100px;
border: 2px solid royalblue !important;
box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}

サイドバー編集NEWPOSTカード型に変更2
貼り付けましたら、自分のサイトを確認してください。

最初に変更後と示した画像のように素敵な枠が作成されました、いかがでしたでしょうか?

ちょっと感じが良くなったと思います。

お疲れさんでした。

■ 他にもこんなカスタマイズをしております、よろしければどうぞ

STINGER5初心者でもできた、ヘッダー画像設定とヘッダーのサイズを変更する簡単な方法

STINGER5のトップページに、最新投稿記事の全文を1件だけ表示する方法!初心者用・簡単カスタマイズ

STINGER5のh2・h3・h4見出しカスタマイズ|プロのような見出しを初心者でも簡単に作る方法

STINGER5・h2~h4デフォルト見出しをAddQuickTagを使って簡単に使用する方法

初心者の私にもできた!!STINGER5のh2見出しをカスタマイズする簡単な方法

 - STINGER5 , , , ,