https://ameblo.jp/about4u/ アメブロスキンをカスタマイズしていきます。誰でもオリジナルスキンが作れるよう書いていきたいと思います。 ja-jp https://ameblo.jp/about4u/entry-10006319537.html 掲示板・質問掲示板 ブログ内にない事で解からない場合はこちらにどうぞ。リクエストもお待ちしてます。記事がある場合は、その記事のコメント欄へ。ＨＴＭＬとＣＳＳ・アメブロＨＴＭＬソース ＣＳＳを弄るにはまずＨＴＭＬを確認。（流し読み程度）・ＨＴＭＬとＣＳＳ 大体どんなものかを知る。ＣＳＳ編集画面・大きく分けて３つ 何処を見ればいいの？ＣＳＳ編集画面は大きく３つに分かれています。・all_skin部分 最初の部分。個別に設定がない場合、全てのスキンに適応されるＣＳＳ。・スキン別common.css部分 2008-11-20T20:02:06+09:00 https://ameblo.jp/about4u/entry-10007051545.html ＣＳＳ編集画面で「#header」と検索（Ctrl+F）すると見つかるＣＳＳは少ない。「/*--header--*/」部分と「/*--font-information--*/」部分に存在する。タグ名は「#header」と「#header h1」と「#header h2」だ。/* ----------------------- header ----------------------- */#header{display:block;position : relative ;top : 0 ;l 2005-12-13T23:29:36+09:00 https://ameblo.jp/about4u/entry-10007011936.html 雪だるま青グラデーション のカスタマイズの応用としてグラデーションの大きさを大きくすると、記事やサイドバーに重なったデザインにする事ができます。ヘッダ部分なので「header」に拘らず「frame」を利用することにより、色々なデザインにする事が可能というわけです。 この時、スキンによっては背景カラーが出てしまう場合があります。 「wrap」「sub_a」「main」「sub_main」「sub_b」などのボックスの背景カラーを削除することで上手く表示されます。background: #fff u 2005-12-12T16:03:50+09:00 https://ameblo.jp/about4u/entry-10007011284.html このブログで例として使用した素材は無料で配布しています。使用目的ではない為、かなり雑な仕上がりです。ですが、気に入っていただければご自由にお使いください。使用する際は必ず、保存し自分のブログにアップロードしてください。著作権表記も当ブログをリンクする必要もありません。画像のサイズ色などなど各自で加工していただいても問題ありません。ご自由にお使いください。素材加工が出来ないと言う方には「色の変更」「サイズ変更」くらいでしたら、お望みのものに加工いたしますので必要であればコメント欄にでもお知らせくだ 2005-12-12T15:35:47+09:00 https://ameblo.jp/about4u/entry-10007010538.html ブログのタイトル部分（header）をカスタマイズします。やり方は沢山ありますが、それは追々…。まず、どんなデザインにしたいかをイメージし素材を集めます。素材屋から借りてくるもよし、自作すれば加工も出来るので便利です。では今回私がイメージするヘッダですが このようなものにしてゆきたいと思います。このようにするには、このような素材が必要です。 こうして作ってみたはいいものの…。アメブロではヘッダ用の大きな画像をアップロードする事が出来ません。最大640pxに縮小されてしまうのです。これをヘッダの背 2005-12-12T15:15:31+09:00 https://ameblo.jp/about4u/entry-10006779666.html 前回 、広告やプラグインなどを左に配置したいのに無理やり逆に設置しました。では今回は左右逆になったサイドバーをカスタマイズして行きます。サイドバーの配置で右側に、広告やプラグインなどは並べられたでしょうか。そして、残りのメニューの配置はすんだでしょうか。現在ブログは、サイドバーの配置どおりです。では、サイドバーを逆にします。ＣＳＳ編集画面の一番下を見てください。そしてまず「sub_b」のＣＳＳを見て、あなたのブログスキンが「float」なのか「position」なのかを確認してください。floa 2005-12-05T05:34:44+09:00 https://ameblo.jp/about4u/entry-10006779113.html 前回 、２カラムにしたいブログを３カラムと無理やり選択しました。では今回は３カラムから２カラムへとカスタマイズして行きます。サイドバーの配置で右側に、表示させたいメニューは並べられたでしょうか。 ２カラムですので左側に配置しても後に消えますので注意してください。では現在ブログはどうなっているかというと このようになっているかと思います。左側「sub_a」部分の余白があります。この余白部分を消していくわけです。作業は簡単なのですが、ちょいとばかし説明する側がややこしいので伝えきれないかもしれません 2005-12-05T04:03:37+09:00 https://ameblo.jp/about4u/entry-10006668333.html まずはスキンを選びます。ＨＴＭＬは、殆ど同じ作りです。なので、どのスキンを選んでも一緒。極端に言えば、「オーバーラップスキン」を選んでもＣＳＳを弄れば「秋スキン」にも出来るということ。ただ、自分がイメージするスキンに近い物を選ぶとカスタマイズが楽です。中には、カスタマイズ不可のスキンもあります。それから、広告部分は弄れなくもないのですが、私は広告表示を変えてしまうのはあまり好きではないので、このブログでは紹介しません。なので、広告のタイプでスキンを選ぶ事をオススメします。広告のリンク色や背景色で 2005-12-01T19:57:47+09:00 https://ameblo.jp/about4u/entry-10006559614.html header wrap　までのＣＳＳ設定ができて（参照 ） このような状態です。ＨＴＭＬをみると（省略してます）<div id="wrap"><div id="firstContentsArea"><div id="subFirstContentsArea"><div id="sub_a">サイドバーの中身</div><div id="main"><div id="sub_main">記事部分の中身</div></div></div></div><div id="sub_b">サイドバーの中身< 2005-11-29T23:19:26+09:00 https://ameblo.jp/about4u/entry-10006557411.html subFram　までのＣＳＳ設定ができて（参照 ） このような状態です。ＨＴＭＬをみると（省略してます）<div id="subFram"><div id="header"><h1><a href="ブログURL">ブログタイトル</a><h2>ブログの説明</h2></div><div id="wrap">ブログの中身</div></div>subFrame内に「header」と「wrap」が入っている事が解かります。では、「header」と「wrap」をＣＳＳ編集画面で検索（Ctrl + F 2005-11-28T07:48:05+09:00