CSS知識はあんまりないけど、はてなブログのCSSをいじってみよう！の回です。
今日やってみたこと
「サイドバーを左に表示させる」
はてなブログのデザインについて調べていたら、公式さんから案内が出ていました。
こちらで用意されているカスタマイズ用の土台をちょこちょこいじってみますよ。
ブログの構造把握にこちらの記事も参考にいたしました。わかりやすい～！
はてなブログのidとかclassとか - kyabana's blog
CSSについての解説はこちらがよくヒットしました。頼りになる～！
このブログ記事にコードを書く方法はこちらを参考にいたしました。ありがたや～！
はてなブログの記事内にソースコードを載せる方法7つ - みにまる。
このボックスデザインはこちらから使わせていただきました。便利ですね～！
今回はサイドバーの部分を探します。
どうやら配布されているCSSの522行目のあたりみたいです。
/* 2カラムレイアウト */
#content-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (min-width: 768px) {
#content-inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
調べながらメモを書きつつ、左に配置するコードに編集します。
/* 2カラムレイアウト */ /* #content-inner=記事のスペースとサイドバーのスペースをまとめた箱 */ #content-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; /*ボックスの内容を垂直にレイアウトする。*/ -webkit-box-direction: normal; /*ボックスの内容を先頭 (左または上の端) から配置する。 */ -ms-flex-direction: column; /* 積み重なるように配置する */ flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
/* @media=↑の箱の中をどう見せるかの設定 */
@media (min-width: 768px) {
#content-inner {
-webkit-box-orient: horizontal;/* ボックスの内容を水平にレイアウトする *//* 変更→ */-webkit-box-direction: row-reverse;/* 変更→ */-ms-flex-direction: row-reverse;
/* 変更→ */ flex-direction: row-reverse; /* サイドバーを左に配置 */
/* row-reverse は右から左へ向かう水平軸を表している。
なので、コンテンツ１の記事スペースが右から始まり、
コンテンツ２のサイドバーが左に来る。
(flex-direction: row; は行のテキストの方向(左から右)に配置)
-ms-や-webkit-はベンダープレフィックスといって、CSSをそれぞれのブラウザに実装するためのもの。
-ms-はIE。-webkit-はGoogleChromeとSafari。これは全部変えておいた方がよさそう。
新しいプロパティを使用する際はベンダープレフィックス無しの指示も書いておくと、仕様変更や機能停止時にも対応できる。
*/
}
}
テストブログの方で、無事左側に配置できましたよ。
配置変えをしたことで検索ボタンの表示がずれてしまったので、こちらも直さないといけませんね。
たった一つの設定でものすごく時間がかかりました…！
そしてこの記事の書き方も初めてのことばかりでさらに苦戦しましたよ…！
新しいことをする時のこの試行錯誤してる感じ、楽しいです。
