ポストイットのような付箋風にします。
WordPressのカスタマイズ。
カテゴリ一覧を付箋のようにする方法、Stinger5
Stinger5に限らず、他のテーマでも応用できます。
今回はカテゴリ一覧に適用させますが、
もちろんタグ一覧でも応用できます。
今回はWordPressですが、
Bloggerをお使いの方はこちらの過去記事をどうぞ。
ラベル一覧をアレンジする。ポストイットのように色づけてキレイにする。
では、WordPressやStinger5ユーザーの方、
やってみましょう。
フッターにカテゴリ一覧を呼び出している方はfooter.phpを。
サイドバーの方はsidebar.phpを開きます。
子テーマでOK。
ではコードを見てみましょう。
ウィジェットにカテゴリ一覧を入れている方は、
大体こんな感じになっていると思います。
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : // ?>
<?php endif; ?>
直接カテゴリーのコードを書き込んでいる方はこんな感じ。
<h4>カテゴリー</h4>
<ul>
<?php wp_list_categories('show_count=1 & title_li='); ?>
</ul>
これを、以下のコードで囲みます。
<div class="footer-category">
ここにカテゴリ一覧のコード
</div>
以上でOK、次はCSSで調整しましょう。
カテゴリ一覧をポストイット風にするCSS
では、CSSで装飾します。
以下のコードを追加して下さい。
追加する箇所は、スマホ・タブレット・PC含め全部を指定できるところ。
Stinger5の場合、全体に適用するようにするのは、
以下のレイアウトスマートフォンより、上に記述していきます。
/*レイアウト スマートフォン
----------------------------------------------------*/
@media only screen and (max-width: 780px){
ちなみに、
スマホだけ、PCだけ、等、
好きなデバイスだけに適用させる事もできますので、そこはお好みで。
ではコードです。
細かいところや色は修正してください。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
/*--- フッターカテゴリーボックス ---*/
.footer-category {
overflow: hidden;
font-size: 14px;
}
.footer-category li{
margin: 0;
float: left;
list-style: none;
}
.footer-category li a{
font-size: 12px;
background-color: #E6F0E6;
text-decoration: none;
border: 1px solid;
border-color: #ccc;
border-radius: 10px;
text-decoration: none;
box-shadow: 4px 4px 4px rgba(1,0,0,0.5);
}
.footer-category li a:before {
font-family:"FontAwesome";
content:"\f02c";
font-size:10px;
color: #4682B4;
margin-right: 1px;
}
.footer-category li a:hover{
background-color: #dcdcdc;
}
以上です。
文字の色や大きさは見やすくなるように調整してくださいね。
ちょっと影もつくようにしています。
それはこのコード
box-shadow:
参考にしたサイト
【STINGER5】フッターに『カテゴリー』一覧ウィジェットを追加する方法
http://sitemiru.com/2015/01/30/stinger5-footer-category/
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録