アメブロのページデザインを簡単なCSSでカスタマイズ【PC版】

スポンサーリンク

アメブロのページデザイン

アメブロのページデザインはほぼ決まっています。ただしCSSを使ってある程度のデザインは設定可能です。

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)のことでWebページのデザインを指定する言語です。HTMLとセットで使用しますが、HTMLの中にCSSを書く場合とCSSを別ファイルとして読み込む場合があります。通常は別ファイルとして読み込みます。
ここではCSSの詳細説明は省略します。説明しているWeb記事がたくさんありますのでそちらを参考にしてください。

CSS:Cascading Style Sheets(カスケーディング・スタイル・シート)

デザインの選定

アメブロで準備されているブログデザインの中でCSSが編集可能なデザインは決まっています。
[ブログ管理]-[デザインの設定]からまずカスタマイズ可能なデザインを選択して設定します。

デザイン選択
デザイン選択


[デザインの設定]画面の一番下に[他のカテゴリからブログデザインを探す]というメニューがあり、そこから[カスタム可能]を選択します。
そうするとCSS編集が可能なデザインがでてきます。この中からデザインを選択します。
選択すると表示のプレビュー確認ができますのでどういったデザインかを確認しながら選択します。

CSS編集

カスタム可能なデザインを設定すると[CSSの編集]というメニューが現れます。

CSSの編集
CSSの編集


ここを選択すると別ファイルとして読み込んでいるCSSファイルを編集することができます。
タイトル、ヘッダー、フッター、サイドバー、記事等のスタイルをここで編集できます。

重要な注意点
ここで編集するCSSファイルはパソコンで表示されるPC用ページだけに有効です。アプリ、スマホ、AMP用のページでは有効になりません。このCSSファイルを読み込まないからです。
アプリ、スマホには編集可能なCSSファイルは準備されていません。AMPはCSSを別ファイルで読み込むことが出来ません。ここはPC用のページカスタマイズと割り切ってください。
(AMP対応記事の書き方は別で解説します)

編集方法と元に戻す方法

標準で準備されているCSSファイルの中身には、その設定が何のためのスタイルかをコメント表示で親切にわかりやすく記載されています。すべてテキストファイルですのでコピーして保存しておくこともできますし、参考になるコードをコピーして貼り付けることもできます。

CSSのコメント
CSSのコメント

元に戻す

[表示を確認する]を押すとプレビューで確認できますので表示を確認しながら編集していきます。そして元に戻したいときはデザインを選びなおせば全部元に戻ります。途中経過を残しておきたい場合は編集エリアを右クリックして[すべて選択]を選んでコピーしてテキストファイルとして保存しておきます。戻したいときは編集エリアをすべて消して、その保存しておいたテキストファイルをすべて貼り付ければ保存して途中に戻せます。

CSSのコピー
CSSのコピー


編集方法は記載済みのCSSを編集して書き換える方法と一番下に個人CSSを追加していく方法があります。効果は同じです。下に書いてある設定が優先されるため元々のスタイル設定は一番下に書いた個人設定で上書きされます。

どちらがいいかは考え方次第です。元々の設定を触りたくない人は一番下に追加がいいと思います。変更した部分が分かりやすくなります。一方、ファイルサイズを少しでも小さくしたい、同じ場所のスタイル設定を2個書きたくないという人は元々の記述を変更したほうがいいでしょう。元に戻すのは簡単です。私のおすすめは後者です。
標準に無い個人設定は一番下に追加していきます。

それでは一番簡単な設定について以下で説明します。

タイトル画像を設定する

CSSのなかの次のエリアを編集します。
(2)ヘッダーエリアのスタイルの中の[ヘッダー背景]

.skin-bgHeader{ 設定内容 }

この部分がヘッダーに割り当てられるCSSクラスとなります。
ここでタイトルバックの画像を設定できます。
画像ファイルは事前に準備して保存しておきます。
ファイルサイスは以下です。

横1120px 縦200~400px

参照ボタンから保存したファイルを指定してアップロードを行います。すると下にアップロードした画像とその画像ファイルのURLが表示されます。
[この画像のパス]をコピーします。

画像アップロード
画像アップロード


CSSの設定は{}内に複数の設定を;で区切りながら書いていきます。
背景画像のURLの設定
background-image: url( 画像のパスをコピペ );
画像の表示方法を設定
background: no-repeat center top;

  • no-repeat PCでブライザを最大化している場合などは横が1120pxより大きくなります。そうするとブラウザの幅いっぱいまで画像が繰り返して表示されます。その繰り返しをさせない設定です。繰り返す場合は設定不要です。この部分を消します。
  • center 表示位置
  • top 表示位置
CSS

.skin-bgHeader{
 background-image: url(https://~);
 background: no-repeat center top;
}

タイトル、サブタイトル文字

ブログタイトル
.skin-blogMainTitle{ 設定内容 }

ブログ説明文
.skin-blogSubTitle{ 設定内容 }

設定内容にフォント、文字サイズ、太さ、余白といった設定を行っていきます。
似たようなクラス名に.skin-blogTitle というものがありますが、このクラスは実際は使っていないようです。
fontというプロパティを使うと斜体、太さ、サイズ、行間、フォント名がまとめて指定できます。
 font: 斜体 太さ サイズ/行間 フォント名
スペースで区切りながら設定しますが、サイズと行間の前は/で区切ります。フォント名はPC環境によって無い場合がありますので ,(カンマ)で区切って大きな種類指定をしておきます。下の例はゴシック系の指定です。

CSS

.skin-blogMainTitle{
 font: italic bold 30px/1.5 “游ゴシック”,sans-serif;
}

.skin-blogSubTitle{
 font: italic bold 20px/1.5 “游ゴシック”,sans-serif;
}

見た目インパクトのあるタイトルのカスタマイズでした。ただしほとんどの人がスマホで見ていることを考えるとPC向け専用のカスタマイズなので大きな意味はないかもしれません。