blog.hatena.ne.jp
テーマストア
テーマを有効にすると、大体こんな感じでブログが表示されます
ブログの表示例
段落
「あのイーハトヴォのすきとおった風、」夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
『あのイーハトヴォのすきとおった風、』夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
左
右
画像を、右や左に寄せる方法について
編集 見たまま 例
< p class = "alignleft" >< img class = "hatena-fotolife" title = "f:id:tenman:20190301095652j:plain" src = "https://cdn-ak.f.st-hatena.com/images/fotolife/t/tenman/20190301/20190301095652.jpg" alt = "f:id:tenman:20190301095652j:plain" /></ p >
編集 はてな記法
hatenadiary.g.hatena.ne.jp 編集 Markdown
はてな記法 による位置指定を行います。
注意： alignleft, alighrightクラスは、このテーマでのみ有効です。
ブロック
大きい画像
罫線
h1見出し あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
h2見出し あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
h3見出し（*）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
h4見出し（**）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
h5見出し（***）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
h6見出し あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
「あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。」なんて往生際の悪いとても長いタイトルの例です。
asin
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
リスト（ul,ol,dl）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
大賞1名：Amazonギフト券 5万円分
入選9名：Amazonギフト券 1万円分
大賞1名：Amazonギフト券 5万円分
入選9名：Amazonギフト券 1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
大賞1名
Amazonギフト券 5万円分入選9名
Amazonギフト券 1万円分
テーブル
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
名前
色
個数
りんご
赤
1
みかん
だいだい 2
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
PRE
.XXX {
width :999px ;
height :999px ;
}
.propA , .propB , .propC {
width :999px ;
height :999px ;
}
#YYY {
width :9px ;
height :999px ;
}
テーマ独自の表示 html要素とclassを追加することで、特別な表現も可能です。
横並べ表示
2列表示
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="theme-col-2">
<div class="images-row mceNonEditable">[f:id:tenman:20190225173030j:plain][f:id:tenman:20190221183452j:plain][f:id:tenman:20190221183339j:plain][f:id:tenman:20190220175237j:plain][f:id:tenman:20190219095214j:plain]</div>
<div class="space-left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div> div要素を２つを、theme-col-2というクラスで、ラップすると 横２列で表示できます。ブラウザ幅が狭くなると768pxを境界に、横並びは解除されます。
border クラス
枠線と 1文字分のパディング（スペース）を追加します。
space-left クラス
space-right クラス
上記のサンプルは、一つ目のブロックとして、複数画像の横並びを挿入しています。
3列表示
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
div要素を3つを、theme-col-3というクラスで、ラップすると 横3列で表示できます。ブラウザ幅が狭くなると768pxを境界に、横並びは解除されます。
2列表示のクラスに加えて、以下のクラスを子要素に追加することができます。
size2of3
子要素を2つ設定して、その一つにクラスを追加すると 2/3幅で表示することができます
以下は、size2of3クラスを追加した例です。
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
注意 横並べブロック内では、見出しタグを使う事ができません。見出しのような表現のためには、文字サイズを調整するなど工夫をしてください。
リンクボタン HTML編集などでクラスを追加することで、ボタンが作成できます。
button
< a href = "https://example.com" class = "button" > button </ a >
button
< a href = "https://example.com" class = "button mark-alert" > button </ a >
button
< a href = "https://example.com" class = "button mark-cool" > button </ a >
button
< a href = "https://example.com" class = "button mark-info" > button </ a >
button
< a href = "https://example.com" class = "button mark-notice" > button </ a >
ヘッダー下編集エリア ヘッダー下のカスタマイズ例
ヘッダー検索フォーム
ヘッダー下編集エリアに、検索フォームを配置すると、自動的にスタイルが適用されます。
< form class = "search-form" role= "search" action = "あなたのブログのURL/search" method = "get" >
< input type = "text" name = "q" class = "search-module-input" value = "" placeholder= "記事を検索" required= "" >
< input type = "submit" value = "検索" class = "search-module-button" >
</ form >
ヘッダー下編集エリアには、グローバルメニューなどを配置することが多いと思います。こういったメニュー類とスペースが競合しないよう、少し上側に配置します。
クリックで開く、サブブロックメニュー
ヘッダー下編集エリアにリンク類を多く作る場合は、クリックしてサブブロックを表示できるHTMLを記述することができます。スクリーンショット の真ん中あたりに見えるのが、それです。
作り方
デザイン / スパナアイコン / ヘッダー / タイトル下
theme-subblockクラス、title属性、tabindex属性は必須です。
ie11でも動作しますが、マウスポインタ ーを乗せた時に、手のひらアイコンで表示できません。
< div class = "theme-subblock" title = "サブブロック" tabindex = "0" >
< ul class = "theme-subblock-content" >
< li >< a href = "http://www.tenman.info/" > www.tenman.info </ a ></ li >
< li >< a href = "http://www.tenman.info/labo/css/" > CSS note </ a ></ li >
</ ul >
</ div >
フッター編集エリア
ページトップへ戻るリンク
フッター編集エリアに、scroll-topクラスをつけたリンクを設置すると、リンクは右下に固定されます。javascript を使ったよくあるもののように、スクロールしたら表示といった事はできません。
< a href = "#top" class = "scroll-top" >< span > TOP </ span ></ a >
サイドバーモジュール サイドバーモジュールのうち、一番下に表示されるモジュールは、固定表示になります。
テーマクラス htmlが書ける場合には、カスタムクラスを使うこともできます。
組み込み済み背景クラス。
.mark-stripe, 背景青系ストライプ
.mark-blue( .mark-cool ), 背景 淡い青
.mark-yellow( .mark-notice ) 背景 淡い黄色
.mark-green( .mark-info ) 背景 淡い 緑
.mark-red( .mark-alert ) 背景 淡い 赤
blockquote要素に指定した場合は、左ボーダー、背景に適用されます。
でもみんな何回叩けば壊れるかわからないから、
90回まで来ていても途中であきらめてしまう。
松岡修造の名言
p要素に追加した場合は、１文字分のパティングが追加されます。
そうだな、昔パチンコ屋さんでよくスッテンテンになって、真っ黒な感じで帰っていたっけ
組み込み済み下線クラス
.u-blue( .u-cool ) 下線 淡い青
.u-yellow( .u-notice ） 下線 淡い黄色
.u-green( .u-info ) 下線 淡い緑
.u-red( .u-alert ) 下線 淡い赤
編集メニューのUボタンをクリックした場合、デフォルトでは、淡い青線 となります。
既知の問題 設定/ブログの説明で、長文を入力した場合IE11、Edgeでは、中央揃えとなり、やや読みづらくなります。モダンブラウザの場合、文字数に応じて少なければ、中央揃え 多ければ、左揃えで表示されます。
ヘッダー画像は、アップロードされたサイズを引きのばしますので、よく見ると少しボケてしまいます。
ぼやけるのが困るときには、以下の例を参考にカスタマイズしてください。 :)
以下は、ヘッダー画像のみ表示が設定された場合に、アップロード画像サイズ(1000px）で表示する例です。
body .page-archive-category-name.header-image-only #blog-title ,
body .page-about.header-image-only #blog-title ,
body .page-entry.header-image-only #blog-title ,
body .page-archive.header-image-only #blog-title ,
body .page-index.header-image-only #blog-title {
background :rgba( 52 , 152 , 219 , .1 ) ;
}
body .page-archive-category-name.header-image-only #blog-title #blog-title-inner ,
body .page-about.header-image-only #blog-title #blog-title-inner ,
body .page-entry.header-image-only #blog-title #blog-title-inner ,
body .page-archive.header-image-only #blog-title #blog-title-inner ,
body .page-index.header-image-only #blog-title #blog-title-inner{
width :1000px ;
margin-left :auto ;
margin-right :auto ;
}
