Bloggerカスタム

【Blogger】人気記事と同じ見た目で「最新記事」を表示したい～カスタム編～

最新記事を表示するために導入した
Blogger Random – Recent – Specific Label Posts Widget – All in One Post Feed Widget
のカスタムについてです。

導入の方法についてはこちらをご覧ください。

導入した段階では

こんなんですから、これの見た目をBlogger付属の人気記事ガジェットに近づけていきます。

ガジェットカスタム手順

１.「レイアウト」より、まずガジェットをサイドバーに移動

自分で付けたタイトル＋「HTML/Javascript」ガジェットとなっているものです。

※サイドバーは特に強制ではありません。自分で使いたい場所に移動させます。

※各々で付けたタイトルがあると思いますので、画像のように「最新記事」になっているとは限りません。

２.ガジェットの右の「編集」からカスタムする

このガジェットはこの中に「CSS」と「Javascript」があり、全てここからカスタムします。

「レイアウト」から以外にも、ブログトップのガジェット隅にある編集フォームからでも可能です。

３.どこになんの設定があるか知る

CSSとJavascript部分の一覧を載せます。

ここに載せる以外でカスタムしたい方は見ながらやってみてください。

Javascriptで設定されているものは全て導入時に提供元サイトで入力した内容になっています。

CSS部分
.bcd140526_post_feed li.item	記事の外枠
.bcd140526_post_feed ul	一覧の外枠
.bcd140526_post_feed li.item.item-0	記事の上？
.bcd140526_post_feed li.item h3.title	記事タイトル
.bcd140526_post_feed li.item div.meta	投稿者・コメント数・投稿日時の外枠
.bcd140526_post_feed li.item div.meta .meta-item	投稿者・コメント数・投稿日時
.bcd140526_post_feed li.item p.snippet	要約文
.bcd140526_post_feed.list a.thumbnail	リスト表示時のサムネイル全体
.bcd140526_post_feed.list a.thumbnail img	リスト表示時のサムネイル画像
.bcd140526_post_feed li.item a.cate	ラベル
div.bcd140526_post_feed.column a.thumbnail	カラム表示時のサムネイル全体
div.bcd140526_post_feed.column a.thumbnail img	カラム表示時のサムネイル画像

Javascript部分
var bcd140526_show_thumbnail	サムネイル表示	true/false
var bcd140526_show_label	ラベル表示	true/false
var bcd140526_show_comment_numbers	コメント数表示	true/false
var bcd140526_show_date	投稿日表示	true/false
var bcd140526_show_author_name	投稿者名表示	true/false
var bcd140526_show_readmore	Readmore（続きを読む）表示	true/false
var bcd140526_show_snippet	要約文表示	true/false
var bcd140526_hide_copyright	コピーライト表示	true/false
var bcd140526_snippet_length	要約文表示文字数	数値
var bcd140526_post_count	記事の表示数	数値
var bcd140526_thumbnail_size	サムネイルのサイズ	数値
var bcd140526_sort_by	記事の表示順	latest(最新)/random(ランダム)
var bcd140526_index_label	表示する特定のラベル名	ラベル名
var bcd140526_design_style	表示スタイル	column(カラム)/list(リスト）
var bcd140526_date_format	投稿日時のスタイル	mm/dd/yyyy
var lang_readmore	Readmoreの文字列	文字列
var HOST	サイトURL

４.タイトル文字サイズと色を変更

変更前はこんなんです。

ガジェットの編集フォームを開き、

.bcd140526_post_feed li.item h3.title {
    display: block;
    margin: 0 0 5px 0;
}

に

border: none;

を追加し、さらにその下に

.bcd140526_post_feed li.item h3.title a{
color:#666666;
font-size:15px;
}

を追加します。

フォントサイズと色は人気記事のスタイル準拠。

変更後はこうなります。

５.記事と記事の間にある点線を消す

CSS部分一番上、

.bcd140526_post_feed li.item {
    display: block;
    clear: both;
    margin: 15px 0 0 0;
    padding: 15px 0 0 0;
    border-top: 1px dotted #BBB;
}

の中にある「border-top: 1px」を「border-top: 0px」にします。

文自体を消してもいいんでしょうが、後に変更したくなった時のために一応残しておきます。

これで記事間の点線は消えます。

６.サムネの画像を適正サイズに

次はサムネ画像をカスタムします。

まずサムネを左に持ってきます。

div.bcd140526_post_feed.column a.thumbnail {
    display: block;
    width: 100%;
    line-height: 1;
    margin: 0 0 5px 0;
}

の部分に、

float: left;

を追加します。

さらにその下、

div.bcd140526_post_feed.column a.thumbnail img {
    width: 100%;
    height:100％;
}

のところで

「height:100％;」→「height: 70px;」に変更。

※以下はサムネの縦横比の固定の手順です。必要に応じてどうぞ。

～ここから～

70pxに変更したCSSと同じところ、

div.bcd140526_post_feed.column a.thumbnail img {
    width: 100%;
    height:70px;
}

の部分に

object-fit: cover;

を追加します。

～ここまで縦横比固定手順～

そして初登場Javascript部分です。

var bcd140526_thumbnail_size =(数値);

の数値を上で入力したのと同じ数字、ここでは「70」を入れます。

これでサムネの設定は終了です。

７.文字と記事間のマージン調整

羅列していきます。

①
.bcd140526_post_feed li.item {
    display: block;
    clear: both;
    margin: 3px 0 0 0;
    padding: 10px;
    border-top: 0px dotted #BBB;
}

margin、paddingの数値を上のものに変更。

②
.bcd140526_post_feed li.item h3.title {
    display: block;
    margin: 0 5px 0 0;
    border: none;
 　line-height: 18px
}

marginを上の数値に変更し、

line-height: 18px

を追加。

③

div.bcd140526_post_feed.column a.thumbnail {
    display: block;
    width: 100%;
    line-height: 1;
    margin: 5px 10px 0 0;
    float:left;
}

marginの数値を上のものに変更。

これで以下のようになります。

人気記事とほとんど同じ形式に見えるくらいになりました。

８.マウスオンで色変更

最後です。

人気記事のタイトルはカーソルを乗せるとテキストの色が変わりますので、それも同じようにします。

４で追加した
.bcd140526_post_feed li.item h3.title a{
color:#666666;
font-size:15px;
}

の下に、

.bcd140526_post_feed li.item h3.title a:hover{
    color: #008ec2;
}

とさらに追加しましょう。

これでマウスオン時にテキストの色が変わるようになります。

以上で最新記事導入カスタムは全て終了です！


サムネにリンクが付いていないのが人気記事ガジェットとの唯一の違いですが、気力が尽きて「まあそれくらいならいいかな…」となったのでやっていません。

それが気になる方は是非チャレンジしてみて下さい。

スポンサーリンク

　　　　　　　　　　　 　　　　　　　　　　　　 あなたにおすすめの記事