アメブロ改造についての質問です。


http://ameblo.jp/ailovekidohudo/
↑のようなブログをよく見かけます。
どうやったら上のようなブログにできるのでしょうか?
やり方が乗っているもののURLを張ってくださっても
構いません。
お願いします!!

回答の条件
  • 1人5回まで
  • 登録:2012/11/23 10:34:26
  • 終了:2012/11/30 10:35:09
id:turugi-yuka

すみません、説明不足でした・・・。
女の子がいますよね?その隣の枠?のようなものの作り方です。

回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512012/11/25 15:51:18

今回の質問は、以前の質問のhttp://q.hatena.ne.jp/1350395581の続きでしょうか?
『アニメキャラが横に浮き出ていたりするもの』の状態が良く分かりませんが、記事本文のスクロールを記事表示部分のスクロールバーで行い、背景画像はスクロールされず常に同じ部分が見えている状態を指すのでしたら、次のようにしてみてください。
※どちら側の事か分かりませんが、記事本文もメッセージの枠も同じ方法で実現できます。


【※ 準備 ※】

アメーバブログでデザインを編集するには、「CSS編集用デザイン」を適用している必要があります。
「ブログ管理」画面で「デザインの変更」にアクセスした時に、「適用中のデザイン」のデザイン名が「CSS編集用デザイン」で下に「CSSの編集」リンクがない場合は、まず先に画面下の「カスタム可能」ボタンをクリックして、「CSS編集用デザイン」をクリックして表示を確認後、デザインを適用してください。
※適用するデザインの変更完了後、そのまま「CSSの編集をする」ボタンをクリックするか、あるいは「デザインの変更」ページで「CSSの編集」リンクをクリックして、CSS編集画面にアクセスしてください。
※背景画像は自分で用意する必要があります。CSSの編集画面上部にある「アップロード」ボタンから使用する画像のアップロードが可能です。
幅1000px × 高さ650px程度の大きさで、キャラクターイラストの他に、記事表示部分の背景(枠)が描かれた画像を用意してください。(もし必要でしたら、キャラクターの横に吹き出しを描いてください。※吹き出しでなくても、メッセージ表示部分の背景(枠)となるようなものでしたら大丈夫です。)
※吹き出しのメッセージや下に表示されている規約は、フリースペースを使用しています。
もしメッセージ等を表示したい場合は、フリースペースに入力して、「配置設定」で「使用する機能」の欄に配置して置いてください。(一部を除いてHTMLも入力できます。)
※参考ブログでは、フリースペースと広告(規約によって非表示等は禁止)以外は表示していないようです。プロフィールやカレンダーなどの機能を表示する場合は、右サイドバーに配置して広告と一緒に表示するか、「使用しない機能」に移動して停止した方がいいかもしれません。


「ブログ管理」画面→「デザインの変更」→「CSSの編集」にアクセスしてCSSを変更します。
・アップロードした画像を背景に指定します。(※記述追加)

.skinFrame2 {
  position: relative;
  width: 1000px !important; /* 背景画像の幅を指定 */
  height: 650px; /* 背景画像の高さを指定 */
  margin: auto;
  margin-top: 5px;
  background-image: url(画像のURL);
}


※画像のURLは、アップロードした画像の下の「この画像のパス」欄からそのままコピーして貼り付けます。

・記事表示部の背景色を透明にします。(※元の記述を少し変更します。)

/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:transparent; /* 元の値 #ffffff; */ /* ←記事に背景を敷きたいとき */
}


・サイドバーの配置と背景色の透明化を指定します。(※記述を追加)

.skinSubA {
width: 170px !important;
height: 510px;
overflow: auto;
background-color:transparent; /*背景色*/;
position: absolute; /* 配置の絶対指定 */
left: 805px; /* .skinFrame2の左端からの位置 */
top: 95px; /* .skinFrame2の上端からの位置 */
}


・記事表示部の配置を指定します。(※記述追加)

.skinMainArea {
width: 380px !important; /* 画像の記事表示部分背景に合わせて変更 */
height: 510px; /* 画像の記事表示部分背景に合わせて変更 */
overflow: auto;
position: absolute; /* 配置の絶対指定 */
left: 400px; /* .skinFrame2の左端からの位置 */
top: 95px; /* .skinFrame2の上端からの位置 */
overflow-x: hidden;
}



※上記作業が完了すると、ほぼ参考ブログのように表示されると思います。
フォントサイズや細かい配置等は、画像に合わせて好みで変更してください。


※記事表示部など、特定の位置に表示したい各要素の配置方法はpositionによって指定し、topとleftで指定しています。
http://www.tagindex.com/stylesheet/box/position.html
http://www.tagindex.com/stylesheet/box/top_right_bottom_left.html

※枠を作る各ボックスの幅と高さは、それぞれwidth、heightで指定して大きさを固定表示し、overflowによってはみ出る(ボックス内に収まらない)要素の表示方法を指定しています。
http://www.tagindex.com/stylesheet/properties/width.html
http://www.tagindex.com/stylesheet/properties/height.html
http://www.tagindex.com/stylesheet/properties/overflow.html

  • id:rouge_2008
    どの部分のやり方でしょう?
    そのブログのどの部分について知りたいのか分からないと、回答するのは難しいと思います。

    同じ質問がもう一つありますが、そちらはキャンセルして置いてくださいね。
    「質問終了・設定変更」→「回答の受付を一時停止」→再度「質問終了・設定変更」→「質問をキャンセルする」

    http://q.hatena.ne.jp/1341282989
    http://q.hatena.ne.jp/1345194765

    質問の内容を一部修正・変更したい場合は、今後は質問の編集機能を使うといいです。
    http://q.hatena.ne.jp/help/questioner_comment

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません