Bloggerのテーマ(vaster2)をカスタマイズしたメモ

Bloggerのテンプレートは
トーマスイッチ様のvaster2を使わせて頂いています

余り変えるつもりはないですが気になったところは改良する予定
どう変えたか記録していないと何かあった時に戻せないので、
デフォルトからカスタマイズしたした項目を記録しています

コメントを入れようとすると、なぜか、意図しない部分の文字色が代わったりとかレイアウトが崩れたりとかでそっちに苦労・・・


記事リンクの色変更&下線追加

記事リンクの色を濃い目に

/*   記事ページのリンク
----------------------------------------------- */
.post a{
text-decoration: underline;
color:#1111cc;
}
.post a:hover {
text-decoration: underline;
  color:#1111cc;
}
.post a:visited{
text-decoration: underline;
color:#1111cc;
}
<!-/*   記事ページのリンクから-ここのブロックは手動で編集-->

参考リンク:NNM2様


一度に表示する記事数の変更

「max-results」がurlについて、一度に表示する記事数を制限しているみたいです

「 + &quot;?max-results=10&quot;'」を数カ所20とかに変更しました
何も記事が無いのにnextが表示されちゃうけどまあ妥協で・・・

参考リンク:NNM2様


アーカイブの表示レイアウト変更

内容理解してないので適当に数値を変更して良さげな感じに・・・

/*   月別アーカイブ
--------------------------------------- */
.archive-list ul{
   padding:10px 0px 0px 20px;
   list-style-type:none;
   line-height:1.0em;
}
.archive-list ul a{
   color:#2098a8;
}
.archive-list ul li{
   padding-bottom:0px;
}
<!--/*   月別アーカイブからここのブロックは手動で編集-->

参考リンク:へっぽこプログラマーの備忘録様

ブログ村登録

ブログ村登録とリンク貼り付け
ガジェットとやらを少しだけ弄ったけどどう弄ったか覚えていません


更新日と更新マークを追加

更新日を追加。できれば更新日順に記事を表示させたい・・・

<!--このブロックは手動で追加-->
<i aria-hidden='true' class='fa fa-refresh' style='margin-left:0.6em'/>

<span class='updated post-timestamp' id="last-modified" itemprop='dateModified' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601'>
   <data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>
<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
// <![CDATA[
// 投稿日
var pp_Y = ""+published.getFullYear();
var pp_M = ("0"+(published.getMonth()+1)).slice(-2);
var pp_D = ("0"+published.getDate()).slice(-2);
// 最終更新日
var dd_Y = ""+updated.getFullYear();
var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);
var dd_D = ("0"+updated.getDate()).slice(-2);

if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){
    //日付が同じときは出力しない
}else{
    var updated_dd ="最終更新日 "+ dd_Y+"/"+dd_M+"/"+dd_D+"";
    document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script>

<!--このブロックは手動で追加-->

参考リンク:多趣味のつらつらブログ様


更新日のみため変更

フォントサイズちょい増加、透明度を減らす、下線を無くす、更新日の右の余白小さく、など

/*記事一覧の公開日、カテゴリ名  */
.snippet{
   font-size:14px;
   padding:0 !important;
   color:#888;
margin-top:15px !important;
    margin-bottom: 5px;
line-height:1.4em !important;
  word-break:break-all;
 display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.post-timestamp {
font-size:16px !important;
    margin-left: initial;
   opacity:1.0;
  color:#404040;
 padding-bottom:2px !important;
    margin-right: 5px !important;
display:inline-block;
margin-top:0;
}
.published{text-decoration: none;}
.post-tag{
font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}

<!--このブロックは手動で編集-->
<!--記事一覧の公開日、カテゴリ名からだが、何故か変えた所だけコメントで囲うと全体のレイアウトが崩れる-->

Blogger Labo様


ページ追加:更新日順

記事そのものは更新日順にする方法が見つからなかったのですが、別途ページを作る対応方法を公開されている方がいらっしゃいました。これは助かりますね

<script type="text/javascript">
var POSTSTOC_SETTINGS = {
    blogURL: "yoshisansan.blogspot.com",  // Blogger の ドメイン を設定
    maxResults: Infinity,           // 最大受信記事数 を設定。Infinity ですべての記事を受信
    sort: {
        key: "updated",           // ソートキー [title, published, updated]
        order: "desc"            // ソート順 [default, asc, desc]
    },
    printby: "title",               // 表示方法 [title, label, label.nameorder, label.contentsorder]
    newPost: {
        enabled: false,              // 新着記事アイコンを表示するかどうか
        symbol: "NEW !",            // 新着記事の表示文字列
        term: 30                    // 新着記事判定する日数
    },
    thumbnail: {
        enabled: false,              // サムネイル表示するかどうか
        noImageURL: "//garafu.github.io/blogger.toc/release/0.0.5/noimage.png"
                                    // サムネイルが存在しないときに割り当てる画像
    },
    published: {
        enabled: true,              // 公開日を表示するかどうか
        format: "yyyy/MM/dd"        // 公開日のフォーマット
    },
    updated: {
        enabled: true,              // 更新日を表示するかどうか
        format: "yyyy/MM/dd"        // 更新日のフォーマット
    }
};
</script>

<link href="//garafu.github.io/blogger.toc/release/latest/simple.css" rel="stylesheet" type="text/css"></link>
<script src="//garafu.github.io/blogger.toc/release/latest/blogger.toc.min.js" type="text/javascript"></script>

参考リンク:galife様



ブログアーカイブが上手く開閉しない時は一度レイアウトからアーカイブを消して、もう一回追加すると治る(私もこれで治りました

参考リンク:メモロウ様

にほんブログ村 株ブログへ
にほんブログ村

0 件のコメント :

コメントを投稿