アメブロ フォント。 ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう

アメブロの文字をすべてメイリオに一括変更する簡単カスタマイズ

アメブロ フォント

文字のスタイル CSS編集用デザインで文字スタイルを編集 に続き、font(フォント)の設定です。 CSS 編集用デザインのカスタマイズです。 CSS 編集用デザインでは、タイトル/説明/記事タイトル/ブログ本文/リンクなどの 文字のスタイルをカスタマイズすることができます。 例として、ブログタイトルの文字をカスタマイズします。 skinTitle,. skinTitle:visited,. skinTitle:hover,. skinTitle,. skinTitle:visited,. skinTitle:hover,. スタイルシートの 「color」では、 文字色を指定することができます。 を変更するだけで、各テキストのカラーを簡単に変更できます。 skinTitle,. skinTitle:visited,. skinTitle:hover,. タイトルは「bold」に設定されていますが、「normal」に変更したことで文字が細くなります。 太字にしたい文字は、「 font-weight:bold;」と CSS に追加します。 skinTitle,. skinTitle:visited,. skinTitle:hover,. 上の例では、タイトルの「font-size」を 2. 11em から 3. 11em に変更したので、文字のサイズが大きくなりました。 文字のサイズを変更したい場合は、「 font-size:数値;」と CSS に追加します。 skinTitle,. skinTitle:visited,. skinTitle:hover,. 上の例では、タイトルが「HG丸ゴシックM-PRO」に変更されます。 「HG丸ゴシックM-PRO」を「HG行書体」「MS UI Gothic」「HGP創英角ポップ体」というように変更することで、指定したフォントの種類で表示することができます。 でも解説しましたが、「font-family」は、 左から順番に第一候補/第二候補/第三候補/第四候補/第五候補と並びます。 第一候補の書体が閲覧者のパソコンにインストールされていない場合は、第二候補が表示されます。 第一候補の書体を入れ替えて、表示を確認するからプレビューすると、書体の変更を確認できます。

次の

【簡単】アメブロのフォントをおしゃれに!(コピペで簡単変更)|NailCompass(ネイルコンパス)

アメブロ フォント

