賢威トップページの最新情報の日付をカスタマイズ

この記事は約8分で読めます。

  • LINEで送る

賢威最新情報の日付カスタマイズ

賢威6.1のトップページに表示される最新情報の日付部分を
カスタマイズする方法を説明します。

最新情報の日付を修正する方法もいくつかありますので、
あなたのWebサイト・ブログに合った方法を選んでください。

今回修正するファイルは2つです。

  • index.php:メインインデックスのテンプレート
  • design.css:スタイルシート

最新情報は2パターンの表示が可能

賢威最新情報の日付カスタマイズ

「賢威の設定 > トップページ」から新着情報のパターン3パターンと、
新着情報の表示件数を指定できます。タイプは「タイプ1、タイプ2、表示しない」から選択します。

賢威最新情報の日付カスタマイズ

賢威最新情報の日付カスタマイズ

上が「タイプ1」、下が「タイプ2」を指定した表示です。
「表示しない」はこの部分が全て消えるので、今回の修正対象外です。

「タイプ1」が横に並ぶパターン、「タイプ2」が縦に並ぶパターンです。
「タイプ2」はカテゴリ名が長くても、自動的に調整してくれるので使いやすいです。
レスポンシブデザインが適用されると、「タイプ2」が表示されます。

一度、スマホで確認してみてください。

日付の修正パターン4つ

それでは、日付の修正方法を説明します。
最新情報を表示しているのは「index.php」の以下の部分です。
ここを修正することで、日付をカスタマイズすることができます。

<!--最新情報-->
<h2><?php _e('Latest Info','keni') ;?></h2>
<div class="contents">
<?php if (the_keni('new_info') == 1): ?>
<dl class="news">
<?php elseif (the_keni('new_info') == 2): ?>
<dl class="news02">
<?php endif; ?>
<?php $new_info_rows = (trim(mb_convert_kana(the_keni('new_info_rows'),"as")));
if (!mb_ereg("^[0-9]+$", $new_info_rows) or ($new_info_rows <= 0)) {
	$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,1,"year",0,the_keni('new_info')); ?>
</dl>
<?php get_template_part('social-button'); ?>
</div>
<!--/最新情報-->

この中で、13行目がまさに最新情報を表示しています。
ここの内容を少し変えるだけで、表示内容をいろいろと変更可能です。

newposts_keni($new_info_rows,1,1,"year",0,the_keni('new_info')); ?>

日付を修正するには、「year」の部分を以下のいずれかに書き換えます。

  • year:年月日表示
  • month:月日表示
  • diff:○日前表示
  • 上3つ以外:表示を消す

タイプ1で各指定

「賢威の設定 > トップページ」の新着情報で「タイプ1」を選んだ場合です。

  • newposts_keni($new_info_rows,1,1,"year",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 「year」指定が通常の年月日表示です。
  • newposts_keni($new_info_rows,1,1,"month",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 「month」指定で年表示を消し、月日表示になります。
  • newposts_keni($new_info_rows,1,1,"diff",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 現在の時刻から24時間以内なら「24時間以内」、それ以降だと「○日前」表示になります。ちなみに、3つ目の記事は1920年日付としており5桁日付前(33926日前)でも表示されます。
  • newposts_keni($new_info_rows,1,1,"del",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 日付を消す場合は「year、month、diff」以外を指定します。何でも良いので、「del」でも「false」でも何も書かなくてもOKです。

タイプ2で各指定

「賢威の設定 > トップページ」の新着情報で「タイプ2」を選んだ場合です。

  • newposts_keni($new_info_rows,1,1,"year",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 「year」指定が通常の年月日表示です。
  • newposts_keni($new_info_rows,1,1,"month",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 「month」指定で年表示を消し、月日表示になります。
  • newposts_keni($new_info_rows,1,1,"diff",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 現在の時刻から24時間以内なら「24時間以内」、それ以降だと「○日前」表示になります。
  • newposts_keni($new_info_rows,1,1,"del",0,the_keni('new_info')); ?>
    
  • 賢威最新情報の日付カスタマイズ
  • 日付が消え、その分のスペースが埋まります。

タイプ1で日付を消した場合に隙間を埋める

賢威最新情報の日付カスタマイズ

「タイプ1」で日付を消すと、カテゴリと記事の間に隙間が生まれます。
この隙間を埋める方法を説明します。

この場合も2つの修正パターンがあります。両方について説明します。
どのパターンでも修正するのは「design.css」です。

  • カテゴリ部分を広げる
  • 記事部分を左に寄せて広げる

カテゴリ部分を広げる

賢威最新情報の日付カスタマイズ

「design.css」から「最新情報のアイコン設定」というコメントを探します。

/*最新情報のアイコン設定*/
#main-contents dl.news dd.cat{
	float: left;
	overflow: hidden;
	width: 6em;
	height: 1.5em;
	padding: 0.1em 0.3em 0;
	border-bottom: none;
	background: #333;
	color: #fff;
	font-size: 0.858em;
	text-align: center;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

この中で、「width: 6em;」の数字を大きく(「width: 10.0em;」など)するとカテゴリ部分が広がります。

「1.0em = 全角1文字」と考えてください。これに、文字の外側にも隙間(padding)が入るので、
初期設定では「6.0em = 5文字(プラス隙間)」で表示されていました。
「カテゴリの日本語名最大文字数 + 1em」で設定すると全カテゴリがきっちり表示されます。

emは賢威でもよく出現する大きさを指定する単位です。
AdminWebさんで詳しく解説されています。

em単位 | AdminWeb

ただし、あまり大きい数値にしすぎると横の記事部分とかぶって表示が崩れてしまいますので、
あなたのWebサイト・ブログを見ながら数字を微調整してください。

記事部分を左に寄せて広げる

賢威最新情報の日付カスタマイズ

「design.css」から「main-contents dl.news dd」というソースを探します。

#main-contents dl.news dd{
	margin: 0 0 10px 0;
	padding: 0 1em 0.8em 16.5em;
	border-bottom: 1px dotted #414141;
}

この中で、「padding: 0 1em 0.8em 16.5em;」の「16.5em」の数字を小さくすると
記事部分が左により、幅が広がります。

ここを修正するときも、Webサイト・ブログを見ながら数字を微調整してください。

両方を取り入れる場合

賢威最新情報の日付カスタマイズ

「カテゴリ部分を広げる」と「記事部分を左に寄せて広げる」両方を同時に行うこともできます。
この場合は、上2つで説明した場所を同時に修正してください。

カテゴリ部分が「6.0em」、記事部分が「16.5em」なので、
カテゴリ部分の数値プラス1 = 記事部分の数値ぐらいにしておくと、ちょうどいい感じに配置されると思います。

カテゴリ部分が「13.0em」で記事部分が「14.0em」など。
この場合もWebサイト・ブログを見ながら数字を微調整してください。

注意点

修正する場合の注意点を2つ書いておきます。

  • CSS内に「カテゴリの文字数が多い場合はコメントアウトを解除」というコメントがありますが、
    ここを外すと、タイプ2の表示と同じになってしまうのであまり意味はありません。
  • CSSには「最新情報」が2つあり「(リストタグ)」と「(定義タグ)」が存在します。
    今回は「(定義タグ)」を修正します。
    ※コメントで判別可能なので、間違えないようにしてください。
  • LINEで送る

コメントを残す

このページの先頭へ