アメブロを2カラムで利用するときの裏技(1)
アメブロは「カスタム可能」というテンプレートを選んでおくと
2カラムと3カラムを選ぶことができます。
2カラムのブログを使いたい場合には、上図の
2カラムのうち右にサイドバーがある方か左にあるほうか
どちらかを選ぶと思いますが
もし、サイドバーにいろいろ貼りたいものがある人は
これを選ぶと、本文の表示がとても重くなってしまいます！！
なぜかというと、アメブロのHTML構造が、サイドバーを先に記述してあるからなのです。
これは、サイドバーが右にあっても左にあっても同じです。
2カラムで、無料では掲載必須の広告や、サイドバーにいろいろ置いてあると
それを全部読み込んでからでないと本文が表示されないので
場合によっては読み込みが終るまで待ちきれなくて
見るのをやめてしまう人がいるかも？
もったいないですよね。
その場合、2カラムで表示したくても3カラムを選択します。
そしてside_bというほうにだけ（選んだテンプレートによりますが）
プラグインなどのコンテンツを配置します。
（こんな風になります。）
そして、side_aとmainという本文の部分の横幅や表示などを調整して
2カラムのように見た目を作って行きます。
具体的には、次回から！
2カラムと3カラムを選ぶことができます。
2カラムのブログを使いたい場合には、上図の
2カラムのうち右にサイドバーがある方か左にあるほうか
どちらかを選ぶと思いますが
もし、サイドバーにいろいろ貼りたいものがある人は
これを選ぶと、本文の表示がとても重くなってしまいます！！
なぜかというと、アメブロのHTML構造が、サイドバーを先に記述してあるからなのです。
これは、サイドバーが右にあっても左にあっても同じです。
2カラムで、無料では掲載必須の広告や、サイドバーにいろいろ置いてあると
それを全部読み込んでからでないと本文が表示されないので
場合によっては読み込みが終るまで待ちきれなくて
見るのをやめてしまう人がいるかも？
もったいないですよね。
その場合、2カラムで表示したくても3カラムを選択します。
そしてside_bというほうにだけ（選んだテンプレートによりますが）
プラグインなどのコンテンツを配置します。
（こんな風になります。）
そして、side_aとmainという本文の部分の横幅や表示などを調整して
2カラムのように見た目を作って行きます。
具体的には、次回から！
コンテンツの幅について
有紀＠アメブロ改造マニア！です。
ただいま改造中の当ブログ
現在こんな感じですが、
真ん中の、メインの情報の部分がちょっと横幅が狭いかな？と思ってます。
みなさん、今このブログごらんになっていかがですか？
左右にけっこうスペースあります？
実は、ウェブの見え方って、パソコンやディスプレイによって全然違うんです。
たとえば、別の人のパソコンや、マンガ喫茶、会社のパソコンで見たときと、自宅のパソコンで見たときと、大きさが違ったりした経験はありませんか？
パンフレットやカタログなどの印刷物と違って、ウェブの場合は、どんなにきちんと作っても、そうした見え方のばらつき、「小さすぎる」「大きすぎる」みたいな部分は、どうしても全員にちょうどいい対応をすることができないんです。
そういうわけで、次善の策として、大多数に会わせることになります。
現時点では、ディスプレイの横幅がだいたい1024px以上のものが多いので、1000pxぐらいの幅でサイトやブログを作ると、横幅がぴったりな感じになります。
ところが、このアメブロで用意された、テンプレートは横幅760pxです。
これは一昔前のディスプレイの幅にちょうどいいサイズなんですね。
小さく作れば、今のパソコンで見たたときに左右がすかすかな感じ。
大きく作れば、昔のパソコンで見たときに左右がはみ出て横スクロールバーがでてきてうっとおしい。
ということになります。
昔の古いパソコンでもちょうど良く見える大きさにしておくか、今のパソコンの標準にあわせて少し大きめに作るか、これはそのサイトの読者さんがどういう人が多いか、どういう人に見てもらいたいか？ によって変わるので、作成者の判断になります。
有紀としては、このブログ1000pxくらいに幅を広げようかなっと思ってます。
広げ方はまた別記事で～～♪
ではではっ。
アメブロ改造ドリル目次
ただいま改造中の当ブログ
現在こんな感じですが、
真ん中の、メインの情報の部分がちょっと横幅が狭いかな？と思ってます。
みなさん、今このブログごらんになっていかがですか？
左右にけっこうスペースあります？
実は、ウェブの見え方って、パソコンやディスプレイによって全然違うんです。
たとえば、別の人のパソコンや、マンガ喫茶、会社のパソコンで見たときと、自宅のパソコンで見たときと、大きさが違ったりした経験はありませんか？
パンフレットやカタログなどの印刷物と違って、ウェブの場合は、どんなにきちんと作っても、そうした見え方のばらつき、「小さすぎる」「大きすぎる」みたいな部分は、どうしても全員にちょうどいい対応をすることができないんです。
そういうわけで、次善の策として、大多数に会わせることになります。
現時点では、ディスプレイの横幅がだいたい1024px以上のものが多いので、1000pxぐらいの幅でサイトやブログを作ると、横幅がぴったりな感じになります。
ところが、このアメブロで用意された、テンプレートは横幅760pxです。
これは一昔前のディスプレイの幅にちょうどいいサイズなんですね。
小さく作れば、今のパソコンで見たたときに左右がすかすかな感じ。
大きく作れば、昔のパソコンで見たときに左右がはみ出て横スクロールバーがでてきてうっとおしい。
ということになります。
昔の古いパソコンでもちょうど良く見える大きさにしておくか、今のパソコンの標準にあわせて少し大きめに作るか、これはそのサイトの読者さんがどういう人が多いか、どういう人に見てもらいたいか？ によって変わるので、作成者の判断になります。
有紀としては、このブログ1000pxくらいに幅を広げようかなっと思ってます。
広げ方はまた別記事で～～♪
ではではっ。
アメブロ改造ドリル目次ヘッダの上のスペースを小さくしたい！
有紀＠アメブロ改造マニア！です。
ところで、アメブロのタイトルが書いてあったりするところの上、空白が多すぎませんかー？
そう、ここですよ！！ ↑
これを変更するハックを！
（１）ブログを書く→デザインの変更→スキンCSSの編集 を順にクリックし
↑ これを
文末にコピーして、保存を押します。
↑ 小さくなりましたー！！
アメブロ改造ドリル目次
ところで、アメブロのタイトルが書いてあったりするところの上、空白が多すぎませんかー？
そう、ここですよ！！ ↑
これを変更するハックを！
（１）ブログを書く→デザインの変更→スキンCSSの編集 を順にクリックし
div#userNaviArea{
padding:5px 0px !important;
}
div#userNaviArea a#userNickName{
font-size:1em !important;
}
ul#navigationList{
padding-top:0px !important;
}
↑ これを
文末にコピーして、保存を押します。
↑ 小さくなりましたー！！
アメブロ改造ドリル目次アメブロ改造ドリル目次
有紀＠アメブロ改造マニア（笑）です。
あなたのアメブロを改造するための情報ブログ、目次です。
アメブロ改造準備編
◆アメブロデザインを改造するには？
◆ 改造可能なアメブロスキンの設定方法
◆アメブロスキンの簡単カスタマイズ
◆スキンCSSを編集しよう！
アメブロ改造実践編
◆アメブロ本文のリンクに下線をつけたいっ！
◆ヘッダの上のスペースを小さくしたい！
アメブロ改造上級編
ウェブデザインのコツ
◆コンテンツの幅について
あなたのアメブロを改造するための情報ブログ、目次です。
アメブロ改造準備編◆アメブロデザインを改造するには？
◆ 改造可能なアメブロスキンの設定方法
◆アメブロスキンの簡単カスタマイズ
◆スキンCSSを編集しよう！
アメブロ改造実践編◆アメブロ本文のリンクに下線をつけたいっ！
◆ヘッダの上のスペースを小さくしたい！
アメブロ改造上級編ウェブデザインのコツ◆コンテンツの幅について
アメブロ本文のリンクに下線をつけたいっ！
有紀＠アメブロ改造マニア！です！！（笑
さてさて。
アメブロのもともとのデザインで不便なところといえば…。
本文のリンクに下線が付いていない！！
青い文字で下線が引いてあると
人は、ここをリンクだと判断するんですね。↑これはリンクではありません（笑
まあ、最初にそういうものだっていうのが広まったからなんですが。
でも、リンクがたくさんあったりすると、画面が真っ青で下線ばっかりになってしまって、見づらい、とかかっこわるい、などということもありますよね。
たぶん、アメブロではその辺を配慮して、本文でリンクがあっても下線を表示しない設定にしているのでしょうか。
ただ、「リンクをクリックしてもらいたい」という場合には、この下線がない、ということでリンクが目立ちにくくて、クリックされにくくなってしまいます。
というわけで！
本文のリンクを「下線付き」にしましょう！！
このように、スキンCSSの編集画面にて、末尾に書き込んでください。
書き込めたら保存を押してね！
スキンCSSの編集の仕方はこちら
いかがでしょうか。うまくできない、よくわからないなどの場合は、遠慮なくコメントやプチメでご連絡くださいねー。
ではではっ♪
アメブロ改造ドリル目次
さてさて。
アメブロのもともとのデザインで不便なところといえば…。
本文のリンクに下線が付いていない！！
青い文字で下線が引いてあると
人は、ここをリンクだと判断するんですね。↑これはリンクではありません（笑
まあ、最初にそういうものだっていうのが広まったからなんですが。
でも、リンクがたくさんあったりすると、画面が真っ青で下線ばっかりになってしまって、見づらい、とかかっこわるい、などということもありますよね。
たぶん、アメブロではその辺を配慮して、本文でリンクがあっても下線を表示しない設定にしているのでしょうか。
ただ、「リンクをクリックしてもらいたい」という場合には、この下線がない、ということでリンクが目立ちにくくて、クリックされにくくなってしまいます。
というわけで！
本文のリンクを「下線付き」にしましょう！！
div.subContents a:link,
div.subContents a:visited{
text-decoration:underline;
}
このように、スキンCSSの編集画面にて、末尾に書き込んでください。
書き込めたら保存を押してね！
スキンCSSの編集の仕方はこちらいかがでしょうか。うまくできない、よくわからないなどの場合は、遠慮なくコメントやプチメでご連絡くださいねー。
ではではっ♪
アメブロ改造ドリル目次