Typesquareの無料プランでボールドが太字にならないからせめてマーカーみたいなのを引くようにした

たかのりうむです。

 

このまえ、モリサワのTypesquareに登録をして晴れてWebフォントを導入しました。

 

relaxaholic.hatenablog.com

 

この記事でも書いていたんですが、ボールドが反映されません、、、。調べてみると、モリサワのサイトにこんな記述ががありました。

 

 

 TypeSquareでは、html内でのbold指定や、 CSSによる「font-weight: bold」などのウエイト調整は、 自動的に解除されるため、反映しません。1書体に対し複数のウェイトが用意されており、
それらのフォントを指定することで、より細やかなウエイト調整を行っていただくことを実現しているためです。bold設定以上の美しいページを作成いただくために、ぜひご活用ください。

例:
「新ゴ」という書体 には、
EL / L / R / M / DB / B / H / U の8種類のウエイトがありますが、
書体によってウエイトの種類、数は異なります。

出典:詳細 | よくある質問 | Webフォント TypeSquare [タイプスクウェア]

 

 ・・・?要するに、太字には太字用のフォントを用意して、細やかに設定してね!ってこと??

つまり、ぼくのような無料プランだと、1フォントしか使えないから、太字は反映できませんってことですかそうですか。でも、諦めの悪いぼくは試しにデザインCSS

 

.entry-content strong {
font-weight:bold;
}

と書いてみましたが、反映されず。やはり。とは言え何かしら目立たせたい…。というわけで、マーカーを引くことにしました。デザインCSSに以下を追記。

 

.entry-content strong {
background: linear-gradient(transparent 60%, yellow 40%);
}

 

文字の部分に半透明の背景色をつけます。ぼくはブログに青色をたくさん使っているので、とりあえず色は黄色にしておきました。

 

こいつを記載しておくと、ほら、こんな風に文字の背景にマーカーで線を引いたみたいになるんですよ!

 

というわけで、太字にはできませんが着色はできたのでとりあえず良しとしましょう。

将来金持ちになったらフォントを買いまくって太字にしてやる。

 

以上です。

はてなブログにソースコードを貼り付ける

 たかのりうむです。

 

ブログをはじめて、ちょこちょことカスタマイズもしていきたいと思ってます。

 

その過程で、CSSを書くこともちらほら出て来るでしょう。そのカスタマイズの備忘録もかねて、記事にCSSのコードを記載していきたいと思います。

これなんだっけ?ってなったときにまたググって…。てなるのが目に見えてるし、面倒なので。笑

 

で、せっかくコードを残していくなら見た目もきれいにしときたいよね。と思ったので、はてなにソースを書く方法を調べました。さっそく備忘録。

 

はてなブログにはソースを貼り付ける機能がある

なんと。調べたところ驚愕の事実。デフォルトでそういうのがあるみたいですね。使い方は簡単で、

 

>||

||<

 

…の部分はコードを書くだけとのこと。

さっそく試したところ、

>||

#include<stdio.h>

int main(void){

 printf("hello world ");

 return 0;

}

||<

 

…、おい、そのまんまやないか。笑

 

 ソースを貼り付けるときは、編集モードをはてな記法モードにする

どうもそういうことみたいです。

編集モードをはてな記法モードにしてさっきのコードを貼ると、

#include<stdio.h>
 int main(void){
  printf("hello world\n");
  return 0;
}

おお!なんかそれっぽい!ただ、色味がなくて寂しい…。でも大丈夫!シンタックスハイライトにも対応してるみたいです。やり方としては、頭のたて棒二本の間に言語名を書くだけ。今だと、

>|c|

#include<stdio.h>

int main(void){

 printf("hello world ");

 return 0;

}

||<

てな具合。すると、

#include<stdio.h>
 int main(void){
  printf("hello world\n");
  return 0;
}

わーお!しゃれおつ!見た目は満足なんですが、1個だけ問題が…。

 

はてなモードと見たままモードで、編集をいったり来たりできない…。

けっこう致命的でした。笑

意気揚々と見たままモードに切り替えようとしたら、「書いてある内容全部消すね!」って。鬼だね。とにかく、せっかくかいても全部消えちゃうんです。えー、とは思ったもののしょうがないですよね。じゃあどうするのよって話なんですが、

 

