時偶備忘録

フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

記事の最終更新日を表示(SNSボタンの修正)

RYO
RYO
ブログ作成
テンプレート
0 Comments
SNSボタン
凄く今更な感じだがFC2ブログでも漸く最終更新日時が表示できるようになった。更新日が表示されていれば古いままの記事かどうか分かりやすいし、編集するときの目安にもなって助かる。

最終更新日を表示するついでに仕様変更で若干ズレていたSNSボタンなども修正。

以下のページを参照。
・【ブログ】記事の最終更新日時を表示できるようになりました。 - FC2総合インフォメーション
・テンプレート用　変数一覧 | マニュアル | FC2ブログヘルプ


◆HTML(PCテンプレート)

青は消した部分で橙は追加もしくは修正した部分。

<div id="date2">
<div class="date"><%topentry_year>.<%topentry_month>.<%topentry_day>&nbsp;(<%topentry_youbi>)</div>
</div>
<div id="date2">
<div class="date">公開 <%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_wayoubi>)
更新 <%topentry_modified_year>.<%topentry_modified_month>.<%topentry_modified_day> (<%topentry_modified_wayoubi>)
</div>
そのままだと公開日と更新日の違いが分かりづらいので日付の前に「公開」「更新」と入力。曜日は英語表記より漢字の方が分かりやすいし一文字で済む。

&nbsp;は半角スペースと同じようなものだが、「ここの空白では改行したくない」という場合に使い分けるものらしい。


<!--------------------▼SNSボタン一覧▼-------------------->
<ul class="s_b">
<!-- ◆Twitterボタン -->
<li div style="width:56px;">
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="<%topentry_link>" data-text="<%topentry_title>">Tweet</a>
</li>

<!-- ◆Facebookシェアボタン -->
<li div style="width:65px;">
<div class="fb-share-button" data-href="<%topentry_link>" data-layout="button_count"></div>
</li>

<!-- ◆はてなブックマークボタン -->
<li div style="width:42px;">
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="<%topentry_title>"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加"width="20" height="20" style="border: none;" /></a>
</li>

<!-- ◆Pocketボタン -->
<li div style="width:82px;">
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<%topentry_link>"></a>
</li>

<!-- ◆Google+ボタン -->
<li>
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="<%topentry_link>"></div>
</li>

</ul>
<!--------------------▲SNSボタン一覧▲-------------------->
仕様変更でだいぶズレていたFacebookボタンの横幅を調整。Twitterボタンは全体の見栄えを考えて微調整。上下に設置してあるのでもう1つの方も修正しておく。

Google+ボタンは誰も使ってないような気がするので上下に設置した2つとスクリプトも削除。



◆CSS(PCテンプレート)

#s_b2 {
  width:490px;
  float:left;
  height:24px;
}
#date2 {
  width:150px;
  float:right;
  height:24px;
}
#s_b2 {
  width:300px;
  float:left;
  height:24px;
}
#date2 {
  width:180px;
  float:right;
  height:48px;
}
s_b2
Google+ボタンを消して他ボタンを調整した分だけ横幅を調整。

date2
曜日の表示変更などで横幅を調整。公開と更新の2行にしたことで高さを倍にした。あと自動改行で上手いこと更新が2行目になるよう調整。



◆HTML(スマホテンプレート)

▼記事一覧
<div class="list_month">
<%topentry_year>/<%topentry_month>/<%topentry_day> <%topentry_hour>:<%topentry_minute>
</div>

<div class="list_comment">
<!--allow_comment-->コメント(<%topentry_comment_num>)<!--/allow_comment-->
</div>
<div class="list_month">
公開 <%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_modified_wayoubi>)
更新 <%topentry_modified_year>.<%topentry_modified_month>.<%topentry_modified_day> (<%topentry_modified_wayoubi>)
</div>
PCテンプレートと合わせるために区切りの"/"を"."に変え、曜日や"公開""更新"の部分を追加。

コメント部分は特に必要なさそうなので削除。


▼個別記事
<span class="en_time">
<%topentry_year>年<%topentry_month>月<%topentry_day>日<%topentry_hour>:<%topentry_minute>&nbsp;
</span>
<span class="en_time">
公開 <%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_modified_wayoubi>)
更新 <%topentry_modified_year>.<%topentry_modified_month>.<%topentry_modified_day> (<%topentry_modified_wayoubi>)
</span>
記事一覧と同様。



◆CSS(スマホテンプレート)

▼記事一覧
/****************************** ▼日付部分▼ */
.list_month{
  font-size:10px;                        /*  文字の大きさ  */
  color:#808080;                         /*  文字の色      */
  position:absolute;
  bottom:0;
  right:0;                               /*  右寄せ        */
  width:95px;
  height:40px;
}
/****************************** ▲日付部分▲ */
公開日の下に更新日を入れる。改行されるように横幅を調整。


▼個別記事
.section .entry_title {
  padding-bottom:30px;
  border-bottom:1px solid #DEDEDE;                 /*  下線                 */
  background-color:#FFFFFF;                        /*  背景色               */
  padding-top:8px;
  height:60px;
}
.section .entry_title h2{
  color:#3366CC; /*  タイトル 文字の色    */
  font-size:14px; /*  タイトル 文字の大きさ*/
  margin:0 10px;
  line-height: 20px;
}
.section .en_time {
  padding-top:10px;
  color:#777777; /*  日付 文字色          */
  font-size:13px; /*  日付 文字の大きさ    */
  float:right; /*  右寄せ               */
  margin-right:10px;
  margin-bottom:5px;
  width:120px;
  height:40px;
}
・entry_title(記事タイトル・カテゴリ・公開&更新日)
縦幅の調整。

・entry_title h2(記事タイトル)
縦幅の調整。"height"ではなく、"line-height"でないと調整できなかった。

・en_time(公開&更新日)
公開日の下に更新日を入れる。改行されるように横幅を調整。
関連記事

COMMENTS