シンプルなブログテーマに回帰しました【2024年春】

ブログ開設1周年、すっきりとしたテーマに変更しました。

備忘録です。

soboku - すっきりとしたテーマに変更しました

ブログ1周年を機に、白背景で罫線等の文字装飾が少ないテーマに変更しました。AdSense広告が多くなりゴテゴテした見た目になると、ブログ自体はシンプルな方が見やすいような気がします。

当面はこちらのデザインで更新をしていきたいと思います。

前のブログテーマで使っていて、引っ越してきたもの

目次やボトムメニューなど、テーマに備わっていないものを後から追加しています。使えるものはそのまま使いたいと思います。

目次メニュー

目次メニューは下記サイトからコピペさせていただき、文字の大きさやカラーを調整して使っています。

CSSコードを表示（折りたたみ）

/*アンダーラインで段落分け目次*/
.entry-content .table-of-contents {
    position: relative;
    margin: 0;
    padding: .5em 1.2em 1em;
    background: #fff;
    font-size: 180%; /* サイズ変更 */
    border-top: solid 40px #595857; /* カラー変更 */
    border-right: solid 2px #595857; /* カラー変更 */
    border-bottom: solid 2px #595857; /* カラー変更 */
    border-left: solid 2px #595857; /* カラー変更 */
    border-radius: 8px;
    color: #595857; /* カラー変更 */
}
.entry-content .table-of-contents::before {
    content: "目次";
    position: absolute;
    top: -33px;
    left: 38px;
    margin: 0;
    color: #fff;
    border: 0;
    font-size: 160%;/* サイズ変更 */
    font-weight: bold;
}
.entry-content .table-of-contents::after {
    content: "\f039";
    font-family: blogicon;
    position: absolute;
    top: -35px;
    left: 13px;
    color: #fff;
    font-weight: bold;
    font-size: 120%;
}
.entry-content .table-of-contents li {
    margin: .2em 0 1em 1em;
    list-style-type: decimal;
    line-height: 1.6em;
    font-weight: bold;
}
.entry-content .table-of-contents li ul {
    margin: 0 0 1em .5em;
    padding: 0;
}
.entry-content .table-of-contents li ul li {
    margin: .2em 0 0 1em;
    font-weight: normal;
    font-size: 80%;/* サイズ変更 */
}
.entry-content .table-of-contents li ul li ul li {
    font-size: 90%;
}
.entry-content .table-of-contents a {
    color: #595857; /* カラー変更 */
    display: block;
    text-decoration: none;
    border-bottom: solid 2px #595857; /* カラー変更 */
}
.entry-content .table-of-contents ul li a {
    border-bottom: dashed 1px #595857; /* カラー変更 */
}

/*アンダーラインで段落分け目次 ここまで */

手順を解説するステッパー

STEP

ステッパーの例です1

段取りを説明する際に使うと、ナンバリングと罫線が付与されて、きれいにまとまります。

STEP

ステッパーの例です2

画像の貼り付け可能です

下記がコピペさせていただいたサイトと、導入時の拙ブログです。

ステッパーのCSSコード（クリックで展開）

