• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2011年09月06日

ヘッダーを2段にする方法





無料のブログなので、広告は仕方ないのですが、いまいち邪魔ですよね。
上に持ち上げて、ヘッダー側に移動させる方法もありますが、せっかくのヘッダーを隠したくないので、
広告の隣に同じ高さの画像を入れて、スッきりバランスよく見せる方法です。

ご覧の通り、私のブログではこの方法で対処しています。






スタイルシート→詳細編集→タブ→
一番上の「タブ」をこちらに書き換えます。

width:100%;
list-style-type:none;
margin:2px 0;
padding:0px;
clear:both;
height:260px;
float:left;
background-image:url('ここに画像のURLを入れる');


この場合は画像の高さを260pxで作っています。
ここはプレビュー確認しながら行うとよいでしょう。

尚、プロフィールページでは画像全部が表示されますが、ブログページでは広告が入る位置の
画像が隠れるので、この分を計算して元の画像を作るといいでしょう。
(横幅の1/3が広告で隠れます。)
広告の高さは250pxくらいなので、ヘッダー画像を作る要領で高さ250~260pxで画像を
フォト蔵などにアップして、画像URLを拾い出して下さい。

*当然ながら、個人の責任において作成して下さい。私は責任を一切負いませんよ(笑)
*作成に成功した方はトラックバックして頂けると嬉しいです。
ブログ一覧 | 日記
Posted at 2011/09/06 22:47:31

イイね!0件



タグ

今、あなたにおすすめ

この記事へのトラックバック

