HowToこんにちは、たねやつです。大小コードの埋め込みが簡単なのではてなブログを使い続けているのですがWindowsで表示したときのデフォルトの(日本語)フォントがあまりイケてないのです(個人的意見)。あいうえおaiueo安以宇衣於とあいうえおaiueo安以宇衣於では後者のほうが平文のフォントと同じなので見やすいかと思います。以下の大コードの埋め込みもデフォルトのものよりもすっきりして見えるかな?という感じです。device.setPowerState(true);});以下はてなブログでの設定方法などについてです。JPというフォントを使用しているので以前から活用しているのですが、GoogleがHTML/CSSの埋め込みだけで使えるフリーのフォントを提供してくれています。去年末に日本語のフォントも追加されたのをきっかけにこのブログでも使い始めました。他のブログを見ていても結構このフォントやM+フォントを使用されているのも増えてきた印象があります。フォントを追加するとなると、サーバー内にフォントファイルを配置してそれを読みこむという感じでしたが、このサービスによってぐっと導入が簡単になりました!手順それでは手順です。このブログと同じような感じにするのであればコピペでOKです。Fontsから使いたいフォントを選びます。JPを使用しています。英字フォントまずは英字フォントを指定します。サイトを開くと何やら英語で分かりにくいかもしれません。左上のCategoriesを選択すると字体の種類が選択できます。ここではMonospace(等幅)だけにチェックを入れてください。コードの埋め込みなので当然等幅フォントを使用しましょう。この段階で10数フォントに絞り込めます。Consolasというフォントに似ているというか、影響されているフォントです。視認性が高い(私の目が慣れているだけ?(笑))のでこれを使います。フォントの右上の+ボタンを押すことで後々生成されるコードに追加されます。これで英字フォントの選択は完了です。日本語フォント次に日本語フォントを指定します。先ほど指定したMonospaceの条件消して、LanguageにJapaneseを指定します。種類はないですがどれも視認性が高く、個性的です!使いたいフォントが決まったら先ほどと同じく+ボタンを押して選択します。Selectedとなっているはずです。Familyに追加しておきます。Fontsを使用したことない場合は無視してOKです。コードを取得するこれで使用するフォントが選択できたのでコードを取得します。Selectedの部分を選択するとしたからニョキっと生えてきます🍄タブの部分をEMBED(埋め込み)に選択するとはてなブログに埋め込むためのコードを取得できます。コードの形式も二つ選べますが今回はSTANDARDを使用します。コードはこんな感じになっています。rel="stylesheet">このコードを使用します。先ほどのコードはhtml形式なのでブログのどのページでも表示される場所に追加する必要があります。はてなブログのカスタマイズでよく使われる場所としてはヘッダの設定に混ぜ込む感じですね。それに沿って進めていきます。ブログの管理画面(ダッシュボード)を開いて、左側のデザインを選択します。rel="stylesheet">を埋め込みます。既存のコードがある場合は、ほかのフォントを読み込んでいる部分がまとまっている所の末尾あたりに追加すると後からメンテナンスが楽になります。フォントに関するコードがなさそうな場合は一行目に追加しておくが無難かと思います。追加すると行番号の部分にXマークが表示されますが特に問題ないのでそのまま進めていきます。URL内の&のせいでエラーが誤検知されているようです。デザインの画面を開いたまま次に進みます。CSSに追記するフォントは読み込めたので次はpre.codeなどに適応していきます。デザイン画面の一番下にデザインCSSという項目があるのでそれを選択します。結論から行くと以下の二つの設定を追加します。JP以外のフォントを使用している場合はそれぞれ読み変えてください。bold;}pre.codeに設定した値が上のような大きなコードの埋め込みの設定です。codeに設定した値が左のような小さなコードの埋め込みの設定です。こちらに関しては視認性の関係で太文字化(font-weightをbold)しています。確認して不要な場合はfont-weightの行を削除してください。htmlを追加したときと同じくこちらも既存のコードを破壊しないように追加します。pre.codeの設定などが存在している場合はfont-familyの部分のみいい感じに統合する必要があります。white;}以下のように統合する必要があります。フォント関係の設定はまとめるようにしておくと後から見やすいです。white;}以下余談ですが、font-familyで指定しているMonaco以下の設定値は、何も設定していない場合のフォントになっています。何らかの問題に備えてそのままお尻に追加しています。font-familyで設定したフォントは前から順に表示されます。JP、さらにないフォントはMonaco以降のフォントが採用されます。JPという合体フォントとなって表示されます。最後に設定した内容がちゃんと表示されるか確認します。記事ページをプレビュー)。ない場合は変更を保存して埋め込みのあるページを確認しに行くか、Chromeのデバッグで無理やりhtmlを編集するか、などです。反映できていることの確認と、それ以外の部分でデザインが崩れていないかなども確認しておきましょう。問題ないことが確認できたら作業終了です!最後に以上が埋め込みコードのフォントの変更方法です。同様の方法でブログ全体のフォントを変更することも可能なのでそちらも記事化します(すでに多くの方が実施、記事もたくさん在りますが)。C101PAでVSCodeを使う。(Crostini使用)こんばんは、たねやつです。このときが来たかという感じ...2018-05-07Chromebook(C101PA)がやってきた。写真編集、その他使用感)こんばんは、たねやつです。Avionという自作キーボードを作りました。自作キーボードについていろいろ書いています。84を2年ほど使ってみた感想・打鍵音など。2019-12-14はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する2019-12-11イルミナイト万博(2019)行ってきました。背景を元に戻すAdはてなブログをはじめよう!ibuquicalligさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。