Amagasa Hatenablog Theme

Changelog

テーマの変更履歴です。詳細リンクは GitHub へのリンクです。

2017/09/04 テーマを公開
2017/09/06 サブカラーを設定、その他修正（詳細）
2017/09/06 最小フォントサイズを変更、サイドバーのフォントサイズを縮小、その他修正（詳細）
2017/09/07 スマホで見たときの文字サイズの変更と、記事内リンクへの下線の追加（詳細）
2017/09/19 IE対応のため、アイコン画像の表示とアニメーションの調整、記事タイトルの太字化詳細）

Gallery

Amagasa テーマをあなたのブログに適用すると、次のような見た目になります。（2017年9月3日時点）

Top
Entry
Archive
Search
About

Option

少ないですが、このテーマにはオプションがあるので設定方法を紹介します。

ソーシャルボタンを配置

はてなブックマーク、Twitter、Facebook の 3つに対応しています。

はてなブログのデザイン設定を開き、カスタマイズタブを開きます。

「記事」項目を開き、その中の「記事上」または「記事下」に以下の HTML を入力してください。



  
  
    
    Bookmark!
  
  
  
    
    Facebook
  
  
  
    
    Twitter

デザイン設定を保存すると、ブログの記事ページにソーシャルボタンが表示されます。

カウント付きソーシャルボタンを配置

はてなブックマーク、Twitter、Facebook の 3つに対応しています。

はてなブログのデザイン設定を開き、カスタマイズタブを開きます。

「記事」項目を開き、その中の「記事上」または「記事下」に以下の HTML を入力してください。

参考：コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜

デザイン設定を保存すると、ブログの記事ページにカウント付きソーシャルボタンが表示されます。

記事の中で画像を横幅いっぱいに表示させる

記事の中（.entry-content）で画像を表示するときに使えます。

はてなブログの記事作成ページを開きます。
画像をアップロードします。
アップロードした画像を custom-image-full クラスの付いた div 要素でくくります。たとえば以下のように。
```
  [f:id:namikuguri:20170906024738p:plain]
```
記事を保存すると、記事の中で横幅いっぱいに広がった画像が表示されます。

記事の中で画像を水平方向に中央寄せして表示させる

記事の中（.entry-content）で画像を表示するときに使えます。

はてなブログの記事作成ページを開きます。
画像をアップロードします。
アップロードした画像を custom-image-centered クラスの付いた div 要素でくくります。たとえば以下のように。
```
  [f:id:namikuguri:20170906025205p:plain]
```
記事を保存すると、記事の中で水平方向に中央寄せされた画像が表示されます。

Customize

テーマの指定に続けてスタイルを追加することで、あなたに合ったブログのデザインにカスタマイズできます。

ヘッダーに背景画像を設定

ヘッダーの背景に、幅いっぱいに広がった画像を設定したいときに有効なスタイルです。

はてなブログのデザイン設定を開き、カスタマイズタブを開きます。
「背景画像」項目を開き、その中の「画像アップロード」から画像をアップしてください。

「デザインCSS」項目を開き、以下の CSS を一番下の行に入力してください。

/*---  ヘッダーに背景画像を設定 --- */
#globalheader-container {
  background-color: #fff;
  color: #000;
}

#container {
  padding-top: 37px;
}

.browsing-with-smartphone #globalheader-container + #container {
  padding-top: 44px;
}

.globalheader-off #container {
  padding-top: 0;
}

.header-image-enable #blog-title #title a {
  text-shadow: none !important;
}

.header-image-enable #blog-title-inner {
  height: 100% !important;
  background-size: cover;
  background-position: center center !important;
}

デザイン設定を保存すると、ブログのヘッダーに背景画像が表示されます。

フォントを変更する

初期値のゴシック体から明朝体に変更したい場合などに使ってください。

はてなブログのデザイン設定を開き、カスタマイズタブを開きます。

「デザインCSS」項目を開き、以下の CSS、プロパティの値を好きなフォントに変えた上で、一番下の行に入力してください。

/* --- フォントを変更する --- */
body {
  font-family: YuMincho, 'Yu Mincho', serif;
}

code,
kbd,
pre,
samp {
  font-family: "Lucida Console", Monaco, monospace;
}

デザイン設定を保存すると、フォントが変更されます

色を変更する

カラーテーマ（初期値：青）を変更したい場合などに使ってください。

はてなブログのデザイン設定を開き、カスタマイズタブを開きます。

「デザインCSS」項目を開き、以下の CSS、プロパティの値を好きな色に変えた上で、一番下の行に入力してください。

/* --- 色を変更する --- */
/* color/theme-header-color */
#globalheader-container,
#blog-title,
.entry-footer .leave-comment-title {
  background-color: crimson;
}

/* color/theme-sub-color */
.breadcrumb-link,
.breadcrumb-link:visited,
.entry-footer .comment-box ul li .comment-user-id,
.entry-footer .comment-box ul li .comment-user-id:visited,
.pager .pager-prev a,
.pager .pager-next a,
.pager .pager-prev a:visited,
.pager .pager-next a:visited,
.hatena-module a,
.hatena-module a:visited {
  color: fireBrick;
}

.hatena-module-search-box .search-module-input:focus {
  border-color: fireBrick;
}

.pager .pager-prev:before {
  content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23b22222' fill-rule='evenodd' points='3 14.114 4.886 16 12.886 8 4.886 0 3 1.886 9.114 8' transform='matrix(-1 0 0 1 15.886 0)'/%3E%3C/svg%3E"); /* fill属性の指定、"%23" に続くカラーコードを変更してください */
}

