ブログとホームページが同時にできちゃうWordPress講座はこちら

      2018/08/21

シンプルにアメブロをカスタマイズする、私の場合

 
シンプルにアメブロをカスタマイズする、私の場合

「あなたにピッタリのデザインにするために、あなたの意見・思いに合わせ、形にするデザイン屋さんやってます。」

ピクニック365カフェ オンライン!
大好きなデザインをすることに囲まれて幸せ!

さて今回はアメブロの事。

 

アメブロって気軽なので気ままにブログれるので楽しいと思いつつ、同じテンプレートでいてもやっぱりつまらないなぁ・・・

こんな風に思うことってありませんか、アメブロユーザーの皆さん(私も含め!)

cssとか、絶対無理とか言わないで、チャレンジしてみませんか?

難しくない!ということをレクチャーしますね。

ただし、これはシンプルに使いたいという方にはgoodだと思うのですが、キラ☆キラ系がお好みの方はきっちりカスタマイズされた方がいいと思います。
ではスタート!

今回いじるところ

今回変化をつけたいと思ったのは、

  • ヘッダー画像
  • ヘッダー背景色
  • コンテンツ背景色
  • ナビゲーション背景色
  • ナビゲーションテキスト色

これだけでも違うと、他との違いが見えると思います。

 

まずはヘッダー画像

まずは自分らしいヘッダー画像を用意します。

簡単にヘッダー画像を作ってみよう!←後日

 

さて。

ヘッダー画像が用意できたとして。

さて、アメブロの管理画面に行きますよ。

 

アメブロに行きます!

デザインの設定・デザインの変更のページへ

 

カテゴリから▶カスタム可能を選択

 

カスタム可能デザインの中の「CSS編集用デザイン」の中でお好きなものを選択

ちなみに私は、ワードプレスのように最新の投稿が一番上に表示されてこじんまりと見やすいタイプを選択しました。

 

さ!やるよ~

 

まずは、用意したヘッダー画像をアップロード

ファイルを選択し、任意の場所においてあるヘッダー画像を指定し、アップロード。
この時、画像サイズが1枚1MB以内でないと、失敗します。

画像のサイズを調べるには、画像を右クリック⇨プロパティ

 

画像を選んでカーソルを置くと、画像情報が出る!

 

そのように調べておくと安心です。

ちなみに、ヘッダー画像の大きさは、1120px幅で高さは350px以上ということでした。

2000px幅だと、パソコンいっぱいに開くワイドな感じになります。

2000px幅でもよさそうですが、私は1120px(幅)×400px(高さ)にしました。

 

まずはヘッダー画像をアップロードしておきます。

そして、CSS編集ができる領域に入ります。

今回のためのCSSは、今書かれているソースの一番下に書き込むので、ぐーーーーっと下までスクロールしておきます。

 

 

ピンクの横線まで書いてあったのでその下に以下のソースをコピーして貼ってください。

 

以下のソースを貼る

 

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(【画像までのパスはここに貼る】);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: ヘッダーの高さを入れるpx;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

 


 

※上記の場合に、画像までのパスや背景色などは【】(スミカッコ)も含めて選択し、その場所に貼り付けてくださいね。
またうっかり、記号が抜けたりすると表示されないのでご注意を!


 

URLをコピー

ヘッダー画像をアップロードしたあとに表示されていたこの画像のパス(ヘッダー画像が保存されている場所が書かれています)内にあるURLをコピーする。

これを上の【画像までのパスはここに貼る】のところに貼り付ける。

その時、【〇〇】すみかっこ含めて選択し、その場所に貼ってください。

 

色を変える

その色はどこで調べましょうか!と言いますといろいろありますが、とりあえずココ

http://yume.hacca.jp/koiki/sample/color.htm

イメージにピッタリの色を探して#から始まる色番号を調べておきます。

  • ヘッダーとコンテンツ背景色
  • ナビ背景色
  • ナビのテキスト色

を決めます。

ヘッダーとコンテンツ背景色は、一番広い面積をとるので濃い色ではない方がいいですね。

ナビの背景色はその色にあわせた濃いめの色にして、その濃いめの色にテキストが乗った時に読みやすい色をテキスト色に選ぶといいですね!

まずは、さっきのところですぐできるヘッダー背景色の変更。

調べた色番号を【背景色】のところに、スミカッコも含めて選択し#から始まる色番号を貼り付けていきます。

ちなみに#ffffff、fが6個並んでいますがこれは「白」、#000000、0が6個並んでいるのが「黒」です。

 

色が決まったら、先にある#から始まる色番号を選択して、変更したい色番号を貼ります。

 

CSS編集エリアの上の方をスクロールしていきます。

コンテンツ背景、ヘッダー以下の背景色

 

ヘッダー背景色

 

ナビゲーション背景色・テキスト色

変更しながら表示を確認することもできます。

ここまでできたら保存。

 

こんな風になりました。

シンプルでいい!

また、気分を変えたくなったら変えてみようと思います~

絶対できるから、アメブロも楽しんじゃってください!

最初の撮っておくの忘れちゃった~、おばぁちゃんだから(笑)
ま、いいか!

 

ヘッダー画像がどうしても無理!という方はご相談にのりますので遠慮なく~

さて。

仕事すっぞ~~~(; ・`д・´)

 

この記事!
いいねしてくれたらうれしいです!

The following two tabs change content below.
miyagishima hitomi
4人の子育てしつつ、2人の孫も育て中。 Webがわかる・デザインができる・ブログを楽しむオンライン式「ピクニック365カフェ」として、2018年4月再生! そして、小学校PTA事務も継続中。 アクセスバーズ™プラクティショナーとしても活動中! パソコンWEB大好き~!WordPress大好き~♡
 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA