デザイン確認用2

はてなブログテーマ"Haruni"のデモページです。今後更新はないので読者登録は必要ありません。

しごとフォト【人の魅力に特化した企業PR】
しごとフォト取材記事一覧
医療・介護の分野に<写真>という形のケアを one and only フォト【最愛】
はり灸整体 ホワイトアイリス 予約制 050-1113-1117

背景色変更でフラットデザイン風の単色カラーに

はてなブログの管理画面>デザイン>カスタマイズ>背景色からグラデーション部分の簡単に背景色は変更出来ます。但しはてなブログで用意されているのは単色カラーです。
f:id:minimalgreen:20180315190748p:plain

またここで変更出来るのはbodyの背景色だけです。カテゴリーボタンや文字色は変わらないので、以下のCSSで色を調整して統一して下さい。
青系以外の場合は#8fd3f4をお好きなカラーコードへ変えてみてください。

/* 水色着せ替えbody以外 */
.entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: #8fd3f4;
    /*  諸々背景色水色 */
}

@media only screen and (max-width:991px) {
    nav#slide-menu, div.menu-trigger {
        background: #8fd3f4;
        /*  スマートフォントグルメニュー */
    }
}

/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #8fd3f4;
}

.leave-comment-title {
    border: 1px solid #8fd3f4;
}

/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #8fd3f4;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-top: 1px solid #8fd3f4;
    border-bottom: 1px solid #8fd3f4;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-left: 4px solid #8fd3f4;
}

ヘッダータイトル画像の調整 コンテンツ幅を揃える・スマートフォン最適化

タイトル画像を設置したときの表示を調整出来ます。

スマートフォンで見切れないようにしたい。

1141px以下での表示でタイトル画像の縦横比を維持します。 padding-top: 20%;/* タイトル画像の高さ÷横幅% */のところは各自のタイトル画像のサイズに合わせて変更して下さい。

/* ヘッダーの縦横比維持  */
@media screen and (max-width: 1141px) {
.header-image-only #blog-title #blog-title-inner {
  position: relative;
  background-size: cover;
  height: auto;
  width: 100%;
  max-width: 1000px;/* タイトル画像の横幅 */
  margin: 0 auto;
}

.header-image-only #blog-title #blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 20%;/* タイトル画像の高さ÷横幅% */
}

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

スマートフォンのヘッダーの高さ調整はこちらの記事もご参照下さい。
test-test-test.hatenadiary.jp

PC版のタイトル画像をコンテンツ幅に揃えたい

f:id:minimalgreen:20180313113225p:plain
揃っていない
PC版ではコンテンツ幅1142pxなのですが、はてなブログのタイトル画像は標準では高さ200px、横幅1000pxです。コンテンツ幅とタイトル画像を揃えるには以下のCSSをデザインCSSぬ追記して下さい。
1142px以上のブラウザではタイトル画像を1142pxに引き伸ばします。ただ少し画像が荒くなりトリミングが変わります。

f:id:minimalgreen:20180313113301p:plain
揃った

タイトル画像のみ

@media screen and (min-width: 1142px) {
.header-image-only #blog-title #blog-title-inner {
    background-repeat: no-repeat;
    position: relative;
    height: 200px;/* 高さ */
    width: 1142px;/*  横幅 */
    margin: 0 auto;
    background-size: cover;
}
}

タイトル画像+タイトルテキスト

@media screen and (min-width: 1142px) {
.header-image-enable #blog-title #blog-title-inner {
    background-repeat: no-repeat;
    position: relative;
    height: 200px;/* 高さ */
    width: 1142px;/*  横幅 */
    margin: 0 auto;
    background-size: cover;
}
}

PC版でぴったり1142pxできれいに表示したい

f:id:minimalgreen:20180313121018p:plain
タイトル画像アップロード機能を使わない
タイトル画像機能を使うとトリミングが変わってしまうのでタイトル画像をPC版でぴったり1142pxできれいに表示したいときは、以下のようにして下さい。
①はてなブログのタイトル画像アップロードから画像を外す(アップロード機能は使わない)
②幅1142pxでタイトル画像を作る
③タイトル画像をはてなフォトライフにアップロード 画像URLを『オリジナルサイズ』で取得する
④デザインCSSに以下のCSSを追加する

