アメーバブログさんを利用して数日経ちますが、
アメブロさんに限らず近頃のブログは、
かなりデザインの自由度が高くなっています。
ここはCSSのみ編集可能ですが、
以前使ってたyaplogさんなどは、部分的にHTMLの編集も可能でした。
もちろん、HTMLも編集可能の方が自由度は高いのですが、
もともと綿密にHTMLが組まれているもので、
下手にいじるとデザインが崩壊、修復不可で一から…なんてことになりかねません。
つまり、簡単なデザイン変更でよければ、HTML編集が可能であっても、
極力CSSで行うべきなのです。
これはブログに限らず、自作HPを作る場合にもあてはまります。
というわけで、とりあえず誰もがやりたいような、
「ブログのタイトル画像の差し替え」をCSSのみでやってみたいと思います。
※作業行程は、アメーバブログさんでの作業を前提としますが、
基本的な流れと考え方は、どのブログサービスでも変わりません。
①画像の用意・アップロード
まずはタイトルにしたい画像を用意しましょう。
サイズの指定はありませんが、アメブロの場合、幅は800px、
高さは大体300～500pxくらいにしておくとよいです。
画像ができたら、マイページ→「ブログを書く」タブ→「アメブロを書く」タブ→画像フォルダ
のページからアップロードしておきます。
②実際に画像を表示させる
アメーバブログでは、これは二通りのやり方があります。
どっちも簡単なのですが、まずCSSをいじらなくてすむ方法。
●「ブログを書く」タブ→「デザインの変更」タブ→スキンのカスタマイズ
ページから、「ヘッダ」の画像選択画面から先ほどアップロードした画像を選択するだけです。
次に、CSSをいじる方法。
●「ブログを書く」→「アメブロを書く」→画像フォルダ
ページに行き、先ほどアップした画像を右クリック、「画像のURLをコピー」をクリックします。
「ブログを書く」→「デザインの変更」→「スキンCSSの編集」の画面から、
好きな所に、次のように書きこみます。
#header{
background-image:url("コピーしたURLを貼り付け");
background-repeat:no-repeat;
}
ちょっとHTML知ってる人向けに解説しておくと、
ブログデザインのようにHTMLに手を出せない場合、
CSSのみで自分の好きな画像を表示させるには、background-imageが唯一の方法です。
ご使用のブログのソースをみて、該当箇所のdiv要素に、background-imageを適用すると、
ある程度好きな場所に画像を表示させることができます。
③高さの調整
画像が細かったり太かったりで、違和感がある場合は幅を画像に合わせ調整しましょう。
CSSの好きな所に、次のように書き込みます。
#overHeader{
height:適当な数px;
}
※アメーバブログの場合。
画像より少し大きめにして、余裕を持たせてもいいかもしれません。
基本的にはこれで十分なのですが、
用意された画像によっては、
左上にブログタイトル、ブログ解説が表示されるのが邪魔に感じる方もおられるでしょう。
というわけで
④タイトル、解説の文字を消す。
これまた好きな所に、次のように書きこんでください。
#header h1{
text-indent:-1000px;
}
#header h2{
text-indent:-1000px;
}
好きな所に…
と言ってますが、
よく探せば"header h1"と書かれたカッコはすでにあるはずなので、
その中に書いてもらっても構いません。
文字を消すことは実はできなくって、font-sizeで0px指定したとしても、
めっちゃ小さく画面に残ってしまいます。
なので、文字を大きく移動させ、画面外に吹っ飛ばす、という作業をここでは行っています。
しかし「h1」という要素ごと移動させようとすると、せっかくアップした画像まで吹っ飛んでしまいます。
text-indentは、文字要素だけを移動させることができるので、
-1000pxなど、十分大きな数を指定することで、文字を画面外に吹っ飛ばせます。
ちなみに、
#header h1は、div id="header"の中のh1要素という意味で、ブログタイトルにあたります。
同じく、header h2はブログ解説にあたります。
アメブロさんに限らず、ブログのデザインをCSSで変更する際は、
ブログのソースを見て、「該当箇所はなんというdiv要素にあたるのか」、ということを調べて、
CSSで指定・編集するという形が基本です。
文字が消えましたか？
でもまだ納得いかない人もいることでしょう。
ブログのタイトル文字をクリックするとブログのトップに戻れる、
と言うのがそもそもタイトルの役割でした。
最後に、アップした画像にその機能を持たせてみましょう。
⑤タイトル画像をクリックすると、トップに戻るようにする。
好きな所に、次のように書きます。
header h1 a{
display:block;
height:画像の高さ;
width:画像の幅;
}
どうでしょう？
以上でタイトル画像の変更は終了です、お疲れ様でしたー！
header h1 aは、h1の中のリンク要素を示しています。
なにも指定しない場合、h1のリンク要素は文字とくっつき、
先ほどのtext-indentで、文字と一緒にはるか画面外に吹っ飛んでいます。
文字とリンクを切り離すのが、
display:block;で、「これから四角いリンクゾーンをつくります」という意味であり、
その下のheightとwidthで大きさを画像に合わせています。
アメブロさんに限らず近頃のブログは、
かなりデザインの自由度が高くなっています。
ここはCSSのみ編集可能ですが、
以前使ってたyaplogさんなどは、部分的にHTMLの編集も可能でした。
もちろん、HTMLも編集可能の方が自由度は高いのですが、
もともと綿密にHTMLが組まれているもので、
下手にいじるとデザインが崩壊、修復不可で一から…なんてことになりかねません。
つまり、簡単なデザイン変更でよければ、HTML編集が可能であっても、
極力CSSで行うべきなのです。
これはブログに限らず、自作HPを作る場合にもあてはまります。
というわけで、とりあえず誰もがやりたいような、
「ブログのタイトル画像の差し替え」をCSSのみでやってみたいと思います。
※作業行程は、アメーバブログさんでの作業を前提としますが、
基本的な流れと考え方は、どのブログサービスでも変わりません。
①画像の用意・アップロード
まずはタイトルにしたい画像を用意しましょう。
サイズの指定はありませんが、アメブロの場合、幅は800px、
高さは大体300～500pxくらいにしておくとよいです。
画像ができたら、マイページ→「ブログを書く」タブ→「アメブロを書く」タブ→画像フォルダ
のページからアップロードしておきます。
②実際に画像を表示させる
アメーバブログでは、これは二通りのやり方があります。
どっちも簡単なのですが、まずCSSをいじらなくてすむ方法。
●「ブログを書く」タブ→「デザインの変更」タブ→スキンのカスタマイズ
ページから、「ヘッダ」の画像選択画面から先ほどアップロードした画像を選択するだけです。
次に、CSSをいじる方法。
●「ブログを書く」→「アメブロを書く」→画像フォルダ
ページに行き、先ほどアップした画像を右クリック、「画像のURLをコピー」をクリックします。
「ブログを書く」→「デザインの変更」→「スキンCSSの編集」の画面から、
好きな所に、次のように書きこみます。
#header{
background-image:url("コピーしたURLを貼り付け");
background-repeat:no-repeat;
}
ちょっとHTML知ってる人向けに解説しておくと、
ブログデザインのようにHTMLに手を出せない場合、
CSSのみで自分の好きな画像を表示させるには、background-imageが唯一の方法です。
ご使用のブログのソースをみて、該当箇所のdiv要素に、background-imageを適用すると、
ある程度好きな場所に画像を表示させることができます。
③高さの調整
画像が細かったり太かったりで、違和感がある場合は幅を画像に合わせ調整しましょう。
CSSの好きな所に、次のように書き込みます。
#overHeader{
height:適当な数px;
}
※アメーバブログの場合。
画像より少し大きめにして、余裕を持たせてもいいかもしれません。
基本的にはこれで十分なのですが、
用意された画像によっては、
左上にブログタイトル、ブログ解説が表示されるのが邪魔に感じる方もおられるでしょう。
というわけで
④タイトル、解説の文字を消す。
これまた好きな所に、次のように書きこんでください。
#header h1{
text-indent:-1000px;
}
#header h2{
text-indent:-1000px;
}
好きな所に…
と言ってますが、
よく探せば"header h1"と書かれたカッコはすでにあるはずなので、
その中に書いてもらっても構いません。
文字を消すことは実はできなくって、font-sizeで0px指定したとしても、
めっちゃ小さく画面に残ってしまいます。
なので、文字を大きく移動させ、画面外に吹っ飛ばす、という作業をここでは行っています。
しかし「h1」という要素ごと移動させようとすると、せっかくアップした画像まで吹っ飛んでしまいます。
text-indentは、文字要素だけを移動させることができるので、
-1000pxなど、十分大きな数を指定することで、文字を画面外に吹っ飛ばせます。
ちなみに、
#header h1は、div id="header"の中のh1要素という意味で、ブログタイトルにあたります。
同じく、header h2はブログ解説にあたります。
アメブロさんに限らず、ブログのデザインをCSSで変更する際は、
ブログのソースを見て、「該当箇所はなんというdiv要素にあたるのか」、ということを調べて、
CSSで指定・編集するという形が基本です。
文字が消えましたか？
でもまだ納得いかない人もいることでしょう。
ブログのタイトル文字をクリックするとブログのトップに戻れる、
と言うのがそもそもタイトルの役割でした。
最後に、アップした画像にその機能を持たせてみましょう。
⑤タイトル画像をクリックすると、トップに戻るようにする。
好きな所に、次のように書きます。
header h1 a{
display:block;
height:画像の高さ;
width:画像の幅;
}
どうでしょう？
以上でタイトル画像の変更は終了です、お疲れ様でしたー！
header h1 aは、h1の中のリンク要素を示しています。
なにも指定しない場合、h1のリンク要素は文字とくっつき、
先ほどのtext-indentで、文字と一緒にはるか画面外に吹っ飛んでいます。
文字とリンクを切り離すのが、
display:block;で、「これから四角いリンクゾーンをつくります」という意味であり、
その下のheightとwidthで大きさを画像に合わせています。