このブログを開設して以来、あえての「スマホからのみ投稿・カスタマイズ」にこだわってきましたが…実は昨日くらいからPCの禁を解いています（笑）PCのことについては、また改めて別の記事で書きたいと思っていますが、プライベートでは実に久しぶりな感じでWindows PCを使う機会を得まして(プライベートでは基本的にMacかChromebookユーザーなんですが…)たまにWindowsを自分好みの環境にカスタマイズしたりすると、これがけっこう楽しかったもので、その流れでブログの更新においてもPCの禁を解いてみたというわけです^^;
さて、このブログは最初無料版でやっていましたが、やはりスマホ版のデザインもいろいろカスタマイズしたくなって、つい最近PROにしてから少しずつスマホ版のデザインも弄っています。まだまだ、細々と変更したい部分がたくさんあるんですが、やはりそういった細々した箇所をしつこくカスタマイズしていくにはPCのほうが便利なわけで、今回は面倒に思って後回しにしていたスマホ版タイトルのフォントをウェブフォントであるニコモジに変更する作業を実施しましたので、その手順を紹介したいと思います(^^)
今回紹介するカスタマイズについて
すでに無料版の時からPC版のタイトルフォントはこのニコモジで表示されるようにCSSを編集しています。
今回紹介する手順も基本的な作業は上記リンクの記事に記載しているPC版のタイトルフォントをニコモジへと変更する手順と一緒なんですが、スマホ版はPROを使っていないとCSSの編集ができないこと、そしてCSSでフォント指定する箇所が異なるというのがPC版とは少し違ってくる点です。もし、はてなのスマホデザインのままでいろいろカスタマイズしたいという場合には、まず有償ではてなのプランをPROに上げる必要があります。
今回使用したウェブフォント
Googleが2016年10月頃から9種類の日本語に対応したデザイナーウェブフォントを試験的に公開し始めたようなので試しに使ってみました。
タイトルのフォントとして設定する手順
上記リンク先にあるウェブフォントをはてなブログのタイトルフォントとして設定する手順を紹介していきます。（スマホ版での設定）
公開しているページへアクセス
まずは上記のリンクからGoogle Fonts 早期アクセスのページを開きます。
アクセスすると9種類のフォントがサンプル付きで表示されているので、この中からタイトルフォントとして使いたいフォントを選びます（この記事ではニコモジ指定で手順を紹介していますが、この一覧に表示されるフォントならどれでも同じ手順で設定することができます）
HTMLのコードをコピーする
タイトルフォントとして使用したいフォントが決まったらページを下のほうにスクロールしていき、使いたいフォントの紹介とサンプルが個別で表示されるようにします。 ※この手順はすでにPC版で同じウェブフォントをタイトルフォントとして設定している場合には不要です。
こんな感じの表示になったら右下に表示されている図形で囲った部分のコードをコピーします。（今回は仮にニコモジを使いたい場合）
ニコモジを使う場合、以下のコードをそのままコピーしてもOKです。
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
はてなブログのheadに要素を追加する
コードをコピーしたらブログの管理画面を開いて「設定」→「詳細設定」と選択します。
詳細設定を選択してページを下にスクロールしていくと「headに要素を追加」という項目があるので、そこにある入力欄に先ほどコピーしたコードを貼り付けます。
コードを貼り付けたらページ一番下にある「変更する」を選択して設定を反映させます。
デザインCSSを編集する
管理画面へ戻って「デザイン」→「スマートフォン」→「ヘッダ」→「タイトル下」と選択していき、コード入力欄に以下のCSSを貼り付けます。（ニコモジの場合）
<style type="text/css"> /*タイトルのフォント*/ #header #title a { font-family: "Nico Moji"; } </style>
※以下のコードはすでにタイトル下へCSSを入力してデザインをカスタマイズしている場合には不要(その場合は既存のstyle～/styleの中に上記のコードを挿入してください)
<style type="text/css"> </style>
ニコモジ以外を使う場合にはGoogle Fonts 早期アクセスのページで使いたいフォントのCSSからフォント名をコピーして"Nico Moji"の部分を各フォント名に書き換えてください。
CSSを貼り付けたら「変更を保存する」を選択して設定を完了させれば作業完了です。
これでタイトルフォントをGoogle Fontsで公開しているデザイナーウェブフォントでの表示に変更することができます。
タイトルフォントサイズの変更
変更したフォントのサイズがしっくりこない場合には、以下のCSSをフォント指定の時と同じようにデザインCSSへ貼り付けることでフォントサイズを調整することができます。
/*タイトルのフォントサイズを変更する*/ #header #title a { font-size: 1.4em; }
上記コードでは「1.4em」としていますが、この部分の数値を変更することでフォントサイズを調整することができます。
1.4emとは「1.4倍」のことで、CSSでサイズを指定する前よりフォントが1.4倍の大きさで表示されるということです。例えば数値を1.3に書き換えればこれより小さくなりますし、2.0に書き換えればこれより大きく表示されます。
おわりに
はてなブログのスマホ版デザインは、シンプルで記事が読みやすいと個人的に思う反面、デフォルトの状態だと個性はまず出にくいのでブログデザインによるヒキの強さを意識したい人は、ちょっとタイトルのフォントをウェブフォントで変えてみるだけでも、ブログ閲覧時の第一印象に多少なりとも影響を与えることができるのではないかと思います(^^)
今回は日本語フォントでの表示設定を紹介しましたが、Googleが公開しているウェブフォントは英字のものだと、種類がまだまだたくさんあります。（設定の仕方は基本的に同じ）
でででーさん
d3dayo.hateblo.jp