Html on ポンコツ地方エンジニアの技術ブログ

Blogger の画像挿入タグが残念すぎるので、CSS で少しだけ対応する

Wed, 02 Jun 2021 00:00:00 +0900

Blogger の記事投稿画面で画像を挿入した場合、以下のようなタグで挿入されます。

※2021年6月現在の場合

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshA-sB1IOm4s0JYX1L5iFGbw7ifN15irj6WkGQ2PdJBW5-Ud1zN4YT1vBh7LBTmRhVAGg0ieitP8gUf9WJMDIM9oEN89NhBitkJS_s_zPTJm5FSLeCuSL9znJv6YlQIrEP9kDt7-8ZJs/s868/%25E7%2584%25A1%25E9%25A1%258C.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="240" data-original-width="868" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshA-sB1IOm4s0JYX1L5iFGbw7ifN15irj6WkGQ2PdJBW5-Ud1zN4YT1vBh7LBTmRhVAGg0ieitP8gUf9WJMDIM9oEN89NhBitkJS_s_zPTJm5FSLeCuSL9znJv6YlQIrEP9kDt7-8ZJs/s320/%25E7%2584%25A1%25E9%25A1%258C.png"/></a></div>

とても残念です。
昔はこんな変なコードじゃなかったけどなぁ（過去の記事を見て確認）。

a タグに display: block; が追加されています。
このせいで、画像の横の余白もクリックできるようになってしまっています。

何もないところをクリックできてしまうことにすごい違和感があります。

さらに、Blogger はデフォルトでライトボックス機能が有効になっていますが、画像横の余白をクリックした場合はライトボックス機能が効きません。
画像の上をクリックしたときだけ効きます。

また、上記は配置を中央にしているのですが、これまた a タグに text-align: center; が追加されています。

従って、画像横の余白をクリックできないようにしようと display: block; を削除すると、text-align: center; が効かなくなるという残念さ。

なんで一つ上の div に設定してくれないんだろう？
というわけで、上記の display: block; text-align: center; を div タグに設定すれば解決します。

でも、画像挿入の度に手動で変更するのは面倒ですし、過去の記事全部を修正なんてやってられないので、以下の CSS を追加して対応しました。

div.separator {
 display: block;
 text-align: center;
}

.separator a {
 display: inline !important;
}

ただし、画像の配置位置は中央固定です。

きちんとやろうとすると、a タグ内の text-align の値を、親要素の div に適用させる処理が必要ですが、CSS だけではできないので、JavaScript を使う必要があります。
私はそこまでやりたくなかったので、これで妥協しました。

もしかしたら、CSS4 になったらできる？

参考 URL

https://teratail.com/questions/51614

デザインを Materiapollo に変更しました

Tue, 01 Jun 2021 00:00:00 +0900

当ブログのテーマを Materiapollo というテーマに変更しました。

https://www.cottpic.com/2018/04/materiapollo-v0-9-1-release.html

このテーマについて、カスタマイズして点についてまとめておきます。

前準備

ソフトウェアエンジニアならばこういうテーマのカスタマイズも Git を使って管理しましょう。

ウィジェットのアイコンを追加

私はサイドバーに翻訳ウィジェットとかも表示しているので、それ用のアイコンを追加します。

変更前

.sidebar .widget.BlogArchive h2:before{content: "\e02f\00A0";}
.sidebar .widget.Label h2:before{content: "\e54e\00A0";}
.sidebar .widget.PopularPosts h2:before{content: "\e39f\00A0";}

変更後

BlogSearch Translate ContactForm を追加しました。

.sidebar .widget.Translate h2:before{content: "\e8e2\00A0";}
.sidebar .widget.BlogSearch h2:before{content: "\e8b6\00A0";}
.sidebar .widget.BlogArchive h2:before{content: "\e02f\00A0";}
.sidebar .widget.Label h2:before{content: "\e54e\00A0";}
.sidebar .widget.PopularPosts h2:before{content: "\e39f\00A0";}
.sidebar .widget.ContactForm h2:before{content: "\e0be\00A0";}

アイコンのコードは以下で調べられます。

https://fonts.google.com/icons

ボタンのテキストが大文字にならないようにする

Material-UI ではボタンのテキストは全て大文字になってしまうのですが、これを解除します。

READ MORE とラベルの二カ所について以下のように修正します。

変更前

<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'></i></a>

<a class='btn left post-per-page' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>

変更後

<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'></i></a>

<a class='btn left post-per-page' style='text-transform: none;' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>

テーマの色を変更

ヘッダーの色は #00acc1、ナビゲーションバーの色は #00bcd4 なので、これで検索したら修正箇所が見つかると思います。

ヘッダーの色とテキストの配置

変更前

