Googleが公開している日本語のデザイナーウェブフォント「Rounded M + 1c」を、Tumblrブログに設置した。
お気に入りだらけのあなたのTumblrに、もうひとつお気に入りを加えてみませんか？
Rounded M + 1c
アクが出るようなクセはなく、読みやすいながら、なんとなく印象に残る。
ほのかな柔らかさが気に入って、迷走していたフォント選びもやっと落ち着いた。
先日、このWordPressのブログにも設置して、しっくりきたかなぁと自己満足中。
このフォントの存在を僕に教えてくれたあきさんがおっしゃるように、ゆる〜いアンプラグドな僕のブログとは相性がいいのだろう。
全部で９種類のフォントが公開されているので、あなた好みのものが見つかるかもしれない。
Google Fonts + 日本語 早期アクセス * Google Fonts + Japanese Early Access
設置方法はコチラ
1.ブラウザからEdit theme＞HTMLを編集を開く
2.HTMLにコードをコピぺして編集
headにリンクをコピペして、font-familyを置き換える。
t<!DOCTYPE html>
<!–[if IE 8]><html class=”lt-ie10 lt-ie9″> <![endif]–>
<!–[if IE 9]><html class=”lt-ie10″> <![endif]–>
<!–[if gt IE 9]><!–> <html> <!–<![endif]–>
<head>
<link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” /
{MobileAppHeaders}
<meta charset=”utf-8″>
<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
{block:Description}
<meta name=”description” content=”{MetaDescription}”>
{/block:Description}{block:Hidden}
<meta name=”if:Sliding header” content=”1″>
<meta name=”if:Show navigation” content=”1″>
<meta name=”if:Endless scrolling” content=”1″>
<meta name=”select:Layout” content=”regular” title=”Regular”>
<meta name=”select:Layout” content=”narrow” title=”Narrow”>
<meta name=”select:Layout” content=”grid” title=”Grid”>
<meta name=”text:Disqus shortname” content=””>
<meta name=”text:Google analytics ID” content=””>
{/block:Hidden}<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<link rel=”shortcut icon” href=”{Favicon}”>
<link rel=”apple-touch-icon-precomposed” href=”{PortraitURL-128}”>
<link rel=”alternate” type=”application/rss+xml” href=”{RSS}”><link rel=”stylesheet” href=”http://static.tumblr.com/wqcsqza/yTRnpu5wi/main-min.css”>
<!– HTML5 Shiv –>
<!–[if lt IE 9]>
<script src=”http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js”></script>
<![endif]–><style>
/* Colors */
body {
background: {BackgroundColor};
}.blog-title {
font-family: {TitleFont}, “Rounded Mplus 1c”; sans-serif;
font-weight: {TitleFontWeight};
}
3.詳細設定＞カスタムCSSを追加
さらにカスタムCSSを追加する。
僕が使用しているテーマはOpticaなので、こちらを参考に。
しかし、これだけではうまくカバーすることができなかった。
ここから先は、ググれどもググれども、我が作業いっこうにはかどらず。
なかなか有益な情報に巡り会うことができなかった。
困りに困って、先日WordPressで使用したCSSを流用してみた。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
font-family: “Rounded Mplus 1c”; sans-serif;
}
Congrats ! It works !
なにせこちとら「本質と基本」を理解していないオトコ。
まったく裏は取れていないし、正解かどうかもわからないし、わかっているお方から見ればアレかもしれないけれど…
まあなんとかなったことを良しとしよう。
さらに、フォントサイズも大きくしてみた。
body,.blog-title a {
font-size: 18px;
}
ひとつだけクリアできないことが
ほぼうまく表示されているのだけれど、ひとつだけ解決できていないことがある。
それは、テキストをリブログしたもので、フォントが適用できているものとできていないものが混在していること。
見る人が見れば、すぐに解決できるのかもしれないけれど、僕はここでギブアップ。
しかし、自分が書いたテキストは間違いなくフォントがあてられているようなので、Tumblrをブログとして利用している人たちには、問題になることはないんじゃないだろうか。
ブラウザからどれほどの？
いったいブラウザからどれほどの人がやってくるのだろう？
もうすでにTumblrにどっぷりDopeな人たちは、ダッシュボードかiOSアプリ経由っていうのが大多数だろう。
今回あくせく設置したウェブフォントは、ブラウザで見る以外は、完璧にシカトされて存在も消えてしまう。
そんなことに、こうして労力をかけるのは、全くもってくだらない。
そう、くだらない。
だからこそ、僕のTumblrにふさわしい！
ただ綺麗なもの、ただくだらないもの、だけどお気に入りのものであふれている僕のTumblr。
そこに、役に立つかどうかはわからないけれど気に入っているフォントをあてがうのは、とても自然なことのように思える。
ご自分のTumblrに、もうひとつお気に入りを加えてみたいあなた。
ぜひ、お試しあれ！