2年近くブログをしていて、はじめてテンプレートを変えてみました。
gooブログは無料ユーザーだとできることが少ないみたいです。選択できるテンプレートの中でカスタマイズ可能なものは限られています。カスタマイズには、直接CSSを変更するか、カスタマイズ可能な専用テンプレートを選択するかのどちらかです。後の方は、エディターを使って、列数を変えたり、メニューの順番を変えたりできます。テンプレートにブログパーツを貼れるのも後者だけです。CSSは私には難しかったのと、ブログパーツを貼ってみたかったので、カスタマイズ可能なテンプレートにしてみました。
左下の方にこそっと貼ってあるのが「gooあしあと」というアクセス解析用のブログパーツです。何人アクセスしたとかが見れるそうです。
このテンプレートのいいところは、preタグでソースを貼ったときに、幅が広かったりすると、以前のだとページ全体の幅も広くなっていましたが、今回のは横スクロールバーが出るのでページ全体の幅が広くなることはなくなりました。
cssですが、htmlの中にclass=ほにゃと書かれていて、ほにゃの部分は.cssファイルを参照して色や文字の大きさといった見た目を変えるのに使う、というのが現在の理解です。中身と見た目を独立させることで、ブログのテンプレートのように、全記事の見た目を一気に変更したりできるのが便利な所です。cssを直接いじるのは、htmlを直に書くのと似ています。面倒なので専用のエディターとかないとつらそうでした。結局cssは挫折して楽な方に流れてしまいました。
最後にcssについて色々教えてくれた、のりたんさんありがとうございました。
gooブログは無料ユーザーだとできることが少ないみたいです。選択できるテンプレートの中でカスタマイズ可能なものは限られています。カスタマイズには、直接CSSを変更するか、カスタマイズ可能な専用テンプレートを選択するかのどちらかです。後の方は、エディターを使って、列数を変えたり、メニューの順番を変えたりできます。テンプレートにブログパーツを貼れるのも後者だけです。CSSは私には難しかったのと、ブログパーツを貼ってみたかったので、カスタマイズ可能なテンプレートにしてみました。
左下の方にこそっと貼ってあるのが「gooあしあと」というアクセス解析用のブログパーツです。何人アクセスしたとかが見れるそうです。
このテンプレートのいいところは、preタグでソースを貼ったときに、幅が広かったりすると、以前のだとページ全体の幅も広くなっていましたが、今回のは横スクロールバーが出るのでページ全体の幅が広くなることはなくなりました。
cssですが、htmlの中にclass=ほにゃと書かれていて、ほにゃの部分は.cssファイルを参照して色や文字の大きさといった見た目を変えるのに使う、というのが現在の理解です。中身と見た目を独立させることで、ブログのテンプレートのように、全記事の見た目を一気に変更したりできるのが便利な所です。cssを直接いじるのは、htmlを直に書くのと似ています。面倒なので専用のエディターとかないとつらそうでした。結局cssは挫折して楽な方に流れてしまいました。
最後にcssについて色々教えてくれた、のりたんさんありがとうございました。
なかなかいい感じですね。
さっそくの足跡ありがとうございます。
なんかSNSみたいですね。どうなるのか分からずにつけてましたが、どういうものか少し分かった気がします。
gooのテンプレートは以前の灰色っぽい文字が多いみたいです。文字色だけでも選べるといいのですが。今回は色々と勉強になりました。
私は全てに対応することはできないので、「Firefoxのみ対応」宣言を出してしまいました。IEも、ちゃんと、「w3c標準」に従って欲しいところです。
>普通のテキストエディタで
ぐはっ、超人ですね。どれを直して、どれがまだなのかが、すぐ分からなくなります＞＜
一応、次のようなのを試してみました。
pre {
overflow-x: scroll;
background-color:#f5f5f5;
}
確かにIE7だとスクロールバーが出ませんね。他にautoというのも試してみました。画面全体の幅を指定して固定する必要があるのかな。でも、それはそれでなんか嫌ですね。
ええ、私もFirefoxのみ対応です。
のりたんさんのブログは、ソースが縦にもスクロールするのがいいですね。
このテンプレートに変えて、よくなったのはコメントで名前を記憶するというのができたことです。でも、ブログ内をサーチするがなくなりました＞＜
あしあと解析のおかげで、どんなキーワードで飛んでくる方が多いのかとかが分かるようになりました。MAXII Micro Kitがトップでした。
今回は色々と勉強になりました。今後ともよろしく御指導くださいm(_ _)m
まだ1日分くらいしかないですが、アクセス解析おもしろいです。ぜひとも貼ってみてください。
私が使っている PRE タグは、こうなっています。
.articles-body pre {
margin: 1.5em 0.5em;
border: dashed thin #0C99CC;
padding: 3pt 1em;
font-size: larger;
overflow: auto;
}
overflow に auto を指定すると適宜、スクロール・バーが出てきます。
外側の DIV タグに付いているのが、これです。
.articles {
width: auto;
padding-bottom: 2em;
margin-bottom: 1em;
margin-right: 220px;
border-left: thin solid #003366;
border-right: thin solid #003366;
border-bottom: thin solid #003366;
overflow: hidden;
}
width に auto を overflow に hidden を指定すると、固定幅要素を確保した残りの幅になり、はみ出した部分は表示されません。そのため、ブラウザの幅を変更すると本文の幅が可変され、 PRE タグだけにスクロール・バーが出ていたのだと思います。う～ん、ドキュメントが無いので記憶が定かでない。