/* タイトル画像オリジナル */
#blog-title #title a {
    /* タイトルテキスト文字を非表示 */
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 200px;/* ヘッダーの高さ */
    top: 0;
    left: 0;
}
#blog-title #blog-description {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
#blog-title-inner {
    background-size: cover;/* 場合によってcontain */
    background-image: url("タイトル画像URL");
    background-position: center;
    padding: 0;
    background-repeat: no-repeat;
    width:100%;
    max-width:1142px;
    margin:0 auto;
    position: relative;
    height: auto;
}

#blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 17.5%;/* 画像の高さ÷横幅 */
}

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

縦横比を維持したままタブレット・スマートフォンでも表示出来ます。 padding-top: 17.5%;/* 画像の高さ÷横幅 */は高さを200px以外にしたときに変更して下さい。
参考:
www.gamehuntblog.com

この方法では高さはぴったり200pxではありません。高さもぴったりにしたいときは私のブログ記事を参考にして、media queryで画面サイズごとにタイトル画像を切り替える調整をしてみてください。
blog.minimal-green.com

タイトル画像上下の余白を消したい

タイトル画像上下の余白を消したいときは以下のようにCSSを追加して下さい。

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

他にもスマートフォン用の画像を別途作って表示したいなど細かい調整も出来ます。以下の記事を参考にしてみてください。
blog.minimal-green.com

タイトル画像と背景画像を重ねる

以上色々と方法を書きましたが、タイトル画像は背景透過で見切れても問題ないデザインのものが良いと思います。
はてなブログのタイトル画像アップロード機能を使い、背景画像とタイトル画像を重ねて表示するとオリジナリティが出せておすすめです。スマートフォンでの調整は上記を参考にして下さい。
あわわこさんのブログがかわいくカスタマイズされています。
f:id:minimalgreen:20180313122800p:plain
http://yurui.hatenablog.jp/yurui.hatenablog.jp

スマートフォンのタイトル画像の高さを調整する 見切れ対策など

タイトル画像を設置したとき、スマートフォンで高さを小さくしたい場合は以下のコードのように調整して下さい。(デザインCSSに追加)
f:id:minimalgreen:20180312203036p:plain

テキスト無しでタイトル画像のみ設置したとき

@media (max-width: 480px){
.header-image-only #blog-title #blog-title-inner {
    height: 100px;/*  高さ調整 */
    background-size: cover;
}
}


タイトルテキストとタイトル画像を設置したとき

@media (max-width: 480px){
.header-image-enable #blog-title #blog-title-inner {
    height: 100px;/*  高さ調整 */
    background-size: cover;
}
}

スマートフォンで縦横比を維持する

縦横比を保ったままスマートフォンで表示されたい場合は以下のゴトーさんの記事をご参照下さい。
www.gamehuntblog.com

背景画像を設定する方法 タイトル画像を重ねて表示出来ます。

はてなブログ管理画面>デザイン>背景画像で背景画像を設定した場合はグラデーションの代わりに背景画像が表示されます。(ヘッダーとフッター部分)

背景画像アップロード機能

f:id:minimalgreen:20180312031410p:plain
↑でお好きな写真をアップロード、表示を調整出来ます。

こんな感じ

f:id:minimalgreen:20180312031640p:plain
↑の例ではタイトル画像アップロード機能でロゴ画像も設定しています。(タイトルテキスト無し画像のみ)

タイトルをテキスト表示する場合はタイトル画像ではなく背景画像で設定してみてください。

はてなブログのデフォルト写真素材を使ってみました。
f:id:minimalgreen:20180312033000p:plain
test-sample.hateblo.jp

着せ替え用CSS 水色・紫・黒系グラデーションサンプルコード【訂正あり】

f:id:minimalgreen:20180312020235p:plain

ピンクグラデーションを変えたい場合は以下のサンプルコードを参考にアレンジしてみてください。

グラデーションジェネレーターやサンプルグラデーションを教えてくれるサイトもあるのでご活用下さい。
webgradients.com
uigradients.com
jxnblk.com

グラデーションCSSの基本はサルワカさんの記事をどうぞ。
saruwakakun.com

デザインCSSに貼るコード 水色グラデーション

f:id:minimalgreen:20180312024345p:plain

/* 水色グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background: -webkit-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #8fd3f4;
}

.leave-comment-title {
    border: 1px solid #8fd3f4;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #8fd3f4;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-top: 1px solid #8fd3f4;
    border-bottom: 1px solid #8fd3f4;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-left: 4px solid #8fd3f4;
}

紫グラデーションCSS

f:id:minimalgreen:20180312025306p:plain

/* 紫グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
    background: -webkit-linear-gradient(left, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
    background: linear-gradient(to right, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(-315deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
        background: -webkit-linear-gradient(-315deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
        background: linear-gradient(-225deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #D52398;
}

.leave-comment-title {
    border: 1px solid #D52398;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #D52398;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-top: 1px solid #D52398;
    border-bottom: 1px solid #D52398;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-left: 4px solid #D52398;
}

黒・グレー系グラデーション

f:id:minimalgreen:20180312122151p:plain

/* グラデーション着せ替え用グレー */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #5d4157 0%, #a8caba 100%);
    background: -webkit-linear-gradient(left,  #5d4157 0%, #a8caba 100%);
    background: linear-gradient(to right, #5d4157 0%, #a8caba 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #5d4157 0%, #a8caba 100%);
        background: -webkit-linear-gradient(30deg, #5d4157 0%, #a8caba 100%);
        background: linear-gradient(120deg, #5d4157 0%, #a8caba 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #5d4157;
}

.leave-comment-title {
    border: 1px solid #5d4157;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #5d4157;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #5d4157;
    border-top: 1px solid #5d4157;
    border-bottom: 1px solid #5d4157;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #5d4157;
    border-left: 4px solid #5d4157;
}

コンテンツ部分のグレー背景を変更する

ヘッダー以下のコンテンツ部分のグレー背景の色を変えたい場合は

#content {
    background-color: #fcf5f8;
}

このように記述して背景色を変更して下さい。#fcf5f8のところにお好きな色のカラーコードを入れてデザインCSSに追記すればOKです。

www.colordic.org

サイドバーのフォローボタン

このデモブログと同じサイドバーのフォローボタンを設置するには、以下のコードをサイドバーのHTMLモジュールに貼り付けて下さい。ブログドメインはhttp:抜きです。
適宜変更してお使い下さい。

注意:はてなブログのフォローボタン(読者登録)4箇所変更するところがあります。ユーザー名ははてなIDを、ブログドメインにはブログURLからhttp:を拔いたものを入れて下さい。例えばこのブログならブログドメインはtest-test-test.hatenadiary.jpとなります。feedlyにはfeed/の後にhttp:またはhttps:つきのブログURLを入れて下さい。

<div class="sidebar-follow-buttons"><a class="hatena" href="http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe" onclick="window.open('http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe', '', 'width=500,height=400'); return false;">
    <i class="blogicon-hatenablog lg"></i>
    <span class="inner-text">Hatena</span>
    </a>
    <a class="twitter" href="https://twitter.com/ユーザー名" target="_blank">
    <i class="blogicon-twitter lg"></i>
    <span class="inner-text">Twitter</span>
    </a>
    <a class="feedly" href="https://feedly.com/i/subscription/feed/http://ブログドメイン/feed" target="_blank">
    <i class="blogicon-rss lg"></i>
    <span class="inner-text">Feedly</span>
</a></div>

シンプルなシェアボタン

このブログと同じシェアボタンを設置するには、以下のコードを管理画面>デザイン>カスタマイズ>記事>記事下に追加して下さい。
またFontAwesomeを導入してない方は導入して下さい。

FontAwesomeの呼び出し

headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

記事上または記事下に貼るコード

<div class="sns-share">
<ul class="sns-area">
  <li>
    <a
      href="http://b.hatena.ne.jp/entry/{Permalink}"
      class="hatena-bookmark-button sns-bookmark sns-link"
      data-hatena-bookmark-title="{Title}"
      data-hatena-bookmark-layout="simple"
      title="このエントリーをはてなブックマークに追加">
      <i class="blogicon-bookmark lg"></i><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
  </li>
  <li>
    <a
      class="sns-facebook sns-link"
      href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
      onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
      <i class="fa fa-facebook-official" ></i><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
  </li>
  <li>
    <a
      class="sns-twitter sns-link"
      href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank">
      <i class="fa fa-twitter"></i></a>
  </li>
  <li>
    <a
      class="sns-googleplus sns-link"
      href="https://plus.google.com/share?url={URLEncodedPermalink}"
      onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
      <i class="fa fa-google-plus"></i></a>
  </li>
 <li>
    <a
      class="sns-pocket sns-link"
      href="http://getpocket.com/edit?url={URLEncodedPermalink}"
      onclick=""
      >
      <i class="blogicon-chevron-down"></i></a>
  </li>
</ul>
</div>
<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
 entryUrl = 'https://b.hatena.ne.jp/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
//Facebookのシェア数を取得
function getFacebookCount(url, selector) {
  $.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    }
  }).done(function(res){
     if ( res.share && res.share.share_count ) {
      $( selector ).text( res.share.share_count );
    } else {
      $( selector ).text( 0 );
    }
  }).fail(function(){
    $(selector).text('0');
  });
}
$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
  getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

