とりあえずですが、
ブログの模様替えしてみました。
理系出身といえども、私は情報系でないので全くの素人。
色々なサイトやはてなブログの説明を読んで設定してみました。
間違っているかもしれませんが、まあこういう風に表示されているのでいいのかな?
と思います。
もっといい方法があれば教えて下さい。
まだまだ気になる点が何か所かありますが、ゆっくり直していきます。
ひとまず、本来の目的である
「モバイルブリー」（スマホでも見えやすい形になる：レスポンシブ対応）
は達成できました。
備忘録として、模様替えの方法を記録しておきます。
あらかじめ申しておきますが、とっても素人のやり方です。
【1】テーマ
レスポンシブ対応のテーマの中から選びました。
管理画面→デザイン→デザインテーマ→公式テーマ or インストールしたテーマ
の中から選びます。
または公式テーマのところを一番下までスクロールして「テーマストアでテーマを探す」で自分の好みのものを探します。
レスポンシブ対応なのかどうかはそれぞれに説明が書いてあります。
私はテーマストアで探し、
SOHO
に決めました。
【2】ヘッダー画像
ブログの顔みたいなところです。
一番簡単に設定するのは
ヘッダーではなく、背景画像の中にあるデザインから選ぶだけです。
自動的にブログ名とブログ説明が表示されます。
私は好きなものがなかったので、色々といじくってみました。
まずタイトル画像を作成します。
画像作成は慣れているPower Pointを使いました。
画像をどのようなものにするのか？
我が庭・茶道具・バラ、、、
しかし色々なトピックスをダラダラ書いているブログなので、どれもしっくりこない。
ということで、
Peanutsにしました。SNOOPYです。
私の初代SNOOPY. ロンドン土産で叔父から頂いたもの。
45年ぐらい前のもので、当時は made in Japan です。
私は大のSNOOPYファンなんです。私のアイコンもSNOOPYです。
小学生の頃から好きで色々なものを集めました。
お人形も山のようにあります。大型SNOOPYからシリアル番号付きシュタイフ Steiff社製のSNOOPYも数体もっています。
ボストン滞在の5年間は見つけたSNOOPYほとんど買いました。だってアメリカのCVS/Pharmacyでは季節ごとにお菓子を抱いたSNOOPYが2~3ドルほどで売っているんですもの。もの凄い数になってしまい日本に帰る時大変でした。
話が脱線してしまいました。
SNOOPYの話になると止まらなくなるので、この辺でやめておきます。
兎に角、ヘッダー画像はPeanutsに決定。
画像は
からダウンロードしました。
この画像をパワーポイントに貼り付け、少し直し文字を入れます。
↓
ファイルをパワーポイント形式で保存後、別にJPEG形式でも保存します。
↓
JPEGファイルを開く。私の場合は「フォト」で開きました。
↓
トリミングして保存。できるだけ横長がいい。
↓
トリミングしたものをサイズを変更する。
フォトの場合、右上の3つ・のところをクリックすると「サイズ変更」が出てきます。
「カスタムの寸法を定義します」をクリック
はてなブログの場合、
縦200 横1000
が推奨されています。
私はヘッダーの縦を少し長くしたかったので、まず
管理画面→デザイン→｛｝デザインCSS
のところに、
#title a,
#blog-title #blog-description {
color: #00000;
font-size: 28px;
}
を入力後、
画像を縦は230 横1000にしました。（縦横比は維持しておく）
サイズ変更したものを再度保存。
↓
完成した画像ファイル（JPEG）をヘッダーのタイトル画像のところにアップロードします。
その時表示設定は「画像だけ表示」にします。
これで設定を保存すれば一応完成です。
ヘッダーの縦を変更しなければ、
縦200 横1000
にしなければいけません。
私のヘッダー画像の周りの木目のデザインは背景画像で設定となります。
Peanutsの下に空間ができていますが、これは「ナビゲーション」などを入れるためにあります。後々入れてみようと思います。←次の課題
（管理画面→デザイン→ヘッダー→タイトル下で設定します）
【3】文字の大きさ
以下のブログを参考にしました。
はてなブログのフォントサイズを変える方法 最適な文字サイズは？ - Random Life Blog
デフォルトの設定の文字サイズでは小さすぎるとのこと。
確かに私も最近キツイです。。。
そのため記事中の文字を大きめに設定しました。
管理画面→デザイン→｛｝デザインCSS
ここに元々書いてある後ろに以下のCSS（暗号！？）を入力します。
.entry-content {
font-size:17px;
}
フォントサイズは「17」です。
お好みで変えて下さい。ちょっと大きめかな？と思いますがスマホだと楽です。
今回はここまで。
また近いうちに続きをアップします（予定）
それではまた。
