「はてなブログPro」目次のカスタマイズ
これから「はてなブログPro」を始めようと考えている人、既に始められている人にも、よろしかったらご参考にしてみてください。
目次のカスタマイズ！
ヨメレバのデザインをカスタマイズしました。
今回は「 パルコツ 」ブログを参考にしました。
モノトーンに青のアクセントが、とてもシンプルで気に入りました。
パルコツさんありがとうございました。
はてなブログの「デザイン」＞「カスタマイズ」＞「デザイン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;
}
最後までご覧くださいましてありがとうございました。
次回もよろしくです。
