はてなブログを初めて１年半、、、
なんとか頑張って週１目標で記事を書くようにしているが、その間ずっ〜と気になって直せずにいたのはヘッダー画像。もうどんなに試行錯誤を重ねても無理。で、とりあえずちょっとボケてて端が切れてる画像を背景色でごまかして諦めたまま放置。デザインに人一倍こだわる自分にとっては屈辱の日々であった。（え？それで１年半も？）
さすがにこのままではヤバい！ 思い直したのはつい最近のことで、また新しくヘッダー画像を作ってはめて見たら、これまたうまくいかず、、デザインCSSの中はもう何がなんだったかようわからん状態で気が狂いそう！
というわけで、思い切って、一からやり直してみる？みる？（本気でそう思うまでに、何度か震えた）
この際テンプレートのテーマも変えてしまえば、やり直す気も本気になるに違いないと、テーマストアを探る旅に。。
人気のテーマはあの頃からあんまり変わってないすね。「Minimalism」「Brooklyn」あたりがやっぱり上位。
ちなみに今まで使用していたのは「Naked」「Brooklyn」「dreamark」などを検討した挙句に落ち着いた「Contents」。シンプルだけど、ラインできちんと区切ってあったのが気に入っていた。これを、色を変えたり工夫してカスタマイズしていたのだが、
うっかり、スクショを撮ることなく変えてしまったため、サンプルなし、、、の体たらく。。すまんことです、汗。
テーマストアの新着を見ていたらふと目に留まったのが「PLAIN」「KOALA」、、両方ともoyomiyoさん作のカード型デザインのテーマである。トップページを一覧式にした時の見え方が気になっていたわたしは、このカード型の、PCだと２列に配した見え方やシンプルさがすごく整然としていて、”きちんとさん”なわたし（その割に部屋は散らかっている）にピッタリではないかと。
「PLAIN」か「KOALA」か？正直あまり違いはない。サイドメニューのタイトル部分か、、見比べながらハイ、「KOALA」さん、採用！！
▼こちら
「KOALA」はカスタマイズ性重視のレスポンシブデザインテーマ。
１．カスタマイズに適したシンプルなカード型デザイン
２．どのデバイスから見ても美しく表示されるレスポンシブデザイン
３．表示速度に配慮した、必要最低限のコーディング
４．使いやすく、簡単に設置できるスライドメニュー
５．背景色を使用した場合も美しく表示されるよう設定済み
６．関連記事はデフォルトでカード型
２．どのデバイスから見ても美しく表示されるレスポンシブデザイン
３．表示速度に配慮した、必要最低限のコーディング
４．使いやすく、簡単に設置できるスライドメニュー
５．背景色を使用した場合も美しく表示されるよう設定済み
６．関連記事はデフォルトでカード型
ダウンロード数はまだ多くないが、こう書いてあって、ますますいい感じになる確信が。。。しかもこの作者はなかなかデザインにこだわりがあるみたいで勝手に好感が。。
そこでやっと重い腰をあげる、、あげる、までに何日かかったことか。。
当然ながらわたしはCSSとか自分で書けるわけではない。ただ、色やデザインにものすごーく思い入れがあるので気に入らないところがあると悶々と「CSSコピペどうぞ」を探し続ける。はてなブログのテーマを変更するにあたり、今度こそ、忘備録も兼ねて書き残しておくぞ。
※参考にさせていただいたページも残しておく。
まず最初にやるべきこと
全く今までやっていなかったバックアップ。バックアップをとること。
やり方はすごく簡単。自分のみに公開してバックアップしたブログでまず「KOALA」に変更してみて、各所問題ないかを確認しておくこと。いろんなCSSを試してみる。それによって、いきなりテーマを変更してこんなはずでは、、っていうリスクを回避できる。
テーマを変えると今までのCSSは全部消えるらしいので、全てコピーして保存しておくことも忘れないこと！
▼参考
いよいよテーマ変更
oyomiyoさんは「KOALA」を導入した時にまずやるべきことをきちんと書いてくれている。これものすごく重要！
▼参考
特にHeadにコードを入れることは、このブログを完成させる上でとても大事。
まずは初期設定をした上で、色々カスタマイズしていくことになる。
タイトル画像の問題
長い間、頭を悩ませていたタイトル画像の問題に、いよいよ決着をつける時がきた。
今までどうしていたかというと、はてなフォトライフにいれてアップロードし、画像URLをCSSに書き込むというやり方はどうしても表示がうまくいかず、結局は仕方なく カスタマイズ⇒背景画像⇒画像をアップロード からファイルを選択し、なんだかんだするうちにスマホでもうまく表示できるようになっていた（理解していたわけで全くない、偶然の産物）。画像自体もなんだかひどい画像だったが、よく見ないと分からなかったかも（苦笑）。
ヘッダー画像を作る
サイズは強気の2000×360px。なぜって作っていたらこれが一番いいバランスだったのと、横いっぱいに表示したかったから（根拠はない）はてなブログ推奨の1000×200pxで今までざんざんうまくいかなかったので。勘ですね。
作業はフリー素材を背景、猫、鹿と集め、スマホアプリのPhotoshop Mix とPhotoshop Expressを使って作成。タイトル文字なども画像上に入れた。ちなみにわたくしPCでPhotoshopは使えません、ハイ。
今回はどうしてもはてなフォトライフにいれてアップロードし、画像URLをCSSに書き込む方法をやりたかったので、頑張ってみることに。
これに必要なCSSがコレ。⇒デザインCSS
#blog-title {
background-image: url(“画像のURL");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;
height: 200px;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow-x: hidden;
}
height: 200pxでOKなのもよくわからないけど、本体の画像の360pxを入れたらダメだったので減らしながら様子を見た。
text-align: center;
っていうのははてなデフォルトのタイトルやブログの説明テキストのセンター寄せってことじゃないかな？と思ったけど、うまく表示されたらいじらない鉄則で。
タイトル文字などの文字要素をヘッダ画像に入れて作ったということは、はてなデフォルトのタイトルやブログの説明テキストが表示されないようにしないといけない。
これに必要なCSSがコレ。⇒デザインCSS
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}
はい、うまく出来ました。PCではね。
だけどスマホではまたヘッダ画像が拡大して表示されてるという問題が。。。
スマホ用表示のカスタマイズ
で、スマホ用表示のカスタマイズでうまくいったのはコレ。⇒デザインCSS
@media (max-width:767px) {
#blog-title-inner {
background-size:500px;}
#blog-title{
position:relative;
height:80px;}
}
767pxというのはダブレットサイズだけど、これ以下のものはこういう表示になるよって意味だと思う。
height:80pxに変更しました。これもハメてみて様子を見ながら変更。
▼参考
このスマホ表示の設定はかなり試行錯誤、、かなりたくさんの方が指南してくれているのだけど、テーマとの相性なのか？うまくいかなかった。
誰もが書いていたCSSは
background-size: contain;
だけど、このせいでうまく行かないのかはよくわからなかった。
しかし、０から入れ直してやっとこれで綺麗に表示されたのでここは死守。理屈じゃないの。（理屈はきっとあるんだろうが、苦）
読者になるボタンのカスタマイズ
デフォルトのボタンが小さくて見にくいので、前のデザインの時にもやっていたボタンを目立たせる方法を。
検索していて見つけたのは、デザインの前に「記事下直下」に読者ボタンを入れる方法。ページの一番下より「記事下直下」に出ることで読者の目につきやすいという。うむ。確かに。
▼参考
次にデザイン。シンプルながらちょっとした工夫が嬉しいここを参考に。
▼参考
ここのCSSの中で色とボタンの大きさを変更させていただいた。
だがーっ、ここで問題がっ！最初の「記事下直下」に入れるCSSは活かしたまま、デザインを変更したつもりが、「記事下直下」には古い読者ボタンが出たまま、ページの一番下に新しいデザインの読者ボタンが出てる。。。新しいデザインボタンを「記事下直下」に出したいのに。。。なんでやねーん、涙。
よくわかんないのでとりあえずこのままで。
この後、まだまだ続くよどこまでよ？の険しいカスタマイズの道は次回へ続く。
