はてなブログテーマ sneakers
テーマを有効にすると、大体こんな感じでブログが表示されます
ブログの表示例
段落
「あのイーハトヴォのすきとおった風、」夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
『あのイーハトヴォのすきとおった風、』夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
フォトライフ
画像を、右や左に寄せる方法について
編集 見たまま
html編集をクリックし、画像等を囲うp要素に、クラスを追加します。
左に寄せる場合は、alignleft クラスを 右に寄せる場合は、alignright クラスを追加します。
例
<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見出し
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h2見出し
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h3見出し(*)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h4見出し(**)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h5見出し(***)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h6見出し
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
「あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。」なんて往生際の悪いとても長いタイトルの例です。
asin
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 作者: 近藤淳也
- 出版社/メーカー: 翔泳社
- 発売日: 2006/02/13
- メディア: 単行本
- 購入: 62人 クリック: 1,985回
- この商品を含むブログ (1100件) を見る
引用
本日(11月12日)から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記
リスト(ul,ol,dl)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞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列表示
<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要素を2つを、theme-col-2というクラスで、ラップすると 横2列で表示できます。ブラウザ幅が狭くなると768pxを境界に、横並びは解除されます。
子要素には、以下のクラスが使用できます。
- border クラス
- 枠線と 1文字分のパディング(スペース)を追加します。
- space-left クラス
- 左側に1文字分のスペースを追加します。
- space-right クラス
- 右側に1文字分のスペースを追加します。
上記のサンプルは、一つ目のブロックとして、複数画像の横並びを挿入しています。
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
2列表示のクラスに加えて、以下のクラスを子要素に追加することができます。
- size2of3
- 子要素を2つ設定して、その一つにクラスを追加すると 2/3幅で表示することができます
以下は、size2of3クラスを追加した例です。
注意:横並べブロック内では、見出しタグを使う事ができません。見出しのような表現のためには、文字サイズを調整するなど工夫をしてください。
リンクボタン
HTML編集などでクラスを追加することで、ボタンが作成できます。<a href="https://example.com" class="button">button</a>
<a href="https://example.com" class="button mark-alert">button</a>
<a href="https://example.com" class="button mark-cool">button</a>
<a href="https://example.com" class="button mark-info">button</a>
<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を記述することができます。
上記のスクリーンショットの真ん中あたりに見えるのが、それです。
作り方
デザイン / スパナアイコン / ヘッダー / タイトル下
テキストエリアに、以下のHTMLをペーストすると、プルダウンメニューを表示します。
タイトル要素が、項目名になります。
theme-subblockクラス、title属性、tabindex属性は必須です。
以下の例の場合、サブブロックをクリックしたときに表示されるのが、theme-subblock-content のブロックです。
この子要素には、theme-subblock-contentクラスは必須です。
以下の例では、ulを使っていますが、他のブロック要素でもたぶん、使えます。
ie11でも動作しますが、マウスポインターを乗せた時に、手のひらアイコンで表示できません。
form等を含んだ場合は、ie11 edgeでは動作しません。
<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要素に指定した場合は、左ボーダー、背景に適用されます。
p要素に追加した場合は、1文字分のパティングが追加されます。
100回叩くと壊れる壁があったとする。でもみんな何回叩けば壊れるかわからないから、
90回まで来ていても途中であきらめてしまう。
そうだな、昔パチンコ屋さんでよくスッテンテンになって、真っ黒な感じで帰っていたっけ
組み込み済み下線クラス
- .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; }