Bloggerのカスタマイズ Ⅵ　ページデザイン

コピペでカスタマイズ。まったくもって、自分だけのための備忘録

見た目重視編

30．ブログカードを導入してみました

引用のリンクを貼るのがちょっと億劫な気分でしたので、ブログカードを導入してみました。

色々なブログカードがあるようです。比較サイトの最初に出てきたものにしましたが、とても気に入りました。カスタマイズ性もある模様です。とりあえず幅は80%で中央配置にしてみました。

導入は驚くほど簡単です。ブックマークをドラッグアンドドロップでブラウザに配置しておいて、CSSを”]]></b:skin>”の直前に書き込むだけでした。管理画面の「テーマ」から伝って「CSSの追加」でコピペするならば、HTMLを編集することもなくもっと手軽に導入できます。

使い勝手もまた簡単です。対象のブログを開いておいて、ブックマークをクリックすると出てくるHTMLをコピーして、編集ビューに貼り付ければOKです。行ったり来たりしなくて良いのでストレス無しで使えます。

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

vanillaice000.blog.fc2.com

31．ブログカードで記事の希望する場所へ飛ばす方法

これは、私の場合はできたのですが一般的な方法どうかはわかりません。google検索してもKey Wordが適切でないのか、ひかかりませんでした。

このページで事例を示します。下のブログカードをクリックすると本記事の「37．ホームの記事一覧にスニペット追加」へ飛びます。ここには、id="jp2"のアンカーリンクをつけています。

設定は、ブログカード用のHTMLのリンク先URLの最後にアンカーリングをつけるだけでした、

<figure class="blogcard"><a href="https://rainbowgoblinss.blogspot.com/2022/01/blogger.html#jp2"

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

コピペでカスタマイズ。まったくもって、自分だけのための備忘録 見た目重視編 30．ブログカードを導入してみました 引用のリンクを貼るのがちょっと億劫な気分でしたので、ブログカードを導入してみました。 色々なブログカードがあるようです。比較サイトの最初に出てきたものにしましたが、...

rainbowgoblinss.blogspot.com

別の方法もあります。

chromeでは文字を選択しておいて右クリックすると、「選択箇所へのリンクをコピー」という項目があります。これをブログカード用のURLにペーストして書き換えると、そこへ飛びます。

32．ナビバー周りのデザインを変えました　引用元の変更

ナビバーの検索ボックスがタイトルバーに重なっていたり、ナビバー自体が記事と重なったりしていたのですが、調整できるほど知識がないので、別のブログ記事で紹介されている他のやり方を試してみました。

変更前

私の環境でイメージどおりになるかは、でたどこ勝負ですが、今度は次の所からコピペします。

【 QooQ カスタマイズ 】 ナビゲーションバーをカスタマイズする

indoor-days.blogspot.com

紹介されている手順どおりですが、タイトルバーの下に移動するカスタマイズは行わず、「ナビゲーションバーの位置固定」からの手順で導入しました。

変更前は上の図の矢印で示しました気になる箇所がありましたが、これらが改善できました。

33．サイドバーのガジェットはアンダーライン付きにしてみた

chromeのdeveloper toolで、”#sub-content a”が目的に該当するコードだと分かったので、この下にマウスオンの時に有効になるホバーアニメーションを追加しました。

#sub-content a:hover{/*ホバーアニメーション追加*/
	text-decoration: underline;
}

34．サイトマップ

サイトマップページの作成

Bloggerのメニュー画面から、「ページ」「＋新しいページ」と選んで、HTMLの編集画面に下記引用のコードを貼り付けます。試しに2タイプ（2ページ）作ってみました。

ラベル分けタイプ

記事数の多いBlogger ブログに適したラベルでまとめるHTMLサイトマップの作成方法

HTMLサイトマップは、文字通りサイト（ブログ）の案内図のような働きを持っています。ブログを訪問したユーザーが、興味のある記事を見つけられるようにブログ記事の一覧をリストで表示するのがサイトマップの基本機能です。本記事では、ラベル毎に記事をまとめて表示するHTMLサイトマップの作成、設置方法を紹介します。

blogger101.blogging-life.com

ソートタイプ

HTML サイトマップウィジェット (2020/08/07 お知らせを追記しました) | ふじろじっく

日本語仕様に改変しました。

fujilogic.blogspot.com

作ったページをフッタガッジェトに追加

サイトマップページはフッタガジェットに追加して、タイトルリストとして表示します。そのタイトル表示をクリックすれば、サイトマップが開くという手順になります。

フッタガジェットはメニュー画面から、「レイアウト」「フッタ１」「＋ガジェットを追加」で「ページ」を選び、「編集」をクリックします。

「ページリストの設定」では、「ホーム」がデフォルトで登録されています。「新しいアイテムを追加」をクリックします。

作成したサイトマップの「ページ名」と「ページのURL」の登録をします。登録順はフッタでの表示順になります。後で上記の「ページリストの設定」で変更することができました。

35．3つのフッターの配分を変えました