ヘッダーをいじってみる From [ *GEAR HEAD ] 2011年9月17日 19:18
シルバーウィークって忘れてました。 夜も仕事です。 とはいえ、仕事にも飽きたので前から気になっていた「ヘッダーを二段にする」ことにしました。 詳細はトラバ先を参照ください。 この記事は、ヘッダ ...
最近のお遊び♪ From [ エブと自然を駆け巡ろう! ] 2011年10月8日 17:58
この記事は、<font style="color: #ff0000; font-size:
ヘッダー2段! From [ 赤いNC! ] 2012年1月20日 23:05
この記事は、ヘッダーを2段にする方法について書いています。 Impact!師匠のブログを参考にして、ヘッダーを2段にしてみました! めっちゃ自宅の日常風景ですが(爆)。 <img src= ...
ヘッダー画像を2段盛りに♪ From [ Drive With ・・・ ] 2012年1月21日 21:26
寒いですね~ 雪こそ降ってはいないものの、あんまり外に出る気は起きません。 天気が良ければ来月から開通する東京ゲートブリッジでも見に行きたい所でしたが。 閑話休題 今となっては2年前?位の話 ...
ヘッダー2段に挑戦しました! From [  ・ ] 2012年2月7日 22:16
この記事は、ヘッダーを2段にする方法について書いています。 RYUさんの師匠という方からこっそり教えてもらいました(笑 僕にはあの細かな英単語の数列を書き換える知識なんて無いですから 本当に助 ...
ヘッダー画像を2段に♪ From [ It's a photograph l ... ] 2012年5月6日 18:00
この記事は、ヘッダーを2段にする方法について書いています。 &nbsp; お友達のImpact!さんのブログを参考にして、ヘッダー画像を2段にしてみました。 1段目は昨日、イタリア街で撮影。 ...
ヘッダー画像を弄ってみました(*^^*) From [ Superb view drive ] 2012年7月8日 16:48
この記事は、ヘッダーを2段にする方法について書いています。 みん友のImpact!さんのブログを参考にさせて貰ってヘッダー画像を2段にしてみました! これでポップアップする広告がヘッダーに被るこ ...
スタイルシート弄りヽ(*´∀`)ノ From [ エスティマとアイリッシュセター ] 2013年10月22日 01:03
この記事は、ヘッダーを2段にする方法<font style="font-size:
☆ ヘッダを2段に表示する方法 ☆ From [ 団長’s NISSAN SKYLIN ... ] 2013年11月10日 16:16
この記事は、ヘッダーを2段にする方法について書いています。 参加グループの一つであります「フォトクラブF11」の管理者であられる「Impact!」さんの ページに興味深いブログがクリップされており ...
昔のヘッダーを追加してみました From [ オープン翔る道 ] 2014年2月16日 11:24
<img src="http://cdn.mkimg.carview.co.jp/carlife/storage/46059
今日はCSS弄り From [ 44dEV exclusive ] 2014年11月14日 23:26
色々と弄ってきて、最後はヘッダー画像2段組にして終了。 今度これ用の写真を撮ってこないとな~ 下記のリンク先の記事を参考にさせていただきました。 この記事は、ヘッダーを2段にする方法について書い ...
今日はCSS弄り From [ 44dEV exclusive ] 2014年11月14日 23:26
色々と弄ってきて、最後はヘッダー画像2段組にして終了。 今度これ用の写真を撮ってこないとな~ 下記のリンク先の記事を参考にさせていただきました。 この記事は、ヘッダーを2段にする方法について書い ...
2段ヘッダーと昨日の夕景 From [ やっぱり空が好き!(^^) ] 2015年5月28日 20:10
ファン登録させて頂いている Impact!さんのブログを見て、 ヘッダー画像を2段にしてみたよ! 元々スタイルシートを弄ってあったので、 少し手間取ったけど、なんとか成功! このブログページ ...
スタイルシートを変えてみる(´-ω-` ... From [ ちょっと、びっツ。 ] 2015年7月2日 14:38
この記事は、ヘッダーを2段にする方法について書いています。 その昔・・・つったって~13~4年前? 趣味のホームページを作ってみたことがあります(笑)
横浜撮影紀行♪ From [ 移りゆく季節のなかで~追憶~ ] 2015年7月7日 09:22
<a href="/image.aspx?src=http://cdn.snsimg.carview.co.jp/minkara/userstorage/000/023/920/796/63d876 ...
ブログ人気記事

夜な夜な、準備!
shinD5さん

【散歩】藤の季節ですねーーー😀
narukipapaさん

夕日とコラボ
デリ美さん

お疲れ様です🙇(830km)
ゆう@愛媛さん

【シェアスタイル】春光に輝きし山吹 ...
株式会社シェアスタイルさん

山岡家を卒業する。
別手蘭太郎さん

この記事へのコメント

2011年9月6日 22:59
しばらくみんカラお休みしていた方とは思えないぐらい

こちらの弄りも完璧じゃないですか(^m^ )クスッ
コメントへの返答
2011年9月6日 23:48
球際ですべて負けてる・・・
あっ、日本代表のことです。。。

車弄りはお金がかかりますが、ブログ弄りは
お金がかかりませんからね(笑)
何事も研究です♪
2011年9月6日 23:05
綺麗な写真を掲載されている皆さんが色々と工夫されているのをみて挑戦してみましたが、挫折しました。(笑

ヘッダー2段にチャレンジしてみます♪

情報、ありがとうございました。
コメントへの返答
2011年9月6日 23:50
スタイルシートは難しいですね。
私も得意ではありませんが、色々と自分で
やってみて失敗を重ねてます。

ヘッダー2段は比較的簡単だと思いますよ!!
2011年9月6日 23:28
なるほど~!

超参考になりました!!!

今度やってみます!

どの写真に使用か、悩んじゃいます(笑)!
コメントへの返答
2011年9月6日 23:53
上の画像と下の画像につながりがあるようなのだと、より完成度が高く見えるかも。

4こまマンガとか入れてみたいですね(笑)

RYU!さんなら、子供の成長期を写真で並べたりもいいかもです。
2011年9月7日 0:36
ふむふむ、なるほど了解しました^^

と言っても次がいつになるかわかりませんが、色々試してみて今後の参考にさせていただきます。

ありがとうございました♪
コメントへの返答
2011年9月7日 7:25
おそらく、これでいけると思いますよ。

またブログアップ開始してくれることを
楽しみにしています。

See; you♪(´Д`*)ノ
2011年9月7日 8:01
おはようございます。
自分のスタイルシートと比べてました。
私も悪戦苦闘の末にやりましたが、Impactさんとは違ったやり方みたいでした。
再度参考にさせたもらいます。

Wヘッダーはおしゃれだなぁ~と思っていたのですが、二段目のところをImpactさんのように何枚も写真を入れたりすることができたり、スライドショーみたいにできるといいですね。複数枚の貼り付け方はで時間空いた時に教えていただけと嬉しいです。私も落ちついたらやってみたいです。 

スタイルシート講座ありがとうございました。
コメントへの返答
2011年9月7日 23:27
こんばんは。

やり方の違う方法もあるのですね。
そう言えば、鷹山さんのブログではプロフィールページでは2段ではないですね。

スライドショーもgifで入れれば動かせると思います。複数貼り付けは1枚の雛形に何枚も貼って、1枚に合成しているだけです。なので、画像としては1枚を入れているだけなんです。

まだまだ弄れそうな箇所はあると思うので、
なんとか探し出してみます!!
2011年9月7日 8:36
スタイルシート凝ってますね!
勉強になります。

しかもどの写真も素晴らしいですね!!
青空と夕景を交互に置くとメリハリが出ていいですね。

コメントへの返答
2011年9月7日 23:28
こんばんは。

見た目は何事も重要で(笑)
第一印象勝負です♪

いいところに気が付きましたね。流石です!!
ブルー、グリーン、オレンジの鮮やかさで
綺麗に見せかける作戦なんです。
2011年9月7日 18:13
こんばんは
またしてもやってしまいましたね(驚)
やりたいんですが、良い写真がないのが痛いとこです(笑)

Impactさんならご存知かと思いますが、ブログ画像1度に選択するだけで20枚アップ出来る方法ありますが・・・如何ですか??お世話になっておりますので・・・(汗)
あとスタイルシートも・・・←これはわかりますよね・・・
けど僕は3ケ月くらい掛かり大変でした(汗)
コメントへの返答
2011年9月7日 23:31
こんばんは。

人とは違った個性を出したくて、色々と試行錯誤してみました。

1度に20枚アップですか?
フォト蔵の右に出ている公告のでしょうかね?

あとで、メッセージ頂けると嬉しいです。
宜しくお願い致します。。。
2011年9月7日 20:53
とりあえずタブをコピペと(´Д`)ハァハァ

ちなみにボクの画面構成、Impact!さんと左右逆なんですね。。
左に広告がある分、なんとか右に拡げられますので被らないのですが、Impact!さんのように小さい写真を何枚か並べると結構いい雰囲気になりますね。

一度挑戦してみようかな。
やっぱり写真はRQですかね(´Д`)ハァハァ
コメントへの返答
2011年9月7日 23:34
こんばんは。

右にプロフィール出してます。
左にしたこともありましたが、なんかしっくり来なくて、元に戻しました・・・。
と言うのもiPhoneでブログ見たときに、プロフィールを左にすると、配置が崩れてしまうのです。

RQいいですね。9人くらい並べて(´Д`)ハァハァ
2011年9月9日 11:41
色々挑戦してみましたが全て挫折(爆)

パソコン超苦手です(>_<)
コメントへの返答
2011年9月9日 22:45
この2段構えの術は意外と簡単な弄りです。

貼り付ける画像の大きささえ、間違わなければ出来ますよ!!
2011年9月11日 9:46
はじめまして、こんにちは!
早速挑戦してみました。
思考錯誤の結果、何とか形にはなりましたが、プロフィール画面を表示すると左側の画像の幾つかが繰り返し表示されてしまって・・・・
今後改善したいなぁと思っております。
情報提供ありがとうございました!

それにしても、素敵な写真の数々、これからゆっくりと楽しませていただきます(^o^)/
コメントへの返答
2011年9月11日 20:11
はじまして、こんばんは。

挑戦してみましたか!!
繰り返し表示になるのはリピート機能が働いてしまっているのでしょうかね・・・

昔のみんカラはもっと自由度が高くて、いろいろと遊べたのですが、今はスタイルシートにも制限が多いようですね。

また、ぜひお越し下さい!!
2011年9月30日 15:36
こんにちは。

参考にさせてもらって、やってみました!!

無事出来たかな!?

Impactさんみたいに黒のバックで、

何枚かを合成させればもっと綺麗ですよね。
コメントへの返答
2011年10月28日 19:55
すいません・・・
1ヶ月遅れのコメントになってしまいました。

引越しでネットに繋がっていなかったので
今になってしまいまして(汗

黒の背景にすると、写真が綺麗に見えるという
マジックがありますからね(笑)
2012年1月20日 23:06
成功しました!!!

写真がイマイチですが(滝汗)。
コメントへの返答
2012年1月20日 23:20
やりましたか!!

私も今新バージョンに変えてみました♪
2012年1月21日 21:26
こんばんわ。
RYUさんが紹介されていたブログよりやって来ました。

さっそく試させていただき、良い感じに・・
ありがとうございました!
コメントへの返答
2012年1月21日 21:42
こんばんは♪

RYU!さんのお友達で、お名前は存じ上げてます。

成功しましたか!?
すっきりするので、おすすめですね!!
2014年11月14日 23:05
Impact!さん、はじめまして。
記事を参考に早速2段にさせていただきました。
ステキな投稿をありがとうございます♪
今後コレ用の写真を改めて撮りに行きたいと思います!
コメントへの返答
2014年11月14日 23:26
こんばんは。

ブログ拝見しました。
格好良く決まりましたね!!

ココの写真を考えるのも楽しくなりますよ♪
2015年2月11日 15:49
Impact!さん、初めまして。

初コメ&超遅コメ大変失礼いたしますm( _ _ )m
以前よりこの方法を使わせていただいております。
とあるみん友さんから教わったのですが、製作者がImpact!さんであることを後になって知りました。
ご挨拶とお礼が遅れ、申し訳ございません。
大変気に入っているのでこれからも使わせていただきたいと思います。

それにしても、お写真どれも超絶な作品ばかりで驚嘆しております!!
また拝見させてください。ありがとうございました☆
コメントへの返答
2015年2月13日 0:02
こんばんは。

わざわざコメントありがとうございます!!
ご丁寧にお礼だなんて・・・
でも使って頂けて嬉しいです。

今後とも宜しくお願い致します!!
2015年3月6日 1:55
初めまして!

このブログを参考に加工させてもらいました。
多くの方々がそのようにされているのですが、やり方が分からず諦めていました。
ありがとうござういます!

それからブログを全て拝見させてもらいました。
プロの方なんだなぁと・・・
高級な分厚い写真集を見ているようで「おっ!」の連続で。
写真が生きていると表現すれば良いのか分かりませんが、凄かったです。
私は写真を始めて1年も経っておりませんが、素晴らしいお手本に出会えたなと嬉しくなりました!
これからも楽しみにしております(笑)
コメントへの返答
2015年3月6日 9:16
こんにちは。

コメントありがとうございます。
今後ともよろしくお願いします‼︎

プロフィール

「今日は別々でしたが、久しぶりにF11メンバー4人に会いました‼︎」
何シテル?   11/19 22:49
写真がメインのブログです。
みんカラ新規会員登録

ユーザー内検索

<< 2024/4 >>

 123456
78910111213
14151617181920
21222324252627
282930    

リンク・クリップ

情熱 
カテゴリ:その他(カテゴリ未設定)
2015/07/13 23:47:07
ヘッダーを2段にする方法 
カテゴリ:その他(カテゴリ未設定)
2013/10/20 14:27:11

愛車一覧

ヘルプ利用規約サイトマップ

あなたの愛車、今いくら?

複数社の査定額を比較して愛車の最高額を調べよう!

あなたの愛車、今いくら?
メーカー
モデル
年式
走行距離(km)
© LY Corporation