はてなブログのカスタマイズ序の章2

はてなブログ、もう1つ作りました
新ブログのカスタマイズをしよう
とりあえずは完成

序の章その1(本ブログのテーマ選定)はこちら
序の章その3(本ブログの細かなカスタマイズ)はこちら
おまけ的な記事(はてブロの仕様とか小ネタとか)はこちら

はてなブログ、もう1つ作りました

元々技術的な進捗等を載っけるためにスタートしたこのブログですが…。
せっかくなので他の進捗関連もブログに上げようかなと思いました。

ただ、こちらのブログは技術的な方面しか載せる予定が無かった(ドメインも"aik0aaat(Technology)"にしてます)ので、どうしようかと迷いましたが…。

「そうだ、もう1個ブログ作れば良いじゃない」という訳で作っちゃいました。

aik0aaac.hatenablog.com

技術的な事以外の…例えば絵に関する進捗とかメモ等や雑記は、こちらに放りこもうかと。

さて、新しく作ったという事は何が始まるでしょうか…？
そう、新ブログのカスタマイズです！

新ブログのカスタマイズをしよう

新ブログのカスタマイズとはいえ、1回やったしそんなに変更項目ないやろ〜と思ってたのですが…。

それはコーヒーを砂糖壺に淹れて飲むかの様に甘い考えでした。
以下、つまづいた所や再発見した事などを書いていきます。

HEAD要素カスタマイズ忘れ

「違うブログにする訳だし、テーマは変えようと思うけどそれ以外は変更なしで！」
と思い、カスタムテーマを"Harumi"というものにして、シェアボタンとかを付けて終わりかと思ったら全然そんな事はなく。

Fontawesome、jQueryを読み込めずにエラーが出てしまい、ブログ詳細設定からHEAD設定をまた弄ってようやく良い感じになりました。

こういう細かい設定は忘れがちですね…危ない危ない。

ブログドメインの差異

HOME画面やABOUT画面のURLを弄ってた時に、「"aik0aaat"を"aik0aaac"にすればええやろ」と思ってましたが、まさかの404 Not Found。

何でだろうと思ったら、どうやらブログドメインが両者で異なっていた様子。
ブログ開設時に何も気にせずにドメインを適当に選んだ結果がこれだよ！

ちなみにはてなブログのドメインは下記から選択可能で、私のブログはそれぞれここに属してました↓

hatenablog.com <- その他ブログ
hatenablog.jp
hateblo.jp
hatenadiary.com
hatenadiary.jp <- 技術ブログ

せっかくなので、各ドメインの違いを調べてみました…が、各ドメインで特定機能があるとかそんな話は無さそうです。
好みもしくは競合しないかとかで選べば良さそうですね。

アイキャッチ画像

ブログ数が増えてきたので、差別用にアイキャッチ画像を作ることにしました。
差別化してないと、Twitterの投稿ツイートでどっちの投稿をしたか分からなくなりますしね。

アイキャッチ画像なんて使うかなと思ってたけど、意外とすぐに使う場面が出てきてビックリです。

テーマについて

先の項目にも書きましたが、今回は"Harumi"というテーマを使わせて頂くことにしました。
参考: "Harumi"テーマのデモページ

デフォルトのグラデーションカラーも素敵でしたが、せっかくなので独自性を持たせようと下記のサイトで良い感じのグラデーションカラーを調べてみました。
webgradients.com

様々な美しい色ばかりで目移りしちゃいましたが、"#ff9a9e" → "#ff758c"のグラデーションカラーが綺麗だったのでこれに。

色も決めたし、Harumiテーマ作者さんが書いてくれてるソースコードをコピペして色の部分だけ変えれば…と思いましたが…。

グラデーションカラーが全画面に映し出される！

その他ブログのグラデーションカラーを全面に出してしまってる画像

コピペのやり方をミスってしまったのでしょうか…どうしよう。

…と思っていたら、どうやら適用されていたテーマが"Harumi"ではなく"Minimalism"になっていたみたいです。
※"Harumi"作者さんよりコメントでご指摘受け気づく事が出来ました…ありがとうございます！

さて、なぜ"Minimalism"になってたかですが…。
どうやらデザインCSSに原因があったみたいです。

