[Blogger #016] サイトマップ、SNSボタン、関連記事のカスタマイズ

やれてないことが多すぎて、中身の記事は全く手つかず。あいかわらず、noteから移してきた一部の記事を使ってカスタマイズだけを楽しんでおります。今日は、サイトマップから。

ここに全記事リストの作成記事がありますので、まずはこれを採用。

全記事リストを作成

【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】

ほぼ、そのまんま。出来上がりが、これ。

設置編のあとに、色調整編がありましたが、まあ、ここはこんなもんで、スルーしときます。悪くない出来だし。

オリジナルSNSボタン設置

上部と下部にあるSNSボタン。QooQは、この辺りは速度を重視してて、簡易的な表示を採用している。でも、たいてい皆これ弄ってますよね。やっぱり、Twitterは鳥マーク入れたい。

ということで、またもや「ふじろじっく」さんとこの記事をベースに改造対応。

【QooQ】オリジナルSNSシェアボタンの設置

この時点の記事だと、fontawesome を<i>タグで入れてますが、アイコンはSVGで埋め込む方式に変更してるのでそこは修正。紫色のコピーってアイコン、まず使いそうもないし、特殊対応されているようなので、私のところでは削除で対応。Pinterest は追記記事のとおり追加。このSVGはセクションもらってきたところにないので、ダウンロードして、追加。以下のように fontawsome サイトで Pinterestで検索すればすぐ出てきました。Pinterest-p のほうです。変更方法は過去記事みてね。

あと、記事上部側は消しました。だって、読む前にSNSボタンとか押さないでしょ。タイトルだけみて Tweet されたくないし。サイズは小さめにして、丸でも四角でもない形に。これ気に入ってます。

記事フッター部分を修正

SNSアイコンの最終形みて、お気づきだろうか？順番いれかえました。
元々は、SNSアイコン、カテゴリ、前、次の投稿。読み終わりで、シェアボタンを押してほしいという、ブログ運営側視点の順番ですよねぇ。

次、前のボタン、カテゴリ、SNSボタンの順にしました。いつも人のブログ読んでて、自分が欲しいと思う順です。前と次は左右入れ替えるか迷いましたが、左が次のままでいきます。直観配置は逆ですが、スマホ基準だと左が押しやすい。押しやすいほうに「次」かなと。

あと、カテゴリが、縦に大きなボタンで並ぶとうざいので、記事一覧と同じスタイルにして圧縮しました。他には、上部の投稿、更新日を記事一覧でやったのと同じように修正。HTMLの該当箇所はこれ。順序入れ替えただけ。

<div id='single-footer'>
    <b:if cond='data:blog.pageType  == "item"'>
        <b:include name='nextprev'/>
        <b:if cond='data:top.showPostLabels and data:post.labels'>
            <div id='single-footer-category'>
                <b:loop values='data:post.labels' var='label'>
                     <a class='single-footer-category-item' expr:href='data:label.url'><data:label.name/><data:postLabelsLabel/></a>
                </b:loop>
            </div>
        </b:if>

        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
        <b:if cond='data:top.showReactions'>
            <div id='mrp-wrapper'>
                <p id='mrp-title'><data:top.reactionsLabel/></p>
                <b:include data='post' name='mrp'/>
            </div>
        </b:if>
    </b:if>
    <b:if cond='data:post.allowComments'>
        <b:include data='post' name='comment_picker'/>
    </b:if>
</div>
<!--以下略-->

次回は、このフッター部分の下にある関連記事の調整に進みます。その後、コメント部分までいけたら終了。まだ二日ぐらいかかりそうだ。

【QooQ】関連記事ウィジェットのカスタマイズ