Hugoとは

Hugoはウェブサイト(とくにブログ)を構築するためのPC用のソフトで、実体はHugo.exeという実行ファイルです。 たった、これだけなのです。

HugoとはCatetory/Topic/Tagなどといったタクソノミー(分類整理のキーワード)ごとに記事を検索した結果まで含めて、記事という記事、分類結果という分類結果のすべてを、PCというローカル環境においてバッチ処理を使って、「あらかじめ構築しておく」ソフトウェアです。

ですので、例えば「c:\Hugo\Benkyo\public」というディレクトリ以下にある、すべてのディレクトリ、ファイルをFTPソフトを利用して、サーバーの適切なディレクトリにアップロードするだけで、 「ブログっぽいサイトだけれども、静的なサイト(データベースとのやりとりなどをしない単なるHTMLファイル、CSSファイル等の集合体)」というものを、インターネット上に公開することができるわけです。

驚嘆するのは、Hugoがサイトを構築するスピードです。 200の記事(.mdファイル)があっても、1秒もかからないかもしれません。 つまりHugoは、鬼のように速いので、サイトの更新がラクなのです。

wpXクラウドという、最高速に近いWordPress専用のサーバーを借りています。 借りていますけれども、まったく使っておりません。捨て金です。 つまりWordPressが遅くて面倒なので、wpXクラウドも次回の更新はしません。

WordPressで作られたページは、あるTagがクリックされたら、いちいちMySQLを読みに行って、MySQLからそのTagの付けられた記事一覧を動的にその場で生成するのです。 だからWordPressはサーバーに大きな負担をかけるし、ウェブ閲覧者の操作感として「とても重たい」わけです。

またWordPressの記事を更新するためには、いちいちログインして、該当する記事をサーバー上(WordPressのコントロールパネル)で探し当てる必要があります。 この「WordPressのコントロールパネル」が、重たくてトロいわけですよ、毎回・毎回。 wpXクラウドという高速なサーバーでも、「WordPressのコントロールパネル」はクソ遅い。 Hugoのサクサク、キビキビした動作と比較すると、WordPressの遅さは、地獄の苦しみなのです。

他方、Hugoの場合、Hugoの記事を置いてあるディレクトリ(c:\Hugo\Benkyo\contents)の.mdファイルについて、 例えば、MIFESでGREPをかけてやれば、ある表現を含む.mdファイルがズラリと検索されますので、 それらを一括して文字置換するなどして、そのままサイトをビルドし、 ビルドしたもの(c:\Hugo\Benkyo\publicにあるファイル)を丸ごと、 サーバーの適切なディレクトリに、FTPソフト(FileZillaなど)を用いてアップロードするだけで、 更新が完了します。

この手軽さを味わうと、WordPressには戻れません。

大規模な動的サイトを構築するのなら、WordPressではなく、Drupalが適切です。 個人のブログならHugoが適切です。 WordPressは、中途半端で、よい点があまりないのですよ。

個人のブログは、同時に何人もの人が更新し続けている「オンライン的なウェブサイト」ではありません。 それなのに、PHPとMySQLを使って、その都度、記事を生成する(動的処理をする)のはアホらしいですね。

そうなのです。個人ブログには、Hugoなどの静的サイトジェネレータがふさわしいわけです。 更新者が1人だけである場合、MySQLをPHPで制御するやり方は、労多くして功少なし、ですね。 つまりブログをするだけなのに、WordPressを使うのは、アホらしいのです。

静的サイトジェネレータで構築したサイトは、HTML、CSS、JavaScriptだけで構成された、軽いサイトになります。 サーバーはブラウザに対してHTML、CSS、JavaScriptを送信するだけで、サーバーに対する負担は、ほとんどかからない。 これがサクサクしたウェブサイトの必須条件なのです。 静的ウェブサイトは、あまり高性能ではないサーバーでも、十分、快適にサイトが閲覧できます。

WordPressの場合、脆弱性が何ちゃらかんちゃらで、WordPress本体、あるいは、テーマ、あるいは、プラグインの更新がしょっちゅうあり、ハッキシいってうぜえ。 WordPressは、高性能なサーバーも必要になる。

さくらインターネットなどは、WordPressがサーバーに負担をかけるので、 WordPressの動作(PHPやMySQLの動作)を意図的に遅くしているふしがあるようです。 そうやって、WordPressユーザをXSERVERやwpXクラウドなどに追い出しているわけです。 さくらインターネットは、静的サイトのスピードは、それほど遅くないようです。

結局、WordPressというのは、サーバーにとって、迷惑なソフトウェアなのです。 ブログをするだけなのに、いちいちCPUに負荷をかけるんじゃあねえよ、このタコ、ということでございます。

しかもWordPressの場合、IDとパスワードがバレたら、サイトがつぶされます。 ブルータルアタックといって、総当たり方式でログインを無数にトライするやり方があり、それに対して、以前のWordPressは対策をとっていませんでした。 こういうのを直して「改善された」とかいっている会社が、WordPressなのです。

Hugoなどで生成した静的サイトには、脆弱性というものが、ほぼ無きに等しい。 そして、Hugoがアップデートされる頻度は、それほど高くなく、しかもアップデートは任意です。

アップデートといっても、Hugoは単なる.exeファイルであり、ローカル(PC)だけで使うソフトなので、 アップデートしたくなければ、しなくても大丈夫なのです。

下記サイトから、自分のOSに合ったHugoをダウンロードして、Hugo.exeという名前にリネームするだけです。

https://github.com/spf13/hugo/releases

Hugoを置く場所は下記のパスで表現されます。

c:\Hugo\bin\Hugo.exe

Windowsの場合、環境変数で「c:\Hugo\bin」にパスを通しておいてください。

HugoをWindowsで使う · ゆきんこの勉強法 | 自修人

Hugo :: A fast and modern static website engine

Hugo - Introduction to Hugo

WordPressがイヤになったら、Hugoを使ったほうがいいと思います。

IcoMoonでフォントの前後に空白をあける

