ヘッダー画像など新規一転

はてなブログの自身のページのデザインを一年程放置した。

というより変更の仕方を理解していないのだ。

そして、皆様のデザインがおしゃれで見やすい。

ちょっと変更してみようと思った。

あれこれ調べてみるといろいろ枠などを替えれるようだと気づく。

なら着せ替えしてみたい！

というころで、枠のデザインを変更。

デザイン⇒パレットマーク⇒好きなフレームを選ぶ。

これでだいぶ雰囲気が違うじゃないか。

悲しいのは選ぶフレームによって、カテゴリーなどがなくなること。

せっかくのカテゴリー、プロフィール、最新記事、月間アーカイブがサイドにあるのに、なぜなくなる。

だから上記が画面横に表示されるフレームから選択。

和柄のものを選択してみた。

色味は好きだが、トップのあたりがガチャガチャしている。

次に、デザイン⇒スパナマークでカスタマイズしてみる。

背景画像を選択。

サボテンマークを選んでみる。

これでだいぶタイトル周辺のデザインは落ち着いたが、先程選んだ和柄のタイトルまわりのデザインはなくなる。

まぁ薄茶のサボテンイラストがかわいいからこれで！！

次にタイトルの文字サイズや色などを替えたいのでちょっと調べてみる。 

デザインCSSに以下を貼るとタイトルのフォントサイズを変えられるらしい。

#title
{font-size: 30px;

通常は30が設定されているが大きくしたいなら数字を大きくとのことで

トライしてみる。

あら？変更されない。

 タイムラグがあるのか？

もう一度調べ直してやってみる。

 デザイン⇒真ん中のタグ　スパナマーク⇒一番下のデザインCSSに以下を貼り付け。

#blog-title {
font-size: 20px;
padding-top: 15px; /*
padding-bottom: 15px; /*
height: initial;

このfont-sizeの数字をさわると文字の大きさが変えられた！！！

ちなみに80pxにしてみてドデカクなりすぎたので20に変更。

一度目と二度目の違いは。。。titleとblog-titleの違いが原因か？

titleは記事のタイトル？

blig-titleは自分がやりたかったブログタイトル？

このデザインCSSを触るのは上級者向けとあるが、トライしてよかった。

padding〜の命令でタイトルまわりの枠の空間幅がかえられるようだ。

height: initial;がよくわからないが、タイトルの書き出し位置か？

とりあえずブログのタイトルは出来上がり。

気になったのが、ブログタイトル下のスペースが異様に開いている。

よって、ブログの本文を見るのに何度かスクロールが必要。

この異様なスペースをなくしたい。

あれこれ調べてヘッダーに写真を入れてみる。

でもブログ下のスペースは縮まらない。

タイトルが入っている枠のサイズなどは変更が可能だが下のスペースについては出てこない。

フレーム見本でもそんなことなっていないが。

自分のブログを立ち上げてみるとタイトル下に大きな広告がでる。

どうもこの広告用スペースみたいだ。

グーグルアドセンスを設定したときのものが有効なのだろう。

ブログタイトル下、サイド、記事中などなど宣伝広告が多い。

それも大きい、大きすぎる。

ブログタイトル下のみ広告を消せるのか今後やってみる。

もう一つトライしたのはヘッダー画像

デザイン⇒スパナ⇒ヘッダ⇒choose File

これで画像を選択。

自分で撮影したタージマハルの写真を入れてみたがサイズが大きすぎるのか一部のみしか見えない。

一度画像を消す。

画像サイズをおとして再度画像を選択したもののやはり切れている。

ドラッグして位置を調整できると書いてあるが、ぴくともしない。

このヘッダー画像は、はじめから画像枠に合わせて横長にカットする必要がある？

ネット検索で調べているとヘッダーの画像を売っているサイトあり！

やはりサイズは横長にしている。

なるほど、ある程度使いたい位置を決めて画像を加工しておくのか。

ブログデザインとは大変なものです。

そんなこんなでChromebookを前に格闘すること数時間。

疲れ果てて、スマホで自分のブログページを確認。。。

なんと何も変わっていない。

PCとスマホでは画面が違う。

スマホで変えることができたのはアクセントカラーのみ。

味気ないブログだ。

なんとしてもブログトップに画像をいれるのだ。

ちなみに、アクセントカラーはデザイン⇒スパナマークの横のスマホマーク⇒色選択でできた。

やってみればこれだけのこと。

PCのヘッダーに画像を入れるとスマホも同じものを選択できるようだ。

サイズは大丈夫だろうか。。。

レッツトライ！

はてなブログPerfect　Guidebook 基本操作から活用ワザまで知りたいことが全部わかる！ [ JOE　AOTO ]

はてなブログカスタマイズガイド HTML　＆　CSSで「はてなブログ」を次のステッ [ 相澤裕介 ]

はてなブログカスタマイズガイド HTML　＆　CSSで「はてなブログ」を次のステッ カットシステム相澤裕介 / 相澤裕介 / 【中古】afb