header{height:200px;background-color: #00acc1; overflow: hidden; color: #fff; text-align: center;}
#headerleft{margin:0;}
.headerleft h1{padding-top: 85px;}

変更後

header{background-color: #212121; overflow: hidden; color: #fff;}
#headerleft{margin:0;}
.headerleft h1{padding-top: 15px;}

ナビゲーションバーの色

変更前

nav{background-color: #00bcd4;}

変更後

nav{background-color: #757575;}

ドロップダウンリストの色

変更前

nav.npin .dropdown-content li > a, .dropdown-content li > span {
 color: #00acc1;
}

変更後

nav.npin .dropdown-content li > a, .dropdown-content li > span {
 color: #212121;
}

パンくずリストの色

リンクの色と合わせました。

変更前

.breadcrumbs.card a {color: #00acc1;}

変更後

.breadcrumbs.card a {color: #2196f3;}
.breadcrumbs.card a:hover {color: #64b5f6;}

CSS の追加

見出しをはじめ、全体的にコンテンツ内のデザインが素っ気なかったり、一部デザインが崩れていたりしたので、以下の CSS を追加しました。

.marked は後述するマークダウンを適用している範囲を指定しています。

見出し

.marked h1, .marked h2, .marked h3, .marked h4, .marked h5, .marked h6 {
 margin: 1em 0;
 font-weight: bold;
 /* font-family: 'Material Icons' */
}

.marked h2 {
 padding: 0.4em;
 background: #eaf3ff;
 border-bottom: solid 3px #424242;
}

.marked h3 {
 padding-bottom: 0.4em;
 border-bottom: dotted 1px black;
}

.marked ul > li {
 list-style-type: disc;
}

.marked ul > li > ul > li {
 list-style-type: circle;
}

.marked ul > li > ul > li > ul > li {
 list-style-type: square;
}

.marked ul {
 padding: 0 0 0 40px;
}

.marked li {
 padding: 0px;
 margin: 0 0 4px 0;
}

.marked ol {
 padding: 0 2.5em;
 margin: .5em 0;
 line-height: 1.4;
 list-style-type: decimal;
}

デフォルト状態に戻したいだけなのに結構面倒です。
以下のページが参考になりました。

https://standard.shiftbrain.com/blog/reset-and-restore-list-item-marker

コードブロック

.marked pre {
 margin: 0.5em 0 1.5em 0;
 border-radius:10px;
}

.marked p > code {
 padding: 0.1em 0.3em;
 color: palevioletred;
 background: ghostwhite;
 border: 1px;
 border: solid 1px darkgray;
 border-radius: 5px;
}

テーブル

.marked table{
 border-collapse: collapse;
 width: 100%;
}

.marked table tr{
 border-top: solid 1px #d0d0d0;
 border-bottom: solid 1px #d0d0d0;
 cursor: pointer;
}

.marked table tr:hover{
 background-color: #eaf3ff;
}

.marked table th{
 padding: 15px;
 text-align: center;
 font-weight: bold;
}

.marked table td{
 padding: 15px;
}

デフォルトの画像を追加

記事中にある最初の画像がトップページに表示されますが、画像がない記事の場合は何も表示されず寂しいので、NO IMAGE と表示されるようにします。
ちなみに、画像ではなくマテリアルアイコンと文字列で作成しています。

ホーム画面の NO IMAGE

変更前

<b:if cond='data:post.firstImageUrl'><div class='md-thumb col s12 m5 l5' style='text-align: center;'><a expr:href='data:post.url'><img expr:src='data:post.firstImageUrl'/></a></div></b:if>

変更後

<div class='md-thumb col s12 m5 l5' style='text-align: center;'>
 <a expr:href='data:post.url'>
 <b:if cond='data:post.firstImageUrl'>
 <img expr:src='data:post.firstImageUrl'/>
 <b:else/>
 <div class="noimage">
 <i class="material-icons large">image</i><br/>
 <span>NO IMAGE</span>
 </div>
 </b:if>
 </a>
</div>

CSS

あとは上記に合わせて以下の CSS を追加します。

.noimage {
 color: #bdbdbd;
 font-size:30px;
 font-weight:bold;
}

.noimage-small {
 color: #bdbdbd;
 width: 42px;
 font-size:6px;
 font-weight:bold;
 text-align: center;
}

その他

その他、以下のことをやっています。

マークダウンで記事を書けるようにする

こちらの記事を参照してください。

シンタックスハイライトを設定する

こちらの記事を参照してください。

投稿日時と更新日時の表示

以下のページを参考にさせていただきました。

https://wrxsti-fan.blogspot.com/2020/06/blogger-materiapollo.html

テーマ適用後にやったこと

ウィジェットの追加（翻訳など）
フッターのウィジェットを削除
人気記事のスニペットを非表示にした
記事の作成者とコメント数を非表示にした

表示確認

以下、表示の確認です。

見出し１

見出し２

見出し３

見出し４

見出し５

リスト
- test
- test

インラインコードcodeだよ

赤文字はHTMLで

コードブロック

namespace hoge
{
 class hoge
 {
 int hoge = 0;
 }
}

テーブル

header	header	header
hoge	hoge テーブル内の改行は`<br>`で	hoge
hoge	hoge	hoge

Html on ポンコツ地方エンジニアの技術ブログ

Blogger の画像挿入タグが残念すぎるので、CSS で少しだけ対応する

参考 URL

デザインを Materiapollo に変更しました

前準備

ウィジェットのアイコンを追加

ボタンのテキストが大文字にならないようにする

テーマの色を変更

ヘッダーの色とテキストの配置

ナビゲーションバーの色

ドロップダウンリストの色

パンくずリストの色

CSS の追加

見出し

リスト

コードブロック

テーブル

デフォルトの画像を追加

ホーム画面の NO IMAGE

人気記事の NO IMAGE

CSS

その他

マークダウンで記事を書けるようにする

シンタックスハイライトを設定する

投稿日時と更新日時の表示

テーマ適用後にやったこと

表示確認

見出し１

見出し２

見出し３

見出し４

見出し５

参考 URL