じゅむてっくブログ

"人力ななぴ"管理人jumのtechblog

CSSを編集して、オリジナルテーマではてなブログを開設しました!

初めまして、
jumです。

システムエンジニアとして働きつつ、
『人力ななぴ』という生活ノウハウサイトを運営しています。

jinriki-nanapi.net

生活ノウハウサイト『人力ななぴ』

現在の仕事では、
JavaCOBOL(笑)で業務アプリケーションの保守をしています。

このままだと死にゆく技術と心中する気しかしないので、
プライベートなプロジェクトや勉強で細々と技術的なポートフォリオを広げています。

『人力ななぴ』もその一つです。

完全にnanapiにけんかを売ったようなタイトルですが、
けんすうさんのブログ投稿とか好きです(露骨な保身)。

nanapiってスポット的にノウハウを探すにはとてもいいサイトだと思うんです。

ただ、
自分の生活を根本から変えたい!効率化したい!ってなると、
もっと1つの思想の下で、体系化されたノウハウ集みたいなものの方がいいのかなと。

で、探しても見つからなかったので、
自分で作るかーとなって作ったものです。

nanapiはクラウドソーシングで記事を集めて1000人力とかで作られていますが、
こっちは1人力じゃーということで、
1人力ななぴを略して"人力ななぴ"です。

本家nanapiにタイトル変えろと言われたら、
インクリメントして"人力はちぴ"にしますね。

2016年2月にオープンした人力ななぴは、
ほぼ初めて触るwordpressで無謀にも自作テーマのWebサイトを構築し、
今もシンプルすぎて不安になる出来栄えになっています。

まあ、私の成長に合わせて、
数年(数十年?)かけて少しずつ良くしていきましょうねー。

faviconを設定したのになぜか反映されないのが悩みです。

ブログを始めた理由

Webサイト持ってるならそっちで情報発信すればブログなんていらない、
そう思っていた時期もありました。

しかし、
人力ななぴは生活ノウハウサイトなのでそれ以外のことを書くとアイデンティティが薄まるし、
あくまでもブログじゃなくて一般のWebサイトとして運営したかったのです。

ガチガチの教科書みたいな文体なので、
ゆるーく雑に書きたいことを書く感じでもないですし。

でも、日々学んでいく技術的なことを記録、発信したいという欲求もあり、
全くべつのドメインでブログを持つことにしました。

オリジナルテーマのはてなブログ

はてなブログにしたのは、
はてなが好きだからです。

はてブホッテントリは毎日目を通しています。

既存のテーマでもよかったのですが、
どうせ人力ななぴと同様、シンプルなデザインにしようと思っていたので、
オリジナルテーマで始めました。

オリジナルテーマと言っても全然たいしたことはしていなくて、
はてなが公開しているサンプルテーマのCSSを落として、
気になるところをちょこちょこ直しただけです。

他の人が使えるように、はてな上に公開することもできるようですが、
自分だけが使う想定なので、特に公開もしていません。

超初心者向け、はてなオリジナルテーマ作成手順入門

初心者がはてなでオリジナルテーマを作る手順をさっくり説明します。

1. オリジナルテーマ制作の手引きを読む

はてな公式の、制作手引きに目を通します。

help.hatenablog.com

よくわからないところは飛ばして、
「テーマを作成する準備」とかを確認します。

2. はてなでテストブログを開設する

テーマ確認用のテストブログを作ります。

はてなダイアリー

公開範囲を「自分のみ」にし、
たとえCSSをぶっ壊して一時的にグロいデザインになっても、
世界中の人に見られないようにします。

今後も本番用ブログのデザイン変更をしたいときは、
テスト用ブログで試してから、コミットするのがいいのでしょう。

3. サンプルエントリーを投稿する

はてな公式のサンプルエントリー用投稿文をコピーして、
テストブログに新しい記事として投稿します。

サンプルエントリーでは意図的にHTMLの要素が網羅されているので、
CSS変更がどう反映されるかをもれなく確認できるわけです。

help.hatenablog.com

4. サンプルテーマをローカルにコピーする

はてな公式のサンプルテーマがgithubに公開されているので、
ローカルにコピーします。

.cssと.less(cssを構造化したり変数が使えるようにしたやつ)の両方がありますが、
対して大掛かりな変更する予定もないので、
コンパイルが必要な.lessはやめて、.cssを使います。

未熟すぎてgithubとかよくわからないのですが、
CSSが表示された領域の右上のRawボタンを押すと、
生のCSSが表示されます。

それを全選択、コピーし、
適当なテキストエディタを立ち上げて貼り付け、
blog.cssなど適当な名前(以下、blog.cssとする)で、適当な場所に保存します。(適当)

github.com

4. テストブログにサンプルテーマを適用する

テストブログの設定画面を開き、
「デザイン」の項目をクリックします。

すると、デザイン変更用のサイドバーと、
実際のテストブログ画面が表示されます。

サイドバーのスパナマークを選び、
「デザインCSS」をクリックすると、
現在のCSSが表示されます。

f:id:jum_jinrikiNanapi:20160703084333p:plain

ここを変更して、
サイドバー上部の「変更を保存する」ボタンを押すと、
右のテストブログに反映されるという流れです。

blog.cssのサンプルテーマを全選択、コピーし、
テストブログのcssを上書きしてから、「変更を保存する」を押します。

5. cssを編集してオリジナルテーマを作る

いま設定画面に表示されているテストブログ画面が、
サンプルテーマのデザインとなります。

このデザインを見ながら、 1. 変えたいところを見つける 2. blog.cssを編集する 3. テストブログにcssを適用する を繰り返して、自分のイメージするデザインに近づけていきます。

私も含め、初心者が一番難しく感じるのは、
ある場所のデザインを変えたいけど、
cssのどこをいじればいいかわからないという点だと思います。

そんなときは、
Google Chromeでテストブログを表示し、
デザインを変えたい箇所を選択した状態で、
右クリック→「検証」を押します。

すると、
あら不思議、
htmlの該当箇所と、そこに適用されているcssが下に表示されます。

f:id:jum_jinrikiNanapi:20160703090213p:plain

慣れた人には当たり前の機能ですが、
初めて見たときは、こんなことできるんか!?と感動ものでした。

これを見ながら、
class名や要素名でblog.css内を検索し、
修正、反映して、
思った通りにデザインが変わるかを検証します。

地道な作業を繰り返し、
自分の目指すテーマに近づけていきます。

そもそもcssわからん!っていう人は、
ドットインストールでも見ながらポチポチcss書いて慣れましょう。

http://dotinstall.com/lessons/basic_css_v3dotinstall.com

6. 本番ブログにテーマを適用する

テストブログで大体のデザインができたら、
本番ブログを開設して、
作成したcssを適用します。

ブログを運営する中で気になる点も出てくると思うので、
最初に完璧なcssを書こうとせずに、
8割の満足度のものができたら、
とっとと本番ブログを作りましょう。

css適用手順は、
テストブログに適用したときと全く同じです。

ブログの公開範囲を「すべての人に公開」にし、
世界中に公開します。

以上で、
オリジナルテーマではてなブログを開設できました。

簡単ですね!!!
はてなのエンジニア様に感謝です。

これからもこのブログで、
主に初心者向けの技術情報を公開していきますので、
世界中のみなさま、今後ともよろしくお願いします。