STINGER3サイドバーのリンクボタン化

公開日: : 最終更新日:2014/08/13 wordpressカスタマイズ , , , , ,

 スマートフォンでのカテゴリー一覧のをリンクボタン化してタップしやすくしよう。

 STINGER3のカテゴリー一覧は行間が狭すぎる。

 指でタップでできないよ。

 行間を広くしてもいいけどついでだからリンクボタンにしてみようと思う。

 smart.cssではなく、スタイルシートのほうを同じようにカスタマイズするとPC表示でもカテゴリーがリンクボタン化できるはず。

スマートフォン表示STINGER3サイドバーのリンクボタン化

1、smart.cssの中からsideを探す。

2、/*-------------------------------
side
--------------------------------*/
の下に、以下の記述を追加する。

#side ul li a {
 color:
#000;
 text-decoration: none;
 background-color:
#f3f3f3;
 padding: 20px;
 margin-top: 10px;
 display:
block;
}
#side ul li a:hover {
 color:
#FFF;
 text-decoration: none;
 background-color:
#FFC4C4;
 padding: 25px;
 color: #FFF;
 display:
block;
}

 【続きを読む】とか【もっと】と同じ色彩になる。

 数字とかカラーコードとかは自由に変えてみて。

子カテゴリーの左側を少し開ける

 親カテゴリーも子カテゴリーも開始位置が同じになるので子カテゴリーの左を少し空けたい。

 この場合、以下の記述を書き加える。

ul.children li a {
 margin-left: 20px;
}

 こちらも数字とかカラーコードとかは自由に変えてみてOK。

件数をリンクボタンの中に含める場合

 カテゴリーに件数を表示している場合、このままだと件数がリンクボタンの中に入らない。

 件数をリンクボタンの中に入れたい場合はfunction.phpの最後にある【?>】 の上にしたの記述を追加する。

add_filter( 'wp_list_categories', 'my_list_categories',
10, 2 );
function my_list_categories( $output, $args ) {
  $output =
preg_replace('/<\/a>\s*\((\d+)\)/',' ($1)</a>',$output);
 
return $output;
}

 function.phpをいじるときはサーバーの簡易FTPで編集したほうが安心。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

wordpressテーマSTINGER3カスタマイズ

STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示

 STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示してみよう。

記事を読む

wordpressカスタマイズ

wordpress全記事一覧アレンジメント

 プラグインを利用しない全記事リストのコードを少しアレンジしてみた。  STINGER3の「P

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のスマートフォン表示のパンくずリストをスタイルシートでリンクボタン化

 wordpressテーマSTINGER3のスマートフォン表示のパンくずリストをスタイルシートで

記事を読む

リンクボタン

フィードリーダーfeedlyの登録ボタンをブログに付けてみた

 Rss(フィード)は使ってる人には便利な機能らしい。  RSSを利用するといろいろなサイトの

記事を読む

wordpressテーマSTINGER3カスタマイズ

ウィジェットを使わないコメント・メタ情報・最近の記事リスト・カテゴリーリスト・タグリスト

 STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示してみよう。

記事を読む

wordpressテーマSTINGER3カスタマイズ

PAGE itiran 固定ページテンプレート (page-itiran.php)を使って全記事一覧を作る

 STINGER3には「PAGE itiran 固定ページテンプレート (page-itiran

記事を読む

wordpressテーマSTINGER3カスタマイズ

スマートフォン表示でTOPページのアイキャッチ画像を表示させないようにする

 STINGER3のスマートフォン表示のTOP画面のアイキャッチ画像を表示させないようにしてみる。

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のトップページやアーカイブ(カテゴリ・タグ・月別)の1記事表示文字数を変える

 STINGER3のトップページやアーカイブ(カテゴリ・タグ・月別)はデフォルトでは要約が表示される

記事を読む

wordpressテーマSTINGER3カスタマイズ

カテゴリー一覧とNEW ENTRYに背景色をつけてブロック分け

 wordpressテーマSTINGER3のサイドバーのカテゴリー一覧とNEW ENTRYに背景色を

記事を読む

wordpressカスタマイズ

プラグインを使わない記事一覧

 プラグインなしの記事一覧をあきらめ切れなかったので、今度はこんな風にしてみた。  更新日時順

記事を読む

Message

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