みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

初心者の私がテーマ制作で重宝した!便利サイト・ツールのまとめ

はてなブログのテーマ制作をするにあたり、様々なサイトを参考にしました。

Web全般

coliss
外国のサイトの記事を翻訳して紹介されているサイト。Webに関することはなんでも。アイコンやフォントを紹介されていたり、便利なコードのまとめなどもあるので、読んでいるだけでワクワクします。いろんなテクニックについても記事に上がっているので、おすすめです。

Webデザイン系

サルワカ
「サルでも分かる」をキャッチコピーに、わかりやすくhtmlやcssのことを記事にされているサイト。コピーペーストで使えるデザインも多数あり、初心者でも凝ったデザインを実現できます。

クイックリファレンスサイト

とほほのWWW入門
昔からある(と記憶しています)入門者向けサイト。HTMLやCSSの他、JavaScriptなどのプログラミング言語についても。様々な調べ物をするのにとても大助かりなサイトです。
MDN Web Docs
実践用の記事もあり、手を動かしながら学ぶこともできる。もちろん辞書的な使い方もでき、わからない用語や、「これってどう使うんだっけ?」という現象も解決できる。

便利ツール

GoogleFonts
Googleのフォントサービス。テーマ制作に凝ったフォントを使いたい時などに。ただ使用するとちょっとサイトが重くなる印象です。
SassMeister
SCSSからCSSコンパイルした結果を見ることができる。他、htmlも見ることができるので、練習や、挙動確認にも使えます。かなり使用頻度の高いツールです。GitHubとの連携も可能。

圧縮ツール

PNG to JPG
pngファイルからjpgに変換できるサイト。はてなブログpngをアップすると、サイズを落としていてもなぜか大きくなってしまうので、jpgに変換しています。
Optimizilla
JPEGPNGイメージを最小サイズに圧縮するツール。まとめてアップロードもできる。
compressjpeg
画像圧縮ツール。jpg、pngの他、pdf、svg、GIFにも対応しています。

配色参考

原色大辞典
カラーコードが見れるサイト。色を検索することもできる。検索すると、似たようなカラーが一覧で出るので、「ちょっと濃い方がいいな」「ちょっと薄い方がいいな」なんて時にも簡単に探し出すことができます。
Scheme Color
いろんな色の配色サンプルが置いてあるサイト。パステル調からビビッド調まで様々。気に入った配色をストックしておくと、テーマ制作が捗ります。
画像から色を取得するツール|PECO STEP
その名の通り、画像ファイルをアップして、カラーコードを調べることができます。テーマ制作時の配色に統一感を出したい時など。

モックアップ

MockUPhone
テーマ投稿時のスクリーンショット画像を、スマホやPCの画面に嵌め込んだ画像にするために使用。

Git関連

サル先生のGit入門
Gitに関することがポップなイラスト付きでわかりやすく書かれています。入門〜発展、逆引きもできるため重宝するかと思います。
GitHub
言わずと知れたソフトウェア開発のプラットフォーム。はてなブログのテーマもここからインストールできる。

質問サイト系

Qiita
プログラミングに関することならこのサイトがおすすめ。いろんなプログラマーの方々が検証記事を上げてくれている。わからないことは質問することもできる。

プログラミングを学ぶなら

  • 独学に限界がある!
  • 誰かに教わりたい

なんて時はスクールに通うのもありですね。

「デジタルハリウッドSTUDIO by LIG」 は、実際のWeb制作会社が運営しているWebクリエイター養成スクール。
そのため、現役クリエイターが指導する他、スクールでは全員がMacを用いたデュアルディスプレイ環境で学ぶことができる。
スクールでは、学ぶだけでなく、コンサルタントによる手厚い就職支援も保証されているため、他業界からの転職を視野に入れている方にもおすすめ。 もちろん、すでにプログラミングをかじっている方にも、スキルアップにおすすめです。

Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】

SCSSで変数を定義

はてなブログテーマ制作に、「Boilerplate」を使用した場合、変数用のファイルとして、「_variable.scss」というファイルが存在します。
このファイルの中身を参考に、自分なりに色々と変数を作っていきます。

テーマ制作を二つ、三つとする場合も、変数を作っておけば引き継ぎが簡単ですし、スタイルの変更も楽だし、とってもおすすめです。

BoilerplateについてはGitHub参照

Boilerplate|GitHub

SCSSでの開発環境を設定する方法

micchelabo.hatenablog.com
続きを読む

.zsh_profile に.zshrcを読み込む設定方法【Node.js関連】

以前の記事ではてなブログのテーマ制作のために、環境構築をしました。

以前の記事 micchelabo.hatenablog.com

その過程でNode.jsをインストール。
いろいろインストール方法があるようですが、私はNode.js 用パッケージ管理ツール「nodebrew」を使用してインストールしました。

Node.jsを実行するために.zshrcにパスを通すのですが、ターミナルを閉じるとまたパスを通さないといけなくなり、毎回打つのは面倒。

ということで、毎回呼び出さなくてもいいようにする方法をまとめました。

npmが見つからない時のパスの通し方は以下の記事参照 micchelabo.hatenablog.com

パスを通すについて詳しく書かれているサイト様

PATHを通す方法

続きを読む

Macではてなブログテーマ制作その2【設定とテーマ投稿】