フッター・Copyright表示(はてなブログPro向け)

f:id:minimalgreen:20180311210442j:plain
はてなブログ標準のフッターを消しているはてなブログPro向けユーザー向けのカスタマイズです。以下はCopyright表示をするためのコードです。このデモブログと同じデザインです。ユーザー名、ブログドメイン(http:抜き)、ブログURL(http:付き)、フォローボタン、リンク先、©には適宜変更して下さい。

無料ユーザーの方は余白を調整すれば使えると思います。

注意:はてなブログのフォローボタン(読者登録)4箇所変更するところがあります。ユーザー名ははてなIDを、ブログドメインにはブログURLからhttp:を拔いたものを入れて下さい。例えばこのブログならブログドメインはtest-test-test.hatenadiary.jpとなります。feedlyにはfeed/の後にhttp:またはhtpps:つきのブログURLを入れて下さい。

<div id="copyright">
<p><a href="お問い合わせ先URL">ユーザー名のプロフィールへ</a> | <a href="お問い合わせ先URL">お問い合わせ</a></p>
<div class="footer-follow-buttons">
    <a class="instagram white" href="https://www.instagram.com/ユーザー名" target="_blank">
    <i class="blogicon-instagram lg"></i>
    <span class="inner-text">Instagram</span>
    </a>
 <a class="twitter white" href="https://twitter.com/ユーザー名" target="_blank">
    <i class="blogicon-twitter lg"></i>
    <span class="inner-text">Twitter</span>
    </a>
    <a class="hatena white" href="http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe" onclick="window.open('http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe', '', 'width=500,height=400'); return false;">
    <i class="blogicon-hatenablog lg"></i>
    <span class="inner-text">Hatena</span>
    </a>
    <a class="feedly white" href="https://feedly.com/i/subscription/feed/http:ブログドメイン/feed" target="_blank">
    <i class="blogicon-rss lg"></i>
    <span class="inner-text">Feedly</span>
</a></div>
<p>©ユーザー名</p></div>

グローバルメニューの設置方法 訂正あり

管理画面>デザイン>カスタマイズ>ヘッダ>タイトル下に以下のコードを追加してください。「URLを入力」のところは
各自のURLに書き換えてください。FontAwesomeを導入していない方は導入して下さい。
最後の閉じるのリストはPC版は非表示ですが、スマートフォンで必要なので最後はそのままにして下さい。

※訂正があります:2018/3/11にグラデーションメニューを導入した方は以下のコードに張り替えて下さい。

FontAwesomeの呼び出し

headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

タイトル下に貼るHTML

<style>
/* ヘッダーの余白調整 */
#blog-title {
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0 1.5rem;
}
@media (max-width: 767px) {
#blog-title {
    padding: 1rem 0;
}
}
</style>
<div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div>
<!-- Navigation -->
<nav id="slide-menu">
	<ul>
		<li><a href="URLを入力">Top</a></li>
		<li><a href="URLを入力">About</a></li>
		<li><a href="URLを入力">Profile</a></li>
		<li><a href="URLを入力">Category</a></li>
		<li><a href="URLを入力">Link</a></li>
		<li><div class="menu-close"><i class="fa fa-window-close fa-fw" aria-hidden="true"></i>閉じる</div></li>
	</ul>
</nav>
<script>
 (function() {
	var $body = document.body
	, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0]
  , $menu_close = $body.getElementsByClassName('menu-close')[0];

	if ( typeof $menu_trigger !== 'undefined' ) {
		$menu_trigger.addEventListener('click', function() {
			$body.classList.toggle('menu-active');
		});
	}

  if ( typeof $menu_close !== 'undefined' ) {
		$menu_close.addEventListener('click', function() {
			$body.classList.remove('menu-active');
		});
	}
})();
</script>

参考リンク:
iOS style sliding menu
JSは↑を参考にこのテーマ用にアレンジしています。