はてなモードでソースだけかいてプレビュー。それをコピペ。

必要なソースをはてなモードでばばっと全部書いておいて、それをプレビュー。プレビュー画面からソースの領域をコピーして見たままモードに貼り付ける。

という事をしないといけません。これはイケてないですね…。でもしょうがない。

 

まとめ

  • はてな記法モードで、>||(ソース)||< でソースの貼り付けが可能。
  • シンタックスハイライトするときは、>|(言語名)|(ソース)||<
  • はてな記法モードで記述してプレビューの内容をコピペして、「見たままモード」に貼り付け

ですね。多少のめんどくささはありますが、見た目のためにはこれくらい何のそのですね。次からじゃんじゃん使っていきます。

モリサワのTypesqareでWebフォントを導入してみました。

どうも、たかのりうむです。

 

このブログにもいよいよ、Webフォントを導入してみました。無料だし(これ重要)、導入もけっこう簡単で(強いて言うならモリサワのサイトが分かりにくいです)、サイト全体の雰囲気を変えることができるのでとてもおすすめです。

 

 

そもそもWebフォントって何?

あんまり詳しくないのですが、

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

出典:Webフォント - Wikipedia

だそうです。要するに、フォントを細かく指定していたのがWebフォントを導入するとサーバ上のフォントを参照して表示するので、環境によってデザインがごちゃごちゃ変わることがなくなりますよってことみたいです。

 

どんな環境でも同じデザインで閲覧できる(させられる)ので、自分の意図するものを環境に依存せずに確実に伝える事ができるのがメリットみたいですね。ただ、どっかのサーバにフォントファイルを参照しに行くので、読み込みと表示にちょっと時間がかかるというデメリットもあります。

 

どこのWebフォントを使う?

今回僕が利用したモリサワのTypesquareを始めとして、色んな所がWebフォントを提供しています。悩んだのがこの2つ。

モリサワ Typesquare

typesquare.com

Google Font + 日本語 早期アクセス

googlefonts.github.io

正直どっちでも良いかなとは思ったんですが、使える日本語の書体がモリサワの方が豊富でいろんなフォントが試せるっていうのと、何よりもフォントといえばモリサワでしょ!という素人丸出しの発想モリサワのTypesquareを利用することにしました。

 

また、どっちも無料で利用可能ですが、Typesquareの場合は月に1万PVまでクラウドからフォントが配信されるというプランです。なので、複数のフォントを使いたいとか月1万PVを超えるようなサイトを運営している人は金を払うかおとなしくGoogle Fontを使ったほうが良いと思います。

 

導入の手順は?

ほぼやることは何もないです。笑

  1. モリサワのサイトで利用者登録
  2. 利用書体を選んで登録
  3. 利用サイトのURLを登録
  4. HTMLのタグをコピー
  5. Webページの<head>~</head>にコピーしたHTMLタグをペースト
  6. cssを設定

です。1.〜4.までがモリサワのサイト上で行うこと、5. 6.が自分のサイトでやることです。

5.については、はてなの管理画面の設定>詳細設定の「headに要素を追加」、6.については

デザイン>デザインcssにそれぞれ記載すればOKです。

 

ちなみに、設定なんかよりも2.、3.あたりの登録が、モリサワのサイトのユーザビリティが悪くて少し悩みました。

 

ちなみに、cssに設定したのは

body { font-family:"フォント名"; }

の一撃一括設定です。なんせ一書体しか使えないですし、いろんなフォントを組み合わせて使うほどオシャレさんじゃないので。笑

 

設定完了。導入してみて感じたこと。

さっきの設定をした状態でサイトをりロードすると…、見た目が変わっています!実に素晴らしい…。

 

実際導入したメリットとしては、

  • サイトのイメージがガラッと変わる

というのが一番です。満足。

 

ただ、デメリットもあって、

  • フォントの読み込みに時間がかかる
  • 太字が太字にならない

というのが導入してすぐに思ったことです。

太字が太字にならないのはCSSいじってどうにかできないもんかと今色々と調べております。またそれは別の機会に。

 