/***ステップバーデザイン１***/
.step-wrap1 {
 counter-reset:count;
 margin: 2em 0;
 position: relative;
}
.step-content1 {
 padding: 0 0 1.3em 2em;
 margin: 0;
 position: relative;
}
.step-content1::before {
 content: "";
 display: block;
 width: 13px;
 height: 13px;
 background: #6ab5a5;
 border: solid 3px #ffffff;
 border-radius: 50%;
 position: absolute;
 top: 3px;
 left: 3px;
 box-shadow: 0 0 0 2px #6ab5a5;
}
.step-content1::after {
 content: "";
 display: block;
 height: calc(100% - 35px);
 border-left: dotted 5px #768888;
 position: absolute;
 top: 30px;
 left: 10px;
}
.step-title1 {
 font-weight: bold;
 font-size: 120%;
}
.step-label1 {
 color: #768888;
 font-weight: bold;
}
.step-label1::after {
 counter-increment:count;
 content:counter(count);
 position: relative;
 left: .3em;
}
.step-body1 {
 margin-top: .5em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン１***/

スマホ用ボトムメニュー

以前、下記のサイトからボトムメニューのコードを頂戴したのを、そのまま引っ越してきました。

ボトムメニューのHTML（クリックで展開）

<!-- bottom navigation デザインの「フッタ」のHTMLに貼り付ける -->

<ul class="bottom-menu">

    <li>

          <!--　↓↓項目1. ホーム 　＃の部分にホームのURLを入れる -->

        <a href="https://driveon43.com/">

              <i class="blogicon-home"></i><br><span class="mini-text">ホーム</span></a>

    </li>

    <li class="menu-width-max">

              <!-- ↓↓項目2. おすすめ　すぐ下の"＃"はそのまま -->

        <a href="#"><i class="blogicon-list"></i><br><span class="mini-text">カテゴリ</span></a>
           <ul class="menu-second-level">
                <!-- 下の"#"の部分におすすめ"記事URL"とタイトル等を入れる -->
                <li><a href="https://driveon43.com/archive/category/%E6%97%A5%E8%A8%98">日記</a></li>
                <li><a href="https://driveon43.com/archive/category/%E6%9B%B8%E3%81%8F%E4%BD%9C%E6%A5%AD">書く作業</a></li>
                <li><a href="https://driveon43.com/archive/category/%E5%82%99%E5%BF%98%E9%8C%B2">備忘録</a></li>
                <li><a href="https://driveon43.com/archive/category/100%E8%A8%98%E4%BA%8B">100記事</a></li>
            </ul>
    </li>

    <li>
              <!-- ↓↓項目3.　読者登録 ↓↓の部分の書き換えが必要です -->
        <!--  ~hatena.ne.jp/自分のはてなID/URL(http://の部分は無し)/subscribe　-->
        <a href="https://blog.hatena.ne.jp/ED105/driveon43.com/subscribe" target="_blank">
        <i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a>
    </li>

    <li>
              <!-- ↓↓項目4.　上へ戻るボタン 　変更不要です-->
        <div><a href="#">
        <i class="blogicon-chevron-up"></i><br><span class="mini-text">上へ戻る</span></a></div>
    </li>

<li class="menu-width-max">
              <!-- ↓↓項目5. 目次　変更不要です※注意あり -->
    <a href="#"><i class="blogicon-list"></i><br><span class="mini-text">目次</span></a>
        <ul class="menu-second-level"> 
           <div id="toc"></div>
        </ul>
</ul>


<!-- 目次を作成する先 -->

<div id="toc"></div>

<script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function () {

        var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)

        var div = document.createElement('div'); // 作成する目次のコンテナ要素

        // .entry-content配下のh2、h3要素を全て取得する

        var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

        // 取得した見出しタグ要素の数だけ以下の操作を繰り返す

        matches.forEach(function (value, i) {

            // 見出しタグ要素のidを取得し空の場合は内容をidにする

            var id = value.id;
            if(id === '') {
                id = value.textContent;
                value.id = id;
            }
            // 要素がh2タグの場合

            if(value.tagName === 'H2') {
                var ul = document.createElement('ul');
                var li = document.createElement('li');
                var a = document.createElement('a');

                // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

                a.innerHTML = value.textContent;
                a.href = '#' + value.id;
                li.appendChild(a)
                ul.appendChild(li);

                // コンテナ要素である<div>の中に要素を追加する
                div.appendChild(ul);
            }

 

            // 要素がh3タグの場合
            if(value.tagName === 'H3') {
                var ul = document.createElement('ul');
                var li = document.createElement('li');
                var a = document.createElement('a');

                // コンテナ要素である<div>の中から最後の<li>を取得する。

                var lastUl = div.lastElementChild;
                var lastLi = lastUl.lastElementChild;

                // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

                a.innerHTML = value.textContent;
                a.href = '#' + value.id;
                li.appendChild(a)
                ul.appendChild(li);

                // 最後の<li>の中に要素を追加する

                lastLi.appendChild(ul);

            }

        });

        // 最後に画面にレンダリング

        contentsList.appendChild(div);

    });

</script>

ボトムメニューのCSS（クリックで展開）

/* ボトムメニュー　 */

/*========================

　smartphone　bottom menu

　========================*/

.mini-text{font-size:11px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height:45px;/*高さ*/
    margin:0;
    padding:0;
    background-color:#616160;/*背景色*/
    z-index:30;}

ul.bottom-menu li {
    float:left;
    width:20%;
    background-color:#595857;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#ffffff;/*アイコン＆文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/
}

/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;
}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
    font-size:15px;/*展開メニューの文字サイズ*/
    line-height:30px;/*文字の縦幅*/
}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px;/*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;
}
li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px;/*高さ*/
    visibility: visible;
    opacity: 1;
}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;}

/*PC表示の際はボトムメニューは表示しない*/

@media(min-width: 768px){
    .bottom-menu{display:none; }
}

/*スマホの時だけ*/

@media(max-width: 767px){
/*ボトムメニュー付けたのでフッタを底上げする*/
#footer{margin-bottom:48px;}
}
/*　ボトムメニューここまで */

そのうちやる事

トップナビゲーションの設置

トップナビゲーションは以前使っていたテーマContentsのコードを使用しており、今回テーマを変更するにあたって、そちらはそのまま使わずに破棄しました。

上でボトムナビゲーションの作り方を紹介したサイトにトップナビゲーションメニューの作り方も掲載されているので、そのうち搭載する予定。

ブログパーツの取捨選択

PC版のサイドバーがスマホデザインでは記事下にずらっと並ぶので、かなり長くなる。すっきりできるものならしたい。

コードなど折りたたみ展開できるdetailsタグの導入

2024年5月5日導入済み

その他、過去のブログデザインのカスタマイズ記事

PCで修正しても、スマホでは文字サイズが期待通りに表示されてなかったりします。環境によって変わるCSSは難しいですね。

まとめ

以前のブログデザインよりもすっきりしたものに変えました。いつでも戻れるようにコードを保管しておきました。