はてなブログhtml構造図

はてなブログhtml構造図作ってみました

現役プログラマの私が中身を分析。

おしゃれインテリアブログを目指している私、、、結局はこっちの方が得意。

ざっくり全体

body

#header-container

#sp-suggest

a link スマートフォンサイズで見る

#globalheader-container
上部のはてなのバー

#container
ブログ本体

#container-inner

header #blog-title
【タイトル部】

#top-editarea
【タイトルの下】

div .nav

#content
【記事、カテゴリ等】

header #blog-title 【タイトル部】

header #blog-title 　　　　

#blog-title-inner 　　　　　

#blog-title-content

h1#title
h2#blog-description 　　　　　

#content　【記事、カテゴリ等】

#content

#content-inner

#wrapper

#main
記事部

#box1
サイドバー（カテゴリ等）部

#box2
サイドバー（カテゴリ等）部2

すごい入れ子になっております

#main　【記事部】

#main

#main-inner

article .entry

.entry-inner

.entry-header
記事タイトル部

.date entry-date

h1.entry-title
記事タイトル

.entry-header-menu
編集ボタン

.entry-content
記事本体

.entry-footer
記事フッター

p.entry-footer-section
記事作成者の名前、投稿時間

p.hatena-star-container
はてなスター

p.hatena-star-metadata

.social-buttons

.social-button-item

.social-button-item

.social-button-item

.customized-footer

私の使用中のデザインではbox2を使用中でした。

#box1【サイドバー（カテゴリ等）部】

#box1

#box1-inner
各種カテゴリーが並んでおります

#box2【サイドバー（カテゴリ等）部2】

box1と同じ

はてなの記事編集画面が使いにくい

何度も書き直しました。はてなの記事編集画面が使いにくくて、勝手にHTMLタグが自動で挿入されて思った通りにならなくて。

結局、pre,codeタグが使えませんでした。

なぜだ！！と思ってヘルプを見てみると・・・

staff.hatenablog.com

「HTML」モード！！

なんとリアルタイムプレビューつき！

Markdownもあるのね。好きじゃないから使わないけど。

code

あ、できたわ・・・。

整理できたので、これを見ながら、デザインを編集したいと思っています。