それにしても、こういうカスタマイズとかは楽しいですね。ちょこちょこカスタマイズを続けていきたいと思います。

料理の写真をうまく撮る! 予習編

どうも、たかのりうむです。

 

料理の写真をうまく撮るってのはなかなか難しいですよね。ぼくが写真を撮ると、なんか実際目の前にしている料理よりもしょぼくなっちゃうんですよね。

 

シズルは一切感じず、写真は全体的に暗い。

そして色が悪くてまずそうで、ボリューム感もなく感じる。せっかく美味しいご飯を食べに行っても後から見返して、「あれ?」みたいなことが多いです。

 

今日は奇しくも嫁と焼肉を食いに行くので、

いい写真が取れるように予習しておきます。

 

本当は本を買ってきて勉強したいところでは

あるんですが、お金もないし時間もないので、ひたすらググることにしました。笑

 

その結果、どのサイトもだいたいおんなじようなことを書いていたので、備忘録的に予習した内容をまとめていきたいと思います。

 

世の中にまたおんなじようなことが書かれたサイトが誕生する瞬間です。

(※ちなみに今は予習なので、写真はゼロです。笑)

 

 

とにかく光だ。光に気をつけろ!

明るい場所で自然光で撮影する

ぼくの取った写真はいつも暗ーい感じで

料理が美味しそうに見えません。

あと、蛍光灯の下なんかで取ってることが多くてなんか不自然な感じになるんですよね。

やっぱり明るいところでおひさまの光が

当たると色味が自然になるってことなんですね。

 

色んなサイトを見ていると、

窓際の席をゲットしろ!とか、

あとで出てくる逆光で写真を撮るために

窓側の席は連れに譲れ!

とか書いてありました。

そこまでするんかい、、、と思う反面、

そこまでするほど光というのは重要というのがよくわかります。

一緒に行った人と仲が悪くなったり、お店の人と揉めたりしない程度に気をつけたいと思います。

 

逆光で撮影する!というよりも、順光で撮るな!

逆光、半逆光、横からの光の

いずれかで撮るといいそうです。

後ろや横から光が当たることで、正面から

見たときに料理や食材に影ができて

立体感が生まれるからとのこと。

ちなみに順光(写真を取っている人側からの光)だと

手前から見たときに影ができないので

のっぺりした印象になるみたいです。

なるほど。ちなみにさっきも書きましたが、

逆光を手に入れるために席を選ぶのは、

周りの人と揉めない程度に頑張ります。

フラッシュは使わない!

 これもどのサイトにも書いてありました。

フラッシュを使ってしまうと料理全体に不自然な光が

ビカッと当たって平面的な写真になり、

料理の立体感が出なくなってしまうからだそうです。

まあ、そもそも店の中でフラッシュを焚きまくることは

あんまりないとは思いますが、気をつけます。

ちなみに暗いと感じたときは露出で調整するといいよ

と何処かに書いてありました。

知識ゼロのぼくはこれを盲信したいと思います。笑

撮影角度に気を付けろ!

基本は斜め45度!

全然知らなかったんですが、斜め45度から写真を撮るのが

基本中の基本らしいです。

なんでも、人間がご飯を食べるときに料理を見る角度が

だいたい斜め45度からで、この角度から料理を見るということが

人間に取っては自然だからだそうです。なるほど。

たしかにぼくは突拍子もない角度から撮ったりしてましたね。笑

とはいいつつも、ローアングルや俯瞰もアリ!

料理の種類によるみたいですね。厚みを強調したいときは

当然ローアングルから取ったほうが厚みはわかりやすいですし、

平面的な料理は上から取ったほうが良さげに感じるらしいです。

なるほど。いままでは意味もなく上から撮ったり横から撮ったり

してましたが、このあたりを意識して今後は写真を取ってみたいと

思います。

主役を目立たせろ!

メインの料理を接写する

何がメインなの?っていうのをしっかりわかるように

写真を見る側にアピールしないとだめですもんね。

いろんな皿があっちこっちにおいてあって、

ごちゃごちゃした写真よりも主役がドーン!と

あったほうが確かに迫力がある気がします。

とにかくインパクト重視!

メイン料理にピントを合わせて周りをぼかす

