アメブロに横幅いっぱいのヘッダー画像を設置する方法

他のアメブロ等を見ていると、
ヘッダー画像が横幅いっぱいに表示されているブログありますよね。

あれってどうやるの？という、お話です。

手順

画像を用意してアップロードする

「デザインの変更」=>「CSSの編集」と進み、
自分のパソコン内にある画像をアップロードしましょう。

CSSコードを貼り付ける

「デザインの変更」画面から、以下のCSSを貼り付けます。

.skinFrame {
  padding-top: 0px;
}
.skinHeaderArea {
  background: url(● ● ● ● ● ) top left no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 226px;
}
.skinTitle {
  display: none;
}
.skinDescription {
  display: none;
}
.skinContentsFrame {
  margin-top: 20px;
}

●●●●●の部分に先ほどアップロードした画像のURLを、
heightには画像の高さを指定して下さい。

以上で、横幅いっぱいにヘッダー画像を設置できます。お試し下さい。

「幅100%の場合」「背景画像のみ」「CSSだけで作る」など
他にもヘッダー画像の設置方法は色んなパターンがあるので、
別記事でも色々紹介していきますねー。

WordPressはブログを作るだけのものでは無い

最近WordPressが流行ってる気がします。特に個人レベルでも。
で、裾野が広がった分色々な誤解も生まれているように思います。

例えばWordPress＝ブログを作るもの、というイメージ。
アメブロやFC2等と同じ感覚で捉えている方も多いようです。

まぁ間違ってはいないのですが、
ブログだけでなく通常のWebサイトもWordPressで作れます。

例えば下のまとめ記事では、
WordPressで作られた「企業のサイト」が沢山並んでいます。

WordPressでのサイト構築事例を淡々と並べるまとめ

WordPress＝ブログ、と思っている人は
「え、これもWordPressなの？どうなってるの？」
という印象かもしれません（笑）

この辺は、そもそも
Webサイトってどうやって作られてるの？という点が分かると
WordPressで作るメリットも分かってくるのですが・・

まずはこうしたWebサイトも
WordPressで作れるんだ、と知っておいてもらえればOKです。

アメブロに幅980pxのヘッダー画像を設置する方法

アメブロのヘッダー画像を変えてみましょう。

「CSS編集可能」の初期デザインだと
下のようにちょっと味気ないので・・

ヘッダー画像を用意して
下のようにしてしまおう！という事です。

　

ちょうど記事部分の左端から、
サイドバーの右端までの幅で、
ヘッダー画像が貼られるイメージですね。

手順

画像を用意してアップロードする

「デザインの変更」=>「CSSの編集」と進み、
自分のパソコン内にある画像をアップロードしましょう。

CSSコードを貼り付ける

「デザインの変更」画面から、以下のCSSを貼り付けます。

.skinHeaderArea {
  background: url(●●●●●) top left no-repeat;
  height: 226px;
}
.skinTitle {
  display: none;
}
.skinDescription {
  display: none;
}
.skinContentsFrame {
  margin-top: 20px;
}

●●●●●の部分に先ほどアップロードした画像のURLを、
heightには画像の高さを指定して下さい。

以上で、幅980pxのヘッダー画像を設置できます。お試し下さい。

「幅100%の場合」「背景画像のみ」「CSSだけで作る」など
他にもヘッダー画像の設置方法は色んなパターンがあるので、
別記事でも色々紹介していきますねー。

逆引きアメブロカスタマイズのWebサイト、制作中です。ネタ募集中！

どうもです。
お盆はいかがお過ごしですか？

僕は母方の実家に来ております。
もちろんPC持参で仕事も進めつつ（笑）

さてさて、実は今密かに作っているWebサイトがあります。

題して
「やりたい事別！アメブロカスタマイズ攻略書（仮）」

目的に合わせてアメブロのカスタマイズが逆引きで探せるような、
無料で会員登録不要で見れるWebサイト。

HTMLからゴリゴリ作っているのですが、今こんな感じ。

１ページが１つのMissionになっていて、
最後まで進めれば目的が達成されるという感じ。

１つ１つの手順を、
分かりやすくキャプチャー画像付きで解説。

コンテンツのラインナップは以下のような感じで考えていて、
「アメブロカスタマイズ」が終われば「WordPress」や「Webサイト制作」など
色んなジャンルで作っていきたいと思っています。

何か他に
「この辺知りたい」「具体的に自分のブログでココ変えたい」などあれば、
随時追加するのでコメント等で教えて頂ければと思います～。

---

【ヘッダー編】

　- ヘッダー画像を設置（幅980px）

　- ヘッダー画像を設置（幅100%）

　- ヘッダーを画像無しでカッコよくする（CSSオンリーで）

【メニュー編】

　- ヘッダー下メニューを設置

　- ヘッダー下メニューを設置（スクロール時固定）

【記事編】

　- 全ての記事に毎回同じ内容を表示

　- 行間を改行不要で広げる

【サイドバー編】

　- Facebook Like Box を設置せよ

　- Twitter タイムラインを設置せよ

【レイアウト編】

　- 幅可変式レイアウト

【動くしかけ編】

　- ページを開いたら画像がフワッと現れる

　- スクロールしたら画像がフワッと現れる

　- スクロール時にサイドメニューが固定される

　- 「TOPへ戻る」クリックでスムーズに戻る

---

個人的には
武器屋とか、ミッションとか、クエストとか、攻略とか、
僕の好きな「ゲーム」的世界観を出していきたいですね。

一応ゲームデザイン（企画）の専門学校出身ですし、
ゲーミフィケーション（ゲームのハマる仕組みをビジネスに応用）も
色々研究しているので、その辺りの知識をフル動員して進めております。

「ゲームを応用した楽しく学べる学習サービス」を作るのが
僕の目標の１つでもあるので。・・早く、完成させたい（笑）

【動画あり】ワードプレスって結局何なん？使い手目線のWordPress活用術

WordPress（ワードプレス）って
最近よく聞くけど結局何なの？という方向けに
オンラインでミニセミナーを開催してみました。

---

ワードプレスって結局何なん？使い手目線のWordPress活用術 [約20分]

目次

WordPressとは?

 

・何ができるのか？

 

・どんなメリットがあるのか？

アメブロとWordPressの違い

 

・賃貸と一戸建て

 

・「WordPressテーマ」について

 

・「WordPressプラグイン」について

 

・「カスタム投稿」について

ネット集客におけるWordPressサイトの活用術

 

・目的別４パターンの使いドコロ

※スライド資料、以下からダウンロード＆閲覧できます。
　（メルマガ登録など不要です）

[PDF] http://while-creation.com/pdf_seminar140810
[SlideShare] http://www.slideshare.net/oruzu/1408010-word-press

---

リスナーも５人参加してくれたので、
ミニセミナー後は個別に質問を受け付ける形式。

・具体的なWordPressの管理画面が見たい
・おすすめのテーマはありますか？
・おすすめのプラグインはありますか？
・初心者でも出来る導入方法は？
・短縮URLってどういう時に使える？
・有料のプラグインだとこんな事もできますよ
・WordPressテーマ「Stringer3」のカスタマイズを知りたい
・WordPressテーマ「SINKA」のカスタマイズを知りたい

などなど。

頂いた質問からも話す内容がたくさん出てきたので、
上記のネタからもまた、ミニセミナーやろうかと思います。

やっぱりリスナーを交えて実際にやってみると、リアルな声も聴けて良いですね！
参加してくださった方々に、感謝です m(__)m