ブログテーマをライオンメディア・１カラムへ変更

ブログのテーマをライオンブログから、ライオンメディアに変更しました。同じFITから出ているメディア向けのテーマですが、普通のブログでも十分マッチします。ライオンブログに不満があったわけではないのですが、定番スタイルから新しいデザインにしたかったからです。

このテーマの良いところは

1. トップページ上部にピックアップ記事を３件表示することができる。普通のブログでは、どの記事を載せるか迷いますが…
2. 記事一覧の画像の上にカテゴリーが表示される。
3. ランキング記事がトップページの下に５～１０件表示することができる。
4. 固定ページを利用してランキング一覧ページを作ることができる。
5. フッターウィジェットが、左、中央、右の３種類で利用できる。
6. 投稿ページのタイトルとメタ情報、サムネイル画像がトップ特別枠に表示される。

等ですが、詳しくはこちらのデモサイトをご覧ください。

記事のランキング スタイル

一般のブログでは、記事ランキングや人気記事はサイドバーにあるのが普通ですが、このテーマでは何とページ送りのすぐ下にあるではないですか！ しかも一覧が横並びです。なんてすばらしい発想でしょう。

４記事がそのまま表示されますが、５記事以降は右にスクロールしなければなりません。でもランキングに使う記事の高さは１記事分しかないので、全体が締まって見えます。また思考回路が横に働くので脳の活性化にもなりますね。

ただこのランキングはTopページが含まれないことと、ライオンブログにしてからの累積閲覧数で「直近の〇〇日間」を指定することができません。直近の閲覧数が見たくなったときは、再度サイドバーに表示します。

サイドバーの必要性

スマホで記事を見た場合、サイドバーはどのように表示されるのでしょう。Twenty Seventeen ではメイン部分の表示が終わってから、ライオンブログでは、画面の右 1/3 に表示されます。作成時はほとんどがPCですから、PCでは綺麗に表示されるけどスマホではちょっと‥となるわけです。

私のブログもスマホで見ると少し違和感がありました。

今回のライオンメディアではランキング一覧が本文下に表示されるので、サイドバーに表示するものがあまりありません。広告とタグ一覧くらいですかね。固定ウィジェットに配置すれば問題ないように思えますが、画面がブレるので気になります。

いっその事、無くしてしまえばと思いやってみたところ、ごちゃごちゃ感が無くなりすっきりしました。やりかたは、外観-カスタマイズ-基本設定-レイアウトで、すべて１カラムを選択します。

必要なウィジェットはフッターに載せます。
10日間ランキングを表示するときは、また変更します。

記事一覧を2列から3列に

サイドバーがなくなると記事2列では少しさみしいので、3列にしてみました。
記事幅を変更をするので、以下を子テーマに追加します。

.archiveItem{
 width:calc(33.3% - 20px);　/*2列は50％、3列は33.3％にします*/
 position: relative;
 margin:0 0 40px 19px;　/*19pxは余白です。width の-20から1だけ少なくします*/
}

トップページやフッターにトグル＆ボタン

トップページには、このブログの紹介やカテゴリー別の記事一覧を載せていますが、全体の長さが長くなるため、リストを見たい人に開いてもらうようにしました。またフロントページのフッターには、メインメニューとサブメニューをボタンで表示しました。

もちろんプラグインを使っています。Arconix Shortcodes です。有効化するとエディッターの右下にリストが表示されるので、その中から toggle と  button  を使います。

トグルの使い方は

(toggle title=”投稿リスト 開く🔁閉じる”] ABCDEFG [/toggle)   （ を［  に変更して使います。

初めからトグルを開く場合は　load=”open” を追加します。

toggle load=”open” title=”投稿リスト 閉じる🔁開く”

ボタンの使い方

(button size="large" color="green" url="http://umi55.com/top-page"]Top ページ[/button)    /*（　）を [    ]  に変更して使います*/

Top ページ　できあがったボタンです。color=”green”を書かなければグレー色になります。

目次をセンターに

.content .outline{
 display:inline-block;
 min-width: 320px;
 padding:20px;
 margin-top:20px;
 margin-left:50%;
 transform: translate(-50%,0);
}

min-width: 320px はスマホで小さくなりすぎないように固定します。
難点は、左余白を50％とってから左に50％ずらすので、目次の最大幅が全幅の半分にしかならないことです。長い見出しは折り返して表示されます。絶対位置を決めてから表示すれば問題ないのですが…　勉強します。

その他、table of content plus というプラグインを使っている場合の、センター表示は「ブログ-目次の作り方と見出しの装飾-WordPress」を参考にしてください。

記事作成日と更新日の表示

ネットでわからないことを検索するとき、必ず作成日を見ます。できるだけ新しい情報を手に入れるためですが、最近はこの作成日や更新日を表示していない記事が多くなりました。

作成日が古くても内容を見直して更新してあれば、その記事の信頼度は格段にＵＰします。このブログでも作成日の表示はありますが、更新日の表示がなかったので、作成日のすぐ横に追加しました。single php を子テーマにコピーして、作成日の下に以下を追加します。

 <li class="dateList__item icon-calendar"><?php the_modified_time('Y.m.d'); echo " 更新"; ?></li>

Twenty seventeen の場合は「ブログの更新日を表示させる Twenty Sventeen」を参考にしてください。

以上カスタマイズも含めて書いてみました。