「C:\Hugo\Benkyo\static\icomoon」というpathの中に「style.css」があります。 「style.css」の内容は下記です。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6a7ivb');
  src:  url('fonts/icomoon.eot?6a7ivb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6a7ivb') format('truetype'),
    url('fonts/icomoon.woff?6a7ivb') format('woff'),
    url('fonts/icomoon.svg?6a7ivb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Font Before After Space */
padding: 0 3px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-amazon:before {
  content: "\ea87";
}
.icon-google3:before {
  content: "\ea8a";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube2:before {
  content: "\ea9e";
}

下記の部分で、IcoMoonのフォントに、前後の空白を与えています。

  /* Font Before After Space */
padding: 0 3px;

Hugoでlastmod(最終更新時刻)をキーとながらソートして表示する

「C:\Hugo\Benkyo\layouts_default」というpathの中に「li.html」があります。 「li.html」の内容は下記です。

<li><time>{{ with .Site.Params.dateFormat }}{{ $.Date.Format . }}{{ else }}{{ .Date.Format "02 Jan 2006, 15:04" }}{{ end }}</time> - <a href="{{ .Permalink }}">{{ .Title }}</a></li>

「li.html」を改変した「lili.html」(lastmod用)を作りました。 「lili.html」の内容は下記です。

<li><lastmod>{{ with .Site.Params.lastmodFormat }}{{ $.Lastmod.Format . }}{{ else }}{{ .Lastmod.Format "02 Jan 2006, 15:04" }}{{ end }}</lastmod> - <a href="{{ .Permalink }}">{{ .Title }}</a></li>

「C:\Hugo\Benkyo\layouts」というpathの中に「index.html」があります。 その中で「lastmod(最終更新時刻)をキーとながらソートして表示する」部分を以下に示します。

<h2 id="-MOD-TOTAL-">総合更新順</h2>

<ul>
{{ range .Data.Pages.ByLastmod.Reverse }}
    {{ .Render "lili" }}
{{ end }}
</ul>

「C:\Hugo\Benkyo\layouts\indexes」というpathの中に「post.html」があります。 これは左側サイドバーにある「Post」という項目をクリックしたとき、記事たちをどのように表示するかを指定するファイルです。 「post.html」の内容は下記です。

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>
<div class="content">
  {{ range .Data.Pages.GroupByDate "2006" }}
  <h2>{{ .Key }}</h2>
  <ul>
  {{ range .Pages.ByLastmod.Reverse }}
    {{ .Render "lili" }}
  {{ end }}
  </ul>
  {{ end }}
</div>

{{ partial "footer.html" . }}

下記の3行が、「lastmod(最終更新時刻)をキーとながらソートして表示する」部分です。

  {{ range .Pages.ByLastmod.Reverse }}
    {{ .Render "lili" }}
  {{ end }}

Hugo-Build.bat

Hugoで記事をビルドするバッチファイルの中身です。 ファイル名は、自分にわかりやすいように「Hugo-Build.bat」としているだけで、任意のファイル名で結構です。 「-t blackburn」は、テーマとしてblackburnを使う指定です。 「-D」は、記事の先頭で「draft = true」(「この記事は下書きです」=「はい」)を指定していても、それを上書きして「記事を公開する」という「記事公開強制命令」です。

cd C:\Hugo\Benkyo
hugo -t blackburn -D

Hugo-Prev.bat

cd C:\Hugo\Benkyo
hugo server -t blackburn -D -w

「-w」というパラメータはオートリロード機能の追加だそうです。

Hugo - Using Hugo

「hugo server」の「server」というのは、PCというローカルに、擬似的にサーバー環境を作り出して、「 http://localhost:1313/ 」をブラウザで開けば、自分がこれからビルドするサイトの姿がプレビューできる仕組みを使うためのパラメータです。 つまり「Hugo-Prev.bat」というのは、プレビューのバッチだと思ってください。 このファイル名も任意です。つまりファイル名など、何でもいいわけです。

http://localhost:1313/

archetypes

ディレクトリ archetypes の中身は、私の場合、カラッポにしています。 archetypesは使いにくいので、以下のようなひな形ファイルを作っておき、これを適宜、改変して新規記事(.mdファイル)を作成するのが、私のやり方です。

+++
date = "2017-03-04T01:05:14+09:00"
draft = true
slug = "hugo-on-windows-this-website"
categories = ["Hugo"]
topics = ["Hugo","Windows"]
tags = [""]
title = "HugoをWindowsで使う|このサイト"
+++


<div id="toc"></div>

<hr>


## Hugoのディレクトリ構造|コマンドプロンプト

Hugoの記事はMD記法で書きます。MD記法の中では、MD記法とともに、HTML、CSS、JavaScriptなどが使えます。

「slug = 」とは、WordPressでいうパーマリンクであり、「slug = “hugo-on-windows-this-website”」というスラッグを指定してサイト構築(ビルド)を実行する(コマンドプロンプトにて、hugo.exeにパラメータをつけてバッチ処理する)と、 例えば、「BASE-URL/post/hugo-on-windows-this-website/」というディレクトリが作られます。

「例えば」というのは、指定の仕方によって、「BASE-URL/post/」にも出力できるし、「BASE-URL/shoko/」にも出力できるのです。 これは記事を分野ごとに「セクション分け」をしているのです。

スラッグを指定する意味は、ファイル名とスラッグ名とが食い違っても、スラッグ名が記事のURLになってくれる(パーマリンクになってくれる)という点にあります。 つまり、ファイル名は日本語にしておいて、URL(パーマリンク)は英字にする。 そういうことができるのが、スラッグの利点なのです。

Hugoのディレクトリ構造|コマンドプロンプト

コマンドプロンプトで下記を実行すると、ディレクトリ/ファイルのTree図が出力されます。

tree c:\Hugo /f

Hugoのディレクトリ構造

Microsoft Windows [Version 6.3.9600]
(c) 2013 Microsoft Corporation. All rights reserved.

C:\Users\[USER]>tree C:\Hugo /f
フォルダー パスの一覧
ボリューム シリアル番号は 000000F6 8A1A:AACD です
C:\HUGO
├─Benkyo
│  │  config.toml
│  │  Hugo-Build.bat
│  │  Hugo-Prev.bat
│  │
│  ├─archetypes
│  ├─content
│  │  │  about.md
│  │  │
│  │  ├─post
│  │  │      anastasia-farming-methods.md
│  │  │      arithmetic-revolution.md
│  │  │      audacity-soundengine-free.md
│  │  │      audiobook.md
│  │  │      biol-gakken.md
│  │  │      biol-itou-kazuhiko.md
│  │  │      biol-kawai.md
│  │  │      biol-koukou-core-text.md
│  │  │      biol-mondaishuu.md
│  │  │      biol-obunsha.md
│  │  │      biol-oomori-tooru.md
│  │  │      biol-sundai.md
│  │  │      bune-zen.md
│  │  │      calculation-ability.md
│  │  │      cause-of-your-foolishness.md
│  │  │      ccla-koukou-kanbun.md
│  │  │      cent-center-chigaku-k.md
│  │  │      cent-center-chiri.md
│  │  │      cent-center-gendaibun.md
│  │  │      cent-center-gensha.md
│  │  │      cent-center-kambun.md
│  │  │      cent-center-kobun.md
│  │  │      cent-center-nihonshi.md
│  │  │      cent-center-rinsei.md
│  │  │      cent-center-seibutsu-k.md
│  │  │      cent-center-seibutsu.md
│  │  │      cent-center-sekaishi.md
│  │  │      cent-center.md
│  │  │      cent-kawi-archives.md
│  │  │      cent-sund-archives.md
│  │  │      cent-yoyo-archives.md
│  │  │      cent-z-kzi-archives.md
│  │  │      ch-engl-3nenkan.md
│  │  │      ch-engl.md
│  │  │      ch-goro-awase.md
│  │  │      ch-hontoni-wakaru.md
│  │  │      ch-jlan.md
│  │  │      ch-kyo-engl.md
│  │  │      ch-kyo-jlan.md
│  │  │      ch-kyo-math.md
│  │  │      ch-kyo-prac.md
│  │  │      ch-kyo-scie.md
│  │  │      ch-kyo-soci.md
│  │  │      ch-math-3nenkan.md
│  │  │      ch-math.md
│  │  │      ch-naishin.md
│  │  │      ch-scie.md
│  │  │      ch-soci.md
│  │  │      ch-yasashiku-marugoto.md
│  │  │      chem-inorganic-chemistry.md
│  │  │      chem-koukou-kagaku-old.md
│  │  │      chem-koukou-kagaku.md
│  │  │      chem-mrmorimori39.md
│  │  │      chem-organic-chemistry.md
│  │  │      chem-physical-chemistry.md
│  │  │      chem-video.md
│  │  │      chuusotsu.md
│  │  │      dictionary.md
│  │  │      djuken-ichimon-itto.md
│  │  │      drupal-yosage.md
│  │  │      engl-cent-shoumon.md
│  │  │      engl-ei-bumpou.md
│  │  │      engl-eibun-dokkai-shori.md
│  │  │      engl-eigo-choubun.md
│  │  │      engl-eiken.md
│  │  │      engl-grammar-usage-gear-up.md
│  │  │      engl-listening-comprehension.md
│  │  │      engl-pronunciation-stress.md
│  │  │      engl-roadmap.md
│  │  │      engl-total1500.md
│  │  │      english-formula-book.md
│  │  │      esci-koukou-chigaku.md
│  │  │      eshn-shortcut.md
│  │  │      forum-a.md
│  │  │      fren-gram.md
│  │  │      gakk-access-anchor.md
│  │  │      gakk-gakken-zen.md
│  │  │      gakk-goukaku-bon.md
│  │  │      gakk-hitotsu-hitotsu.md
│  │  │      gakk-nerumae-5fun.md
│  │  │      gakkoudwa-oshietekurenai.md
│  │  │      gaku-ichitaro.md
│  │  │      gram-setsuzoku.md
│  │  │      healing-sound.md
│  │  │      hugo-on-windows-this-website.md
│  │  │      hugo-on-windows.md
│  │  │      ichitaro2017.md
│  │  │      idiom-books.md
│  │  │      jcla-kobun-tango-purpose.md
│  │  │      jcla-kobun-tango.md
│  │  │      jcla-koten-bumpou.md
│  │  │      jcla-koten-kobun-dokkai.md
│  │  │      jcla-koten-kotenbungaku-taikei.md
│  │  │      jikk-excel.md
│  │  │      jikk-futsuu-koukou.md
│  │  │      jikk-reidai.md
│  │  │      jikk-ten-days.md
│  │  │      jlan-chuugaku-koukou.md
│  │  │      jlan-kanji.md
│  │  │      jlan-kokugo.md
│  │  │      juken-kenkyuusha.md
│  │  │      jukk-chuugaku.md
│  │  │      kako-akahon2016.md
│  │  │      kawi-murasaki2017.md
│  │  │      kawi-zen.md
│  │  │      kgui-chuugaku.md
│  │  │      kgui-koukou.md
│  │  │      kjuken-ichimon-itto.md
│  │  │      kjuken-obns-fifty-percent-over.md
│  │  │      kjuken-obns-fifty-percent-under.md
│  │  │      kjuken-obns-jokyuu.md
│  │  │      kjuken-review-chu1-chu2.md
│  │  │      knin-chuu-kou-engl.md
│  │  │      knin-chuu-kou-math.md
│  │  │      knin-kyokasho.md
│  │  │      knin-strategic-chuusotsu.md
│  │  │      koukou-kyokasho-guide.md
│  │  │      kumon.md
│  │  │      making-youtube-videos.md
│  │  │      math-bunyabetsu.md
│  │  │      math-by-heuristic-teaching-method.md
│  │  │      math-hirose-kazuyuki.md
│  │  │      math-kazuo-shiki-ch.md
│  │  │      math-koukou-suugaku-ia.md
│  │  │      math-koukou-suugaku-iib.md
│  │  │      math-koukou-suugaku-iii.md
│  │  │      math-koukou-suugaku-toranomaki.md
│  │  │      math-koukou-suugaku.md
│  │  │      math-kyoko-sansuu.md
│  │  │      math-math-kentei.md
│  │  │      math-mathema.md
│  │  │      math-tokyo-shuppan-zen.md
│  │  │      math-tokyo-shuppan.md
│  │  │      math-yasuda-tooru.md
│  │  │      math-zurich-keisan.md
│  │  │      memorizing-words.md
│  │  │      message-book.md
│  │  │      new-books-gogaku.md
│  │  │      new-books-shouchuu.md
│  │  │      new-books.md
│  │  │      new-chuugaku-nyuushi.md
│  │  │      nichiei-engl.md
│  │  │      nichiei-jlan.md
│  │  │      nursing-medical-school.md
│  │  │      obns-obunsha-zen.md
│  │  │      obns-tottemo-yasashii.md
│  │  │      obns-zenkoku-nyuushi.md
│  │  │      phys-koukou-butsuri-old.md
│  │  │      phys-koukou-butsuri.md
│  │  │      phys-video.md
│  │  │      positive-school-refusal.md
│  │  │      radium-spa-kitashirakawa-tennen.md
│  │  │      radium-spa-murasugi-onsen-yakushinoyu.md
│  │  │      radium-spa-sanage.md
│  │  │      radium-spa-yunoyama-onsen-kibousou.md
│  │  │      reading-english-articles.md
│  │  │      red-cellophane-sheet.md
│  │  │      rothenberger-pump.md
│  │  │      russian.md
│  │  │      sakidori.md
│  │  │      seibun-shinsha.md
│  │  │      sh-engl.md
│  │  │      sh-math-6nenkan.md
│  │  │      sh-yasashiku-marugoto.md
│  │  │      shinro-benkyouhou.md
│  │  │      shiryo-zusetsu.md
│  │  │      shoryudo.md
│  │  │      shou-chuu-kou-subjects.md
│  │  │      shuai-shuai-books.md
│  │  │      snar-snar-series.md
│  │  │      stock-for-contingency-battery.md
│  │  │      stock-for-contingency-earphone.md
│  │  │      stock-for-contingency-emergency-supplies-check-list.md
│  │  │      stock-for-contingency-flashlight.md
│  │  │      stock-for-contingency-kerosene-cooker.md
│  │  │      stock-for-contingency-radio.md
│  │  │      stock-for-contingency-radioactive-decontamination.md
│  │  │      stock-for-contingency-schlafsack.md
│  │  │      stock-for-contingency.md
│  │  │      sund-aohon2017.md
│  │  │      sund-zen.md
│  │  │      suuk-not-koukou.md
│  │  │      suuk-zen.md
│  │  │      takeuchi-kaoru.md
│  │  │      tech-dictation.md
│  │  │      tech-pomodoro.md
│  │  │      tech-renamer.md
│  │  │      technical-college.md
│  │  │      togs-tokkun-series.md
│  │  │      web-scraping.md
│  │  │      whats-new.md
│  │  │      windows-icon-cache-refresh.md
│  │  │      yamakawa-shuppansha.md
│  │  │      yoyo-koukou.md
│  │  │      z-kai-engl.md
│  │  │      z-kai-zen.md
│  │  │
│  │  └─shoko
│  │          9780521189064-0521189063.md
│  │          9784010340073-401034007X.md
│  │          9784010341070-4010341076.md
│  │          9784010341087-4010341084.md
│  │          9784010341094-4010341092.md
│  │          9784046006622-4046006625.md
│  │          9784046007612-4046007613.md
│  │          9784046007643-4046007648.md
│  │          9784046008206-4046008202.md
│  │          9784046013347-4046013346.md
│  │          9784046013545-4046013540.md
│  │          9784053036766-4053036763.md
│  │          9784053043580-4053043581.md
│  │          9784053043597-405304359X.md
│  │          9784098374014-4098374013.md
│  │          9784098374021-4098374021.md
│  │          9784098374038-409837403X.md
│  │          9784098374045-4098374048.md
│  │          9784098374052-4098374056.md
│  │          9784098374069-4098374064.md
│  │          9784098374083-4098374080.md
│  │          9784098374090-4098374099.md
│  │          9784098374106-4098374102.md
│  │          9784311055225-4311055226.md
│  │          9784342350740-4342350742.md
│  │          9784399012011-4399012013.md
│  │          9784399012028-4399012021.md
│  │          9784399013018-439901301X.md
│  │          9784399013025-4399013028.md
│  │          9784399013032-4399013036.md
│  │          9784399013049-4399013044.md
│  │          9784399013056-4399013052.md
│  │          9784399013063-4399013060.md
│  │          9784399013070-4399013079.md
│  │          9784399013087-4399013087.md
│  │          9784410342714-4410342711.md
│  │          9784576161709-4576161709.md
│  │          9784578271840-4578271846.md
│  │          9784769204572-4769204574.md
│  │          9784774184531-4774184535.md
│  │          9784777212545-4777212548.md
│  │          9784777213832-4777213838.md
│  │          9784777214921-4777214923.md
│  │          9784777214952-4777214958.md
│  │          9784777215249-4777215245.md
│  │          9784777216512-4777216519.md
│  │          9784777216529-4777216527.md
│  │          9784777216536-4777216535.md
│  │          9784777216543-4777216543.md
│  │          9784777216550-4777216551.md
│  │          9784777216567-477721656X.md
│  │          9784777216574-4777216578.md
│  │          9784777217830-4777217833.md
│  │          9784796115063-4796115064.md
│  │          9784797384574-4797384573.md
│  │          9784860643140-4860643143.md
│  │          9784864602426-4864602425.md
│  │          9784864714570-4864714576.md
│  │          9784865311303-4865311300.md
│  │          9784887421547-4887421540.md
│  │          9784887421578-4887421575.md
│  │          9784887421653-4887421656.md
│  │          9784887421677-4887421672.md
│  │          9784908003042-4908003041.md
│  │          9784908003059-490800305X.md
│  │          akahon2017-sonota.md
│  │          akahon2017kokko-tou.md
│  │          akahon2017kokko-zai.md
│  │          akahon2017shiri-chuubu.md
│  │          akahon2017shiri-hoku.md
│  │          akahon2017shiri-kanto.md
│  │          akahon2017shiri-kinki.md
│  │          akahon2017shiri-zai.md
│  │
│  ├─data
│  ├─layouts
│  │  │  404.html
│  │  │  index.html
│  │  │
│  │  ├─indexes
│  │  │      post.html
│  │  │      shoko.html
│  │  │
│  │  ├─partials
│  │  │      brand.html
│  │  │      copyright.html
│  │  │      disqus.html
│  │  │      favicon.html
│  │  │      footer.html
│  │  │      google_analytics.html
│  │  │      hatena.html
│  │  │      head.html
│  │  │      header.html
│  │  │      paginating.html
│  │  │      pagination.html
│  │  │      post_meta.html
│  │  │      prev_next_post.html
│  │  │      sidemenu.html
│  │  │      social.html
│  │  │
│  │  ├─shortcodes
│  │  │      fluid_img.html
│  │  │
│  │  ├─taxonomy
│  │  │      category.html
│  │  │      tag.html
│  │  │      topic.html
│  │  │
│  │  └─_default
│  │          li.html
│  │          rss.xml
│  │          single.html
│  │          summary.html
│  │          terms.html
│  │
│  ├─public
│  ├─static
│  │  ├─css
│  │  │      blackburn.css
│  │  │      side-menu-old-ie.css
│  │  │      side-menu.css
│  │  │
│  │  ├─icomoon
│  │  │  │  demo.html
│  │  │  │  Read Me.txt
│  │  │  │  selection.json
│  │  │  │  style.css
│  │  │  │
│  │  │  ├─demo-files
│  │  │  │      demo.css
│  │  │  │      demo.js
│  │  │  │
│  │  │  └─fonts
│  │  │          icomoon.eot
│  │  │          icomoon.svg
│  │  │          icomoon.ttf
│  │  │          icomoon.woff
│  │  │
│  │  ├─img
│  │  │      apple-touch-icon-precomposed.png
│  │  │      favicon.ico
│  │  │
│  │  └─js
│  │          jquery.toc.js
│  │          masonry.pkgd.min.js
│  │          tree.js
│  │          ui.js
│  │
│  └─themes
│      └─blackburn
│          │  LICENSE.md
│          │  README.md
│          │  theme.toml
│          │
│          ├─archetypes
│          │      default.md
│          │
│          ├─exampleSite
│          │  │  .gitignore
│          │  │  config.toml
│          │  │
│          │  ├─content
│          │  │  │  about.md
│          │  │  │  contact.md
│          │  │  │
│          │  │  └─post
│          │  │          creating-a-new-theme.md
│          │  │          goisforlovers.md
│          │  │          hugoisforlovers.md
│          │  │          migrate-from-jekyll.md
│          │  │
│          │  └─static
│          │          .gitkeep
│          │
│          ├─images
│          │      screenshot.png
│          │      tn.png
│          │
│          ├─layouts
│          │  │  404.html
│          │  │  index.html
│          │  │
│          │  ├─indexes
│          │  │      post.html
│          │  │
│          │  ├─partials
│          │  │      brand.html
│          │  │      copyright.html
│          │  │      disqus.html
│          │  │      favicon.html
│          │  │      footer.html
│          │  │      google_analytics.html
│          │  │      head.html
│          │  │      header.html
│          │  │      pagination.html
│          │  │      post_meta.html
│          │  │      prev_next_post.html
│          │  │      sidemenu.html
│          │  │      social.html
│          │  │
│          │  ├─post
│          │  │      single.html
│          │  │
│          │  ├─shortcodes
│          │  │      fluid_img.html
│          │  │
│          │  ├─taxonomy
│          │  │      tag.html
│          │  │      topic.html
│          │  │
│          │  └─_default
│          │          li.html
│          │          single.html
│          │          summary.html
│          │          terms.html
│          │
│          └─static
│              ├─css
│              │      blackburn.css
│              │      side-menu-old-ie.css
│              │      side-menu.css
│              │
│              ├─img
│              │      favicon.ico
│              │
│              └─js
│                      jquery.toc.js
│                      masonry.pkgd.min.js
│                      tree.js
│                      ui.js
│
└─bin
        hugo.exe
        LICENSE.md
        README.md


C:\Users\[USER]>

config.toml

config.tomlにおいて「hasCJKLanguage = true 」を付けておくと、Categoryなどによる記事一覧の表示において、「一定文字数以下に成形された要約記事」が、うまく生成できます。

以下のconfig.tomlをコピペして、適宜改変してHugoによるサイトを構築してみてください。

baseurl = "http://benkyosukisuki.com/"
title = "ゆきんこの勉強法 | 自修人"
languageCode = "ja"
author = "ゆきんこ"
# Shown in the side menu
copyright = "&copy; 2017. All rights reserved."
canonifyurls = true
hasCJKLanguage = true
paginate = 10
theme = "blackburn"

[indexes]
  tag = "tags"
  topic = "topics"
  category = "categories"

[params]
  # Shown in the home page
  subtitle = "unchain yourselves"
  brand = "ゆきんこ<br>の勉強法<br><small>自修人</small>"
  googleAnalytics = "UA-xxxxxxxx-1"
  disqus = "Your Disqus shortname"
  # CSS name for highlight.js
  highlightjs = "androidstudio"
  dateFormat = "2006-01-02 15:04"

[menu]
  # Shown in the side menu.
  [[menu.main]]
    name = "Home"
    pre = "<i class='fa fa-home fa-fw'></i>"
    weight =1000
    identifier = "home"
    url = "/"
  [[menu.main]]
    name = "Posts"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1015
    identifier = "post"
    url = "/post/"
  [[menu.main]]
    name = "Shokos"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1020
    identifier = "shoko"
    url = "/shoko/"
  [[menu.main]]
    name = "About"
    pre = "<i class='fa fa-user fa-fw'></i>"
    weight =1030
    identifier = "about"
    url = "/about/"
  [[menu.main]]
    name = "Contact"
    pre = "<i class='fa fa-phone fa-fw'></i>"
    weight =1045
    identifier = "contact"
    url = "/"

layouts

Hugoでサイトを構築する場合に、主としていじる部分は、このlayoutsに含まれているファイル(だけ)ぐらいです。

404.html

このファイルはカラです。 それは私の場合、XSERVERが用意した404(そのようなページはございません)のファイルを使っているからです。

index.html

ディレクトリlayoutsの直下にあるindex.htmlは、サイトのトップページ(ホームページ、ランディングページ)のファイルです。

{{ partial "header.html" . }}

<div class="header">
  <h1>{{ .Title }}</h1>
<!--  <h2>{{ .Site.Params.subtitle }}</h2> -->
</div>




<div class="content">

{{ partial "hatena.html" . }}




<!-- ●●● -->
<div id="srchBox">
<style type="text/css">
#srchBox
{
width:298px;
_width:296px;
margin-bottom:10px;
background-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-color:#EEEEEE;
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:10px 10px 0 10px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:188px;
margin-right:6px;
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:80px;
}
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 0;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}

</style>
<form action="http://custom.search.yahoo.co.jp/search" method="get" id="srch" target="yjserp">
<p id="srchForm">
<input type="text" name="p" id="srchInput"><input type="submit" value="検索" id="srchBtn">
<input type="hidden" id="fr" name="fr" value="cse">
<input type="hidden" id="ei" name="ei" value="UTF-8">
<input type="hidden" id="csid" name="csid" value="qFK7LEt9FJxWf_I.91FrcO9TTzR5Gk4bm5.pUuYn05aVagc9fCXrXra4RkxbxghwJx3M.s5rVQ--">
</p>
<input type="hidden" name="vs" value="benkyosukisuki.com" id="yjInsite">
</form>
<p id="srchLogo"><a href="http://www.yahoo.co.jp"><img src="http://i.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type1_ffffff.gif" width="124" height="20" alt="powered by Yahoo! JAPAN"></a></p>
<img src="http://custom.search.yahoo.co.jp/images/window/qFK7LEt9FJxWf_I.91FrcO9TTzR5Gk4bm5.pUuYn05aVagc9fCXrXra4RkxbxghwJx3M.s5rVQ--.gif">
</div>
<!-- /#srchBox -->
<!-- ●●● -->




<p>
<div id="toc"></div>

<hr>
</p>





<h2 id="-TIME-">全記事|タイム順</h2>

<ul>
{{ range .Data.Pages }}
    {{ .Render "li" }}
{{ end }}
</ul>




<h2 id="-NAME-">Posts|なまえ順</h2>

<ul>
{{ range where .Data.Pages.ByTitle "Section" "post" }}
    {{ .Render "li" }}
{{ end }}
</ul>


<h2 id="-SHOKONAME-">Shokos|なまえ順</h2>

<ul>
{{ range where .Data.Pages.ByTitle "Section" "shoko" }}
    {{ .Render "li" }}
{{ end }}
</ul>




<h2 id="-000-"><i class="fa fa-suitcase fa-fw"></i>Categories</h2>

<ul class="categories">
    {{ range $name, $value := $.Site.Taxonomies.categories }}
        <a class="button-1" href="{{ $.Site.BaseURL }}/categories/{{ $name }}/">
        <div><span class="badge">{{ .Count }}</span> {{ $name }}</div>
        </a>
    {{ end }}
</ul>




<h2 id="-111-"><i class="fa fa-folder fa-fw"></i>Topics</h2>

<ul class="tags">
    {{ range $name, $value := $.Site.Taxonomies.topics }}
        <a class="button-1" href="{{ $.Site.BaseURL }}/topics/{{ $name }}/">
        <div><span class="badge">{{ .Count }}</span> {{ $name }}</div>
        </a>
    {{ end }}
</ul>




<h2 id="-222-"><i class="fa fa-tags fa-fw"></i>Tags</h2>

<ul class="tags">
    {{ range $name, $value := $.Site.Taxonomies.tags }}
        <a class="button-1" href="{{ $.Site.BaseURL }}/tags/{{ $name }}/">
        <div><span class="badge">{{ .Count }}</span> {{ $name }}</div>
        </a>
    {{ end }}
</ul>




<h2>書籍</h2>

    <p>

<a class="button-1" href="http://www.hon-michi.net/isbn.cgi" rel="nofollow" target="_blank">ISBN変換</a>
<a class="button-1" href="javascript:(function(){javascript:( function() { var title = document.getElementById(&quot;productTitle&quot;); var url = &quot;http://book.tsuhankensaku.com/hon/index.php?t=booksearch&amp;q=&quot; + title.innerText; document.location=url; })();})();">Amazonからの書籍横断(bookmarklet)</a>
<a class="button-1" href="http://book.tsuhankensaku.com/hon/" rel="nofollow" target="_blank">書籍横断</a>

    </p>




<h2 id="-993-">情報</h2>

    <p>

<a class="button-1" href="https://abema.tv/now-on-air/abema-news" rel="nofollow" target="_blank">Abema<i class="fa fa-television" aria-hidden="true"></i></a>
<a class="button-1" href="http://www3.nhk.or.jp/netradio/" rel="nofollow" target="_blank">NHKらじ★</a>
<a class="button-1" href="http://radiko.jp/" rel="nofollow" target="_blank">ラジコ</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://open.mixi.jp/user/20653861/diary" rel="nofollow" target="_blank">ニニギ</a>
<a class="button-1" href="http://tenkataihei.xxxblog.jp/" rel="nofollow" target="_blank">天下</a>
<a class="button-1" href="http://sonia.thd-web.jp/" rel="nofollow" target="_blank">愛知ソ</a>
<a class="button-1" href="https://nowcreation.jimdo.com/" rel="nofollow" target="_blank">NowCre</a>
<a class="button-1" href="http://blog.goo.ne.jp/powbbie" rel="nofollow" target="_blank">なる</a>
<a class="button-1" href="http://saigaijyouhou.com/" rel="nofollow" target="_blank">情報速</a>
<a class="button-1" href="http://mizu8882.blog.fc2.com/" rel="nofollow" target="_blank">ほんと</a>
<a class="button-1" href="http://5am5.blog.fc2.com/" rel="nofollow" target="_blank">あつ</a>
<a class="button-1" href="http://ameblo.jp/kuni-isle/" rel="nofollow" target="_blank">ミナ</a>
<a class="button-1" href="http://golden-tamatama.com/" rel="nofollow" target="_blank">黄金</a>
<a class="button-1" href="http://ameblo.jp/jicchoku/" rel="nofollow" target="_blank">嗚呼</a>
<a class="button-1" href="http://ameblo.jp/viva-bashar/" rel="nofollow" target="_blank">NEBULA</a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://www.youtube.com/user/takaponjp" rel="nofollow" target="_blank">堀江貴文<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UCWbD7kDsxAfNYha1LkhF9gA" rel="nofollow" target="_blank">論客<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/0214mex" rel="nofollow" target="_blank">はじめ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UCI5qMix97T3tVZfxmHObDjA" rel="nofollow" target="_blank">ねこ天<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/EricArchive" rel="nofollow" target="_blank">Eric<span class="icon-youtube"></span></a>
<a class="button-1" href="http://dime.jp/" rel="nofollow" target="_blank">@DIME</a>
<a class="button-1" href="https://www.youtube.com/user/wamweb" rel="nofollow" target="_blank">Ascii<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UCaminwG9MTO4sLYeC3s6udA" rel="nofollow" target="_blank">ヒカル<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/kirizakieizi" rel="nofollow" target="_blank">桐<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/teraminato" rel="nofollow" target="_blank">寺<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/guccinoheya" rel="nofollow" target="_blank">ぐち<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/MEGUMIbernadette" rel="nofollow" target="_blank">めぐ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/kazuch0924" rel="nofollow" target="_blank">カズ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/eguri89" rel="nofollow" target="_blank">瀬戸<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UCV-yLOnx0r8uG8aSu0u-Oyw" rel="nofollow" target="_blank">アンソ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UCg_m2ahbG9grCTh05T9kRog" rel="nofollow" target="_blank">デカ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UCBD4RO82lle5CyB_M9dtwzw" rel="nofollow" target="_blank">シバ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UC5ybFwdJFbkDVA29NQG7Ppw" rel="nofollow" target="_blank">動画楽<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/tyoudouin" rel="nofollow" target="_blank">朝堂院<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/reginaxrico" rel="nofollow" target="_blank">らきデタ<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/user/tweetTVJP" rel="nofollow" target="_blank">TweetTV<span class="icon-youtube"></span></a>
<a class="button-1" href="https://www.youtube.com/channel/UC5oLRA4CAPwZdZ-o0yLF-Tg" rel="nofollow" target="_blank">videonewscom<span class="icon-youtube"></span></a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.hatena.ne.jp/" rel="nofollow" target="_blank">はて</a>
<a class="button-1" href="http://www.yahoo.co.jp/" rel="nofollow" target="_blank">Y!</a>
<a class="button-1" href="https://news.google.co.jp/nwshp?hl=ja" rel="nofollow" target="_blank">G-News</a>
<a class="button-1" href="http://www.goo.ne.jp/" rel="nofollow" target="_blank">goo</a>
<a class="button-1" href="http://www.ocn.ne.jp/" rel="nofollow" target="_blank">OCN</a>
<a class="button-1" href="http://www.msn.com/ja-jp" rel="nofollow" target="_blank">MSN</a>
<a class="button-1" href="http://www.bing.com/news?FORM=Z9LH4" rel="nofollow" target="_blank">BingN</a>
<a class="button-1" href="http://www.livedoor.com/" rel="nofollow" target="_blank">livedoor</a>
<a class="button-1" href="http://www.nifty.com/" rel="nofollow" target="_blank">@nifty</a>
<a class="button-1" href="http://www.biglobe.ne.jp/" rel="nofollow" target="_blank">Biglobe</a>
<a class="button-1" href="http://www.excite.co.jp/" rel="nofollow" target="_blank">Excite</a>
<a class="button-1" href="http://www.infoseek.co.jp/" rel="nofollow" target="_blank">Infoseek</a>
<a class="button-1" href="https://auone.jp/" rel="nofollow" target="_blank">au</a>
<a class="button-1" href="http://www.so-net.ne.jp/" rel="nofollow" target="_blank">So-net</a>
<a class="button-1" href="http://www.fresheye.com/" rel="nofollow" target="_blank">Fresheye</a>
<a class="button-1" href="http://news.ceek.jp/" rel="nofollow" target="_blank">CEEK</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.huffingtonpost.jp/" rel="nofollow" target="_blank">Huff</a>
<a class="button-1" href="https://jp.sputniknews.com/" rel="nofollow" target="_blank">Sputnik</a>
<a class="button-1" href="http://www.recordchina.co.jp/" rel="nofollow" target="_blank">中国</a>
<a class="button-1" href="http://www.j-cast.com/" rel="nofollow" target="_blank">J-Cast</a>
<a class="button-1" href="https://www.businessinsider.jp/" rel="nofollow" target="_blank">BizInsJapan </a>
<a class="button-1" href="https://www.buzzfeed.com/?country=ja-jp" rel="nofollow" target="_blank">BuzzFeed</a>
<a class="button-1" href="https://togetter.com/" rel="nofollow" target="_blank">Togetter</a>
<a class="button-1" href="http://blogos.com/" rel="nofollow" target="_blank">Blogos</a>
<a class="button-1" href="http://www.47news.jp/" rel="nofollow" target="_blank">47</a>
<a class="button-1" href="http://www.asyura2.com/" rel="nofollow" target="_blank">阿修羅</a>
<a class="button-1" href="http://nlab.itmedia.co.jp/nl/subtop/itnetscience/index.html" rel="nofollow" target="_blank">ねとらぼ</a>
<a class="button-1" href="http://blog.esuteru.com/" rel="nofollow" target="_blank">はちま</a>
<a class="button-1" href="http://jin115.com/" rel="nofollow" target="_blank">オレ的ゲ</a>
<a class="button-1" href="http://jp.tomonews.com/" rel="nofollow" target="_blank">トモNews</a>
<a class="button-1" href="http://www.todays.jp/" rel="nofollow" target="_blank">今日ニッ</a>
<a class="button-1" href="http://jp.reuters.com/" rel="nofollow" target="_blank">Reuters</a>
<a class="button-1" href="http://www.bbc.com/japanese" rel="nofollow" target="_blank">BBC</a>
<a class="button-1" href="https://www.bloomberg.co.jp/" rel="nofollow" target="_blank">Bloomb</a>
<a class="button-1" href="http://jp.wsj.com/" rel="nofollow" target="_blank">WallSJ</a>
<a class="button-1" href="http://www.cnn.co.jp/" rel="nofollow" target="_blank">CNN</a>
<a class="button-1" href="https://www.kyodo.co.jp/" rel="nofollow" target="_blank">共同</a>
<a class="button-1" href="http://www.jiji.com/" rel="nofollow" target="_blank">時事</a>
<a class="button-1" href="http://www.nikkei.com/markets/" rel="nofollow" target="_blank">日経マ</a>
<a class="button-1" href="http://business.nikkeibp.co.jp/?rt=nocnt" rel="nofollow" target="_blank">日経ビ</a>
<a class="button-1" href="http://toyokeizai.net/" rel="nofollow" target="_blank">東洋経</a>
<a class="button-1" href="http://diamond.jp/" rel="nofollow" target="_blank">ダイ</a>
<a class="button-1" href="http://gendai.ismedia.jp/" rel="nofollow" target="_blank">現代ビ</a>
<a class="button-1" href="http://www.sankeibiz.jp/" rel="nofollow" target="_blank">産経Biz</a>
<a class="button-1" href="http://diamond.jp/zai" rel="nofollow" target="_blank">Zai</a>
<a class="button-1" href="http://jbpress.ismedia.jp/" rel="nofollow" target="_blank">JBpress</a>
<a class="button-1" href="http://www.tokyo-np.co.jp/" rel="nofollow" target="_blank">東京</a>
<a class="button-1" href="http://www.chunichi.co.jp/" rel="nofollow" target="_blank">中日</a>
<a class="button-1" href="http://mainichi.jp/" rel="nofollow" target="_blank">毎日</a>
<a class="button-1" href="http://www.yomiuri.co.jp/" rel="nofollow" target="_blank">読売</a>
<a class="button-1" href="http://www.sankei.com/" rel="nofollow" target="_blank">産経</a>
<a class="button-1" href="http://www.asahi.com/" rel="nofollow" target="_blank">朝日</a>
<a class="button-1" href="http://www.fnn-news.com/" rel="nofollow" target="_blank">FNN</a>
<a class="button-1" href="http://news.tv-asahi.co.jp/" rel="nofollow" target="_blank">テレ朝</a>
<a class="button-1" href="http://www.news24.jp/" rel="nofollow" target="_blank">日テレ</a>
<a class="button-1" href="http://news.tbs.co.jp/" rel="nofollow" target="_blank">TBS</a>
<a class="button-1" href="http://www.nhk.or.jp/" rel="nofollow" target="_blank">NHK</a>
<a class="button-1" href="http://www.news-postseven.com/" rel="nofollow" target="_blank">NEWSポ7</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://blog.goo.ne.jp/kfukuda_ginzaclinic" rel="nofollow" target="_blank">漢方癌</a>
<a class="button-1" href="http://yogananda.cc/index.html" rel="nofollow" target="_blank">ヨガ</a>
<a class="button-1" href="http://www.rui.jp/" rel="nofollow" target="_blank">るい</a>
<a class="button-1" href="http://maron49.com/" rel="nofollow" target="_blank">強健</a>
<a class="button-1" href="http://cancer-treatment-with-diet-cure.doorblog.jp/archives/45719901.html" rel="nofollow" target="_blank">クエン酸</a>
<a class="button-1" href="http://kouhakudou.blog.fc2.com/" rel="nofollow" target="_blank">養生</a>
<a class="button-1" href="http://medical.nikkeibp.co.jp/" rel="nofollow" target="_blank">日経メ</a>
<a class="button-1" href="http://gooday.nikkei.co.jp/" rel="nofollow" target="_blank">日経Go</a>
<a class="button-1" href="http://www.asahi.com/apital/" rel="nofollow" target="_blank">朝アピ</a>
<a class="button-1" href="https://yomidr.yomiuri.co.jp/" rel="nofollow" target="_blank">讀ドク</a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://twitter.com/cmk2wl" rel="nofollow" target="_blank">cmk2wl<span class="icon-twitter"></span></a>
<a class="button-1" href="https://twitter.com/Lulu__19" rel="nofollow" target="_blank">Lulu__19<span class="icon-twitter"></span></a>
<a class="button-1" href="https://twitter.com/neko_aii" rel="nofollow" target="_blank">neko-aii<span class="icon-twitter"></span></a>
<a class="button-1" href="http://blog.goo.ne.jp/jpnx05" rel="nofollow" target="_blank">原発問</a>
<a class="button-1" href="https://twitter.com/tokaiama" rel="nofollow" target="_blank">ama<span class="icon-twitter"></span></a>
<a class="button-1" href="https://twitter.com/namiekuwabara" rel="nofollow" target="_blank">桑<span class="icon-twitter"></span></a>
<a class="button-1" href="https://twitter.com/onodekita" rel="nofollow" target="_blank">onodekita<span class="icon-twitter"></span></a>
<a class="button-1" href="https://twitter.com/pecko178" rel="nofollow" target="_blank">✳ぺこ<span class="icon-twitter"></span></a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://twitter.com/francisco_bot" rel="nofollow" target="_blank">SHIVA<span class="icon-twitter"></span></a>
<a class="button-1" href="http://sekaitabi.com/" rel="nofollow" target="_blank">すべ気</a>
<a class="button-1" href="http://zjshkd.blog.fc2.com/" rel="nofollow" target="_blank">満堂</a>
<a class="button-1" href="http://grnba.com/iiyama/" rel="nofollow" target="_blank">飯山</a>
<a class="button-1" href="http://cocologsatoko.cocolog-nifty.com/" rel="nofollow" target="_blank">里子</a>
<a class="button-1" href="http://eigokiji.cocolog-nifty.com/blog/" rel="nofollow" target="_blank">載ら海外</a>
<a class="button-1" href="http://deeksha777.blog88.fc2.com/" rel="nofollow" target="_blank">黄金時</a>
<a class="button-1" href="https://twitter.com/LiberalArtsBA" rel="nofollow" target="_blank">尾崎清<span class="icon-twitter"></span></a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.kananet.com/health/6jdisast-2.htm" rel="nofollow" target="_blank">福島原発</a>
<a class="button-1" href="http://inventsolitude.sblo.jp/" rel="nofollow" target="_blank">ずく</a>
<a class="button-1" href="https://twitter.com/aoten49003" rel="nofollow" target="_blank">あお<span class="icon-twitter"></span></a>
<a class="button-1" href="http://ameblo.jp/lucky20000528/" rel="nofollow" target="_blank">光軍</a>
<a class="button-1" href="http://ameblo.jp/64152966/" rel="nofollow" target="_blank">want</a>
<a class="button-1" href="http://japonese.despertando.me/" rel="nofollow" target="_blank">目覚</a>
<a class="button-1" href="http://d.hatena.ne.jp/Takaon/" rel="nofollow" target="_blank">わんOLD</a>
<a class="button-1" href="http://blog.goo.ne.jp/takaomorimoto" rel="nofollow" target="_blank">わん</a>
<a class="button-1" href="http://nueq.exblog.jp/" rel="nofollow" target="_blank">nueq</a>
<a class="button-1" href="http://kenbounoblog.blog.fc2.com/" rel="nofollow" target="_blank">唖蝉</a>
<a class="button-1" href="http://angel.ap.teacup.com/gamenotatsujin/" rel="nofollow" target="_blank">ハム</a>
<a class="button-1" href="http://prepareforchange-japan.blogspot.jp/" rel="nofollow" target="_blank">PFC</a>
<a class="button-1" href="http://ameblo.jp/alua777/" rel="nofollow" target="_blank">Paul</a>
<a class="button-1" href="https://lighworkerjapan.wordpress.com/" rel="nofollow" target="_blank">LiW</a>
<a class="button-1" href="https://lightworkerjapan.wordpress.com/" rel="nofollow" target="_blank">ライトワO</a>
<a class="button-1" href="https://lightworker-japan.net/" rel="nofollow" target="_blank">ライトワ</a>
<a class="button-1" href="https://sites.google.com/site/patryksofialykawka/" rel="nofollow" target="_blank">Pat</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://worktoolsmith.com/" rel="nofollow" target="_blank">WTS</a>
<a class="button-1" href="https://weblogs.trancedive.com/index.html" rel="nofollow" target="_blank">和田</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.itmedia.co.jp/" rel="nofollow" target="_blank">ITmedia</a>
<a class="button-1" href="http://itpro.nikkeibp.co.jp/" rel="nofollow" target="_blank">ITpro</a>
<a class="button-1" href="http://gigazine.net/" rel="nofollow" target="_blank">GIGAZINE</a>
<a class="button-1" href="http://japan.cnet.com/" rel="nofollow" target="_blank">CNET</a>
<a class="button-1" href="http://japan.zdnet.com/" rel="nofollow" target="_blank">ZDNet</a>
<a class="button-1" href="http://ascii.jp/" rel="nofollow" target="_blank">Ascii</a>
<a class="button-1" href="http://weekly.ascii.jp/" rel="nofollow" target="_blank">週アス</a>
<a class="button-1" href="https://www.youtube.com/channel/UCeJYDunL9xZtmczAP9AGmFA" rel="nofollow" target="_blank">Ascii<span class="icon-youtube"></span></a>
<a class="button-1" href="http://news.mynavi.jp/top/headline/" rel="nofollow" target="_blank">マイナビ</a>
<a class="button-1" href="http://trendy.nikkeibp.co.jp/" rel="nofollow" target="_blank">日経ト</a>
<a class="button-1" href="http://www.gizmodo.jp/" rel="nofollow" target="_blank">ギズ</a>
<a class="button-1" href="http://readwrite.jp/" rel="nofollow" target="_blank">ReadWrite</a>
<a class="button-1" href="http://www.lifehacker.jp/" rel="nofollow" target="_blank">lifehacker</a>
<a class="button-1" href="https://allabout.co.jp/" rel="nofollow" target="_blank">All About</a>
<a class="button-1" href="https://nanapi.jp/" rel="nofollow" target="_blank">nanapi</a>
<a class="button-1" href="http://digicame-info.com/" rel="nofollow" target="_blank">デジカメinfo</a>
<a class="button-1" href="http://dc.watch.impress.co.jp/" rel="nofollow" target="_blank">デジカメ Watch</a>
<a class="button-1" href="https://search.mapcamera.com/?keyword=original170110&limit=200&sort=popular" rel="nofollow" target="_blank">マプカメ</a>
<a class="button-1" href="http://makezine.jp/" rel="nofollow" target="_blank">Make: Japan</a>
<a class="button-1" href="http://techable.jp/" rel="nofollow" target="_blank">Techable</a>
<a class="button-1" href="http://jp.techcrunch.com/" rel="nofollow" target="_blank">TechCrunch</a>
<a class="button-1" href="http://www.4gamer.net/" rel="nofollow" target="_blank">4Gamer</a>
<a class="button-1" href="http://game.watch.impress.co.jp/" rel="nofollow" target="_blank">GAME Watch</a>
<a class="button-1" href="http://www.gdm.or.jp/" rel="nofollow" target="_blank">akihabara</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.impress.co.jp/" rel="nofollow" target="_blank">インプ</a>
<a class="button-1" href="http://www.watch.impress.co.jp/" rel="nofollow" target="_blank">Watch</a>
<a class="button-1" href="http://internet.watch.impress.co.jp/" rel="nofollow" target="_blank">INT Watch</a>
<a class="button-1" href="https://internetcom.jp/" rel="nofollow" target="_blank">INTcom</a>
<a class="button-1" href="http://pc.watch.impress.co.jp/" rel="nofollow" target="_blank">PC Watch</a>
<a class="button-1" href="http://kaden.watch.impress.co.jp/" rel="nofollow" target="_blank">家電Watch</a>
<a class="button-1" href="http://k-tai.watch.impress.co.jp/" rel="nofollow" target="_blank">ケタイ Watch</a>
<a class="button-1" href="http://akiba-pc.watch.impress.co.jp/" rel="nofollow" target="_blank">AKIBA PC</a>
<a class="button-1" href="http://av.watch.impress.co.jp/" rel="nofollow" target="_blank">AV Watch</a>
<a class="button-1" href="http://biz.bcnranking.jp/" rel="nofollow" target="_blank">BCN Bizline</a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://qiita.com/" rel="nofollow" target="_blank">Qiita</a>
<a class="button-1" href="https://news.ycombinator.com/" rel="nofollow" target="_blank">Hacker News</a>
<a class="button-1" href="http://www.atmarkit.co.jp/" rel="nofollow" target="_blank">@IT</a>
<a class="button-1" href="https://codezine.jp/" rel="nofollow" target="_blank">CodeZine</a>
<a class="button-1" href="https://thinkit.co.jp/" rel="nofollow" target="_blank">Think IT</a>
<a class="button-1" href="http://postd.cc/" rel="nofollow" target="_blank">POSTD</a>
<a class="button-1" href="http://stackoverflow.com/" rel="nofollow" target="_blank">Stack Overflow</a>
<a class="button-1" href="http://www.slideshare.net/" rel="nofollow" target="_blank">SlideShare</a>
<a class="button-1" href="https://speakerdeck.com/" rel="nofollow" target="_blank">Speaker Deck</a>
<a class="button-1" href="http://scan.netsecurity.ne.jp/" rel="nofollow" target="_blank">ScanNetSecurity</a>
<a class="button-1" href="http://blog.trendmicro.co.jp/" rel="nofollow" target="_blank">トレマイ</a>
<a class="button-1" href="https://blog.kaspersky.com/" rel="nofollow" target="_blank">Kasper</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://mizu8882.blog.fc2.com/blog-entry-1474.html" rel="nofollow" target="_blank">映画「シリウス」</a>
<a class="button-1" href="http://asejitsu.jimdo.com/%E7%89%B9%E9%9B%86/%E7%BE%8E%E3%81%97%E3%81%8D%E7%B7%91%E3%81%AE%E6%98%9F-%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%AD%97%E5%B9%95/" rel="nofollow" target="_blank">映画「美しき緑の星」</a>
<a class="button-1" href="https://www.youtube.com/watch?v=O37XYbue6go" rel="nofollow" target="_blank">ニューアースへ行こう 美しき緑の星の実現へ ヤンガスさん</a>
<a class="button-1" href="https://www.youtube.com/watch?v=9a9BnbUrwWc" rel="nofollow" target="_blank">悟りへの道 悟りとエゴ消滅のプロセス やまがみてるおさん</a>
<a class="button-1" href="https://www.youtube.com/watch?v=cEg1n6280gQ" rel="nofollow" target="_blank">悟りへの道 やまがみてるお x テディ対談</a>

    </p>




<h2 id="-003-">天気</h2>

    <p>

<a class="button-1" href="http://www.rescuenow.net/" rel="nofollow" target="_blank">rescuenow.net</a>
<a class="button-1" href="http://earth.nullschool.net/#current/wind/surface/level/orthographic=158.55" rel="nofollow" target="_blank">風向き</a>
<a class="button-1" href="https://embed.windyty.com/embedmake.html" rel="nofollow" target="_blank">風向き</a>
<a class="button-1" href="https://www.windytv.com/" rel="nofollow" target="_blank">風向き</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.meteocentrale.ch/ja/weather/weather-extra/weather-in-japan.html" rel="nofollow" target="_blank">気流予想</a>
<a class="button-1" href="http://soramame.taiki.go.jp/dss/kosa/" rel="nofollow" target="_blank">PM2.5黄砂</a>
<a class="button-1" href="http://sprintars.riam.kyushu-u.ac.jp/forecastj.html" rel="nofollow" target="_blank">PM2.5黄砂</a>
<a class="button-1" href="http://agora.ex.nii.ac.jp/digital-typhoon/forecast/google-maps/" rel="nofollow" target="_blank">台風</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.data.jma.go.jp/obd/stats/data/mdrr/synopday/data1s.html" rel="nofollow" target="_blank">湿度</a>
<a class="button-1" href="http://www6.kaiho.mlit.go.jp/keihou_kaijou.html" rel="nofollow" target="_blank">沿岸域情報</a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://www.youtube.com/watch?v=kfTq_A9nBM0" rel="nofollow" target="_blank">天気<span class="icon-youtube"></span>LIVE</a>
<a class="button-1" href="http://weather.yahoo.co.jp/weather/zoomradar/" rel="nofollow" target="_blank">Y!雨雲レダ</a>
<a class="button-1" href="http://www.jma.go.jp/jp/highresorad/" rel="nofollow" target="_blank">降水ナウ</a>
<a class="button-1" href="https://nihongo.wunderground.com/" rel="nofollow" target="_blank">WeatherFore</a>
<a class="button-1" href="http://www3.nhk.or.jp/weather/" rel="nofollow" target="_blank">NHK気象</a>
<a class="button-1" href="http://weathernews.jp/" rel="nofollow" target="_blank">ウェザリ</a>
<a class="button-1" href="http://www.bioweather.net/" rel="nofollow" target="_blank">BIO天気</a>
<a class="button-1" href="http://weather.yahoo.co.jp/weather/week/" rel="nofollow" target="_blank">Y!週間天気</a>
<a class="button-1" href="http://www.tenki.jp/week/" rel="nofollow" target="_blank">10日間天気</a>
<a class="button-1" href="http://www.river.go.jp/kawabou/ipXAreaMap.do?gamenId=01-0204&fldCtlParty=no/" rel="nofollow" target="_blank">川の防災</a>
<a class="button-1" href="https://twitter.com/jmaxmlalerts" rel="nofollow" target="_blank">気象警戒<span class="icon-twitter"></span></a>
<a class="button-1" href="http://www.jma.go.jp/jp/g3/" rel="nofollow" target="_blank">天気図</a>
<a class="button-1" href="http://www.tenki.jp/guide/chart/" rel="nofollow" target="_blank">天気図</a>
<a class="button-1" href="http://www.jma.go.jp/jp/warn/" rel="nofollow" target="_blank">気象警報 注意報</a>
<a class="button-1" href="http://www.tenki.jp/bousai/warn/" rel="nofollow" target="_blank">気象警報 注意報</a>
<a class="button-1" href="http://www.tenki.jp/live/" rel="nofollow" target="_blank">実況天気</a>
<a class="button-1" href="http://swc.nict.go.jp/contents/index.php" rel="nofollow" target="_blank">宇宙天気</a>
<a class="button-1" href="http://www.nao.ac.jp/" rel="nofollow" target="_blank">国立天文台</a>
<a class="button-1" href="http://tenki.wet.co.jp/past_weather/" rel="nofollow" target="_blank">過去天気</a>

<!--
<div style="text-align:center;"><script language="Javascript" src="http://www.golden-mean.co.jp/js/tide_graph.js" charset="utf-8" ></script><noscript><a href="http://www.golden-mean.co.jp/">GoldenMean<br /> タイドグラフ</a></noscript></div>
-->

<!-- ●●● --></p><p>

<a class="button-1" href="http://maps.gsi.go.jp/?z=5#5/35.362222/138.731389/&base=std&ls=std&disp=1&vs=c1j0l0u0f0" rel="nofollow" target="_blank">地理院地図</a>
<a class="button-1" href="http://flood.firetree.net/?ll=33.8339%2C129.7265&z=12&m=60" rel="nofollow" target="_blank">Flood Maps</a>
<a class="button-1" href="http://wisteriahill.sakura.ne.jp/GMAP/GMAP_ALTITUDE/index.php" rel="nofollow" target="_blank">Google Maps 標高 (SRTM版)</a>
<a class="button-1" href="http://www.floodmap.net/" rel="nofollow" target="_blank">Flood Map: Water Level Elevation Map</a></p>

    </p>




<h2 id="-969-">防災情報</h2>

    <p>

南関東で地震などがあったら、多摩川は橋で検問封鎖の可能性が大。
高崎(群馬)から佐久(長野)へ抜けて名古屋へ。
揺れのあった地域では必ず一般道で(高速は渋滞で出られなくなる)。

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.menokami.jp/wp/?page_id=1805" rel="nofollow" target="_blank">シャク暦</a>
<a class="button-1" href="https://twitter.com/jishinkenkyu" rel="nofollow" target="_blank">地震予測<span class="icon-twitter"></span></a>
<a class="button-1" href="http://jisinyogen.blog.jp/" rel="nofollow" target="_blank">地震で</a>
<a class="button-1" href="http://jishin-news.com/" rel="nofollow" target="_blank">地震ニュ</a>
<a class="button-1" href="http://disaportal.gsi.go.jp/" rel="nofollow" target="_blank">ハザドマプ</a>
<a class="button-1" href="http://disaportal.gsi.go.jp/maps/#5/35.353216/138.735352" rel="nofollow" target="_blank">重ハザドマプ</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://realtime-earthquake-monitor.bosai.go.jp/" rel="nofollow" target="_blank">強震モニ</a>
<a class="button-1" href="http://www.kmoni.bosai.go.jp/new/" rel="nofollow" target="_blank">新強震モニ</a>
<a class="button-1" href="http://ds.iris.edu/sm2/" rel="nofollow" target="_blank">Seismic Monitor</a>
<a class="button-1" href="http://www.j-risq.bosai.go.jp/report/" rel="nofollow" target="_blank">J-RISQ地震速報</a>
<a class="button-1" href="http://weather.goo.ne.jp/earthquake/" rel="nofollow" target="_blank">goo地震情報</a>
<a class="button-1" href="http://typhoon.yahoo.co.jp/weather/jp/earthquake/" rel="nofollow" target="_blank">Y!地震情報</a>
<a class="button-1" href="http://www.hazardlab.jp/" rel="nofollow" target="_blank">ハザドラ</a>
<a class="button-1" href="https://twitter.com/EqAlarm" rel="nofollow" target="_blank">EqAlarm地震速報<span class="icon-twitter"></span></a>
<a class="button-1" href="https://twitter.com/tenkijp_jishin" rel="nofollow" target="_blank">天・地震情報<span class="icon-twitter"></span></a>
<a class="button-1" href="http://www.tenki.jp/bousai/earthquake/" rel="nofollow" target="_blank">天・地震情報</a>
<a class="button-1" href="http://www.hinet.bosai.go.jp/" rel="nofollow" target="_blank">高感度地震</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www1.kaiho.mlit.go.jp/KANKYO/TIDE/real_time_tide/sel/index.htm" rel="nofollow" target="_blank">潮汐</a>
<a class="button-1" href="http://typhoon.yahoo.co.jp/weather/jp/emergency/" rel="nofollow" target="_blank">Y!被害状況</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.jma.go.jp/jp/tsunami/" rel="nofollow" target="_blank">気・津波</a>
<a class="button-1" href="http://www.tenki.jp/bousai/tsunami/" rel="nofollow" target="_blank">天・津波</a>
<a class="button-1" href="http://batterybank.jp/blackout/" rel="nofollow" target="_blank">節電・停電情報</a>
<a class="button-1" href="http://www.paltek.co.jp/smartgrid/teiden.htm" rel="nofollow" target="_blank">停電情報</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.tepco.co.jp/nu/f1-np/camera/index-j.html" rel="nofollow" target="_blank">福島<i class="fa fa-camera" aria-hidden="true"></i>4</a>
<a class="button-1" href="http://www.tepco.co.jp/nu/f1-np/camera/index2-j.html" rel="nofollow" target="_blank">福島<i class="fa fa-camera" aria-hidden="true"></i>1</a>
<a class="button-1" href="http://www.ustream.tv/channel/tbs-live-camera" rel="nofollow" target="_blank">福島<i class="fa fa-camera" aria-hidden="true"></i>JNN</a>
<a class="button-1" href="https://www.youtube.com/channel/UC34BJEXYbSSdD6YBksIYY6Q" rel="nofollow" target="_blank">福島<i class="fa fa-camera" aria-hidden="true"></i><span class="icon-youtube"></span></a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://rkk.jp/livecamera/aso_live.php" rel="nofollow" target="_blank">阿蘇<i class="fa fa-camera" aria-hidden="true"></i></a>
<a class="button-1" href="http://www.tenki.jp/bousai/volcano/detail-82.html" rel="nofollow" target="_blank">阿蘇山</a>
<a class="button-1" href="http://vivaweb2.bosai.go.jp/v-hazard/" rel="nofollow" target="_blank">火山ハザ</a>
<a class="button-1" href="http://weather.livedoor.com/volcano/" rel="nofollow" target="_blank">火山情</a>
<a class="button-1" href="https://twitter.com/hayakawayukio" rel="nofollow" target="_blank">Haya<span class="icon-twitter"></span></a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://dengon.docomo.ne.jp/top.cgi" rel="nofollow" target="_blank">災害伝言板(docomo)</a>
<a class="button-1" href="http://dengon.ezweb.ne.jp/" rel="nofollow" target="_blank">災害伝言板(au)</a>
<a class="button-1" href="http://dengon.softbank.ne.jp/J" rel="nofollow" target="_blank">災害伝言板(SoftBank)</a>
<a class="button-1" href="http://www.ntt-east.co.jp/saigai/voice171/index.html" rel="nofollow" target="_blank">災害伝言<i class="fa fa-phone-square" aria-hidden="true"></i> 171 NTT東</a>
<a class="button-1" href="http://www.ntt-west.co.jp/dengon/" rel="nofollow" target="_blank">災害伝言<i class="fa fa-phone-square" aria-hidden="true"></i> 171 NTT西</a>

    </p>




<h2 id="-055-">便利</h2>

    <p>

<a class="button-1" href="javascript:(function%20(){var%20inputs%20=%20document.getElementsByTagName('input');for(var%20i=0;%20;%20i++){for%20(var%20j=0;%20j%20<%20inputs.length;%20j%20++)%20{var%20e%20=%20inputs[j];if%20(e.type%20==%20'checkbox')e.checked%20=%20true;}if(i%20<%20window.frames.length){try%20{inputs%20=%20window.frames[i].document.getElementsByTagName('input');}catch(e){}}else{break;}}})();" rel="nofollow" target="_blank">checkbox全on(bookmarklet)</a>
<a class="button-1" href="javascript:(function(){var%20d=document,q,c,t,_c,S=function(s){return%20String(s).replace(/[&<>]/g,function(m){return%20{'&':'\u0026amp;','<':'\u0026lt;','>':'\u0026gt;'}[m];});};q=S(d.selection?d.createRange().text:getSelection()).replace(/[\r\n]+/g,'<br%20/>');c=S(location.href);t=S(d.title);if(!q)return;var%20ta,cls,div=d.createElement('div');div.style.cssText='position:fixed;top:30px;left:20%;z-index:1000;border:solid%205px%20#aaa;margin:auto;background:#ddd;width:60%;';ta=d.createElement('textarea');ta.value='<dl%20class=\u0022quote\u0022>\n%20<dd><blockquote%20cite=\u0022'+c+'\u0022%20title=\u0022'+t+'\u0022><p>'+q+'</p></blockquote></dd>\n%20<dt%20class=\u0022cite\u0022>\u5F15\u7528\u5143\u003A%20<a%20href=\u0022'+c+'\u0022>'+t+'</a></dt>\n</dl>';ta.style.cssText='display:block;margin:20px%20auto%205px%20auto;width:96%;height:16em;';div.appendChild(ta);cls=d.createElement('input');cls.type='button';cls.value='%20Close%20';cls.style.cssText='padding:2px;text-align:center;width:8em;display:block;margin:5px%20auto;font:600%2015px%20arial;';div.appendChild(cls);_c=function(){var%20dv=this.parentNode;dv.parentNode.removeChild(dv)};cls.onclick=_c;d.body.appendChild(div);ta.select();})();" rel="nofollow" target="_blank">引用(bookmarklet)</a>
<a class="button-1" href="https://webdemo.myscript.com/views/math.html" rel="nofollow" target="_blank">Math</a>
<a class="button-1" href="http://keisan.casio.jp/" rel="nofollow" target="_blank">高精度計算</a>

<a class="button-1" href="javascript:(function(d){clipboardData.setData('Text',d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日'+d.getHours()+'時'+d.getMinutes()+'分'+d.getSeconds()+'秒');})(new Date());" rel="nofollow" target="_blank">時刻(bookmarklet)</a>




<!-- ●●● --></p><p>

<a class="button-1" href="https://archive.org/" rel="nofollow" target="_blank">Internet Archive</a>
<a class="button-1" href="https://www.google.co.jp/advanced_search?hl=ja" rel="nofollow" target="_blank">Google詳細</a>
<a class="button-1" href="http://www.e-gov.go.jp/" rel="nofollow" target="_blank">法令検索</a>
<a class="button-1" href="https://support.microsoft.com/ja-jp" rel="nofollow" target="_blank">Microsoft サ</a>
<a class="button-1" href="http://www.moug.net/" rel="nofollow" target="_blank">Excel VBA</a>
<a class="button-1" href="http://www.jusnet.co.jp/business/index.shtml" rel="nofollow" target="_blank">ビジ文例集</a>
<a class="button-1" href="http://sample.teglet.co.jp/" rel="nofollow" target="_blank">ビジ文書</a>
<a class="button-1" href="http://www.ndl.go.jp/" rel="nofollow" target="_blank">国会図書館</a>
<a class="button-1" href="http://htwins.net/scale2/" rel="nofollow" target="_blank">スケル</a>
<a class="button-1" href="http://www.getginger.jp/" rel="nofollow" target="_blank">Ginger</a>
<a class="button-1" href="http://english.cheerup.jp/corpus/" rel="nofollow" target="_blank">英語検索</a>
<a class="button-1" href="https://translate.google.co.jp/" rel="nofollow" target="_blank">G翻</a>
<a class="button-1" href="http://www.excite.co.jp/world/" rel="nofollow" target="_blank">EX翻</a>
<a class="button-1" href="https://note.mu/" rel="nofollow" target="_blank">note</a>
<a class="button-1" href="https://medium.com/" rel="nofollow" target="_blank">Medium</a>
<a class="button-1" href="https://www.dlmarket.jp/" rel="nofollow" target="_blank">DLmarket</a>
<a class="button-1" href="http://www.vector.co.jp/" rel="nofollow" target="_blank">Vector</a>
<a class="button-1" href="http://forest.watch.impress.co.jp/" rel="nofollow" target="_blank">窓の杜</a>
<a class="button-1" href="http://www.gigafree.net/" rel="nofollow" target="_blank">k本的に</a>
<a class="button-1" href="http://util.geo.jp/makelinks" rel="nofollow" target="_blank">Linkジェネ</a>
<a class="button-1" href="http://www.finefinefine.jp/jquery/" rel="nofollow" target="_blank">jQuery</a>
<a class="button-1" href="http://alphasis.info/" rel="nofollow" target="_blank">アルファ</a>
<a class="button-1" href="http://www.cityjp.com/javascript/programmer/index.html" rel="nofollow" target="_blank">JavaScript集</a>
<a class="button-1" href="https://syncer.jp/js-minifier" rel="nofollow" target="_blank">JavaScriptの圧縮</a>
<a class="button-1" href="http://jsbeautifier.org/" rel="nofollow" target="_blank">JavaScriptの圧縮</a>
<a class="button-1" href="http://www.iexcl.info/tools/p_urlhen.php" rel="nofollow" target="_blank">URLエンコ</a>
<a class="button-1" href="http://www.oni-tools.com/tools/del_duplication" rel="nofollow" target="_blank">重複行</a>
<a class="button-1" href="http://so-zou.jp/web-app/text/fullwidth-halfwidth/" rel="nofollow" target="_blank">全角半角 変換</a>
<a class="button-1" href="http://icon-generator.net/" rel="nofollow" target="_blank">Icon</a>
<a class="button-1" href="https://github.com/spf13/hugo/releases/" rel="nofollow" target="_blank">HUGO dl</a>
<a class="button-1" href="http://ping-taro.com/" rel="nofollow" target="_blank">Ping</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.keyman.or.jp/?vos=nkeyalca2011080101" rel="nofollow" target="_blank">キマン</a>
<a class="button-1" href="http://www.mwsoft.jp/programming/munou/ime_dictionary_link.html" rel="nofollow" target="_blank">ATOK辞書</a>
<a class="button-1" href="http://www.soumunomori.com/" rel="nofollow" target="_blank">総務</a>
<a class="button-1" href="https://www.tanomail.com/p-tano/" rel="nofollow" target="_blank">たのめる</a>
<a class="button-1" href="http://www.askul.co.jp/" rel="nofollow" target="_blank">ASKUL</a>
<a class="button-1" href="http://www.kaunet.com/" rel="nofollow" target="_blank">カウネト</a>
<a class="button-1" href="http://www.officedepot.co.jp/" rel="nofollow" target="_blank">オデポ</a>
<a class="button-1" href="https://www.monotaro.com" rel="nofollow" target="_blank">モノタ</a>
<a class="button-1" href="http://www.orange-book.com/" rel="nofollow" target="_blank">オレジBook</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.shipping.jp/" rel="nofollow" target="_blank">送料虎</a>
<a class="button-1" href="http://shop.gsale.me/delivery.html" rel="nofollow" target="_blank">送料目</a>
<a class="button-1" href="http://www.post.japanpost.jp/zipcode/index.html" rel="nofollow" target="_blank">郵便番号</a>
<a class="button-1" href="http://www.post.japanpost.jp/service/you_pack/index.html" rel="nofollow" target="_blank">ゆうパ</a>
<a class="button-1" href="http://www.kuronekoyamato.co.jp/" rel="nofollow" target="_blank">ヤマト</a>
<a class="button-1" href="http://www.sagawa-exp.co.jp/" rel="nofollow" target="_blank">佐川</a>
<a class="button-1" href="http://www.nittsu.co.jp/" rel="nofollow" target="_blank">日本通運</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://kakaku.com/" rel="nofollow" target="_blank">価格.com</a>
<a class="button-1" href="http://www.bestgate.net/" rel="nofollow" target="_blank">ベストゲ</a>
<a class="button-1" href="http://www.saiyasune.com/" rel="nofollow" target="_blank">最安値.com</a>
<a class="button-1" href="http://www.hikaku.com/" rel="nofollow" target="_blank">比較.com</a>
<a class="button-1" href="http://kainavi.search.yahoo.co.jp/search" rel="nofollow" target="_blank">Y!買物</a>
<a class="button-1" href="http://www.hikaku123.info/arujan/" rel="nofollow" target="_blank">JANコード</a>
<a class="button-1" href="https://smashop.jp/" rel="nofollow" target="_blank">スマトショピ</a>
<a class="button-1" href="http://tokkasai.com/" rel="nofollow" target="_blank">特価祭.com</a>
<a class="button-1" href="http://blog.livedoor.jp/tokka315/" rel="nofollow" target="_blank">チョイ得</a>
<a class="button-1" href="http://k-yorimo.com/" rel="nofollow" target="_blank">カカクコムよりも</a>
<a class="button-1" href="http://ecnavi.jp/" rel="nofollow" target="_blank">ECナビ</a>
<a class="button-1" href="https://www.amazon.co.jp/" rel="nofollow" target="_blank">Amazon</a>
<a class="button-1" href="http://www.yodobashi.com/" rel="nofollow" target="_blank">ヨドバシ</a>
<a class="button-1" href="http://www.biccamera.com/" rel="nofollow" target="_blank">Bic</a>
<a class="button-1" href="http://online.nojima.co.jp/" rel="nofollow" target="_blank">ノジ</a>
<a class="button-1" href="http://www.beisiadenki.com/" rel="nofollow" target="_blank">ベイ</a>
<a class="button-1" href="http://joshinweb.jp/top.html" rel="nofollow" target="_blank">Josh</a>
<a class="button-1" href="http://www.ksdenki.com/shop/default.aspx" rel="nofollow" target="_blank">K's</a>
<a class="button-1" href="http://www.sofmap.com/" rel="nofollow" target="_blank">ソフマ</a>
<a class="button-1" href="http://www.murauchi.com/MCJ-front-web/index.html" rel="nofollow" target="_blank">ムラウ</a>
<a class="button-1" href="http://www.rakuten.co.jp/" rel="nofollow" target="_blank">楽天</a>
<a class="button-1" href="http://www2s.biglobe.ne.jp/~sakharov/" rel="nofollow" target="_blank">秋葉レポ</a>
<a class="button-1" href="http://www.parts-price.com/index.html" rel="nofollow" target="_blank">PCパーツ価格</a>
<a class="button-1" href="https://www.ark-pc.co.jp/" rel="nofollow" target="_blank">ark</a>
<a class="button-1" href="http://www.ec-current.com/" rel="nofollow" target="_blank">ECカレ</a>
<a class="button-1" href="http://www.pc-trust.co.jp/shop/default.aspx" rel="nofollow" target="_blank">PC-Trust</a>
<a class="button-1" href="http://www.caravan-yu.com/shop/default.aspx" rel="nofollow" target="_blank">CaravanYU</a>
<a class="button-1" href="http://www.compmoto.com/" rel="nofollow" target="_blank">COMPMOTO</a>
<a class="button-1" href="http://radical.co.jp/" rel="nofollow" target="_blank">Radical</a>
<a class="button-1" href="http://www.akibaoo.co.jp/" rel="nofollow" target="_blank">あきば</a>
<a class="button-1" href="http://kaago.com/panicow" rel="nofollow" target="_blank">パニカウ</a>
<a class="button-1" href="http://www.cainz.com/shop/" rel="nofollow" target="_blank">Cainz</a>
<a class="button-1" href="http://www.kilat.jp/kilat/" rel="nofollow" target="_blank">キラ</a>
<a class="button-1" href="http://www.soukai.com/" rel="nofollow" target="_blank">爽快ドラ</a>
<a class="button-1" href="http://www.kenko.com/" rel="nofollow" target="_blank">ケンコー</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://panasonic-pcshop.ocnk.net/page/1" rel="nofollow" target="_blank">shop8888</a>
<a class="button-1" href="http://leemanparadise.com/neta/post-1770/" rel="nofollow" target="_blank">レッツノートがぶっ壊れたけど格安修理できた件【第一回目】 – 今日のネタ、大丈夫?</a>

    </p>




<h2>移動</h2>

    <p>

<a class="button-1" href="http://www.jorudan.co.jp/" rel="nofollow" target="_blank">乗案内</a>
<a class="button-1" href="https://www.navitime.co.jp/" rel="nofollow" target="_blank">NAVI</a>
<a class="button-1" href="http://ekitan.com/" rel="nofollow" target="_blank">駅探</a>
<a class="button-1" href="http://transit.yahoo.co.jp/" rel="nofollow" target="_blank">Y!乗換</a>
<a class="button-1" href="http://transit.goo.ne.jp/" rel="nofollow" target="_blank">goo乗換</a>
<a class="button-1" href="http://www.ekikara.jp/top.htm" rel="nofollow" target="_blank">えきか</a>
<a class="button-1" href="http://www.rurubu.com/train/index.aspx" rel="nofollow" target="_blank">るる乗換</a>
<a class="button-1" href="http://www.hyperdia.com/ja/" rel="nofollow" target="_blank">HDia</a>
<a class="button-1" href="http://www.jreast.co.jp/estation/search.aspx" rel="nofollow" target="_blank">駅JR東</a>
<a class="button-1" href="https://expy.jp/top.php" rel="nofollow" target="_blank">新幹EX</a>
<a class="button-1" href="http://www.jr-odekake.net/" rel="nofollow" target="_blank">JRおで</a>
<a class="button-1" href="http://www.jr-odekake.net/railroad/#eki" rel="nofollow" target="_blank">JRおで</a>
<a class="button-1" href="http://www.eki-net.com/travel/" rel="nofollow" target="_blank">えきね</a>
<a class="button-1" href="http://www.jreast.co.jp/" rel="nofollow" target="_blank">JR東</a>
<a class="button-1" href="www.jr-odekake.net/railroad/#mydia" rel="nofollow" target="_blank">JR西</a>
<a class="button-1" href="http://www.jr-odekake.net/railroad/ticket/tokutoku/" rel="nofollow" target="_blank">トクトクき</A>
<a class="button-1" href="http://www.henyohenyo.com/subway/" rel="nofollow" target="_blank">地下鉄乗換</a>
<a class="button-1" href="http://www.tokyometro.jp/index.html" rel="nofollow" target="_blank">東京メ</a>
<a class="button-1" href="http://www.kotsu.metro.tokyo.jp/subway/" rel="nofollow" target="_blank">都営</a>
<a class="button-1" href="http://www.kotsu.city.osaka.lg.jp/" rel="nofollow" target="_blank">大阪市交</a>
<a class="button-1" href="http://www.mifuru.to/frdb/" rel="nofollow" target="_blank">未来鉄道</a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://www.kayak.co.jp/" rel="nofollow" target="_blank">KAYAK</a>
<a class="button-1" href="https://www.expedia.co.jp/" rel="nofollow" target="_blank">Expedia</a>
<a class="button-1" href="http://www.trivago.jp/" rel="nofollow" target="_blank">trivago</a>
<a class="button-1" href="http://www.tour.ne.jp/" rel="nofollow" target="_blank">トラベコ</a>
<a class="button-1" href="http://www.ikyu.com/" rel="nofollow" target="_blank">一休</a>
<a class="button-1" href="https://www.tripadvisor.jp/" rel="nofollow" target="_blank">tripadv</a>
<a class="button-1" href="http://4travel.jp/" rel="nofollow" target="_blank">4travel</a>
<a class="button-1" href="http://www.jalan.net/" rel="nofollow" target="_blank">じゃ</a>
<a class="button-1" href="http://travel.rakuten.co.jp/" rel="nofollow" target="_blank">楽天ト</a>
<a class="button-1" href="http://travel.yahoo.co.jp/" rel="nofollow" target="_blank">Y!ト</a>
<a class="button-1" href="http://www.jtb.co.jp/" rel="nofollow" target="_blank">JTB</a>
<a class="button-1" href="http://www.jrtours.co.jp/" rel="nofollow" target="_blank">JR東海ツ</a>
<a class="button-1" href="http://www.nta.co.jp/" rel="nofollow" target="_blank">日本旅</a>
<a class="button-1" href="http://www.his-j.com/Default.aspx" rel="nofollow" target="_blank">HIS</a>
<a class="button-1" href="http://www.hankyu-travel.com/" rel="nofollow" target="_blank">阪急交</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.ana.co.jp/" rel="nofollow" target="_blank">ANA</a>
<a class="button-1" href="http://www.jal.co.jp/" rel="nofollow" target="_blank">JAL</a>
<a class="button-1" href="https://at.jorudan.co.jp/lcc/" rel="nofollow" target="_blank">LCCジ</a>
<a class="button-1" href="http://www.skymark.jp/ja/" rel="nofollow" target="_blank">SKY★</a>
<a class="button-1" href="http://www.jetstar.com/jp/ja/home" rel="nofollow" target="_blank">Jet★</a>
<a class="button-1" href="https://www.solaseedair.jp/" rel="nofollow" target="_blank">ソラシ</a>
<a class="button-1" href="http://www.starflyer.jp/index.html" rel="nofollow" target="_blank">★Flyer</a>
<a class="button-1" href="http://www.flypeach.com/pc/jp" rel="nofollow" target="_blank">Peach</a>
<a class="button-1" href="https://www.vanilla-air.com/jp/" rel="nofollow" target="_blank">Vani</a>
<a class="button-1" href="http://www.airdo.jp/ap/index.html" rel="nofollow" target="_blank">AIR DO</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://www.kashikaigishitsu.net/" rel="nofollow" target="_blank">貸し会</a>
<a class="button-1" href="https://itp.ne.jp/?rf=1" rel="nofollow" target="_blank">iタウペジ</a>
<a class="button-1" href="http://www.tabirai.net/car/" rel="nofollow" target="_blank">レンタカ</a>
<a class="button-1" href="http://travel.rakuten.co.jp/cars/" rel="nofollow" target="_blank">Rレンタカ</a>
<a class="button-1" href="https://rent.toyota.co.jp/" rel="nofollow" target="_blank">トヨタレンタ</a>
<a class="button-1" href="http://www.nipponrentacar.co.jp/" rel="nofollow" target="_blank">ニッポレンタ</a>
<a class="button-1" href="http://www.nta.co.jp/rentacar/ps_cd/48" rel="nofollow" target="_blank">旅ぷら</a>
<a class="button-1" href="https://www.its-mo.com/map/?action=car#route,car" rel="nofollow" target="_blank">ゼンリン</a>
<a class="button-1" href="http://maps.google.co.jp/" rel="nofollow" target="_blank">Gマップ</a>
<a class="button-1" href="http://www.mapion.co.jp/" rel="nofollow" target="_blank">Mapion</a>
<a class="button-1" href="https://www.mapion.co.jp/route/" rel="nofollow" target="_blank">キョリ測</a>
<a class="button-1" href="https://mapfan.com/" rel="nofollow" target="_blank">MapFan</a>
<a class="button-1" href="http://map.loco.yahoo.co.jp/" rel="nofollow" target="_blank">Y!マ</a>
<a class="button-1" href="http://map.goo.ne.jp/map/" rel="nofollow" target="_blank">goo地</a>
<a class="button-1" href="http://map.goo.ne.jp/route/" rel="nofollow" target="_blank">goo地ルト</a>
<a class="button-1" href="https://www.bing.com/maps/?FORM=Z9LH3" rel="nofollow" target="_blank">Bingマ</a>

<!-- ●●● --></p><p>

<a class="button-1" href="http://suumo.jp/" rel="nofollow" target="_blank">SUUMO</a>
<a class="button-1" href="http://www.homes.co.jp/" rel="nofollow" target="_blank">HOME'S
<a class="button-1" href="https://iemo.jp/" rel="nofollow" target="_blank">iemo</a>
<a class="button-1" href="http://www.athome.co.jp/" rel="nofollow" target="_blank">@ホーム</a>
<a class="button-1" href="https://realestate.yahoo.co.jp/" rel="nofollow" target="_blank">Y!不動産</a>

<!-- ●●● --></p><p>

<a class="button-1" href="https://www.gnavi.co.jp/" rel="nofollow" target="_blank">ぐるなび</a>
<a class="button-1" href="https://www.hotpepper.jp/" rel="nofollow" target="_blank">グルメ</a>
<a class="button-1" href="http://www.ozmall.co.jp/gourmet/" rel="nofollow" target="_blank">OZmall</a>
<a class="button-1" href="https://restaurant.ikyu.com/" rel="nofollow" target="_blank">一休レ</a>
<a class="button-1" href="https://tabelog.com/" rel="nofollow" target="_blank">食べロ</a>
<a class="button-1" href="https://cookpad.com/" rel="nofollow" target="_blank">CookPad</a>

    </p>




<h2 id="-SSS-">瀬戸弘司の動画</h2>

    <p>

<a class="button-1" href="http://setokoji.jukinko.com/" rel="nofollow" target="_blank">瀬戸弘司の動画</a>

    </p>




</div>


{{ partial "footer.html" . }}

_default

ディレクトリ_defaultにあるテンプレートを使って、 各HTMLファイルが作られます。

Hugoの初期値では、すべての記事は「index.html」というファイル名になります。 この「index.html」というファイルを擁しているディレクトリ名が、 何の記事であるかを区別する指標になっています。

li.html

記事の更新日付とタイトルを呼び出す「部品」です。 この「部品」をテンプレートファイルから呼び出します。 共通の「部品」は1つのファイルにして、この「部品」が更新されれば、この「部品」を使っている、 すべてのテンプレートファイルが修正される仕組みにしてあります。

<li><time>{{ with .Site.Params.dateFormat }}{{ $.Date.Format . }}{{ else }}{{ .Date.Format "02 Jan 2006, 15:04" }}{{ end }}</time> - <a href="{{ .Permalink }}">{{ .Title }}</a></li>

rss.xml

RSSフィードを作るためのテンプレートです。

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ with .Title }}in {{.}} {{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    <atom:link href="{{.URL}}" rel="self" type="application/rss+xml" />
    {{ range first 15 .Data.Pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <description>{{ .Summary | html }}</description>
    </item>
    {{ end }}
  </channel>
</rss>

summary.html

<article>
  <header>
    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>

    {{ partial "post_meta.html" . }}

  </header>

  <p>
  {{ .Summary }}
  </p>

  {{ if .Truncated }}
  <footer>
    <a href="{{ .RelPermalink }}">Read more<i class="fa fa-angle-double-right fa-fw"></i></a>
  </footer>
  {{ end }}
</article>

single.html

記事のひな形です。 このファイルが最も重要です。 「タイトルをクリック/タップするとトップページ(/)へ戻る」という変則的な仕様にしてあります。

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
  <!-- <h2>{{ .Description }}</h2> -->
</div>
<div class="content">

  {{ partial "post_meta.html" . }}

  {{ .Content }}

  {{ partial "prev_next_post.html" . }}

  {{ partial "disqus.html" . }}

</div>

{{ partial "footer.html" . }}

terms.html

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>
<div class="content">
  <ul>
  {{ $data := .Data }}
  {{ range $key, $value := .Data.Terms.ByCount }}
    <li>
      <a href="{{ $value.Name | urlize }}">{{ $value.Name }}</a>
      <span>&#40;{{ $value.Count }}&#41;</span>
    </li>
  {{ end }}
  </ul>
</div>

{{ partial "footer.html" . }}

indexes

post.html

postというセクションの記事(更新日時とタイトル)を年度別/日付順に記事を並べます。

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>
<div class="content">
  {{ range .Data.Pages.GroupByDate "2006" }}
  <h2>{{ .Key }}</h2>
  <ul>
  {{ range .Pages }}
    {{ .Render "li" }}
  {{ end }}
  </ul>
  {{ end }}
</div>

{{ partial "footer.html" . }}

shoko.html

shokoというセクションの記事(更新日時とタイトル)を年度別/日付順に記事を並べます。

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>
<div class="content">
  {{ range .Data.Pages.GroupByDate "2006" }}
  <h2>{{ .Key }}</h2>
  <ul>
  {{ range .Pages }}
    {{ .Render "li" }}
  {{ end }}
  </ul>
  {{ end }}
</div>

{{ partial "footer.html" . }}

partials

ディレクトリpartialsに含まれるファイルは、テンプレートファイルが利用する「部品」です。 この「部品」をテンプレートファイルから呼び出します。 共通の「部品」は1つのファイルにして、この「部品」が更新されれば、この「部品」を使っている、 すべてのテンプレートファイルが修正される仕組みにしてあります。

brand.html

{{ with .Site.Params.brand }}
  <a class="pure-menu-heading brand" href="/">{{ . | safeHTML }}</a>
{{ end }}
<div>
  <div class="small-print">
    <small>{{ .Site.Copyright | safeHTML }}</small>
  </div>
  <div class="small-print">
    <small>Built with&nbsp;<a href="https://gohugo.io/" target="_blank">Hugo</a></small>
    <small>Theme&nbsp;<a href="https://github.com/yoshiharuyamashita/blackburn" target="_blank">Blackburn</a></small>
    <small><p>このサイトはAmazon<br>アソシエイトのリンクを<br>使用しています。</p></small>
  </div>
</div>

disqus.html

{{ with .Site.Params.disqus }}
<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ . }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
{{ end }}

favicon.html

<link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.ico" type="image/x-icon" />
<hr id="-82w92n-">
</div>
</div>
<script src="{{ .Site.BaseURL }}js/ui.js"></script>

{{ partial "google_analytics.html" . }}




<!-- To the Top -->

<p id="page-top"><a href="#">↑</a><br><a href="#-82w92n-">↓</a></p>

<!-- To the Top -->




</body>
</html>

google_analytics.html

{{ with .Site.Params.googleAnalytics }}
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '{{ . }}', 'auto');
  ga('send', 'pageview');

</script>
{{ end }}

hatena.html

Twitterとはてブのボタンです。

<p>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja"><font size="5px" color="#00acec"><span class="icon-twitter"></span></font></a>&emsp;
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-noballoon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</p>

head.html

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="{{ if .IsNode }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ else }}{{ with .Description }}{{ . }}{{ end }}{{ end }}">
  {{.Hugo.Generator}}

  <title>{{ if .IsHome }}{{ .Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}</title>

  <!-- CSS -->
  {{ $purecss := "https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/" }}
  <link rel="stylesheet" href="{{ $purecss }}pure-min.css">

  {{ "<!--[if lte IE 8]>" | safeHTML }}
  <link rel="stylesheet" href="{{ $purecss }}grids-responsive-old-ie-min.css">
  {{ "<![endif]-->" | safeHTML }}
  {{ "<!--[if gt IE 8]><!-->" | safeHTML }}
  <link rel="stylesheet" href="{{ $purecss }}grids-responsive-min.css">
  {{ "<!--<![endif]-->" | safeHTML }}

  {{ "<!--[if lte IE 8]>" | safeHTML }}
  <link rel="stylesheet" href="/css/side-menu-old-ie.css">
  {{ "<![endif]-->" | safeHTML }}
  {{ "<!--[if gt IE 8]><!-->" | safeHTML }}
  <link rel="stylesheet" href="/css/side-menu.css">
  {{ "<!--<![endif]-->" | safeHTML }}

  <link rel="stylesheet" href="/css/blackburn.css">

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

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">

  <!-- RSS -->
  {{ if .RSSLink }}
  <link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="{{ .RSSLink }}" />
  {{ end }}

  {{ with .Site.Params.highlightjs }}
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/{{ . }}.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  {{ end }}

  {{ partial "favicon.html" . }}

  {{ range .Site.Params.custom_css }}
    <link rel="stylesheet" href="{{ $.Site.BaseURL }}{{ . }}">
  {{ end }}
  {{ range .Site.Params.custom_js }}
    <script src="{{ $.Site.BaseURL }}{{ . }}"></script>
  {{ end }}




<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />
<link rel="apple-touch-icon" href="http://benkyosukisuki.com/apple-touch-icon-precomposed.png" />

<!-- 第一のJquery -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="{{ .Site.BaseURL }}js/tree.js"></script>

<!-- 競合防止↓http://web.helog.jp/jquery/noconflict/ -->

<script type="text/javascript">
    $.noConflict();
</script>

  <!-- スムーズ http://klutche.org/archives/536/ スクロール -->

<!-- 第二のJquery -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

  <!-- スムーズ http://klutche.org/archives/536/ スクロール -->




  <!-- Web fonts -->
  <link rel="stylesheet" href="/icomoon/style.css">
  <!-- Web fonts -->




</head>

header.html

<!DOCTYPE html>
<html lang="en">

{{ partial "head.html" . }}

<body>
<div id="layout">

  {{ partial "sidemenu.html" . }}

  <div id="main">

paginating.html

こちらを利用しています。

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
  <nav class="pagination">
    {{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}"><button><< 前 max 10件</button></a>
    {{ end }}
    <span class="current-page">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</span>
    {{ if .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}"><button>次 max 10件 >></button></a>
    {{ end }}
  </nav>
{{ end }}

pagination.html

こちらは利用していないと思います。

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
{{ $prev := "fa fa-chevron-left"}}
{{ $next := "fa fa-chevron-right"}}
<nav class="pagination" role="pagination">
  {{ if .Paginator.HasPrev }}
  <a href="{{ .Paginator.Prev.URL }}"><i class="{{ $prev }}"></i></a>
  {{ else }}
  <i class="{{ $prev }}"></i>
  {{ end }}
  <span>&nbsp;{{ .Paginator.PageNumber }} / {{ .Paginator.TotalPages }}&nbsp;</span>
  {{ if .Paginator.HasNext }}
  <a href="{{ .Paginator.Next.URL }}"><i class="{{ $next }}"></i></a>
  {{ else }}
  <i class="{{ $next }}"></i>
  {{ end }}
</nav>
{{ end }}

post_meta.html

各記事の冒頭にある日付・タクソノミーなどの表示部分です。

<div class="post-meta">

  <div>
    <i class="fa fa-calendar fa-fw"></i>
    <time>{{ with .Site.Params.dateFormat }}{{ $.Date.Format . }}{{ else }}{{ .Date.Format "02 Jan 2006, 15:04" }}{{ end }}</time>
  </div>

  {{ $baseUrl := .Site.BaseURL }}

  {{ if isset .Params "categories" }}
  {{ $count := len .Params.categories }}
  {{ if gt $count 0 }}
  <div>
    <i class="fa fa-suitcase fa-fw"></i>
    {{ range $k, $v := .Params.categories }}
      <a class="post-taxonomy-tag" href="{{ $baseUrl }}categories/{{ . | urlize }}">{{ . }}</a>{{ if lt $k (sub $count 1) }}&nbsp;&#47;{{ end }}
    {{ end }}
  </div>
  {{ end }}
  {{ end }}

  {{ if isset .Params "topics" }}
  {{ $count := len .Params.topics }}
  {{ if gt $count 0 }}
  <div>
    <i class="fa fa-folder fa-fw"></i>
    {{ range $k, $v := .Params.topics }}
      <a class="post-taxonomy-topic" href="{{ $baseUrl }}topics/{{ . | urlize }}">{{ . }}</a>{{ if lt $k (sub $count 1) }}&nbsp;&#47;{{ end }}
    {{ end }}
  </div>
  {{ end }}
  {{ end }}

  {{ if isset .Params "tags" }}
  {{ $count := len .Params.tags }}
  {{ if gt $count 0 }}
  <div>
    <i class="fa fa-tags fa-fw"></i>
    {{ range $k, $v := .Params.tags }}
      <a class="post-taxonomy-tag" href="{{ $baseUrl }}tags/{{ . | urlize }}">{{ . }}</a>{{ if lt $k (sub $count 1) }}&nbsp;&#47;{{ end }}
    {{ end }}
  </div>
  {{ end }}
  {{ end }}

<hr>

</div>

prev_next_post.html

直前・直後の記事へのリンクを自動生成する「部品」です。

{{ if or (.Prev) (.Next) }}
<div class="prev-next-post pure-g">
  <div class="pure-u-1-24" style="text-align: left;">
    {{ if .PrevInSection }}
    <a href="{{ .PrevInSection.Permalink }}"><i class="fa fa-chevron-left"></i></a>
    {{ end }}
  </div>
  <div class="pure-u-10-24">
    {{ if .PrevInSection }}
    <nav class="prev">
      <a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a>
    </nav>
    {{ end }}
  </div>
  <div class="pure-u-2-24">
    &nbsp;
  </div>
  <div class="pure-u-10-24">
    {{ if .NextInSection }}
    <nav class="next">
      <a href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a>
    </nav>
    {{ end }}
  </div>
  <div class="pure-u-1-24" style="text-align: right;">
    {{ if .NextInSection }}
    <a href="{{ .NextInSection.Permalink }}"><i class="fa fa-chevron-right"></i></a>
    {{ end }}
  </div>
</div>
{{ end }}

sidemenu.html

<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
  <!-- Hamburger icon -->
  <span></span>
</a>
<div id="menu">

  {{ partial "brand.html" . }}

  <div class="pure-menu">
    <ul class="pure-menu-list">
      {{ range .Site.Menus.main }}
      {{ if .HasChildren }}
        <li class="pure-menu-item pure-menu-has-children">
          <a class="pure-menu-link" href="#">{{ .Pre }}{{ .Name }}</a>
          <ul class="pure-menu-children">
            {{ range .Children }}
            <li class="pure-menu-item">
              <a href="{{ .URL }}">{{ .Name }}</a>
            </li>
            {{ end }}
          </ul>
      {{else}}
        <li class="pure-menu-item">
          <a class="pure-menu-link" href="{{ .URL }}">{{ .Pre }}{{ .Name }}</a>
      {{end}}
        </li>
      {{end}}
    </ul>
  </div>

  {{ partial "social.html" . }}

  {{ partial "copyright.html" . }}
</div>

social.html

<div class="pure-menu social">
  <ul class="pure-menu-list">

    {{ if .RSSLink }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="{{ .RSSLink }}"><i class="fa fa-rss fa-fw"></i>RSS</a>
    </li>
    {{ end }}

    <!-- SNS microblogging -->

    {{ with .Site.Social.twitter }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://twitter.com/{{ . }}" target="_blank"><i class="fa fa-twitter-square fa-fw"></i>Twitter</a>
    </li>
    {{ end }}

    {{ with .Site.Social.gnusocial }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="{{ . }}" target="_blank"><i class="fa fa-comment fa-fw"></i>GNU social</a>
    </li>
    {{ end }}

    {{ with .Site.Social.facebook }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://facebook.com/{{ . }}" target="_blank"><i class="fa fa-facebook-square fa-fw"></i>Facebook</a>
    </li>
    {{ end }}

    {{ with .Site.Social.googleplus }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://plus.google.com/+{{ . }}" target="_blank"><i class="fa fa-google-plus-square fa-fw"></i>Google+</a>
    </li>
    {{ end }}

    {{ with .Site.Social.weibo }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="http://weibo.com/{{ . }}" target="_blank"><i class="fa fa-weibo fa-fw"></i>Weibo</a>
    </li>
    {{ end }}

    <!-- SNS photo/video sharing -->

    {{ with .Site.Social.instagram }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://instagram.com/{{ . }}" target="_blank"><i class="fa fa-instagram fa-fw"></i>Instagram</a>
    </li>
    {{ end }}

    {{ with .Site.Social.flickr }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://flickr.com/photos/{{ . }}" target="_blank"><i class="fa fa-flickr fa-fw"></i>Flickr</a>
    </li>
    {{ end }}

    {{ with .Site.Social.pinterest }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://pinterest.com/{{ . }}" target="_blank"><i class="fa fa-pinterest-square fa-fw"></i>Pinterest</a>
    </li>
    {{ end }}

    {{ with .Site.Social.youtube }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://youtube.com/user/{{ . }}" target="_blank"><i class="fa fa-youtube-square fa-fw"></i>YouTube</a>
    </li>
    {{ end }}

    {{ with .Site.Social.vimeo }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://vimeo.com/{{ . }}" target="_blank"><i class="fa fa-vimeo-square fa-fw"></i>Vimeo</a>
    </li>
    {{ end }}

    {{ with .Site.Social.vine }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://vine.co/{{ . }}" target="_blank"><i class="fa fa-vine fa-fw"></i>Vine</a>
    </li>
    {{ end }}

    {{ with .Site.Social.slideshare }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="http://slideshare.net/{{ . }}" target="_blank"><i class="fa fa-slideshare fa-fw"></i>SlideShare</a>
    </li>
    {{ end }}

    <!-- SNS career oriented -->

    {{ with .Site.Social.linkedin }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://linkedin.com/in/{{ . }}" target="_blank"><i class="fa fa-linkedin-square fa-fw"></i>LinkedIn</a>
    </li>
    {{ end }}

    {{ with .Site.Social.xing }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://xing.com/profile/{{ . }}" target="_blank"><i class="fa fa-xing-square fa-fw"></i>Xing</a>
    </li>
    {{ end }}

    <!-- SNS news -->

    {{ with .Site.Social.reddit }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://reddit.com/user/{{ . }}" target="_blank"><i class="fa fa-reddit-square fa-fw"></i>Reddit</a>
    </li>
    {{ end }}

    {{ with .Site.Social.hackernews }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://news.ycombinator.com/user?id={{ . }}" target="_blank"><i class="fa fa-hacker-news fa-fw"></i>Hacker News</a>
    </li>
    {{ end }}

    <!-- Techie -->

    {{ with .Site.Social.github }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://github.com/{{ . }}" target="_blank"><i class="fa fa-github-square fa-fw"></i>GitHub</a>
    </li>
    {{ end }}

    {{ with .Site.Social.bitbucket }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://bitbucket.org/{{ . }}" target="_blank"><i class="fa fa-bitbucket-square fa-fw"></i>Bitbucket</a>
    </li>
    {{ end }}

    {{ with .Site.Social.stackoverflow }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://stackoverflow.com/users/{{ . }}" target="_blank"><i class="fa fa-stack-overflow fa-fw"></i>Stack Overflow</a>
    </li>
    {{ end }}

    {{ with .Site.Social.serverfault }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://serverfault.com/users/{{ . }}" target="_blank"><i class="fa fa-server fa-fw"></i>Server Fault</a>
    </li>
    {{ end }}

    <!-- Gaming -->

    {{ with .Site.Social.steam }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://steamcommunity.com/id/{{ . }}" target="_blank"><i class="fa fa-steam-square fa-fw"></i>Steam</a>
    </li>
    {{ end }}

    <!-- Music -->

    {{ with .Site.Social.lastfm }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="http://last.fm/user/{{ . }}" target="_blank"><i class="fa fa-lastfm-square fa-fw"></i>Last.fm</a>
    </li>
    {{ end }}

    <!-- Other -->

    {{ with .Site.Social.keybase }}
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="https://keybase.io/{{ . }}" target="_blank"><i class="fa fa-key fa-fw"></i>Keybase</a>
    </li>
    {{ end }}

<p></p>

    <li class="pure-menu-item">
<a href="http://reader.livedwango.com/subscribe/http://benkyosukisuki.com/index.xml" target="_blank" title="Subscribe with Live Dwango Reader"><img src="http://image.reader.livedwango.com/img/banner/80_15_1.gif" border="0" width="80" height="15" alt="Subscribe with Live Dwango Reader"></a>
    </li>

<p></p>

    <li class="pure-menu-item">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fbenkyosukisuki.com%2Findex.xml'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a>
    <li class="pure-menu-item">
    </li>

  </ul>
</div>

shortcodes

fluid_img.html

{{ if .IsNamedParams }}
<div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}pure-u-1{{ end }}">
  <img class="pure-img" src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}>
</div>
{{ else }}
<img class="pure-img" src="{{ index .Params 0 }}" alt="">
{{ end }}

taxonomy

category.html

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>

<div class="content">
  {{ range (.Paginator 10).Pages }}
    {{ .Render "summary"}}
  {{ end }}
</div>

{{ partial "paginating.html" . }}
{{ partial "footer.html" . }}

tag.html

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>

<div class="content">
  {{ range (.Paginator 10).Pages }}
    {{ .Render "summary"}}
  {{ end }}
</div>

{{ partial "paginating.html" . }}
{{ partial "footer.html" . }}

topic.html

{{ partial "header.html" . }}

<div class="header">
  <h1><a href="/" rel="nofollow" target="_blank">{{ .Title }}</a></h1>
</div>

<div class="content">
  {{ range (.Paginator 10).Pages }}
    {{ .Render "summary"}}
  {{ end }}
</div>

{{ partial "paginating.html" . }}
{{ partial "footer.html" . }}

static

css

blackburn.css

.header {
/*  font-family: "Raleway", Helvetica, Arial, sans-serif;  */
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Osaka,sans-serif,arial,verdana,Helvetica,Verdana,"Droid Sans",Arial;
   font-weight: 500;
}

a {
  color: #0d6295;
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}
a:visited {
  color: #265778;
}

.small-print {
        color: #999; /* ここを付け加えた */
  font-size: 0.8em;
  margin: 0.6em;
}

.post-meta {
  font-size: 90%;
}

article > footer {
  text-align: right;
}

.prev-next-post {
  margin-top: 2em;
  padding-top: 2em;
  padding-bottom: 2em;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.prev-next-post .prev {
  float: left;
  text-align: left;
  overflow: hidden;
}

.prev-next-post .next {
  float: right;
  text-align: right;
  overflow: hidden;
}

#menu .brand {
  font-weight: normal;
  font-size: 1em;
  letter-spacing: 0.1em;
  text-transform: none;
  background: transparent;
  text-decoration: none;
  margin: 0.5em 0;
}

#menu .pure-menu {
  font-size: 0.9em;
}

i {
  display: inline-block;
  margin-right: 0.2em;
}

.pagination {
  text-align: center;
  margin-top: 3em;
}

.pagination a {
  color: #265778;
}




/* (0)ここから挿入した */

div.cover {
        display: table;
        border-spacing: 1px;
        margin: 8px 0px;
        padding: 0px;
        width: 100%;
        background-color: #e1e6d8;
    }
    div.cover div.box1 {
    border: solid 1px #CCCCCC;
        display: table-cell;
        margin: 0px;
        background-color: #ffffff;
        padding: 0.5em 0.5em;
        width: 50%
    }
    div.cover div.box2 {
    border: solid 1px #CCCCCC;
        display: table-cell;
        margin: 0px;
        background-color: #ffffff;
        padding: 0.5em 0.5em;
    }



div.cover {
        display: table;
        border-spacing: 1px;
        margin: 8px 0px;
        padding: 0px;
        width: 100%;
        background-color: #e1e6d8;
    }
    div.cover div.hako1 {
        display: table-cell;
        margin: 0px;
        background-color: #ffffff;
        padding: 0.5em 0.5em;
        width: 25%
    }
    div.cover div.hako2 {
        display: table-cell;
        margin: 0px;
        background-color: #ffffff;
        padding: 0.5em 0.5em;
        width: 25%
    }
    div.cover div.hako3 {
        display: table-cell;
        margin: 0px;
        background-color: #ffffff;
        padding: 0.5em 0.5em;
        width: 25%
    }
    div.cover div.hako4 {
        display: table-cell;
        margin: 0px;
        background-color: #ffffff;
        padding: 0.5em 0.5em;
    }

/* (0)ここまで挿入した */




/* (1)ここから挿入した */

.button-1 {
    display: inline-block;
    width: auto;
    padding: 8px;
    margin: 5px;
    height: auto;
    text-align: center;
    text-decoration: none;
    line-height: 22px;
    outline: none;
}
.button-1::before,
.button-1::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button-1,
.button-1::before,
.button-1::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-radius: 4px;
}

.button-1 {
    background-color: #ccffe6;
    color: #333;
}
.button-1:hover {
    background-color: #3762af;
    color: #fff;
}

/* (1)ここまで挿入した */




/* (1)ここから挿入した */

.button-2 {
    padding: .55em .75em .55em .75em;
    position: relative;
    background-color: #f7d034;
    border-radius: 4px;
    color: #0d6295;
    line-height: 52px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #f7ba59;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.button-2:hover {
    top: -4px;
    box-shadow: 0 7px 0 #f7ba59;
}
.button-2:active {
    top: 3px;
    box-shadow: none;
}

/* (1)ここまで挿入した */




/* (1)ここから挿入した */

.button-3 {
    padding: .55em .75em .55em .75em;
    position: relative;
    background-color: #99ccff;
    border-radius: 4px;
    color: #0d6295;
    line-height: 52px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #66b3ff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.button-3:hover {
    top: -4px;
    box-shadow: 0 7px 0 #66b3ff;
}
.button-3:active {
    top: 3px;
    box-shadow: none;
}




/* (1)ここまで挿入した */




/* h2タグのデザイン設定 */


h2 {
    padding: .65em 0 .5em .75em;
    border-left: 16px solid #d7847e;
    border-bottom: 1px solid #d7847e;
    background-color: #fbf3f2;
    border-radius: 4px;
}


h3 {
    padding: .65em 0 .5em 1.3em;
    border-left: 10px solid #82c0cd;
    border-bottom: 1px solid #82c0cd;
    background-color: #eff7f9;
    border-radius: 4px;
}

h4 {
    padding: .65em 0 .5em 1.8em;
    border-left: 6px solid #c8d627;
    border-bottom: 1px solid #c8d627;
    background-color: #f9fbe8;
    border-radius: 4px;
}

h5 {
    padding: .65em 0 .5em 2.4em;
    border-left: 3px solid #e4ab5a;
    border-bottom: 1px solid #e4ab5a;
    background-color: #fdf9f4;
    border-radius: 4px;
}




/*

h2 {
    padding: .25em 0 .5em .75em;
    border-left: 16px solid #d7847e;
    border-bottom: 1px solid #d7847e;
}


h3 {
    padding: .25em 0 .5em 1.3em;
    border-left: 10px solid #c8d627;
    border-bottom: 1px solid #c8d627;
}


h4 {
    padding: .25em 0 .5em 1.8em;
    border-left: 6px solid #82c0cd;
    border-bottom: 1px solid #82c0cd;
}

h5 {
    padding: .25em 0 .5em 2.4em;
    border-left: 3px solid #e4ab5a;
    border-bottom: 1px solid #e4ab5a;
}

*/




.sns_feedly span{
    font-size: 25px;
    color: #6CC655;
}

.sns_facebook span{
    font-size: 25px;
    color: #265a96;
}

.sns_twitter span{
    font-size: 25px;
    color: #00acec;
}

.sns_hatebu span{
    font-size: 25px;
    color: #006fbb;
}

.sns_pocket span{
    font-size: 25px;
    color: #EE4256;
}

.sns_googleplus span{
    font-size: 25px;
    color: #dd4b39;
}

.sns_line span{
    font-size: 25px;
    color: #2cbf13;
}

.sns_feed span{
    font-size: 25px;
    color: #ff9900;
}

.sns_youtube span{
    font-size: 25px;
    color: #e22d26;
}




/* (0)ここから挿入した */

#page-top {
    position: fixed;
    bottom: 5px;
    right: 5px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    background: rgba(0,0,0,0.15);
    text-decoration: none;
    color: #fff;
    width: 13px;
    padding: 8px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

/* (0)ここまで挿入した */

side-menu.css

body {
    color: #333333;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 0;
}
    #layout.active #menu {
        left: 150px;
        width: 150px;
    }

    #layout.active .menu-link {
        left: 150px;
    }
/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6em;
}

.header {
     margin: 0;
     color: #333;
     text-align: center;
     padding: 2.5em 2em 0;
     border-bottom: 1px solid #eee;
 }
    .header h1 {
        margin: 0.2em 0;
        font-size: 1.25em;
        font-weight: 300;
    }
     .header h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }

.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
}



/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: -150px; /* "#menu" width */
    width: 150px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
    /*
    All anchors inside the menu should be styled like this.
    */
    #menu a {
        color: #999;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu .pure-menu,
     #menu .pure-menu ul {
        border: none;
        background: transparent;
    }

    /*
    Add that light border to separate items into groups.
    */
    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu .pure-menu li a:hover,
        #menu .pure-menu li a:focus {
            background: #333;
        }

    /*
    This styles the selected menu item `<li>`.
    */
    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
        background: #1f8dd6;
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu .pure-menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu .pure-menu-heading {
        font-size: 110%;
        color: #fff;
        margin: 0;
    }

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.035);
    font-size: 7px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.4em 1.8em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #aaa;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }


/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #layout {
        padding-left: 150px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 150px;
    }

    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }

    #layout.active .menu-link {
        left: 150px;
    }
}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 150px;
    }
}

side-menu-old-ie.css

body {
  color: #333333;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
Add transition to containers so they can push in and out.
*/

#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/

#layout {
    position: relative;
    padding-left: 0;
}

#layout.active #menu {
    left: 150px;
    width: 150px;
}

#layout.active .menu-link {
    left: 150px;
}

/*
The content `<div>` is where all your content goes.
*/

.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6em;
}

.header {
    margin: 0;
    color: #333;
    text-align: center;
    padding: 2.5em 2em 0;
    border-bottom: 1px solid #eee;
}

.header h1 {
    margin: 0.2em 0;
    font-size: 3em;
    font-weight: 300;
}

.header h2 {
    font-weight: 300;
    color: #ccc;
    padding: 0;
    margin-top: 0;
}

.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
}

/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: -150px;
    /* "#menu" width */
    width: 150px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    /* so the menu or its navicon stays above all content */
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*
    All anchors inside the menu should be styled like this.
    */

#menu a {
    color: #999;
    border: none;
    padding: 0.6em 0 0.6em 0.6em;
}

/*
    Remove all background/borders, since we are applying them to #menu.
    */

#menu .pure-menu,
#menu .pure-menu ul {
    border: none;
    background: transparent;
}

/*
    Add that light border to separate items into groups.
    */

#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    border-top: 1px solid #333;
}

/*
        Change color of the anchor links on hover/focus.
        */

#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
    background: #333;
}

/*
    This styles the selected menu item `<li>`.
    */

#menu .pure-menu-selected,
#menu .pure-menu-heading {
    background: #1f8dd6;
}

/*
        This styles a link within a selected menu item `<li>`.
        */

#menu .pure-menu-selected a {
    color: #fff;
}

