京都のカメラ・写真講座の教室です。フォトスタジオでの個人レッスンなので他の受講者に気兼ねすることなく集中して受講することができます。カメラの設定や基本操作が解らなくても大丈夫。個人レッスンなので受講者の習得レベルに合わせて進めることができます。

ミラーレス一眼デジタルカメラ教室|初心者向け講座 個人レッスン|京都

ブログ講座

STINGER5(WordPress スマホ対応無料テーマ)のカテゴリー階層表示設定。

投稿日:2015/04/11 更新日:

WordPress のスマホ対応

先日も書いたように、Webサイトやブログのスマホ対応(モバイルフレンドリー)が重要になってきております。

 WordPressのスマホ対応テーマはどれにする? 4月21日までに対応しよう!

この記事でご紹介した無料のテーマ STINGER5 は、スマホ対応(モバイルフレンドリー)のテーマです。

WordPress 利用ブログで、スマホ対応が間に合いそうもなくて困ってるという運営者さんは、とりあえずテーマを STINGER5 に変更して、少しずつカスタマイズしていくという方法もありです。

また、バズ部さんが提供している無料のテーマ「Xeory」もとても使いやすそうです。

なんとスマホ対応が15分で完了?

テーマは変えたくないという方は、わかったブログのかん吉さんが、15分でスマホ対応する方法を書いていましたのでご参考に。

icon-link 一番簡単な、Googleモバイルフレンドリー対応の方法

こんな方法もあるんですね。

STINGER5 でカテゴリーの階層表示を設定する方法

STINGER5(WordPress スマホ対応無料テーマ)のカテゴリー階層表示設定

さて、本題です。
WordPress にはカテゴリーを簡単に表示するウィジェットがあります。

カテゴリーウィジェット

しかし、そのままではカテゴリーの階層構造がよくわかりません。

階層構造がわからない

ウィジェットの設定

読者から見ても不便なので、カテゴリーウィジェットの設定を変えましょう。

階層表示設定

icon-check-square-o 階層を表示

にチェックを入れて[保存]するだけです。

階層表示されたカテゴリー

カテゴリーが分類されました。
された?
分類はされたようですが、階層構造はまだ見えませんね。

CSSスタイルの追記

そこで、STINGER5 のスタイル(style.css)に追記して階層構造を表現します。
STINGER5 の style.css に直接書いても良いですし、子テーマがあればそちらに追加しても良いです。

スタイル設定

ul.children


padding-left: 1em;
を追記しました。

階層表示がわかりやすくなった

これで、カテゴリーが階層構造になりました。

STINGER5 も Xeory も少しずつユーザー目線でカスタマイズしていける無料テーマです。初めはデフォルトのままで記事を書きためていきながら徐々にテーマを触っていくのがオススメです。

今日も元気に楽しく♪

プロフィール

ハタモトシンイチ

フォトクリエイター

ハタモト シンイチ

何げない日常の1コマをカメラで切り取っています。
ブルーキャットデザインスタヂオ代表【飾る写真 制作】
セミナー講師【デジタルカメラ写真講座】
ビジネス著作権検定 上級フォトマスター検定1級|より多くの人がカメラと写真を楽しめるように、文章、写真、映像、音声コンテンツを発信しています。
 共著:Pinterestビジネス講座(翔泳社出版)
icon-instagram Instagram icon-facebook-square Facebook icon-twitter-square Twitter icon-rss-square RSS Feed
icon-camera フォトクリエイティブ教室
icon-desktop ブルーキャットデザインスタヂオ
 詳しいプロフィール
フォトクリエイティブ教室

カメラ講座

個人レッスン|はじめてのデジタル一眼カメラ!基本操作入門講座|京都
他の受講者に気兼ねなく集中して受講可能。習得レベルに合わせることができるので安心。自分のカメラが好きになる講座です。
詳細ページ

インスタグラム講座

インスタグラム講座|初心者のための反応率を高める写真の魅せ方|京都
インスタグラムで 1,000いいね!を超えるために実践し、効果的だった反応率を高めるインスタグラムの使い方、写真の魅せ方講座です。
詳細ページ