CSS:Cascading Style Sheets(カスケーディング・スタイル・シート) デザインの選定 アメブロで準備されているブログデザインの中でCSSが編集可能なデザインは決まっています。 [ブログ管理]-[デザインの設定]からまずカスタマイズ可能なデザインを選択して設定します。 デザイン選択 [デザインの設定]画面の一番下に[他のカテゴリからブログデザインを探す]というメニューがあり、そこから[カスタム可能]を選択します。 そうするとCSS編集が可能なデザインがでてきます。 この中からデザインを選択します。 選択すると表示のプレビュー確認ができますのでどういったデザインかを確認しながら選択します。 CSS編集 カスタム可能なデザインを設定すると[CSSの編集]というメニューが現れます。 CSSの編集 ここを選択すると別ファイルとして読み込んでいるCSSファイルを編集することができます。 タイトル、ヘッダー、フッター、サイドバー、記事等のスタイルをここで編集できます。 重要な注意点 ここで編集するCSSファイルはパソコンで表示されるPC用ページだけに有効です。 アプリ、スマホ、AMP用のページでは有効になりません。 このCSSファイルを読み込まないからです。 アプリ、スマホには編集可能なCSSファイルは準備されていません。 AMPはCSSを別ファイルで読み込むことが出来ません。 ここはPC用のページカスタマイズと割り切ってください。 (AMP対応記事の書き方は別で解説します) 編集方法と元に戻す方法 標準で準備されているCSSファイルの中身には、その設定が何のためのスタイルかをコメント表示で親切にわかりやすく記載されています。 すべてテキストファイルですのでコピーして保存しておくこともできますし、参考になるコードをコピーして貼り付けることもできます。 CSSのコメント 元に戻す [表示を確認する]を押すとプレビューで確認できますので表示を確認しながら編集していきます。 そして元に戻したいときはデザインを選びなおせば全部元に戻ります。 途中経過を残しておきたい場合は編集エリアを右クリックして[すべて選択]を選んでコピーしてテキストファイルとして保存しておきます。 戻したいときは編集エリアをすべて消して、その保存しておいたテキストファイルをすべて貼り付ければ保存して途中に戻せます。 CSSのコピー 編集方法は記載済みのCSSを編集して書き換える方法と一番下に個人CSSを追加していく方法があります。 効果は同じです。 下に書いてある設定が優先されるため元々のスタイル設定は一番下に書いた個人設定で上書きされます。 どちらがいいかは考え方次第です。 元々の設定を触りたくない人は一番下に追加がいいと思います。 変更した部分が分かりやすくなります。 一方、ファイルサイズを少しでも小さくしたい、同じ場所のスタイル設定を2個書きたくないという人は元々の記述を変更したほうがいいでしょう。 元に戻すのは簡単です。 私のおすすめは後者です。 標準に無い個人設定は一番下に追加していきます。 それでは一番簡単な設定について以下で説明します。 タイトル画像を設定する CSSのなかの次のエリアを編集します。 2 ヘッダーエリアのスタイルの中の[ヘッダー背景]. ここでタイトルバックの画像を設定できます。 画像ファイルは事前に準備して保存しておきます。 ファイルサイスは以下です。 横1120px 縦200~400px 参照ボタンから保存したファイルを指定してアップロードを行います。 すると下にアップロードした画像とその画像ファイルのURLが表示されます。 [この画像のパス]をコピーします。 画像アップロード CSSの設定は{}内に複数の設定を;で区切りながら書いていきます。 背景画像のURLの設定 background-image: url 画像のパスをコピペ ; 画像の表示方法を設定 background: no-repeat center top;• no-repeat PCでブライザを最大化している場合などは横が1120pxより大きくなります。 そうするとブラウザの幅いっぱいまで画像が繰り返して表示されます。 その繰り返しをさせない設定です。 繰り返す場合は設定不要です。 この部分を消します。 center 表示位置• top 表示位置 ブログ説明文. 似たようなクラス名に. skin-blogTitle というものがありますが、このクラスは実際は使っていないようです。 fontというプロパティを使うと斜体、太さ、サイズ、行間、フォント名がまとめて指定できます。 フォント名はPC環境によって無い場合がありますので , カンマ で区切って大きな種類指定をしておきます。 下の例はゴシック系の指定です。

次の

アメブロのフォントや文字、リンクの色を変更するカスタマイズ

アメブロ フォント

skinTextColor,. skinBaseTextColor,. skinAnchorColor,. skinBaseAnchorColor,. skinAnchorVisitedColor,. skinBaseAnchorVisitedColor,. skinAnchorHoverColor,. skinBaseAnchorHoverColor,. skinBlock a:focus,. skinWeakColor,. skinStrongColor,. skin-btn:hover,. skin-btnPrimary:hover,. skin-btnPaging:hover,. skin-entryPagingNext,. skin-entryPagingNext:hover,. skin-entryPagingPrev,. skin-entryPagingPrev:hover,. skin-btnSide:hover,. skin-btnSidePrimary:hover,. skin-btnArchive:hover,. skin-btnArchive. skin-btnArchive. ameba. skinImgBtnM:hover span,. skinImgBtnM:focus span,. ameba. skinImgBtnS:hover span,. skinImgBtnS:focus span,. ameba. png ; color: 333333! skinSimpleBtn,. skinSimpleBtn:visited,. skinSimpleBtn:hover,. skinSimpleBtn:hover,. カラーコードを変更するだけなので簡単です。 色はブログのテーマや印象を決める大事な要素なので、自分のブログにあった色を設定しましょう。 アメブロカスタマイズ講座:.

次の