Aikの技術的な進捗部屋

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

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

はてなブログ、もう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を参考に作りました。
他要素との差別化のため、後ろを半透明な黒色で覆ったりしましたが…ダサくなってないかなぁ。

とりあえずは完成

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

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