Google Bloggerのカスタマイズ備忘録ー８

0 Blogger

明暗切換えボタンに吹き出し追加
明暗切換えボタンに吹き出し追加

Vaster2の導入とカスタマイズ その８

明暗切換えボタンに吹き出し追加

　2017年に設置した明暗切換えボタンは絵文字ボタンにしていたので、何だか判らない状態でした。　吹き出しを追加してボタンの意味が判る様にしてみました。
　吹き出しを出す方法が判らなかったので、Google先生に尋ねてみると『ボタン要素に title='吹き出し文言' を追加すれば良い』という簡単な事だった。💦
　テンプレート（.xmlファイル）のボタン生成部に title='明暗切換え' を追加した。　CSSを用意して本当の吹き出し風にもできるけど、面倒なのでデフォルト表示のままで終わりにした。　考えてみたら、スマホで見る場合はいきなりボタンを押すので、PCの様にマウスでフォーカスしないので吹き出しは無意味だったりする。

●修正したテンプレート（.xmlの修正）

              <b:includable id='main'>
                <div class='button-toggle'><i class='fa fa-bars'/>MENU</div>
                <nav class='grobal-navi'>
                  <ul class='header-nav'>
                    <b:loop values='data:links' var='link'>
                      <li>
                        <a expr:href='data:link.href + &quot;?&amp;max-results=15&quot;'>
                          <data:link.title/>
                        </a>
                      </li>
                    </b:loop>
                    <!-- 明暗モードボタンを追加 -->
                    <li><div class='header-nav-btn' title='明暗切換え'><i class='fa fa-sun-o'/> / <i class='fa fa-moon-o'/></div></li>
                  </ul>
                </nav>
                <b:include name='quickedit'/>
              </b:includable>

記事分割表示用ナビゲーターの修正

　Google Bloggerのカスタマイズ備忘録ー７で記載した方法のページナビゲーターでは、表示言語を英語などにすると「続きを読む」が翻訳されない。　仕方ないので、スクリプト内で「続きのリンク」と共に「文言ボタン」を生成することにしました。　これに伴いスクリプトとCSSを変更しました。

●修正したスクリプト（</body>の直上に入れる）

<!-- 記事の分割&#12539;ページ送り対応 -->
<script type='text/javascript'>
//<![CDATA[
(function() {
    // 記事本文の要素を取得（テーマによってクラス名は要調整：通常は post-body）
    var postBody = document.querySelector('.post-body');
    if (!postBody) return;

    // <!--nextpage--> で分割
    var content = postBody.innerHTML;
    var pages = content.split('<!--nextpage-->');

    if (pages.length > 1) {
        var currentPage = 1;
        // URLパラメータから現在のページを取得
        var urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('page')) {
            currentPage = parseInt(urlParams.get('page'));
        }

        // ページが範囲外の場合は1ページ目を表示
        if (currentPage < 1 || currentPage > pages.length) currentPage = 1;

        // コンテンツを切り替え
        postBody.innerHTML = pages[currentPage - 1];

        // ページネーションリンクを生成
        var nav = document.createElement('div');
        nav.className = 'page-navigation';
        var navHtml = '<ul>';
        if (currentPage === pages.length) {
            navHtml += '<li><span class="page-none">続きを読む</span></li>';
        } else {
            // 現在のURLにパラメータを追加
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?page=" + [currentPage + 1];
            navHtml += '<li><span class="page-next"><a href="' + newUrl + '">' + '続きを読む</a></span></li>';
        }
        for (var i = 1; i <= pages.length; i++) {
            if (i === currentPage) {
                navHtml += '<li><span class="current">' + i + '</span></li>';
            } else {
                // 現在のURLにパラメータを追加
                var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?page=" + i;
                navHtml += '<li><a href="' + newUrl + '">' + i + '</a></li>';
            }
        }
        nav.innerHTML = navHtml;
        postBody.parentNode.insertBefore(nav, postBody.nextSibling);
    }
})();
//]]>
</script>

●修正したCSS

/*-------------------------------
  記事分割用ページナビゲーション
--------------------------------*/
.page-navigation {
    text-align: center;
    align-items: center; 
    margin: 20px 0;
    display: flex;
    justify-content: center;
}
.page-navigation ul {
    display: inline-flex;
    list-style: none;
    padding: 8px;
}
.page-navigation li {
    list-style: none;
    margin: 0 2px;
}
.page-navigation .page-none {
    display: flex;
    justify-content: center;
    width: fit-content;
    height: 20px;
    align-items: center;
    font-size: 1em;
    border-radius: 5%;
    margin: 0 2px;
    padding: 8px;
    text-decoration: none;
    color: #000 !important;
    background: #fff;
}
.page-navigation .page-next {
    display: flex;
    justify-content: center;
    width: fit-content;
    height: 20px;
    align-items: center;
    font-size: 1em;
    border-radius: 5%;
    margin: 0 2px;
    padding: 8px;
    text-decoration: none;
    color: #fff !important;
    background: dodgerblue;
}
.page-navigation a, .page-navigation .current {
    display: flex;
    justify-content: center;
    width: fit-content;
    height: 20px;
    align-items: center;
    font-size: 1em;
    border-radius: 5%;
    margin: 0 2px;
    padding: 8px;
    text-decoration: none;
    color: #fff !important;
    background: dodgerblue;
}
.page-navigation .current {
    color: #000 !important;
    background: #fff;
}
　とりあえず、意図通り動作にはなったけど、モバイルデバイスに対する「ウェブに関する主な指標の評価」が不合格なままだ。　高速化や配信データ量を減らす工夫が必要なので、年寄りのボケ防止として継続検討してみよう。
Sponsored Link 1214
Sponsored Link 1228

0 件のコメント :

コメントを投稿

Sponsored Link