前回、ターミナルでテーマ制作のための環境構築を行い、「Boilerplate」をダウンロード、Sassでの制作環境を整えました。

前回の記事 micchelabo.hatenablog.com

今回はその続きになります。

いよいよSCSSファイルを編集して、テーマ制作に入っていきます。
その前に、ブログ側の設定を少しだけしてあげる必要があるので、合わせてご紹介します。

この記事でわかること

テーマ制作におけるデザイン確認用のはてなブログをまだ作っていない方は、「はてなブログとは」よりブログを作ってください。

もしくは、ダッシュボード => マイブログ より新しいブログを作ってください。

ブログ作成
ブログ作成

続きを読む

ターミナルでのパスの通し方

はてなブログのテーマ制作のため、ターミナルでNode.jsをインストールした後で、npmが見つからないことがありました。

Node.jsのインストールに関しては以下サイト様参照

ターミナルを使ったインストール方法

いろいろ調べた結果、パスが通ってないことが問題のようでした。
あちこちのサイトでやり方を参照し、トライしましたがどうもうまくいかない。

結局原因は自分のシェルがzshだったこと。

最近のMacOSではデフォルトでzshとなっているようです。
bashでのやり方を参照していたためうまくいきませんでした。

ということで以下、zshでのやり方をまとめておきます。

ターミナルでパスを通す方法

.zshrcファイルに書き加える必要があります。

npmが見つからない時はパスが通っていない可能性大。
(node -vはあるのにnpm -vはないよーって時)

以下パスを通すための流れ。

npmが見つからない時

入力npm -v
結果zsh: command not found: npm

となり、「npmは見つかりませんよ!」と表示された場合

1.自分がzsh or bashどちらかを把握する。

入力echo $SHELL
結果/bin/zsh

この場合は自分のシェルはzshです。

2. .zshrcファイルがあるかどうか見つける

入力ls -a
結果

.            .node_repl_history  Library
..          .nodebrew       Movies
.CFUserTextEncoding .viminfo        Music
.DS_Store       .zprofile       Pictures
.Trash          .zsh_history        Public
.bash_profile       Desktop         github
.bashrc         Documents
.gitconfig      Downloads

ここで欲しい.zshrcがないことを確認。
.bashrcはあるがターミナルのシェルがzshのため、うまくいかない。

3.touchコマンドで.zshrcファイルを作る

作るために、

入力touch .zshrc

これで.zshrcという空ファイルが作られました。

touchコマンド
空のファイルを作るコマンド。

4.作った.zshrcファイルを開いて編集

入力open ~/.zshrc

でファイルを開き、中身を編集。 テキストエディタなどで開いて、ファイルの中身を直接書き込みます。

nodebrewで管理している場合は
export PATH=$HOME/.nodebrew/current/bin:$PATH
と入力。

$HOMEは自分のホームディレクトリのこと。

5.sourceで反映させる

入力source ~/.zshrc

追記した内容を反映。
これを行わないとエディタで追記した内容が反映されないので注意。

sourceコマンド
ファイルに書かれたコマンドを現在のシェルで実行するコマンド。

ファイルの中身をシェルに反映させるために使用。

6.確認

入力node -vや、
入力npm -vできちんとバージョンが表示されればパスは通ってます。

.zsh_profile に.zshrcを読み込む設定方法【Node.js関連】

npmのパスが通ったら、こちらの設定も合わせて行うのをおすすめします。

micchelabo.hatenablog.com

パスが通せたらテーマ制作へ戻りましょう!

micchelabo.hatenablog.com

Macではてなブログテーマ制作その1【環境構築方法】

私が初めてはてなブログのデザインテンプレート(テーマ)を制作した時、ターミナルやGitHubについて何も知らず、かなり初めから手こずりました。

いろんなサイトを参考に四苦八苦しながら、なんの知識もない初心者の私テンプレート制作するまでに至った経緯をまとめています。

一度うまくいった後、二度目にまたつまづいたので、当時のメモを見ながら記事にしています。

尚、開発環境はMacになりますので、Windowsのやり方はわかりません。ご了承ください。

環境構築の前にSSHKeyとGitHubに登録を済ませましょう micchelabo.hatenablog.com

Node.jsのインストールも済ませましょう

[Node.js]ターミナルを使ったインストール方法

Node.jsでうまくいかない時に参照する記事 micchelabo.hatenablog.com micchelabo.hatenablog.com

こんな方におすすめ

ちなみにこの記事で紹介しているのは、テーマをダウンロードして、デザインからCSSを追加していくカスタマイズの方法ではなく、一からテンプレート制作(テーマ制作)をしていく場合の方法になります。

デザインからCSSを追加していくカスタマイズについてはおいおい書いていこうと思いますので、しばしお待ちくださいませ。

この記事でわかること
  • 初心者でもターミナルから「Boilerplate」テーマをダウンロードする方法
  • ターミナルでnmpをインストールする方法
  • SCSSでの開発環境を整える方法
続きを読む

Macではてなブログテーマ制作の事前準備【SSH Key作成】

この記事では、Macはてなブログのテーマ制作をするための事前準備として、ターミナルでのSSH Key作成と、GitHubで新しくSSH Keyを作成する方法を紹介しています。

この記事を読んでわかること
  • ターミナルで自分のPCにSSHKeyを作る方法と確認方法
  • GitHubにSSHKeyを登録する方法
続きを読む