ジョッパリ・ワールド

Twenty Fifteenのカテゴリ表示を横並びにカスタマイズ;;

      2016/11/14

customize-tf

Twenty Fifteenのカスタマイズをちょこっとやりましたのでメモります。

サイドバーのカテゴリの表示部分です。デフォルトの縦並びを横並び表示に変えてブロックを詰んだようなデザインにしてみました。

カテゴリが増えてくると、リストがどんどん縦長になります。結構幅を取りますし視認性もちょっと落ちるかもしれません。

今回のカスタマイズでは親と子カテゴリがワンブロックに表示されます_。

まあ、そんな感じに見えるっていうだけの事ですけど。

category-hyouji2
タブレットの場合はこんな感じ。

category-hyouji1
スマートフォンとPCの表示はだいたい同じ感じです。

“float”と”inline-block”どっちがいいのか?

要素を横並びにする方法で真っ先に思いついたのが”float指定“でした。

実際これでも横並びは出来ましたが、float解除のCSSをどの要素に追加すればいいのかよく分からず一抹の不安がよぎりましたw

不具合が起こるかも?

そんな時「display: inline-block;」_というのを思い出しました。

これはブロック要素を横に並べる事が出来るCSSです。便利っすね!

Twenty Fifteen カテゴリ横並びCSS

今回のカスタマイズに興味ある方のために以下のサンプルCSSを用意しました。

Twenty Fifteen カテゴリー表示の場合

 
/* twenty fifteen カテゴリー横並びスタイル */

.widget_categories ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 4px 8px;
    background: #EFEFEF none repeat scroll 0% 0%;
    padding: 1px 2px 0px;
    line-height: 2em;
    border-radius: 3px;
}

.widget_categories ul li a {
    background: #f9f9f9;
    border: thin solid #f2f2f2;
    border-radius: 4px;
    padding: 1px 3px;
}

「My Category Order」を仕様している場合

 
/* My Category Order仕様 */

#mycategoryorder-2 ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 4px 8px;
    background: #EFEFEF none repeat scroll 0% 0%;
    padding: 1px 2px 0px;
    line-height: 2em;
    border-radius: 3px;
}

#mycategoryorder-2 ul li a {
    background: #f9f9f9;
    border: thin solid #f2f2f2;
    border-radius: 4px;
    padding: 1px 3px;
}

WordPressでカテゴリを自由に並び替えできるプラグイン「My Category Order」を仕様している場合は、CSSはIDを直接指定して並び替えています。本来カテゴリの階層に応じたクラスが指定されていますが、今回の変更ではこれで大丈夫でした。

子カテゴリなしで、このスタイルをそのまま適用すると、とてつもなくダサいデザインになります。きっと_。

CSSだけの変更で大きな不具合は置きないと思われますが、カスタマイズに関しては自己責任でお願いします。

改善点などありましたらぜひ教えてください!

Twenty Fifteen ブログ収益?

WordPressテーマをGush2からTwenty Fifteenに変えて1週間以上経ちました。

アクセスに関しては大きな差はないです。ただし_

  • アドセンス報酬は半減です
  • 1,000pvで30円という悲惨な日も
  • もう月間5,000円を切りそうな勢いです;;ただし_

楽天アフィリエイトとamazonアソシエイトの報酬が上昇中です。ページ内のアフィリエイトリンクがGushの頃の1.5倍くらいクリックされています?

コンテンツ(記事ページ)まわりのたっぷりした余白は、サイドバーの視覚的干渉を軽減させてくれます。

結果として記事内の広告が引き立つ_っていうことですか?

わたし自身の目には、少なくともそう映ります。