はてなブログテーマ sneakers

blog.hatena.ne.jp


テーマストア

テーマを有効にすると、大体こんな感じでブログが表示されます

ブログの表示例

段落

「あのイーハトヴォのすきとおった風、」夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

『あのイーハトヴォのすきとおった風、』夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


画像を、右や左に寄せる方法について

編集 見たまま
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>

f:id:tenman:20190301095652j:plain

f:id:tenman:20190301095652j:plain

編集 はてな記法
hatenadiary.g.hatena.ne.jp
編集 Markdown
はてな記法による位置指定を行います。
注意:alignleft, alighrightクラスは、このテーマでのみ有効です。

ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

罫線


h1見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h2見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h3見出し(*)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h4見出し(**)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h5見出し(***)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h6見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

「あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。」なんて往生際の悪いとても長いタイトルの例です。

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

「へんな会社」のつくり方 (NT2X)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

リスト(ul,ol,dl)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

  1. 大賞1名:Amazonギフト券5万円分
  2. 入選9名:Amazonギフト券1万円分
    1. 大賞1名:Amazonギフト券5万円分
    2. 入選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列表示

f:id:tenman:20190225173030j:plainf:id:tenman:20190221183452j:plainf:id:tenman:20190221183339j:plainf:id:tenman:20190220175237j:plainf:id:tenman:20190219095214j:plain

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要素を2つを、theme-col-2というクラスで、ラップすると 横2列で表示できます。ブラウザ幅が狭くなると768pxを境界に、横並びは解除されます。
子要素には、以下のクラスが使用できます。

  • border クラス
    • 枠線と 1文字分のパディング(スペース)を追加します。
  • space-left クラス
    • 左側に1文字分のスペースを追加します。
  • space-right クラス
    • 右側に1文字分のスペースを追加します。

上記のサンプルは、一つ目のブロックとして、複数画像の横並びを挿入しています。

3列表示


f:id:tenman:20190225180801j:plain
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


f:id:tenman:20190225173030j:plainf:id:tenman:20190221183452j:plainf:id:tenman:20190221183339j:plainf:id:tenman:20190220175237j:plainf:id:tenman:20190219095214j:plain
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


f:id:tenman:20190225180801j:plain
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クラスを追加した例です。

f:id:tenman:20190225173030j:plainf:id:tenman:20190221183452j:plainf:id:tenman:20190221183339j:plainf:id:tenman:20190220175237j:plainf:id:tenman:20190219095214j:plain

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>

ヘッダー下編集エリア

f:id:tenman:20190301092908p:plain
ヘッダー下のカスタマイズ例

ヘッダー検索フォーム

ヘッダー下編集エリアに、検索フォームを配置すると、自動的にスタイルが適用されます。 

<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>

フッター編集エリア

f:id:tenman:20190301093723p:plain

ページトップへ戻るリンク

フッター編集エリアに、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要素に指定した場合は、左ボーダー、背景に適用されます。


100回叩くと壊れる壁があったとする。

でもみんな何回叩けば壊れるかわからないから、

90回まで来ていても途中であきらめてしまう。

松岡修造の名言

p要素に追加した場合は、1文字分のパティングが追加されます。

そうだな、昔パチンコ屋さんでよくスッテンテンになって、真っ黒な感じで帰っていたっけ

組み込み済み下線クラス

  • .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;
}
TOP