.pager .pager-next::after {
  content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23b22222' fill-rule='evenodd' points='3 14.114 4.886 16 12.886 8 4.886 0 3 1.886 9.114 8'/%3E%3C/svg%3E"); /* fill属性の指定、"%23" に続くカラーコードを変更してください */
}

.hatena-module-search-box .search-module-input:focus + .search-module-button {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23b22222' d='M11.7489008,10.3346872 L15.9568544,14.5426409 L14.5426409,15.9568544 L10.3346872,11.7489008 C9.2597335,12.5355664 7.9341039,13 6.5,13 C2.91014913,13 0,10.0898509 0,6.5 C0,2.91014913 2.91014913,0 6.5,0 C10.0898509,0 13,2.91014913 13,6.5 C13,7.9341039 12.5355664,9.2597335 11.7489008,10.3346872 Z M6.5,11 C8.98528137,11 11,8.98528137 11,6.5 C11,4.01471863 8.98528137,2 6.5,2 C4.01471863,2 2,4.01471863 2,6.5 C2,8.98528137 4.01471863,11 6.5,11 Z'/%3E%3C/svg%3E"); /* fill属性の指定、"%23" に続くカラーコードを変更してください */
}
/* color/link-color */
a {
  color: royalBlue;
}

a:visited {
  color: rebeccaPurple;
}

/* color/selection-color */
::selection {
  background-color: rebeccaPurple;
}

::-moz-selection {
  background-color: rebeccaPurple;
}

/* color/highlight-color */
mark,
.page-archive span.highlight{
  background-color: gold;
}

/* color/black */
body,
mark,
h1 a, h1 a:hover, h1 a:visited,
h2 a, h2 a:hover, h2 a:visited,
h3 a, h3 a:hover, h3 a:visited,
h4 a, h4 a:hover, h4 a:visited,
h5 a, h5 a:hover, h5 a:visited,
h6 a, h6 a:hover, h6 a:visited,
a.keyword,
.data a,
.entry-header-menu a,
.entry-content cite a,
.entry-footer .hatena-module-related-entries .hatena-urllist .urllist-title-link,
.entry-footer .hatena-module-related-entries .urllist-title-link a,
#footer-inner,
#footer-inner a,
.hatena-module-title a,
.hatena-module-title a:visited,
.hatena-urllist .urllist-date-link a,
.hatena-module-search-box .search-module-input,
.page-archive .date a,
.page-archive span.highlight {
  color: #333;
}

.entry-header-menu a {
  border-color: #333;
}

.entry-content cite:before,
.entry-content pre {
  background-color: #333;
}

/* color/dark-gray */
.categories a,
.entry-footer .entry-footer-section,
.entry-footer .entry-footer-section a,
.entry-footer .entry-footer-section .entry-footer-time a,
.entry-footer .comment-box ul .comment-metadata,
.entry-footer .hatena-module-related-entries .hatena-urllist .urllist-category-link {
  color: dimGray;
}

.hatena-module-search-box .search-module-button {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23696969' d='M11.7489008,10.3346872 L15.9568544,14.5426409 L14.5426409,15.9568544 L10.3346872,11.7489008 C9.2597335,12.5355664 7.9341039,13 6.5,13 C2.91014913,13 0,10.0898509 0,6.5 C0,2.91014913 2.91014913,0 6.5,0 C10.0898509,0 13,2.91014913 13,6.5 C13,7.9341039 12.5355664,9.2597335 11.7489008,10.3346872 Z M6.5,11 C8.98528137,11 11,8.98528137 11,6.5 C11,4.01471863 8.98528137,2 6.5,2 C4.01471863,2 2,4.01471863 2,6.5 C2,8.98528137 4.01471863,11 6.5,11 Z'/%3E%3C/svg%3E"); /* fill属性の指定、"%23" に続くカラーコードを変更してください */
}

デザイン設定を保存すると、色が変更されます

ヘッダータイトルを SVG ロゴに置き換え、背景を消して中央に配置

HTML テキストの代わりに SVG 画像を載せたい場合などに使ってください。

はてなブログのデザイン設定を開き、カスタマイズタブを開きます。
「ヘッダ」項目を開き、その中の「タイトル下」に以下の HTML を入力してください。SVG 要素の部分はコードの中にあるコメントを一度見ていただいた上で、好きなものに置き換えてください。
```
  
    
      
      
      
      
    
  
```

「デザインCSS」項目を開き、以下の CSS、プロパティの値を好きなフォントに変えた上で、一番下の行に入力してください。.custom-header-logo で指定しているサイズはや色は、利用する SVG ロゴに合わせて変更してください。

/* --- ヘッダータイトルを SVG ロゴに置き換え、背景を消して中央に配置 --- */
#blog-title {
  display: none;
}

.custom-header {
  /* 背景に色や画像を指定するときはここで指定 */
  margin-top: calc(3rem + 44px);
  margin-bottom: 3rem;
}

@media screen and (min-width: 60rem) {
  .custom-header {
    margin-top: calc(3rem + 37px);
  }
}

.custom-header-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

.custom-header-logo {
  display: block;
  margin: auto;
  width: 16rem;
  height: auto; /* ロゴの横幅に対する比率を掛け合わせる */
  fill: blue;
}

デザイン設定を保存すると、ヘッダータイトルに SVG ロゴが水平方向に中央配置された状態で表示されます

Example

~~namikuguri log は Amagasa テーマを適用しているので、ぜひ一度ご覧ください。（2017年9月3日時点）~~