主役にぱっと目が行くようにして、メインの料理をしっかり

目立たせる手段ですね。

ちなみに、よくわからんですがf値というのを小さくすると

周りがボケるとのこと。早速今日試してみましょう。

余計なものは写さない

引き算の発想だと思います。

主役以外のものを極力カットすることで

料理に注目を集める。

下にも書いてますが、ぼくは引きで写真をとっていたので

超いろんなものが写り込んでガチャガチャした写真に

なっていたんですよね。。。

思い切って寄って、周りをボカして、

ちょっと邪魔なものをどけるってことを意識したいと思います。

料理は端に寄せて撮れ!

料理を真ん中にデーンとおいてしまうと

器がガッツリ写り込んでしまって料理のボリューム感が

損なわれるようです。なので、思い切って

料理を端に寄せて器の一部を切り取るようにして

撮るとボリューム感が出るそうです。

たしかに、ぼくのこれまでの写真も

お皿ごと移すために引きで撮っていたので

料理が諸ボーク見えているような気がしてきました。

と言うか絶対そうだ。笑

その他

レフ板を使え!

意外と色んなサイトに書いてありました。

ただね、プロじゃあるまいし持ってないわ。笑

だいたい店でレフ板出し始めたら、「・・・え?」

ってなるでしょ。スマホの写真取るためにレフ板出したら

「何あの人、スマホで写真取るのにレフ板?」

ってなるし、かと言っていかつい一眼抱えてレフ板出したら

「え、やばい、プロじゃん、プロ。笑」ってなるでしょう。

ちょっとまだそこまで自分を捨てれてません。笑

ただ、白い紙とかで代用する手段もあるみたいなので、

恥ずかしくない程度にやってみたいと思います。いつか。

 

 

とまあ、ざっとこんな感じでした。

他のサイトにはもっと細かい話も書いてましたが、

おそらく超基本的なことをまとめたらこれくらいだと思います。

(ぼく個人の勝手な判断ですが、、、。)

 

というわけで、今日は美味しく焼肉を食べつつ、しっかり写真を

撮ってきたいと思います。

写真の勉強、はじめようかな。

どうも、たかのりうむです。

 

ぼく、絵を描いたり、何かをデザインしたりという

自分の考え方を表現したりとかっていう

行為がとても苦手でした。

ただ、うまくなりたいという興味というか

憧れみたいなものはずっと抱いていました。

 

じゃあ、練習すればいいじゃない。

っていう話ではあるんですが、

ぼくが学生の頃、美術教師だった親には

「センスが無いからやめておけ」と言われ、

前の会社でプレゼン資料を作れば先輩からは

「センスが壊滅的」と言われ、

昔担当していたお客さんからもチラシを

なんでもいいから作ってくれと言われ手作りしたところ

「こんなのダサくて貼れるわけねえだろ!」

と言われ、、、。

センスがないから、という理由でそういった

努力をすることそのものを諦めていました。

なんせ、センスがないからやっても無駄でしょ?

みたいに。

 

ただ、先日、水野学さんの

「センスは知識からはじまる」

という本を読みました。

センスは知識の蓄積から生まれてくると

そこには書かれていました。

 

この主張が正しいかどうかは置いといて、

少なくとも、ぼくみたいに興味はあるけど

周りからセンスがないとかそういうことを

言われて、自分自身が何かを作り出すということを

半ば諦めていたぼくみたいな人間には

とても勇気が出る本でした。

 

もちろん、センスを生むための知識を身につけるのは

並大抵のことではないんでしょうが、

「あぁ、ぼくも何かを作ったりとか、表現したり

することをしてもいいんだなぁ。」

と、これまでの考え方がちょっとだけ変わりました。

 

そんなこんなで、今後はちょいと

勉強に取り組み、シャレオツなおっさんを目指していきます。

 

何しようかなーと考えたんですが、

ずっと家にOlympusコンデジ xz-10が

放置されてホコリを被っていたのと、

最近子供が生まれて、今後成長していく記録を

せっかくならきれいに残したいという

思いもあり、写真の勉強をしていきたいなと。

 

まずは基本的なことから、勉強しつつ、

このブログを通してちょっとずつ成長できればと思います。

 

どうぞよろしくです。