mail2

賢威の見出しを画像カスタマイズ!背景の色や幅、枠を影付き角丸に

岩田です、

賢威のサイドバーをおしゃれにする
カスタマイズ方法をいくつかまとめました。

ワードプレステーマ賢威は

「ユーザーがカスタマイズしやすいように」

というのが売りです。

ですので、他のデザインされたテーマとは違い
テーマ編集がしやすくあなたの個性を出しやすいと
思うので参考にしてくださいね。

この記事では以下のサイドバーカスタマイズを紹介。

  • 見出しの背景色を変える
  • サイドバーの幅を変更する
  • サイドバーに影を付けて角丸にする
  • 画像を使った見出しの作成

これらについて書いていきます。
それでは、どうぞ。

サイドバーと見出しの色を変更する方法

サイドバーは初期状態では実は白ではなく透明なのですが
その部分に色を付ける方法と見出しの色の変更について
この項目では説明します。

サイドバーの背景色を変更する方法

まず、サイドバーの色を変更するには
背景色を指定するコードを追記する必要があります。

外観⇒テーマ編集⇒design.cssへ

そして、画像の部分を探してください。

賢威 サイドバー 背景

ここに色を指定する下記のコードを追記します。

賢威 サイドバー 色

追記するとこのようになりますので
選択してある部分を変更してお好みの色にしてください。

賢威 サイドバー 背景色

これで背景色は変更できました。

見出しの色を変更する方法

次に見出しですが同じようにdesign.cssを編集します。

まず、画像の部分を探してください。

賢威 サイドバー 見出し 色

ここに先ほどと同じコードを追記します。

賢威 サイドバー 見出し 背景色

このようになります。
同様に選択されている部分で色を指定し
あとはファイルを更新すれば完成です。

賢威 サイドバー 見出し 背景

お疲れ様でした。

賢威のサイドバーの幅を変更する方法

サイドバーの幅を変更するのはとても簡単です。

今回はレイアウトCSSを編集するので
外観⇒テーマ編集⇒layout.cssを選択。

賢威 サイドバー 幅

するとこのように1カラムから3カラムまでの
レイアウトの指定がされています。

賢威 サイドバー 幅 指定

賢威 サイドバー 幅 指定

このサイトでは2カラムを使用していますので
2カラムを例に使いますが他もやり方は同じです。

変更箇所を探してほしいのですが
目が疲れるのでlayout.cssを選択後に

Macユーザーは「command+F」
winユーザーは「Ctrl+F」

と打ち、右上に出てくる検索窓に

「.col2 #main-and-sub」

を入力して探してください。

すると画像の部分が出てきますので
そこに書かれている%の部分の数字を変更します。

賢威 サイドバー レイアウト

ここを変更すればサイドバーやメインコンテンツの
幅を変更することができます。

【変更前】

賢威 サイドバー 変更前

【変更後】

賢威 サイドバー 変更後

これで幅の変更は以上です。

お疲れ様でした。

サイドバーを影付き角丸にカスタマイズ!

賢威のサイドバーは初期状態ですと

賢威 サイドバー

このように角が立っています。

私が思うのはどうしても角が多くて
訪問者を常に緊張させているような気がします。

もちろん、意識はしていないでしょうけど
潜在的な問題で。

また、サイトによってはもう少し
柔らかい感じにしたいという方も
見えると思います。

ですので、

賢威 サイドバー 影

このようにする方法を紹介します。

影付き角丸する手順

外観⇒テーマ編集からdesign.cssを選択。

そして、どこでもいいので以下を追記します。

私はわかりやすいのでサイドバーの項目の
一番下に追記しています。

賢威 サイドバー 角丸

あとはファイルを更新して反映されるまで
ほんの少し待てばOKです。

お疲れ様でした。

サイドバーの見出しを画像にカスタマイズ!

さて、この項目では通常の見出しではなく
完全なオリジナルの見出しを作っていきましょう。

テスト用に作成してみたので
参考にしてください。

テスト用の完成はこうなります。

賢威 サイドバー カスタマイズ

Step1:画像を作成する

今回、作成したのは「幅:280px」「高さ:55px」です。

フォトショップでグラデーションを付けて
サイト作成ツールのSIRIUSについてくる
矢印を付けただけのものです。

画像単体はこのようになります。

side

Step2:画像をアップロードする

ダッシュボードのメディアから新規追加をクリックし
作成した画像ファイルをアップロードしてください。

賢威 サイドバー 画像 アップ

(クリックで拡大します)

そして、右側にある編集をクリックして
画像のURLをコピーします。

賢威 サイドバー 画像 URL

(クリックで拡大します)

Step3:サイドバーに画像を表示させる

この作成した画像を表示させるために
例のごとく「design.css」を編集します。

以下の部分を探してください。

賢威 サイドバー 画像

そして、囲ってある部分を以下のコードに変更します。

変更後はこのようになりますので先ほど
アップロードした画像のURLを()内に入力し
ファイルを更新してください。

賢威 サイドバー 画像 カスタマイズ

私の場合は矢印を付けていますので
文字と重なってしまい調整が必要になります。

賢威 サイドバー 文字

ディベロッパーツールの要素の検証で
文字の位置や大きさなどを確認しつつ
微調整をして完成となります。

賢威 サイドバー カスタマイズ

これでサイドバーのカスタマイズ方法は以上です。

あなたもこれでオリジナル味あふれる
サイトを作ることができますね!

最後までお読み頂きありがとうございました。

突然ですが、金儲けに興味ありますか?

『お金を稼ぐ方法』を知りたいですか?

● 4日間で165,500円稼いだ秘密...
● 大学生が初月で50万円以上稼げたワケ
● 主婦でも毎月5万円が入金される在宅ワーク
● 芸能人のようにブログで稼ぐ仕組みの作り方
● 60歳のジジイが1日で12,000円稼いだ方法
● 家族に見捨てたれたサラリーマンの起死回生法
● あなたの私生活からお金を生み出す思考法
● 夫婦仲、恋愛にも役立つ人心掌握術
● 会社にバレずにこっそり稼げる副業ビジネス
● 脱サラして家族とずっといれる時間を作る方法
● あなたの夢を現実とする究極の目標設定

など、

インターネットで稼ぐために
必要な情報をふんだんに詰め込んだ
最強のバイブルを僕のメルマガに
登録してくれた方にプレゼントします。

現在、まとめの段階に入っているため、
近いうちに配布することができます。

が、

配布したあとの反響によっては
有料で販売するかもしれません。

そのつもりで作っているので、
無料で手に入れられるのは

"イマ"登録した人だけになるかもです。

ですから、僕の作った最強のバイブルに
興味があり、ネットで稼ぐ情報が

『欲しい!!』

という方は今のうちに登録だけでも
済ませておいてください。

ブログで書いてしまうと、
僕が積み上げてきたノウハウが
パクられてしまいます。

そうなると僕の儲けが減ってしまって、
おいしい思いができなくなる可能性が
出てくるので、メルマガ読者だけに
公開していこうと思います。

メルマガに登録してくれる人数なんて、
日本の人口からすれば、微々たるものですし、
僕の稼ぎに影響を与えることはありません。

下に表示されるメルマガ登録フォームに

※名前(性)
※メールアドレス(普段使っているもの)

を入力して「今すぐ"登録"する!」ボタンを
クリックしてください。



*お名前(姓)
*メールアドレス

注) 登録いただく名前・メールアドレスは
最先端のセキュリティシステムを使って、
プライバシー保護しますので、ご安心ください。



すぐに折り返し、自動返信メールが
送られてきますので、登録したメールアドレスの
受信ボックスを確認してください。

僕のメルマガではかなり
"強烈なコトバ"を使ったりしているので、
迷惑メールに振り分けられるかもしれません。

万が一、受信ボックスにメールがない場合は
迷惑メールフォルダも確認してみてください。

今後、僕からのプレゼント情報などを
確実に受け取るために、メールの受信設定も
しておいてくださいね!

設定方法はこちらのサイトに
詳しく書かれているので、参考にしてください。

⇒ http://46mail.net/

お気軽にコメントをどうぞ(^▽^)/

*
*
* (公開されません)

Facebookへのコメント

mail2