• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
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/09/17 19:18
シルバーウィークって忘れてました。 夜も仕事です。 とはいえ、仕事にも飽きたので前から気になっていた「ヘッダーを二段にする」ことにしました。 詳細はトラバ先を参照ください。 この記事は、ヘッダ ...
最近のお遊び♪」 From [ エブと自然を駆け巡ろう! ] 2011/10/08 17:58
この記事は、<font style="color: #ff0000; font-size:
ヘッダー2段!」 From [ 赤いNC! ] 2012/01/20 23:05
この記事は、ヘッダーを2段にする方法について書いています。 Impact!師匠のブログを参考にして、ヘッダーを2段にしてみました! めっちゃ自宅の日常風景ですが(爆)。 <img src= ...
ヘッダー画像を2段盛りに♪」 From [ Drive With ・・・ ] 2012/01/21 21:26
寒いですね~ 雪こそ降ってはいないものの、あんまり外に出る気は起きません。 天気が良ければ来月から開通する東京ゲートブリッジでも見に行きたい所でしたが。 閑話休題 今となっては2年前?位の話 ...
ヘッダー2段に挑戦しました!」 From [  ・ ] 2012/02/07 22:16
この記事は、ヘッダーを2段にする方法について書いています。 RYUさんの師匠という方からこっそり教えてもらいました(笑 僕にはあの細かな英単語の数列を書き換える知識なんて無いですから 本当に助 ...
ヘッダー画像を2段に♪」 From [ It's a photograph l ... ] 2012/05/06 18:00
この記事は、ヘッダーを2段にする方法について書いています。 &nbsp; お友達のImpact!さんのブログを参考にして、ヘッダー画像を2段にしてみました。 1段目は昨日、イタリア街で撮影。 ...
ヘッダー画像を弄ってみました(*^^*)」 From [ Superb view drive ] 2012/07/08 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/02/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/05/28 20:10
ファン登録させて頂いている Impact!さんのブログを見て、 ヘッダー画像を2段にしてみたよ! 元々スタイルシートを弄ってあったので、 少し手間取ったけど、なんとか成功! このブログページ ...
スタイルシートを変えてみる(´-ω-` ...」 From [ ちょっと、びっツ。 ] 2015/07/02 14:38
この記事は、ヘッダーを2段にする方法について書いています。 その昔・・・つったって~13~4年前? 趣味のホームページを作ってみたことがあります(笑)
横浜撮影紀行♪」 From [ 移りゆく季節のなかで~追憶~ ] 2015/07/07 09:22
<a href="/image.aspx?src=http://cdn.snsimg.carview.co.jp/minkara/userstorage/000/023/920/796/63d876 ...
ブログ人気記事

本州の小道(路地)
セイラ2さん

みずかみ🚗💨💨💨
The 昭和さん

付録にSEVが2個も付いている☆
@Yasu !さん

STORY OF LAXURY行っ ...
amggtsさん

ウラカンネタ ウインカーについて  ...
huracan_kazuさん

スバルWRX用ドライカーボン製リア ...
axispartsさん

この記事へのコメント

2011/09/06 22:59:08
しばらくみんカラお休みしていた方とは思えないぐらい

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

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

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

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

ヘッダー2段は比較的簡単だと思いますよ!!
2011/09/06 23:28:56
なるほど~!

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

今度やってみます!

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

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

RYU!さんなら、子供の成長期を写真で並べたりもいいかもです。
2011/09/07 00:36:12
ふむふむ、なるほど了解しました^^

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

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

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

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

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

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

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

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

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

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

コメントへの返答
2011/09/07 23:28:52
こんばんは。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

また、ぜひお越し下さい!!
2011/09/30 15:36:54
こんにちは。

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

無事出来たかな!?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今後とも宜しくお願い致します!!
2015/03/06 01:55:36
初めまして!

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

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

コメントありがとうございます。
今後ともよろしくお願いします‼︎
現在価格を調べてみる

おすすめアイテム

 
 

プロフィール

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

ユーザー内検索

<< 2018/11 >>

    123
45678910
11121314151617
18192021222324
252627282930 

リンク・クリップ

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

お友達

申し訳ございませんが
募集はしておりません。


37 人のお友達がいます
甘太郎甘太郎 * ex.WRX-NSex.WRX-NS *
カルーアカルーア こるくこるく
TakaJunTakaJun Tenkinzoku@KTenkinzoku@K

ファン

503 人のファンがいます

愛車一覧

ヘルプ利用規約サイトマップ
©2018 Carview Corporation All Rights Reserved.