はてなブログのデザインCSSには、開始行にこんな記述があると思います。

/* <system section="theme" selected="テーマ識別番号"> */
@import url("https://blog.hatena.ne.jp/-/theme/テーマ識別番号.css");
/* </system> */

この「テーマ識別番号」が"Harumi"ではなく"Minimalism"のものになっていました。
デザインCSSをもう一つのブログ("Minimalism"適用ブログ)から丸コピしたから、上記のような事態になったのでしょうね…orz。

ちなみにHOMEやABOUTのリンクは技術ブログで使ってるテーマ、"Minimalism"のUIを参考に作りました。
他要素との差別化のため、後ろを半透明な黒色で覆ったりしましたが…ダサくなってないかなぁ。

※2018/09/03追記:
その後色々考えた結果、はてなブログ公式テーマの「EverGreen」にしました。
また、こちらの記事を基に2カラム化もしちゃってます。
他にも色々手を加えています…参考用にデザインCSSも貼っておきますね。

展開する

@media screen and (max-width: 640px){
  #blog-title #title {
      font-size: 21px !important;
  }
}

/* ページ全域の設定 */
body{
  color: #555;
}
.entry-inner{
  font-size: .95em;
  color: #555;
}
a{
  transition: .3s;
}
a:hover{
  opacity: .6;
}

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    width: 1em;
    height: 1em;
    bottom:5vh;
    right:5vw;
    padding: 1.2em;
    font-size: 1.2rem;
    color:#fff;
    text-align: center;
    text-decoration:none;
    background: #aaa;
    border-radius: 100px;
    transition: .5s;
}
/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
    opacity: .8;
}

/* グローバルナビゲーションバーの設定 */
#gnav{
  margin: .5em 0;
  padding: .3em 0;
  text-align: center;
}
#gnav .menu{
  display: inline;
  margin: auto 2em;
  font-size: .8rem;
}
#gnav a{
  color: #888;
  text-decoration: none;
  transition: .5s;
}
#gnav a:hover{
  opacity: .6;
}

/* 目次の設定 */
.table-of-contents{
  padding: 1em;
  padding-left: 1.5em;
  font-size: .9em;
  background-color: #f0f0f0;
}
.table-of-contents::before{
  content: "目次";
  display: block;
  margin-bottom: .5em;
  padding: .5em auto;
  text-align: center;
  border-bottom: 1px dotted #bbb;
}
.table-of-contents a{
  text-decoration:none;
}

/* カテゴリの設定 */
.entry-categories a{
  padding: .5em 1em;
  color: #666;
  text-decoration: none;
  background-color: #eee;
}

/* 目次や箇条書きリストの設定 */
.entry-content ul{
  padding: 1em 3em;
  border: none;
}
.entry-content ul li{
  //padding: .3em;
}

/* h3,h4,h5の設定 */
.entry-content h3{
  margin-top: 3em;
  padding-left: 1em;
  border-left: 8px solid #bbb;
  border-bottom: 2px dotted #ddd;
}
.entry-content h4{
  padding-left: 1em;
  border-left: 5px solid #ddd;
  border-bottom: 2px dotted #ddd;
}
.entry-content h5{
  padding-left: 1em;
  border-bottom: 2px dotted #ddd;
}

/* 各段落ごとのpadding */
.entry-content p{
  margin: 1.6em;
}

/* keyword の設定 */
.keyword{
  text-decoration:none;
  border-bottom: 1px dotted #888;
}

/* 2カラム化 */
/* 参考記事: http://atsushi.hateblo.jp/entry/2015/09/10/143805 */
#main{
  float: left;
  max-width: 600px;
  margin: 0 1.5em;
}
@media screen and (max-width: 1084px) {
  #main {
    float:none;
    margin: 0 auto;
  }
}
.page-archive #main{
  margin: 0 20px 0 40px;
}
@media screen and (max-width: 1084px) {
  .page-archive #main{
    margin: 0px auto 100px;
  }
}
.entry-content {
  font-size:16px;
}
.entry-title {
  font-size: 1.5em;
}

とりあえずは完成

一通りは整えたものの、まだ改良したい部分はたくさんあるので…。
ちょっとずつ取り組みたいと思います。

ぬーんやりたい事が増えていくのぉぉお…。

Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。