Bloggerのカスタマイズ Ⅳ　私のための覚え書き

10．関連記事をサムネイルなしのリスト表示にしたいがNG

表題のようにしたいのだけれど、やりかたがわかりませんので、”【QooQ】関連記事ウィジェットのカスタマイズ (2021/03/23 関連記事消滅に関する情報を追記しました)”で紹介されている2列横表示タイプに変更します。

サムネイル付きの2列表示は問題なく変更が適用できました。

[ps] ふじやんさんが作ってくれた<m(__)m>ので、当初の希望どうりサムネイルなしのリスト表示になりました。

11．クイック編集アイコンで直接編集する

【手順】

１．HTMLを編集

上の数行のコードは、</b:if> までの数行を

の1行のコードに書き換えます。

【使い勝手がちょっとね】

  target="_blank" rel="noopener noreferrer" を<a expr:href=....の最後に加えて、

<a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:top.editPostMsg' rel='noopener noreferrer' target='_blank'>

２．Stylus の導入と使用方法

 その手順は、

①  bologgerの管理画面をアクティブにした状態で、アドレスバー右にある拡張機能アイコン（小槌？）をクリックすると、このような画面になります。

　拡張機能選択のポップアップから、Stylusをクリックします。

②　www.blogger.comのポップアップがでたら、”このURL”をクリックします。

③　「スタイルを追加」が表示されるので、所定のCSSをコピペしたら、左隅の保存を押します。これで、管理者だけに鉛筆アイコンが表示されます。

コピペするCSSは、”【QooQ】Bloggerの仕様変更に影響されずに記事編集アイ
コンを使い続ける方法”に載っているコードです。

  table-layout: fixed; /* 枠のサイズを固定（スプレッドシートの設定を継承）*/
  width: 0px; /* 表全体の幅に関する記述（そのままだとスプレッドシートの設定を継承）*/

に変更したら、文字のはみ出しがなくなりました。

記事の表示範囲に近いような幅広い表の場合は、下記の方が良いかもしれません。

なお、

table-layout: auto;  は、表をデバイスの画面サイズに合ったサイズで表示させる（レスポンシブデザイン）コマンドのようです。さらに、これを適用した表では、各セルの幅をセル内のテキスト数に合わせて調整しているようです。

/> の前にはひとつスペースを設けることが推奨されています。<br/>と空白なして書いたら、次に「HTMLビュー」にしたら、スペースが入っていました。

例：メタライズド<br />フィルムコンデンサ

わかりやすい図があったので、引用します。

1行目から、順に書いていくようです。

 <table border="1">

    <tr>

      <th>名前</th>

      <th>年齢</th>

    </tr>

    <tr>

      <td>田中</td>

      <td>27</td>

    </tr>

    <tr>

      <td>佐藤</td>

      <td>42</td>

    </tr>

  </table>

”CSSで作る！魅力的な引用デザインのサンプル30（blockquote）”に沿って導入してみたのですが、引用符左の縦線とバックグラウンド枠が表示されません。

導入したのは、「3. 少しカラフルなカード風に」という下のデザインなのですが．．．

【設定】

そこで、QooQのコードをサルワカさんコードに置き換えるという考え方でやってみたところ、正常に動作させることができました。

具体的には、何か所かある”blockquote”を”#single-content blockquote”に変更して、そっくりQooQのコードと入れ換えるというやり方です。

私が置き換えたコードは下記になります。

<blockquote>
<p>引用する文章</p>
<cite>引用元：<a href=”引用元のURL”>引用元のページタイトル</a></cite>
</blockquote>

すぐ上の「コードを表示」のボタンアイコンのことです。

【設定】

  <div style="text-align: center;">

    <div class="hidden_box">
	<input type="checkbox" id="labelX"/> <!-- Xを任意の数字に変更 -->
	<label for="labelX">ラベル</label> <!-- Xを上記と同じ数字に変更 -->
	<div class="hidden_show">
		ここに中身
	</div>
    </div>

【何かおかしいんです】

  <label for="label1">ラベル</label>が
  <label >ラベル</label>に変わります。for="label1"が消えています。

17．スクロールバー付きのボックス

【使い方】

18．トップ・ボトムに飛ぶボタン

      <!--上下にジャンプボタン-->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
    <script>
    //<![CDATA[
    $(function() {
        var pagetop = $('#pagetop');
        var pagebottom = $('#pagebottom');
        var toTop = 1000;//最上部ヘの到達時間(ミリ秒)
        var toBottom = 1000;//最下部ヘの到達時間
        $(window).scroll(function () {
            if ($(this).scrollTop() > 1000) {
                pagetop.fadeIn();
            } else {
                pagetop.fadeOut();
            }
            if ($(this).scrollTop() > 0 && $(this).scrollTop()<$(document).height()-1200) {
                pagebottom.fadeIn();
            } else {
                pagebottom.fadeOut();
            }
        });
        pagetop.click(function () {
            $('body, html').animate({ scrollTop: 0 }, toTop);
        });
        pagebottom.click(function () {
           $('body, html').animate({ scrollTop: $(document).height()}, toBottom);
        });
    });
    //]]>
    </script>
    <style>
    #pagetop,
    #pagebottom {
        display: none;
        position: fixed;
        right: 0;
        color: #6495ed;
        z-index: 99;
    }
    #pagetop {
        bottom: 60px; /* fontを2xにしたので&#12289;位置を80pxから下げた */
    }
    #pagebottom {
        bottom: 20px;  
    }
    #pagetop span,
    #pagebottom span {
        transition: .5s;
        opacity: .5;
    }
    #pagetop span:hover,
    #pagebottom span:hover {
        cursor: pointer;
        opacity: 1;
    }
    </style>
    <p id='pagetop'><span><i class='far fa-caret-square-up fa-2x' style='color: steelblue;'/></span></p>
    <p id='pagebottom'><span><i class='far fa-caret-square-down fa-2x' style='color: steelblue;'/></span></p>
	<!--上下にジャンプボタン END -->

19．行きたいところへリンクさせる

19.1　任意のページへリンク

19.2　任意のページの指定行へリンク（アンカーを打ち込む）

所望の行や文字列にアンカーを打ち込む方法

ページのHTML編集で、id="a2"（a2は任意の文字列、最初はアルファベット）をコードに追加します。これには２とおりのスタイルがあります。

事例として、本ページの見出し「16．要素の表示・非表示」の1行下にある”すぐ上の「コードを表示」のボタンアイコンのことです。”という文章へリンクさせてみます。

  https://rainbowgoblinss.blogspot.com/2021/12/blogger_17.html#a2

19.4　他の方のブログ記事でアンカーを探す

19.5　なんでも万能なリンク？