/*
    This styles the menu heading.
    */

#menu .pure-menu-heading {
    font-size: 110%;
    color: #fff;
    margin: 0;
}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/

.menu-link {
    position: fixed;
    display: block;
    /* show this only on small screens */
    top: 0;
    left: 0;
    /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.015);
    font-size: 7px;
    /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

.menu-link:hover,
.menu-link:focus {
    background: #000;
}

.menu-link span {
    position: relative;
    display: block;
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: 0.2em;
}

.menu-link span:before,
.menu-link span:after {
    position: absolute;
    margin-top: -0.6em;
    content: " ";
}

.menu-link span:after {
    margin-top: 0.6em;
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/

.header,
.content {
    padding-left: 2em;
    padding-right: 2em;
}

#layout {
    padding-left: 150px;
    /* left col width "#menu" */
    left: 0;
}

#menu {
    left: 150px;
}

.menu-link {
    position: fixed;
    left: 150px;
    display: none;
}

#layout.active .menu-link {
    left: 150px;
}

icomoon

demo.html

Read Me.txt

selection.json

style.css

demo-files

demo.css
demo.js

fonts

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

img

apple-touch-icon-precomposed.png

「apple-touch-icon-precomposed.png」をここに置いているのは、単に自分の都合です。 ウェブサイト構築上の意味は、まったくありません。 「apple-touch-icon-precomposed.png」の本体は、このサイトのトップページと同じ階層に置いてあります。そうするとiOSが勝手に探索してくれます。 「apple-touch-icon-precomposed.png」を使えば、iPhoneやiPadなどで、このサイトへのリンク(いわばブックマーク)が登録できるわけです。

favicon.ico

「favicon.ico」を、ここに置いておけば、テンプレートが勝手にやってくれます。

js

FirefoxでいうFirebugなど、サイトのコードを辿るプラグインを使えば、JavaScriptのファイルの中身は見えます。 必要な人はどうぞ。

jquery.toc.js

masonry.pkgd.min.js

tree.js

ui.js

 
comments powered by Disqus