はてなブログカスタマイズ備忘録第三章、ヘッダー画像設定・グローバルメニュー設置・プロフィール画像を大きくする　まとめ。

そろそろ仕上げ、一気にイメージが変わるヘッダー画像とグローバルメニュー設置。

背景も好きな画像や素材を選べるよ。
ヘッダー画像を準備せよ。
ヘッダー画像をアップすること自体は簡単。
はてなブログのヘッダー画像の高さはデフォルトは200px、これは後から自由に変更できる。
幅1000pxのはずなのに1000px以上になったり、記事幅にピッタリ合わなかったりするのはどうして?!(まだ未解決･･･)
ヘッダー画像もレスポンシブ表示にするにはどうしたらいい?
後回しにしていたグローバルメニュー設置･･･
プロフィール画像をもう少し大きくできないかなぁ
まとめ

背景も好きな画像や素材を選べるよ。

背景は単色・柄・写真などデフォルトでも何種類からか選べて手軽に変更できるが、ハッキリ言って、種類が少ない。素材を扱うページや自分で作った画像・素材をアップロードして使う事ができる。これは簡単。

ヘッダー画像を準備せよ。

はてなブログのヘッダー幅は、デフォルトが1000pxとの事で、とりあえず幅1000pxの画像を用意してみた。ただ写真をトリミングしただけではつまらないので(?)Photoshopで画像を加工したりして遊んでみた。画像加工は得意はずだったが、新しく購入したPhotoshopの使い方が全く分からず、１から覚える状態ではあったが、少しずつ慣れ、結構お気に入りの画像ができ、自己満足(笑)

ヘッダー画像をアップすること自体は簡単。

あとはテンプレート・カスタマイズ画面からアップロードればいいんでしょ?と軽く考えていた。
確かにアップロードすれば何となくヘッダー画像が載るが、位置や大きさがおかしい。さて、どこを直したらいいのか･･･

はてなブログのヘッダー画像の高さはデフォルトは200px、これは後から自由に変更できる。

はてなブログのヘッダー画像の高さはデフォルトでは200pxである。幅1000pxに対してだと結構細いと思う。
でも、これもCSSをいじってやると任意に設定できるのである。あと、ヘッダー画像と本文記事の間にスペースができる事もあるようで、これも一応CSSで調整可能。

/* header-image-enableタイトル画像の高さを変更する */
.header-image-enable #blog-title #blog-title-inner {
    height: 350px;/* デフォルトでは200px.画像の高さを指定 */
}
/* タイトルテキストの位置 */
.header-image-enable #title {
    padding-top: 150px;
}

/* タイトル画像上下の余白を取る */
    #blog-title {
    margin: 0 auto;
    padding: 0;
}

おこめのこのヘッダー画像は、高さ350px。

幅1000pxのはずなのに1000px以上になったり、記事幅にピッタリ合わなかったりするのはどうして?!(まだ未解決･･･)

どうも、使用しているテンプレートの影響を受けるのだろうか、いくつかテンプレートを変えたりして検証したが、どうやらそんな気がする。アップロード機能を使ってのヘッダーの設定では、どんなに大きいサイズの画像でも、幅1000pxにリサイズされてしまう、という事のはずなのに、幅1000px以上になっているテンプレートがある。裏日記のsimplegrayがそうだ。そうなると、画面が引き延ばされて少し粗くなってしまうのである。困る。

ならば、はてなの画像アップロード機能を使わずに、直接画像のURL指定すればいいだろう?と思ってやってみても上手くいかなかった。どこかやり方が間違っているのかなぁ。多分間違っているんだと思う。
まだ解決していない部分だが、ここで立ち止まっていてはいけないので、また後日にでも調整してみようかと思う。

ヘッダー画像もレスポンシブ表示にするにはどうしたらいい?

とりあえずヘッダー画像の高さも整って表示できたのはいいが、PCで画面の伸び縮みをしてみると、ヘッダー画像の両端がどんどん切れていく。記事本文はレスポンシブルなのに、ヘッダー画像はレスポンシブルじゃないの?!
調べると、対策としては、メディアクエリのブレイクポイントに合わせて何枚か画像を準備して切り替わるようにするか、縦横比を維持したまま大きさが変えられるようにしていくか、があるよう。

どうも、後者の方法の方がレイアウト崩れを起こさずやり方としてもスマートなようなので設定してみた。

参考にさせていただきました。とっても分かりやすいです。

www.gamehuntblog.com

/*スマホ用ヘッダー調整*/
.header-image-only #blog-title #blog-title-inner {
  position: relative;
  background-size: cover;
  height: auto;
}

.header-image-only #blog-title #blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 35%;
}

.header-image-only #blog-title #blog-title-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

このpadding-top: 35%;の値は縦幅÷横幅×100の値　なので、アップした画像サイズに応じて値を変更すればOK。私のヘッダー画像は横1000px 縦350pxで用意したので、padding-top:○% の所は 35となる。

その後、画面を伸び縮みさせてみると、きちんとそれに追従して表示された瞬間は、先のスマホ横揺れ・画面見切れが解消した時くらい感動&安心した(笑)

スマホ画面で見ると、少しヘッダー画面が小さいかな、とも思うが、同じレイアウトで見られるのでこの方法でいいだろう。

