モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。Cretorインストールデバッグ環境チュートリアルNode.jsBlenderはてなカスタマイズ2016-04-09はてなブログのフォント、見出し等をカスタマイズ!はてなカスタマイズまだまだ勉強中ですが、ブログ内のいろいろな場所のフォントの種類、フォントのサイズ、行間の高さ、見出しの色等のカスタマイズについて調べたことをまとめました。カスタマイズするにはコードを書く必要があるのですが、私はブログを『はてな記法』で書いているので、HTMLやCSSの仕組みについてあまり詳しくありません。コードのどの値がどの部分に関係しているかわからず苦戦しました。コード内の数字はこのブログを書いた時の値です。私が使用している環境です。編集はChromeだけです。SafariとFirefoxは確認のみ。『ブログの管理画面』の左側にある『デザイン』をクリック左上の『工具のアイコン』をクリックし、『{}デザインCSS』をクリックすると『コード』が表示されます。『コード』の枠をクリックすると拡大表示されて、編集が出来るようになります。ブログ全体のフォントの種類の変更ブログ内のすべての文字のフォントの種類を一括で変更するには、『body{}』に下記のコードを追加します。*元からあるコードはそのままで、下記のコードを追加します。複数のフォントを指定しています。見る側の環境が対応しているフォントが使用されます。ソースコード、見出しのフォントのサイズ、行間、余白、色などを変更するコードです。数値は、好みに合わせてカスタマイズします。*/}文字のサイズの単位についてemと%は親子関係でサイズが変わるので、pxにしました。pxの場合でもブラウザのズーム機能は反映されました。行の高さの単位について単位無しにしました。文字のサイズに対する倍率になります。1.0でぎゅうぎゅう、2.0で行間が1文字分空きます。下記のサイトが分かりやすかったです。Qiita見出しの設定値(padding、margin、border)について各設定値について図にしてみました。『margin』と『padding』については、下記のサイトが分かりやすかったです。margin-スタイルシートリファレンス段落の余白についてはてな記法で書いていると、改行で段落分けされて、不要な余白が出来てしますので、段落の周囲の余白を0にしました。私は全角スペースだけの行を作って余白を作っています。あとがき全体に影響のあるコードや部分的に影響のあるコードがあり、最初は影響の範囲や優先順位をよく理解していなかったので、あっちを直しこっちを直しともぐらたたきのようにカスタマイズしていました。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。