ブログでマイルドライナー風マーカーを再現する方法｜カラーコード&CSSあり

ゼブラのマイルドライナーが大好きです。

その名のとおり色味がマイルドなラインマーカーで、手帳にたくさんマーカーしてもチカチカせず、だんだんショボショボしてきた40代のお目々にも優しいところが私は好き。

全35色もあるし、ふんわりした色から渋めの色まで幅広いので誰でも推しカラーが見つけられるんじゃないかな？実際、「みんな大好きマイルドライナー！」ってレベルで大人気ですよね。ちなみに私の推しカラーはこの6色です♡

筆記サンプルもどうぞ。色味がふんわりしてて本当に可愛い……

この間、紙の手帳にマーカーを引いてる時にふと思ったんです。「マイルドライナーの色味をそのままブログのマーカーに設定できたら、めっちゃテンションあがるんちゃう？」と。思いついたらやりますよね。やるぜ。

今回は実際にマイルドライナーの色を自分で抽出して、それをブログのマーカーに使うための手順を紹介します。テーマ機能で簡単に設定する方法と、CSSで自由に使う方法、両方書いてみました。気になるところからドゾ。

この記事を書いた人：つむり

夫と娘と3人暮らし。北陸出身、晴れの国なう。転勤族の妻。おうちと仕事のすきまで、のんびり子育て中。子育て、暮らし、働き方……毎日のあれこれを、ちょっと軽やかにするためのヒントを綴っています。

プロフィールを見る

ステップ1｜マイルドライナーのカラーコードを取得する

ステップ1では、実際にマイルドライナーで引いた線から、デジタルでマイルドライナーのカラーコードを取得します。オシャレ文具再現なのに意外と泥臭いわよねｗ

① 紙に実際にマーカーを引く

まずはアナログ作業から。マイルドライナーで、真っ白な紙に実際に線を引きます。A4コピー用紙とかでOK。複数のカラーコードを取る場合は効率よくまとめてやっちゃいましょう。

色ムラが出ないよう、一筆でさっと引くのがポイント。ヘタに重ねると色が濃くなって、本来の色からズレちゃうので注意ですよ！

② 写真を撮る（できれば自然光で）

次に、線を引いた紙を撮影します。

撮影はスマホでOKだけど、自然光のある昼間の明るい場所で撮るのがオススメ。私なら晴れ〜薄曇りの日の午前中、レースカーテンを引いた窓の近くで。蛍光灯は消します。自然光と蛍光灯が混ざると、色補正する場合に大変です。

必要があればスマホの画像編集機能で「明るさ」「色合い」を調整して、実際の色味に近づけておきます。このとき、背景の白い紙がしっかり白色になるといいと思います！

暗すぎる写真はスマホだと調整しきれないので、パソコンで調整するか、素直に撮影しなおしましょう。

③ Canvaに画像をアップロードしてカラーピッカーで抽出

Canva（無料版でOK）を使ってカラーコードを抽出します。こんな誰得な記事を読んでくださってるブロガーさんなアナタですから、多分Canvaは使ってますよね？

Canvaにログインしたら、以下の手順でカラーコードを抽出します。

適当なデザイン（プレゼンでもインスタでも）を開き、撮影した画像をアップロードします。「アップロード」＞「ファイルをアップロード」か、編集画面に画像をドラッグ＆ドロップでOK。

画像の上に「テキスト」＞「見出しテキストを追加」します。もちろん図形でもいいです。私はテキストをカラーコードのメモにしたかったので。便利ですよ。

「テキストの色」ボタンをクリック、左のメニューから「新しいカラーを追加」。スポイト形の「カラーを選択」マークををクリックすると、色が抽出できるようになります。

出現した円をマーカーの画像の上に持っていき、なるべく色味が均一なところを狙ってクリック。

カラーコードがスポイトマークの横の枠の下のほうに出てくるのでメモします。

色が変わったテキストをマーカーの画像の上に重ねます。

いい感じで一体化していたらOKです。色が馴染まないようならやり直しましょう。すべての色で繰り返すとこんな感じです↓

ステップ2｜カラーコードを取得した色をブログで再現する

ステップ2では、取得したカラーコードをブログに設定して色を再現します。テーマによってやり方が違うので、2パターン紹介しますね。

方法1：テーマにマーカー機能がある場合

テーマにマーカー機能がある場合は、マーカーの設定画面で色を設定します。

当ブログで使っているSWELLの場合、SWELL設定＞エディタ設定＞マーカータブ＞カラー設定で、4色設定できます。

これで、ハイライトした部分がマイルドライナーの色になります。楽しい！

SWELL以外のテーマの方は、各テーマのマニュアルを見てやってみてください。

テーマによっては、マーカー機能があっても色の設定がないことがあります。その場合は、追加CSSでマーカー部分のクラスのカラーコードを上書きしてやってくださいね。CSSのサンプルコードは方法2で紹介します。

方法2：テーマにマーカー機能がない or 自由に使いたい場合

テーマにマーカー機能がない場合や、自由に使いたい場合は、HTMLとCSSを書きます。HTMLは各記事の本文へ、CSSは「カスタマイザー」＞「追加CSS」に入力します。