後回しにしていたグローバルメニュー設置･･･

基本コピペでOKじゃなきゃイヤ(笑)な私にとって、これは少々ハードルが高い気がして、最後まで後回しにしていた。階層を設けるとなると難しそうだが、階層なしのシンプルなものならばコピペでOKなものの紹介がいくつかあるので、これもminimal greenさんのサイトをもとにやってみた。

blog.minimal-green.com

とりあえず、横幅イッパイにバーで出てきた時は感動した(笑)最初は端にカテゴリーの文字がが寄っているので、これを画面均等割するのと、色を変えるのに少々手間取った。

作業としては

まず、デザイン画面の「タイトル下」の所に

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='url'>TOP</a></li>
<li><a href='url'>カテゴリ１</a></li>
<li><a href='url'>カテゴリ２</a></li>
<li><a href='url'>カテゴリ３</a></li>
<li><a href='url'>カテゴリ４</a></li>
</div>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
     $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
</script>

をコピペ。

次に、CSSに

/*グローバルメニュー設置*/
#menu {
 position: relative;
 width: 100%;
 padding-left: 0px;
 height: 40px;
 background: #343838;
/*グローバルメニュー背景色*/}

.menu-inner{
 width: 968px;
 margin: 0 auto;
 height: 40px;
}

#menu li {
 list-style-type: none;
 float: left;
 height: 40px;
 text-align: center;
 width: 20%;
}
/*←メニューを増やしたければ%を直す100÷メニュー数を入力*/
#menu li a {

 display: block;
 color: #ffffff;
/*グローバルメニュー文字色*/
 
font-size: 80%;
 font-weight: bold;
 line-height: 40px;
}
#menu li:hover a {
 color: #00DFFC;
 background: #ffffff;
 transition: all .5s;
}

.menu-toggle{
 display: none;
} 


/*パソコン１カラム*/

@media screen and (max-width:968px){
    .menu-inner{
        width: 768px;
    }
}

/*タブレット*/
@media screen and (max-width:768px){
 #top-editarea{
  height: initial;
  background: #343838;
/*MENU背景色*/
 
 text-align: right;
/*MENUの文字の位置*/
  width: 100%;
 }
 .menu-toggle{
  color: #ffffff;
/*MENUの文字色*/
  display: inline-block;
  padding: 5px;
  margin: 3px;
 }
 #menu {
  width: 100%;
  display: none;
  height: initial;
  padding: 0;
  margin: 0;
  
 }
 .menu-inner{
  width: 100%;
  height: initial;
  position: static;
  margin: 0;
 }
 #menu li{
  float: none;
  height: 35px;
  width: 100%;
  list-style-type: none;
  background: #00DFFC;/*リスト文字の背景色*/
  margin: 0 auto;
  text-align: left;
/*リストの文字の位置*/
 }
 #menu li a {
  height: initial;
  color: #343838;/*リスト文字色*/
  display: block;
 }
 #menu li:hover a{
  color: initial;
  background: initial;
 }
}

をコピペ。

ちゃんと、レスポンシブルに対応になっている。すばらしい。

あとはカテゴリーにリンクを貼ればOK 今は5項目にしてあるが、全部項目使うかなぁ(笑)

プロフィール画像をもう少し大きくできないかなぁ

デフォルトのプロフィール画面が地味なのが気になっており、他の方のサイトでプロフィール画像が大きくなっているのを見て、「ここも変えられるのでは?」と思って調べてみた。これは結構簡単だった。

プロフィール画像を準備する。大きさは、サイドバーの幅からはみ出ないサイズとする。正方形でも長方形でもどんな形でもOK。
画像をアップロードする。photolifeから画像のURLを取得。
管理画面>デザイン>サイドバーのプロフィールの項目を開いて「ブログの説明」の所にアップロードした画像のURLを貼り付けると、アップロードした画像で表示される。その下に文章も入力できる。
※注「プロフィール画像　表示する」のチェックは外す。

まとめ

と、ここまでカスタマイズを大体やってきた順番にあげてきた。
はじめの方は、ホントにピンポイントでググればすぐにコピペでできる簡単なものであったが、第2章(?)辺りからは、コピペだけでうまく行かない場合、少しHTML・CSSの知識がないと、どこに原因があって、どこを直せばいいのかが分からないので対処のしようがない、という事になってくる。せめて「きっとここが怪しいんだけど･･･」くらいの見当がつけられないと、ダメかな。

超久しぶりだったので、ほとんど忘れていたなぁ。

それでも、わかりやすく解説があるサイトもたくさんあり、皆さん親切&プレゼン(上手)ですね。まさに、助け合いの精神?

最近は、スマホからの見え方優先な流れもあり、レスポンシブル対応、メディアクエリなんて、10年以上前のブログではあったかなぁ。

fc2の時は、ほぼフルカスタマイズ可能なヒヨコくん増殖中で大分いじる事ができたので、はてなブログのカスタマイズは、結構難しいように思えるなぁ。

hiyokokun.blog2.fc2.com

カスタマイズもやり過ぎると修正が困難になるので、とりあえずはここまで。更新される日は、あるのか･･･??

おしまい。

柴犬おこめの裏日記

急きょ我が家にやってきた柴犬のちかちゃん(おこめ)ただいまトライアル中!