ブログ散歩|はてなブログのオリジナル、カスタマイズ方法&インテリア

部屋のインテリア同様、ブログをお気に入りのオリジナルデザインにカスタマイズ方法を解説。と長くブログを楽しむ、続ける方法を工夫しています。

はてなブログhtml構造図

広告

f:id:hachi001:20180112032615j:plain

はてなブログ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

あ、できたわ・・・。

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