nil-blog 楽しく暮らしましょう...

Blog超初心者が今からやれることをお届けします。

【ブログ奮闘記】「はてなブログPro」開設10日目です。

超初心者50代! 初めての「はてなブログPro」の奮闘記です。
事前準備も十分ではない中で、ブログを運用して分かったことや課題・悩みなど、気が付いたことを記録して行きます。
これから「はてなブログPro」を始めようと考えている人、既に始められている人にも、よろしかったらご参考にしてみてください。

最近、記事の内容が雑記になっていますが、ご容赦願います。

(ブログ開設日は2019年7月1日です。)

関連記事『 【ブログ奮闘記】「はてなブログPro」開設9日目です。 』です。

 

 

目次のカスタマイズ!

ヨメレバのデザインをカスタマイズしました。
今回は「 パルコツ 」ブログを参考にしました。

モノトーンに青のアクセントが、とてもシンプルで気に入りました。
パルコツさんありがとうございました。

はてなブログの「デザイン」>「カスタマイズ」>「デザインCSS」に進み、以下のCSSをコピペしました。  

/* 目次 */

ul.table-of-contents {

display:block;

font-size:90%; /* 文字サイズ */

line-height:1.2 !important; /* 行間 */

border:1px solid #000 !important;

border-radius:20px;

background-color:#f9f9f9; /* 背景色 */

width:70%; /* テーブルの幅 */

padding:15px 35px !important;

margin-left: auto !important; /* テーブルの中央寄せ */

margin-right: auto !important; /* テーブルの中央寄せ */

}

ul.table-of-contents a{ /* リンク設定 */

text-decoration: none;

color:#000 !important;

}

ul.table-of-contents::before { /* INDEXの文字 */

display:block;

content:"- 目次 -";

font-weight: bold; /* 太字 */

font-size: 16px;

letter-spacing:5px;

text-align:center;

margin: 15px 0px;

}

ul.table-of-contents li{

margin: 3px 0px 3px 0px !important;

list-style-type:none; /* 元のマーカー文字を消す */

}

ul.table-of-contents li::before { /* チェックアイコン */

font-family:'blogicon';

content:'\f029';

color:#0081D9;

position:relative;

left:-0.5em;

}

ul.table-of-contents li ul li::before { /* ◆アイコン */

font-size:80%;

content:'◆';

color:#000;

}

 

「前のページ」ボタンを追加!

Topページに「次のページ」のボタンがあるのに、なぜ「前のページ」のボタンがないのかな?
そこで検索バーに、はてなブログ>前のページ>表示で検索すると、「 まろりか 」ブログに関連記事がありましたので参考にしました。

最後のページに、「前のページ」のボタンが表示されず、この点は今後の課題にします。
まろしかさんありがとうございました。

 

はてなブログの「デザイン」>「カスタマイズ」>「フッタ」に進み、以下のソースコードをコピペしました。

<script type="text/javascript">
// 現在のページが記事一覧の2ページ目以降の場合処理実行
if (location.search.indexOf("?page=") === 0) {
// aタグの作成
var a = document.createElement('a');
a.addEventListener("click", function(){history.back();}); // クリックすると一つ前の履歴に戻る処理を追加
a.innerHTML = "前のページ"
a.setAttribute("href", "javascript:void(0);");
a.setAttribute("rel", "prev"); // seo対策
// spanタグの作成(中に作成したaタグを入れる)
var span = document.createElement('span');
span.classList.add('pager-prev');
span.appendChild(a);
// classがpagerのdivタグに上記で作成したものを挿入する(classがpager-nextのspanタグよりも前に挿入する)
var element = document.getElementsByClassName("pager")[0];
element.insertBefore(span, element.firstChild);
}
</script>

 

はてなブログの「デザイン」>「カスタマイズ」>「デザインCSS」に進み、以下のCSSをコピペしました。 

/* Pager */
.pager {
position: relative;
margin: 2em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.pager a {
color: RGB(68, 153, 187);
}

.pager a:hover {
color: RGB(68, 153, 187);
}

.pager.autopagerize_insert_before .pager-prev {
padding: .5em 0;
border: 1px solid #ddd;
border-radius: 3px;
}

.pager.autopagerize_insert_before .pager-prev a {
padding: .5em 1em .5em 2em;
}

.pager.autopagerize_insert_before .pager-prev:before {
content: "<<";
font-weight: 900;
position: absolute;
left: .5em;
top: .5em;
color: RGB(68, 153, 187);
}

.pager.autopagerize_insert_before .pager-next {
padding: .5em 0;
border: 1px solid #ddd;
margin-left: auto;
border-radius: 3px;
}

.pager.autopagerize_insert_before .pager-next a {
padding: .5em 2em .5em 1em;
}

.pager.autopagerize_insert_before .pager-next:after {
content: ">>";
font-weight: 900;
position: absolute;
right: .5em;
top: .5em;
color: RGB(68, 153, 187);
}

.pager.pager-permalink .pager-prev {
margin-right: .25em;
padding: .5em;
border: 1px solid #ddd;
border-radius: 3px;
}

.pager.pager-permalink .pager-next {
margin-left: auto;
padding: .5em;
border: 1px solid #ddd;
border-radius: 3px;
}

 

編集後記

開設10目は、「目次」と「前のページ」ボタンをカスタマイズしました。
超初心者でもやれるカスタマイズから、地道に進めて行くことにします。
最後までご覧くださいましてありがとうございました。

次回もよろしくです。