Web制作がはかどる!暗記すると便利なカラーコード集

Webサイトを制作する上でよく使うカラーコードは、暗記しておくとスピードアップに繋がり便利です。

今回は汎用性が高く、かつ単純で覚えやすいカラーコードをまとめました。普段のWeb制作にお役立てください。この記事では主に無彩色を取り扱います。

黒系

文字色やダークテーマを取り扱う上で欠かせない黒系色です。白背景に対する文字色は、真っ黒ではなく少し淡い#333あたりが読みやすいとされています。

カラーコード 色見本
#000000
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999

灰色系

いろいろな場面で応用のきく灰色系です。白背景の上で灰色の枠線で囲みたいときは、この辺りの色と親和性が高いです。

カラーコード 色見本
#aaaaaa
#bbbbbb
#cccccc
#dddddd
#eeeeee

白系

白に近い灰色です。主に記事背景色(#fff)と組み合わせて使います。

カラーコード 色見本
#f1f1f1
#f2f2f2
#f3f3f3
#f4f4f4
#f5f5f5
#f6f6f6
#f7f7f7
#f8f8f8
#f9f9f9
#ffffff
カラーコード 色見本
#f4f5f5
#f4f5f6
#f4f5f7
#f4f5f8
#f4f5f9

こちらは赤みの少ない灰色です。

その他

主にデバッグに使う派手な色です。要素の範囲を視覚的に捉えたいときなどに、一時的に使いましょう。

カラーコード 色見本
#ff0000
#0000ff
#ffff00

Hexoでheadに挿入されるmeta name="generator"タグを消す

Hexoではデフォルトで、間に下のようなmetaタグが自動で挿入されます。

1
<meta name="generator" content="Hexo 3.8.0">

タグの役目

meta要素で、文書の作成に使用したソフトウェア名を示すことができます。
HTMLタグ/ページ全般タグ/アプリケーション情報を示す - TAG index

どうやら、このサイトは〇〇〇で作ったぞ!!とアピールするための物のようです。このタグの存在によって、SEO的に有利になるということは無いでしょう。

さらには、WordPressのような動的サイトだと攻撃の対象にされて、セキュリティ的にリスクを抱える結果になりそうです。

Hexoのような静的サイトだと特段問題はありませんが、そもそも不要なので削除します。

タグの消去

meta_generatorjsをフィルターでオフにします。下のjsを書き込んだファイルを、テーマフォルダの中のscriptsフォルダに配置してください。

Hexoは、scriptsフォルダの中に置いたjsファイルは自動で全て読み込みます。

1
hexo.extend.filter.unregister('after_render:html', require('../../../node_modules/hexo/lib/plugins/filter/meta_generator'));

AndroidのMarkdownエディタをいろいろ試してみる

スマホでブログを書きたい

静的サイトジェネレーターだとWordPressのように管理画面がないので、スマホからは更新できないのですが、外出先でたまに記事を書きたいことがあるので、スマホでも記事を書けるように、Androidのテキストエディタを比較してみます。

ちなみに自分が想定しているスマホでのブログ更新の流れは、

  1. スマホでMarkdownで記事を書きDropboxへ保存する
  2. (家に帰ってきたら)PCでMarkdownファイルをDropboxからブログのレポジトリに移動させる
  3. Atomで微調整してGitでリモートへpushする

のような感じです。なので、Dropboxと同期のとりやすいスマホエディタを探してみます。

エディタ比較

Simple Markdown

Simple Markdownの編集画面

アプリのアイコンをタップすると、いきなり新規編集画面になります。 この潔さはかなり良いです。Dropboxへの保存は、Android標準の共有機能を使って行います。

ただし、Dropboxから直接ファイルを開けないみたいなので、書きかけのファイルを編集したいときは、Dropboxアプリからスマホへ保存してからエディタで開く、という二度手間になりそうです…。

neutriNote

neutriNoteの編集画面

正規表現で検索できたり数式を入力できたり、高機能で、使いこなせばかなり便利そう。

Dropboxへファイルを取り出すのは少し面倒。

Textie

Textieの編集画面

UIはかなりシンプルで試した中では一番好きです。Markdownでよく使う記号もキーボードを切り替えずに即入力できるのでとても楽です。

スマホ本体、もしくはTextie専用のアカウントへ保存するので、Dropboxなどのクラウドストレージには保存できない模様。

JotterPad

JotterPadの編集画面

スマホエディタの中でも一番人気のアプリです。Markdown以外でもtxtファイルも作成できます。

さらに、Dropboxなどのクラウドストレージと連携すれば、そのまま中身を表示して編集できるので、PCとの同期も楽チンです。フォルダの構成を工夫すれば、Evernote代わりにもなりそうです。

アプリ自体は無料で使えるものの、「アップグレードをしましょう」の文字が頻繁に表示されたり、Markdownのプレビューができなかったり、あまり使い物にならないです。アプリの購入は買い切り型なので、無料版は体験版だと割り切って、有料版を購入すると、快適に使えると思います。

結論

JotterPadとDropbox連携がかなりお手軽だったので、しばらくはJotterPadを使ってみたいと思います。

外出先でのちょっとしたスキマ時間に、ブログを書けるようなワークフローがあれば、快適なブログ生活を送れるかもしれません ( ˘ω˘ )