Bootstrap はてなブログ 〜学んだので使ってみようと思ったがやめた〜
Bootstrapの設定をとりあえずで行って見たところ、画面が色々と崩れてしまい。。。
ビミョウだな。。。と思いました。
しかし、ここで引き下がるも癪なのでちょっと調べてみる事にします。
はてなブログの画面構成
＜前提＞
- 自分のブログページのソースを見て見た結果です。
- はてなブログ全部に通じる話かどうかはわかりません。
- 調べるポイントは記事や、ヘッダ、フッタなどの枠はどのようなCSSプロパティを使用しているか？を調べます。
→これがわかれば、CSSのプロパティを書き換える(オーバーライド)してやれば画面のデザインを簡単に変更できるからです。
ボディ<body>
<body class="page-entry enable-bottom-editarea category-Bootstrap">
上のようなCSSクラスが指定されていたので、このクラスをオーバーライドしてやれば良いと思うのですが、CSSクラスは似たようなものがたくさんあるのでなんかいじるのに抵抗があります。うーん、デザインのカスタムとかはやめようかな？
画面のヘッダ
<div id="header-container">
記事のヘッダ
<div id="globalheader-container" data-brand="hatenablog">
記事のメイン部分
<div id="container">
<div id="container-inner">
<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title">
<h2 id="blog-description">
</header>
<div id="content" class="hfeed">
<div id="content-inner">
<div id="wrapper">
<div id="main">
<div id="main-inner">
<div class="entry-inner">
<header class="entry-header">
<!-- これはテーマのものと思われる -->
<div class="date entry-date first">
<h1 class="entry-title">
<div class="entry-categories categories">
<div class="entry-content">
感想
どこから、どこまでがはてなブログで使用しているCSSプロパティかわからないので、やっぱりデザインに手をつけるならば、提供されている機能内でやる方が良いと思いました。CSSに慣れ親しんでいる人ならば、問題なくできるのであろうが、自分はJava屋なので、ここら辺を触るのに抵抗があります。
つまるところ
「CSSとかデザインとかある程度慣れている人でなければ、下手に触らない方が良い」
と言う結論に至りました。
追加で見つけたページ
ちょっとずつでも、理解しようとこのページを見つけました。構造などが詳細に記載されています。
でわでわ。。。
