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

スポンサーリンク

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

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

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

ＣＳＳ：Cascading Style Sheets（カスケーディング・スタイル・シート）

デザインの選定

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

デザイン選択


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

ＣＳＳ編集

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

CSSの編集


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

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

編集方法と元に戻す方法

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

CSSのコメント

元に戻す

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

CSSのコピー


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

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

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

タイトル画像を設定する

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

.skin-bgHeader{ 設定内容 }

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

横1120px　縦200～400px

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

画像アップロード


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

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

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

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

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

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

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

ＣＳＳ

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

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

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

スポンサーリンク