コンゴトモヨロシク♪

ややこしくて面倒くさい日々の記録

はてなブログのテーマをカスタマイズ

ブログテーマ「Material」を利用させていただいたことで容易にレスポンシブデザインを実現できましたが、使い勝手とデザインレイアウトを改善したい箇所があり、それらを修正しました。

デザインレイアウトで気になる点

  • ブログタイトルの文字が大きく、iPhone5Sなどの解像度が低めの端末でタイトル名が折り返す
  • ブログタイトルが右に全角1文字分ずれている

デザインレイアウトの修正手順

  1. タイトルバーから「デザイン」→「カスタマイズ」→「デザインCSS」をクリック
  2. 以下の行をコピペして「変更を保存する」をクリック(フォント縮小、左端空白を0に)
.header-image-enable #title, .header-image-enable #blog-description{
  padding-left:0px;
}
#title{
  padding-left:0px;
  margin:0;
  font-size:2.2em;
  font-weight:200;
  line-height:1.4em
}
#blog-description{
  padding-left:0px
}

使い勝手で気になる点

  • ページ先頭にジャンプするWEBパーツが欲しい
  • 文中のリンク文字列をクリックすると新しいページでなく同じページに開く

使い勝手の修正手順

  1. タイトルバーから「デザイン」→「カスタマイズ」→「フッタ」をクリック
  2. 以下の行をコピペして「変更を保存する」をクリック(「▲TOPへ」を追加)
<a href="#top" id="backtop" style="display: block;" target="_self">▲TOPへ</a>
  1. タイトルバーから「デザイン」→「カスタマイズ」→「デザインCSS」をクリック
  2. 以下の行をコピペして「変更を保存する」をクリック(「▲TOPへ」のCSS
#backtop{
  position:fixed;
  right:0;
  bottom:0;
  padding:10px;
  -webkit-border-radius:7px 0 0 0;
  border-radius:7px 0 0 0;
  background:#fff;
  opacity:0.7;
}
  1. タイトルバーから「設定」→「詳細設定」をクリック
  2. 検索エンジン最適化」の「headに要素を追加」に以下の行をコピペして「変更する」をクリック
<base target="hatenanew">

開いた1つの別ウィンドウにリンク先を開きます。リンク個々で別ウィンドウを開きたいときは「hatenanew」を「_blank」に変更します。

こちらのブログを参考にしました。助かりました。ありがとうございます。

残課題(対応予定無し(笑))

ページ先頭にジャンプするWEBパーツは簡単にしました。スクロールしていないときに非表示、スクロールしてページ移動したら表示する仕組みは、プログラムの量の割に見返りが小さいので省きました。