マーカーを何色も設定すると追加CSSが長〜くなって管理しにくいですが、全色設定しようと考える人いますよね？（←私です）追加CSSがごちゃごちゃしてきたら、「外観」＞「テーマファイルエディタ」から、子テーマの style.css に移動すると多少スッキリするかと。

以下、マーカーの表示例とサンプルコードを紹介します。折りたたんであるので、クリックして表示してください。

<p>ここに<span class="marker-mildbabypink">マーカーしたいテキスト</span>を書きます。</p>

.marker-mildbabypink {
    background: #ffe6f7;
  }

<p>ここに<span class="marker-mildhoneyorange">マーカーしたいテキスト</span>を書きます。</p>

.marker-mildhoneyorange {
    background: linear-gradient(transparent 60%, #fff2c6 60%);
    padding: 2px 2px;
}

<p>ここに<span class="marker-mildsodablue">マーカーしたいテキスト</span>を書きます。</p>

.marker-mildsodablue {
    background: repeating-linear-gradient(-45deg,#dbeaf4,#dbeaf4 2px,transparent 0,transparent 4px) no-repeat 0;
}

<p>ここに<span class="marker-mildlilac">マーカーしたいテキスト</span>を書きます。</p>

.marker-mildlilac {
    background: repeating-linear-gradient(-45deg, #faddfc, #faddfc 2px,transparent 0,transparent 4px) no-repeat 0 1em;
    padding: 4px 2px;
}

マーカー以外の使用例

マーカーマーカー言ってますが、カラーコードはマーカー以外の装飾にも使えます。例えば、

• 見出し装飾
• リストマーカーの色変え
• リンク・ボタン・囲みの背景色

などなど。全体を淡い色でまとめるなら、けっこう使いどころはあるんじゃないかしら。ちなみに私のブログは全体の印象をパキッとさせたかったので、淡い色はマーカーだけですｗ

Q＆A形式の補足情報

この記事を書きながら「ん？」と思った点を以下にQ&A形式でまとめました。読みながら「ん？」となった方は参考にしてください！

スマホで撮った写真だと色が違って見えるんだけど？

これは写真あるあるですね。なるべく自然光で明るい場所で（室内の蛍光灯は消して）撮影するのはもちろんとして、スマホの画像編集機能で写真の明るさや色合いを調整してみてください。撮影から編集まで何度もトライして、自分の目で“しっくりくる色”を選ぶのが正解だと思います。

Canva以外でもカラーコードって取れる？

もちろん、カラーピッカー機能があるアプリなら何でもOK！

個人的には、元画像の上にテキストや図形を重ねられるアプリが使いやすいと思います。代表的なのはPhotoshopですが高いので（笑）、持ってない人は無料で手軽に使えるCanvaがいいんじゃないかな。

Canvaが使いにくいと感じる人は、スマホアプリの「IbisPaint」などのお絵かきツールなども使えますよ。

ブログの全体の色味と合わない気がするんだけど？

これは組み合わせ次第ですよね。背景色やフォントカラーと馴染むようにマーカーのトーンを調整してなじませる、とかかなあ。個人的には白背景でだけ使うことをおすすめします。難しく考えなくていいので！

マイルドライナーで紙に線を引いたときより色がだいぶ濃いような気がするんだけど？

これもあるあるですね。いくつか理由があります。

• 画像の光加減で一部が濃くなっている（特に影や照明のムラがあるとき）
• 色を抽出した位置が、マーカーの端っこなど“色が濃い部分”だった
• モニターと紙の色味の違い、など

思いつく対策は以下のとおりです。

• カラーコード抽出後にカラーパレットで少しだけ白寄りに調整する
• CSSにopacity: 0.8;を追加して、透過度でやわらかく見せる（白背景限定）
• ムラのない部分から色を抽出する
• 紙で見たときと同じような見え方になるように色を調整する

「自分がマイルドライナーらしいと感じる色」が抽出できれば正解なので、“実際の見え方”を優先して、色を調整してみてください。

手元にマイルドライナーがなくてもカラーコードを取る方法ってある？

あります！画像検索や、公式サイトから色見本となる画像を拾って、カラーコードを抽出できます。ただし、写真の撮り方や明るさ、加工の有無によって色がかなり違うこともあるので、注意が必要かなとおもいます。気長に調整してみてください。

最後に｜“好き”をデザインに落とし込む楽しさ

ということで、大人気のマーカーペン「マイルドライナー」の色をブログのマーカーとして使う方法を紹介しました。

大好きなマイルドライナーの色を、ブログのマーカーとして再現して使うのって、個人的にはすっごくワクワクします。私のブログのタイトルは「つむりのおと」で、ノートや手帳と掛けているところもあるので。ブログの印象がよりノートっぽく、手帳っぽく近づいていくのは嬉しいです。

それから、ちょっとだけ「誰かマイルドライナー愛に気づいてくれんかなあ」って気持ちもあります。「どっかで見た色だけど……おっマイルドライナー？！」みたいな。想像するだに楽しくないですか？私は楽しくて笑えてきますよ。

気に入った色があれば、ぜひやってみてくださいね！

ゼブラ マイルドライナー 35色セット ギフトBOX入 WKT7-35C

ゼブラ(ZEBRA)

口コミを見る

Amazon

楽天市場

Yahooｼｮｯﾋﾟﾝｸﾞ

ポチップ