2016年1月16日

カテゴリ一覧をポストイット風、付箋っぽくするカスタム、WordPressのフッター。

スポンサードリンク

 カテゴリ一覧や、タグ一覧を、
ポストイットのような付箋風にします。

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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク