アメブロdeアクセスアップ

アメブロ姫ブログカスタマイズ オリジナルデザインの手順とは? | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:姫ブログカスタマイズ

アメブロ姫系ブログのカスタマイズです。

 

連続して姫系ブログのカスタマイズ方法を記載しましたが、
オリジナルデザインを作る手順をまとめました。

 

 

ある程度、CSSが理解できたら自分でカスタマイズしてみてくださいね。

 

 

 

 

姫系ブログをカスタマイズして、オリジナルデザインにするには、
手順ふみながら進めるといいですよ。

 

 

やりながら変更していくと、うまくいきます。

 

 

 

以前にも書いているんですが、ベースのテンプレートがCSS編集可能デザインの場合、
そこから、どうやってカスタマイズをすればいいか、
迷っている方もいらっしゃいますので、手順をまとめてみました。

 

 

 

自分のオリジナルデザインにしたい方は、
ぜひチャレンジしてみてくださいね。

 

 

 

 

姫系ブログカスタマイズ手順

 

サンプルサイトは、こんな感じのイメージです。

 

ちえぞうの姫系サンプルブログ

 

 

1.全体のレイアウトを決めます。
こんな感じで、図にすると解りやすいですね。

 

 

ブログレイアウト

 

 

レイアウトが決まったら、それに合わせたカラム数を決めます。
上図の場合は、3カラムです。

 

 

 

サイドバーを必要としない場合は、2カラムでも対応可能ですよ^^

 

 

 

2.必要な画像を作成します。

ヘッダー画像や、ポイント画像に使う画像を用意し
アメブロにアップロードしましょう。

 

 

 

 

「CSS編集可能デザイン」の部分をクリックすると、
コードの編集画面になりますが、そこで画像のアップロードもできます。
画像は5枚までアップロードできるのですが、ヘッダー画像などは、
ここにアップロードすると、CSSへの記述が簡単です。

 

 

画像作成のポイントなどは、こちらを参考にしてくださいね。
アメブロ姫系ブログカスタマイズ ヘッダー画像基本は透過すること。

 

 

 

 

3.ヘッダー画像を配置してみる。

ブログタイトルなどを含めたヘッダー画像を配置してみましょう。

 

 

 

ヘッダー画像を配置すると、他の画像やアイフレ設置の時の目安になります。

 

 

 

4.ポイント画像を設置をしましょう。

レイアウトに沿って、ポイント画像を配置してみてください。
プレビューを見ながら、余白や距離の数字を変更させて、
自分の好きな場所に、ポイント画像を設置してみましょう。

 

 

ポイント画像の設置とCSSの記述方法は、こちらを参考にしてくださいね。

アメブロ姫系ブログカスタマイズ 好きな場所に画像を配置する方法

 

 

 

5.アイフレの記述と設置をしましょう。
アイフレを設置しつつ、好きなテキストを記述していきましょう。
レイアウトを見ながら、設置していきます。
ポイント画像と同じように、距離や配置する場所は、CSSで整えて、

プレビューを見ながら調整してくださいね。

 

 

 

アイフレの設置とCSSの記述方法は、こちらを参考にしてください。

アメブロ姫系ブログカスタマイズアイフレを設置する方法

 

 

 

6.目次・メッセージボードの設置をしましょう。

最後に目次やメッセージボードなど必要なパーツを設置します。

記事枠の装飾などは、一番最後に設定するといいです。

 

 

目次などの、リンク先のURLは、記事を書かないと解らない場合もあります。
カスタマイズをしながら、記事を更新していくならば、
目次は最後で大丈夫です。

 

 

目次などの設置とCSSの記述方法は、こちらを参考にしてくださいね。
アメブロ姫系ブログカスタマイズ メッセージボートの下に目次を設置する方法

 

 

 

 

 

はい、これで完成しますよ^^

完成画像をもう一度(しつこいか・・・・)

ちえぞうの姫系サンプルブログ

 

 

 

 

 

上記の手順通りというわけではありませんが、
自分でオリジナル風なブログをつくるならば、大まかな手順も必要です。

 

 

 

パーツの配置は、順番などありませんが、
レイアウトや必要な画像は、最初に揃えてから取り掛かったほうが、
実際時間も短縮できます。

 

 

 

 

いろんなCSSの記述方法がありますので、
組み合わせると、お好きなデザインのブログを作ることができますよ^^

 

 

 

ご自分のイメージ通りのカスタマイズをしたい方は、
ぜひともチャレンジしてみてくださいね。
 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.