金利の変動

賢威6.1プリティーカスタマイズ サイドバーのリストアイコンの変更

このブログは、賢威6.1のプリティーデザインを使用しています。

 

このブログでは、プチカスタマイズをしているんですが、
小さなカスタマイズだけでも、イメージって変わりますね。

 

サイドバーのリストアイコン、矢印から可愛いアイコンに変更しません?

 

 

 

 

賢威のテンプレートは、ブログのテーマによって、
イメージを変更できるようにベースのデザインが5個あります。

その中でも、プリティーは女性向けかも?

 

これもまた、ブログのテーマによっても違うかもしれませんが、
女性的デザインって、ピンクっぽいものって思いがちですが、
そうではなくて、ベースのデザインをちょっと変更するだけで、
イメージが女性向けになったり、ビジネスっぽくなったりするものです。

 

プリティーは賢威5から使っていたんですが、やっぱり可愛いなーって思います。

 

今回のデザイン変更で、以前よりももっとシンプルになりました。

 

がしかし!!

 

ちょっとえぐいのが、リストアイコン!!

そう感じるのは、私だけかしら?

 

ちょっと可愛いアイコンに変えるだけで、
全体のイメージが変わります。

 

サイドバーのリストアイコンの変更方法をご紹介しますね。

 

 

賢威6.1になって、初心者さんにも簡単に設定が可能になったのもよかったんですが、
以前の5の場合は、サイドバーにウィジェットを利用した時、
リストアイコンが表示できなかったんです。

 

こういう時に、サポートサイト利用すると、
なんでもこたえてくれるので、嬉しいところですよね。

 

今回6.1になって、ウィジェットアイコンのリスト表示も、
最初から、CSSに含まれていたので、こちらも楽ちんです。

 

ウィジェット利用が多いので、ここのリストアイコンを変更すれば、
このブログのように、ちょいっと可愛いサイドバーに変身します。

 

 

 

 

サイドバーのリストアイコンの変更前準備

予めリストアイコンを用意する必要があるんですが、
私からの特典で、「ホームページで使える画像」というのがあるんですが、
その中のリストアイコンを利用してもいいですし、
また無料の素材サイトからとってきてもいいですよね。

 

私がよく使っているサイトはこちらです。
可愛いリストアイコンや画像がいっぱいありますよ。
フリー素材Blue-green

 

このブログで使っているリストアイコンは、すべてこのサイトからお借りしています。
自分のブログのイメージに合わせて、選んでくださいね。

 

他にも、フリー素材のサイトはたくさんあります。
好きなサイトをまとめてありますので、よかったら覗いてみてくださいね。
フリー素材提供サイト

 

 

リストアイコンを用意したら、画像をアップロードするんですが、
FFFTPを使って、直接フォルダにアップロードした方が早いです。

 

それに、アップロード先のURLも直接サーバーのファイルへのアップロードの方が、
URLも短くて済みますので、表記も簡単です。

 

FFFTPのしていない方は、こちらを参照して設定してください。
ワードプレスの下準備 FTPの設定

 

 

フリー画像からアイコンをゲットしてきます。
※何個でも大丈夫ですよ!!

 

FFTPを使って、サーバーに画像をアップロードします。

 

どこにアップロードするかというと・・・・

 

サーバーに接続したら、自分のサイトのドメインの中を見てくださいね。

 

 

public_html フォルダの中に(フォルダをクリック)wp-content というフォルダ
作成されているかと思います。

 

そこに、ワードプレスを構成するファイルなどが作られています。

 

その中の themes(テーマ)フォルダの中に、インストールしたテンプレートなどが、
格納されているので、クリックします。

 

テンプレートをたくさんインストールしている方は、
自分のお使いのテンプレート名を選んでくださいね。

 

 

賢威テンプレートの場合は、keni61_wp_○○(デザインの種類)_ダウンロードした日付
という記述になっているフォルダが作成されているので、
賢威テンプレートフォルダをクリックしてください。

 

この中には、ワードプレスのテンプレートを構成している、
ファイルや画像が格納されています。

 

images フォルダは、その名の通り画像が保存してあるフォルダです。

 

この中にも、いろんなフォルダが入っています。

 

imagesフォルダの中に、アップロードしてもいいですし、
imagesフォルダの中にも、iconフォルダというのがあるので、
そこにアップロードしても構いません。

 

アップロードできたら、そのアイコンにポインターを合わせて、
右クリックしてみて。
こんな感じのメニューが表示されますよ!!

アップロードURLのコピー

「URLをクリップボードへコピー」をクリックすると、
アップロード先のURLをコピーできますので、メモに貼って保存しておきましょう。

 

ここまでで、前準備なんですが
ちょっと長くなってしまいましたが、あともうちょっとなので、
ファイトです!!

 

 

サイドバーのアイコンを変更する(CSSの変更)

サイドバーのリストアイコンを変更するには、CSSの変更も必要です。

 

デザインやファイルの変更などは、ワードプレスの場合は
ダッシュボードの中の、「外観」から変更をかけます。
※これは、覚えましょう!!

 

「テーマの編集」から、右のメニューで「スタイル」の中の、 design.css をクリック。

 

コメントアウトで、
/*●サイドメニュー*/ を探しましょう。

初期設定は、こんな感じのコードです。

 

 

 

このCSSの

backgroundを変更します。

記述は、こんな感じです。

background: url(アップロード先のURL) 2px 15px no-repeat;
※URLのみ変更しましょう。
 

賢威6.1テンプレートに変わってから、
サイドバーのデータ構成が、サイドバー・サブコンテンツという風に
変更になりました。

 

あともう一か所、サイドバーはウィジェットが使えるので、
そこも一緒に変更します。

 

 

/*●ウィジェットメニュー*/ というコメントアウトを探してください。

 

ウィジェットは、サブコンテンツと一緒の設定をしているので、
一括で、変更可能です。

 

初期設定のコードは、こんな感じです。

 

 

このコードの中の background のURL先を変更すればOK!!

 

 

ちなみに、

.widget-conts ul li{ の方はカテゴリでいうと親要素
.widget-conts ul li li{ の方は子要素 となります。

 

子要素の方は、親要素より、小さいアイコンにすると
バランスが取れますよね。

 

ファイルの変更が終わったら、いつものように
「ファイルを更新」ボタンをクリックして、更新をかけます。

 

 

ブログを確認してくださいね。
※F5キーを押下して、全体の更新をかけましょう。

 

こんな感じになるといいです。

サイドバーのリストアイコン変更後

 

ちゃんと親要素のアイコンと、子要素のアイコンが変更になってますよね。

 

 

文章にすると、えらい長いですが、
変更するには、そんなに時間がかかりません。

 

 

サイドバーのアイコンを変更しただけでも、
ブログのイメージは変わります。

 

 

ブログのテーマに沿った、アイコンも必要よ!!

 

参考にやってみてくださいね。

 

※あまりこだわりすぎても、疲れるのでほどほどに・・・・・
 
 
 

コメントを残す

サブコンテンツ

このページの先頭へ