そして有機体は黄昏へ向かう。: bloggerデザインテンプレート「Tokyo」をカスタマイズ

どうも。公開されているbloggerの中で、最も「誰も見ていない」無価値なブログである自信があります。

そんなどうしようもないブログではありますが、2005年の9月に今は亡きexciteブログで公開してから途中忘却の彼方だったこともあるものの15年続いているので、完全に閉鎖するのもなんだかなあ、と思っていました。

とは言え、ブログのデザインを考えたのはxhtml1.0strictで書こうぜ、な時代なこともあって読めねぇよってくらいな小さなフォントで広大な余白を使って中央にちんまりとまとめるのが流行っていた頃。

今見ると、どうしようもねぇなというデザインだったので、誰も見ていないとは言っても間違ってきてしまった人に申し訳が立たないと思いデザインをまるごと変えてしまおうと思っていました。

一応デザインの根底は変えずに

見やすく大きな文字で
レスポンシブ
書く側も書きやすい

と考えてWordPressで作ってみました。

BloggerからWordPressに「問題なく」移行することはできない

でもね、見た目はある程度近いものになったとは言え、やっぱりWordPressって使いづらいしなんか嫌い。

あと、bloggerから記事と画像は移行できたけど、同月の記事が全部くっついてしまうというどうにもならない事態に。

bloggerの「ラベル」をWPの「タグ」に変更して「カテゴリ」へ一括で動かすのはプラグインでどうにかなったけど、同月内の記事のスラッグが全部「post-0」になってしまうので、記事のシングルページを開くとスラッグpost-0でつながった同月の記事がずらずらっと並ぶ異様な状況。

しかもこれ、WP⇔bloggerの変換プラグインのほぼ全てを試したけどどうにもならない。

500近くある記事全部を手で修正するなんてやってられない、と言うことでWPは投げ捨ててbloggerでなんとかすることに。

とは言え、移行の問題がなくてもbloggerの方が良い

有料でサーバー借りてるし容量に問題はないし独自ドメインあるし、だからWPが良いとなるかも知れないけど、それがなくてもbloggerの方が良いですね。

Wordpressは、

セキュリティ対策を自分でやる必要がある
アップデートに対処しなければならない
使えなくなるプラグインがある
PHPを理解しないと本格的なカスタマイズは無理
投稿画面のUIが不親切（自分にとっては）

bloggerは、

そもそもアクセス解析したいならanalytics提供しているGoogleのサービスのほうが相性いいに決まってる
縦横どちらも2048px以内に収めれば、画像は無制限※
完全無料
表示速度がWPのようにサーバー依存しない
自分でアップデートしたり対応する必要がない
セキュリティも自分で対処する必要はない

※Googleフォトに2048px以内の画像をアップし、そこからブログに表示させればblogger自体に画像を保存しないのでbloggerの容量は実質無制限だと思って良い

ということで、やっぱbloggerしかないな、と。

もちろん、私が個人的にWordPress大嫌いという理由が一番なんですけど。

bloggerのおすすめテンプレート

問題は、bloggerはオリジナルでCSS弄るのがとても面倒ということ。

今までは本家サイト含め、とにかく自力でCSS書いてデザインすることに拘ってきたけど、今後Webデザインを仕事にすることもないし大半を忘れているしでどうでもよくなったので、ここは便利なテンプレートを利用することにしました。

幾つか試した結果、とても素晴らしいと思ったのがTokyoテンプレート。

bloggerは新しいUIになっていてわかりづらいんですが、

「テーマ」からオレンジの下矢印をクリックしてポップアップメニューの「元に戻す」を選べば次の画面でダウンロードしたテンプレートxmlを読み込めます。

Tokyoテンプレートはシンプルで見た目的にも好みであるのに加え、CSSの書き方がとても丁寧でわかりやすい。

で、色やカラム幅や諸々の設定を変更したものが現在のこのブログです。

Hタグもそのうち修正したいと思っていますが、まあ誰も見てないしね、ここ。

「そして有機体は黄昏へ向かう。」で修正したCSS

全体のフォントサイズを変更

html {
font-size: 12px;
}

ブログタイトルを右へ

#header-inner{
padding-top: 3em;
padding-bottom: 3em;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: right;
}

ブログタイトルに影を付加

#header-inner h3 a{
display: inline-block;
color: #ffffff;
text-shadow: 2px 2px 10px #477D6F ,
-2px 2px 10px #477D6F ,
2px -2px 10px #477D6F ,
-2px -2px 10px #477D6F;
}

メインカラムを広く、ウィジェット部分の右カラムを狭く

#main-content{
float: left;
width: 72%;
margin-right: 2.8%;
}
#sub-content{
float: left;
width: 25.2%;
}

アーカイブのセレクトボックス

select{
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
#BlogArchive1_ArchiveList{
position: relative;
border: 1px solid #bbbbbb;
border-radius: 2px;
background: #ffffff;
}
#BlogArchive1_ArchiveList::before {
position: absolute;
top: 0.8em;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}

Google検索のボックス

#cse-search-box{
padding: 0 !important;
}
#cse-search-box .search-text-box{
outline: none;
padding: 0 !important;
height: 27px;
max-width: 75%;
border: 1px solid #bbb;
border-radius: 5px;
}
#cse-search-box .search-box-b{
margin-left: 0 !important;
background-color: #469882;
border: 1px solid #469882;
padding: auto;
font-size: 1.1rem;
color: #FFFFFF;
height: 27px;
width: 50px;
}

記事ページの「準見出し」（H4）

#single h4{
display: table;
position: relative;
border-bottom: 2px solid $(maincolor);
}

引用（blockquote）

#single blockquote{
position: relative;
width: 90%;
margin: 1em 0;
padding: 10px;
background-color: #F4F8F7;
border: solid 2px #E9F0EE;
}

レスポンシブ、スマホにした場合の投稿画像がメインブロックをはみ出すことに対する対応

@media ( max-width : 768px ) {
#single img{
width: 80%;
}
}

後は、日付やラベルの文字サイズを小さくして、タイトルや本文などとメリハリがつくように修正したりしました。