左、中央、右のフッタはデフォルトでは30%づつで3等分されています。それを左から、15%、45%、30%に変えてみました。設定は#footer-item〇です。

#footer-item1{
	flex-basis: 14.3333%;
	margin-left: 2%;
	margin-right: 2%;
}
#footer-item2{
	flex-basis: 44.3333%;
	margin-left: 2%;
	margin-right: 2%;
}
#footer-item3{
	flex-basis: 29.3333%;
	margin-left: 2%;
	margin-right: 2%;
}

36．フッタータイトル、リストのデザイン変更

配分を変えるときにさわった"#footer-item1 {"の上に”#footer .widget h2 {”があります。記事全体の統一感を狙って、これのデザインを変えてみました。フッタのタイトル部が帯付きになります。

#footer .widget h2{ /* 帯付きラベル */
	font-size: 1.8rem;
	padding: .6em ;
	margin-bottom: 5px ; /* 帯下のスキマ */
	background: $(brand.color);
	color: $(brand.font);
}

37．管理者用のスティルスボタンでメニュー画面へ飛ぶ

閲覧画面からメニュー画面へ飛ぶボタンとHTML変換サイトへ飛ぶボタンを画面左に配置しました。ただし、管理者以外は見えないようにしています。

Bloggerのアイコンを押すとメニュー画面へ飛び、awesomeの編集アイコンを押すとHTMLの変換サイトへ飛びます。ブラウザのブックマークバーへ登録しても良かったのかもしれませんが、Bloggerの機能はBloggerでまとめる方が好みに合います。

管理者以外からはボタンが見えないようにするのは、２．Stylus の導入と使用方法の方法で使った”chromeの拡張機能のstylus”を使います。

stylusに"item-control"を設定しているので、<span ...> ････ </span>間にボタンを定義するコードを書きます。場所はHTMLの最後の部分で"</body>"の前です。

<!-- 何気にボタン -->
<span class='item-control' style='display:none'>
		<p id='setBlogger'><a href='https://www.blogger.com/' target='_blank'>
        <img alt='Blogger' src='https://www.blogger.com/img/logo_blogger_40px.png'/> </a></p>

  		<p id='transHtml'><a class='far fa-file-code fa-3x' href='https://tomari.org/main/java/html-mojihenkan.html' target='_blank'/></p>
</span>
  <!-- 何気にボタン CSS -->
<style type='text/css'>
	/* 何気にボタン設定 */

		#setBlogger {position: fixed; bottom: 50px; left: 10px; z-index: 110; }
		#transHtml {position: fixed; bottom: 100px; left: 10px; z-index: 110; }
  		#transHtml a:hover {box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25); transform: translateY(-0.1875em);}

</style>

【注記】

HTMLの変換サイトへ飛ばすawesomeの編集アイコンは、使ってみると使い勝手が悪すぎでした。コードをコピーした後、わざわざ編集アイコンを置いてある画面を出すのはクールではありませんでした。

削除するか、別のリンクを検討します。

38．ホームの記事一覧にスニペット追加

【 QooQ カスタマイズ 】 記事一覧にスニペットの導入と調整

Blogger のテンプレート QooQ の記事一覧にスニペットを導入する方法と、スマホ画面サイズでスニペットを表示しても邪魔にならないように調整する方法です。記事一覧をリスト表示することによりスペースが確保できたため、スニペット導入を決めました！

indoor-days.blogspot.com

この記事を参考にして導入しました。

スニペットはsnippet()関数で表現されています。そのパラメータは次の記事に説明がありました。

”【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ”のsnippet()関数の項目です。

ｎ

Step: 【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ

bloggerのカスタマイズなどを情報発信しています。

bgt-48.blogspot.com

39．ホーム記事のリンク範囲を見直し（全範囲でクリック有効）

前項で弄った記事一覧は、記事タイトルをクリックすればリンクが効くけど、有効範囲が記事タイトルだけでは使い勝手が良くないと感じていました。そこで、次のブログ記事を参考に囲み全体でクリックが有効になるように変更しました。

【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】

indoor-days.blogspot.com

/*ホームの日付、ラベルレイアウト変更*/
.list-item {
    position: relative;
}
/*.list-item-date{
    position: absolute;
    top: 5px;
}*/
.list-item-category {
    position: absolute;
    top: 0;
    right: 28px;
}
.snippet-body {
    font-size: 80%;
}
/*ホーム記事リンク範囲見直し*/
  .list-item-category-item{
    display: block;
    margin-top: .1em;
    margin-left: .1em;
    /*削除 padding: .3em 1em; */
    border-radius: 2px;
    background: $(brand.color);
    color: $(brand.font);
    position: relative; /* 追記 */
    z-index: 3; /* 追記 */
    opacity: .8;
  }
  .list-item-category-item >a{
    display: block;
    padding: .3em 1em;
  }
  /* カテゴリホバーアニメーション */
  .list-item-category-item:hover {
    opacity: 1;
  }

@media ( max-width : 768px ) {.snippet {display: none;}}/* スマホにはいらない */