ペヤング焼きそばの理不尽

f:id:tenman:20190408110434j:plain

だいぶ以前のことなのですが、

youtu.be

ギガマックスというサイズの焼きそばがあるらしいのですが、買い物ついでに探してみても、全然商品は見つかりませんでした。

2月の末に、やっとギガマックスを発見

買ってみると、普通のペヤング焼きそばと、どれぐらい違うんだろうと思い始めて

どこでも売っているbigというサイズを買い足しました。

で、食べるでもなく放置していたのですが、数日前「超大盛」というのを見つけ、つい買ってしまいました。



「超超大盛」が、どこかにあるはずだと
無いとおかしいだろーーー

f:id:tenman:20190323114756j:plain
超超大盛はどこにある

一覧にはないぞ?

www.peyoung.co.jp

超大盛があって、超超超大盛があるなら、なぜ超超大盛はないのか?

あるのか? 事件か?

フーム 楽しみってどこにでもあるなぁ

sneaker テーマのサイドバーをカスタマイズしてみよう

sneaker テーマのサイドバーの位置を変更

テーマを使い始めると、カスタマイズしたくなりますよね! そんなあなたのための、簡単なカスタマイズを紹介していきます。

デザイン / / スタイルシート を開きます。

テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。

@media (min-width: 1025px){
    #wrapper {
        order: 2;
    }
}

成功すると、サイドバーは左側に表示されます。どうですか?

f:id:tenman:20190322104300j:plain

sneaker テーマのサイドバーの配色を変更

デザイン / / スタイルシート を開きます。

テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。

@media (min-width: 1025px){
#box2{
    background:black;
    color:ghostwhite;
}
/*リンクの色*/
#box2 a{
    color:lightskyblue;
    }
}

カラーネーム

www.htmq.com

成功すると、サイドバーは黒背景で表示されます。

f:id:tenman:20190322110311j:plain



sneaker テーマのサイドバーのタイトルにアイコンを追加

はてなブログでは簡単にアイコンを表示することもできますので、時間があるときにいろいろトライしてみると楽しいかも、、、

デザイン / / スタイルシート を開きます。

テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。

#box2 .hatena-module-title{
padding-left:1.5rem;
}
#box2 .hatena-module-title:after{
font-family: blogicon;
content: "\f022";
position:absolute;
left:0;
color:red;
}

f:id:tenman:20190322113231p:plain

orefolder-sample.hatenablog.com

はてなブログテーマ 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;
}

WordPress Theme Raindrops 1.319-1.332

Raindrops1.319 では、WordPress4.3向けの修正、従来のPHP4形式のコンストラクタの記述を改めて、PHP5のコンストラクタの記述に改め、

1.332迄の9回のアップデートは、主にアクセシビリティへの対応

トグルアクションクラスで、キーボードアクセシビリティへの対応、

トグルアクションクラスというのは、

<ul>
	<li class="raindrops-toggle raindrops-toggle-title">カスタマイザーを構成するファイル群</li>
	<li class="raindrops-toggle">

テーマカスタマイザーは、-wp-includes/class-wp-customize-control.php
-wp-includes/class-wp-customize-setting.php
-wp-includes/class-wp-customize-section.php
-wp-includes/class-wp-customize-widgets.php
-wp-includes/class-wp-customize-manager.php

からなるPHP API

-wp-includes/js/customize-base.js
-wp-includes/js/customize-loader.js
-wp-includes/js/customize-models.js
-wp-includes/js/customize-preview.js
-wp-includes/js/customize-preview-widgets.js
-wp-includes/js/customize-views.js

からなるjavascript API

を持っています。</li>
</ul>

.raindrops-toggle .raindrops-toggle-titleを組み合わせたリストを記述すると、トグル表示できるという機能なのですが、今までタブ移動でタイトルにフォーカスした時に、本文が開きませんでしたが、タブ移動で本文を開くように、機能を改善しました

タブインデックスでのキーボードアクセシビリティの対応を行った。

<div class="raindrops-tab">
	<ul class="raindrops-tab-list clearfix" role="tablist">
		<li class="dummy">Tab Area</li>
	</ul>

	<div class="raindrops-tab-content clearfix ">
		<div class="raindrops-tab-page" role="tabpanel">
			<h3>日本語</h3>
			
			<p>試験</p>
		</div>
		<div class="raindrops-tab-page" role="tabpanel">
			<h3>英語</h3>
			
			<p>test</p>
		
		</div>
	</div>
</div>

上記のような構造のhtmlを記述すると、自動的にタブ表示が出来る機能ですが、これをタブ移動で、自動的に本文を開くことが出来るように、機能を改善したりしていました。

また、スティッキーウィジェットエリアでの、メニューウィジェット等がドロップダウンで表示できるように変更したり、U detail kbd 要素など おそらくめったに使わないような部分でのスタイルの適用だとか、

きわめて地味な変更を積み上げてきました。


このような地味で、おそらくほとんどのユーザーが気づくことがないような変更は、メンテナンスのモチベーションを維持しにくくて、苦労していました。


ふつふつと湧いてくるのは、「もう、そんなひどいエラーや使いにくさは十分消えているんじゃないの」といった、まるでテーマが完成されつつあるような おごり との闘いでもありました。


ユニットテストは、これまでに何千回もチェックしているし、簡単にバグが見つけられないくなっている。」いくら凝視しても、変更すべき点を見つけられない。


でも、気づいた。自分が作っているテーマなので、見慣れてしまっているし、デフォルトテーマ等の機能と同じぐらいのレベルでみているから、改良点を見つけられない。


WordPressというところから、一歩外れて HTMLとしてみていくと、なんでこの要素は、スタイルが作りこまれていないのか?等と、いくつも出てくる。


しかし、手が動かない。


「無駄な事をやっているじゃないのか」という気分に包まれる。


こういうことを積み上げないと、本当にやるべき事を発見する事は出来ない。と自分に言い聞かせながら この9回のアップデートを行ってきた。


もうすぐ、1.333にアップデートするつもりだ。


1.333では、簡易表示機能の改善と、body_class に edge用のブラウザクラスと、ie11用のクラスを追加します。



簡易表示機能というのは、

functions.phpの先頭に 以下のように変数を記述すると

$raindrops_fallback_human_interface_show = true;

f:id:tenman:20151102084335g:image





という見え方で表示できる機能です。

Raindropsで、表示する事が困難なブラウザや、利用者がのぞむ場合などに、Raindropsの標準的な表示を変更し、最小限のCSSで表示します。




Raindropsというテーマが、積み上げてきた 表示に関するあれこれを、すべてチャラにして表示する機能も、何年も前から必要な機能だと考えて模索してきた、誰も気づくことがないだろうと思われる機能です。



f:id:tenman:20151102091953j:image







back to 2015/8/5

2015 仙台七夕花火大会


例年だと、七夕の花火大会の頃 何かしらのメモを残してきたんですが 今年は、何も残していなかった。


残すべき、何かなどあるはずもない


今年の花火大会は、例年のように、路上の小さな空き空間に二つ折りの新聞紙を敷いたり、木の枝の影にならない微妙なポイントを探しながら見るわけではなかった



花火大会では、有料席がある。

f:id:tenman:20150926121619j:image



f:id:tenman:20150926121620j:image

ビール 3リットル ほどいただく

WordPress Theme Twenty Sixteen

次期デフォルトテーマが、新しい開発手法でスタートを切った。



これまでのデフォルトテーマは、ベースになるテーマを見直したり、エキスパートによって完成したテーマとして公開されてきた。



今回は、それが、Gitやテーマディレクトリで、オープンな形でスタートを切った。




私には、大変化のように見える。




つまり、身近な感じがする。




このテーマが公開された時、インストールだけはしたんだけれど、黒ブチかー みたいなかんじで チラ見していただけだった。




今日、テーマをインストールして少しだけ、時間をかけてテーマを見直してみた。




このテーマは、素晴らしい。 素晴らしいブログテーマとして完成されるだろうと思った。




なにが、素晴らしいのか?




秀逸な アイディアがある。




content-single.phpの中に




	<?php if ( has_excerpt() ) { ?>
		<div class="entry-intro">
			<?php the_excerpt(); ?>
		</div><!-- .entry-intro -->
	<?php } ?>

という短いコードがある。



コードの意味は、投稿に、手書きされた抜粋文がある時には、抜粋を表示する。



たったこれだけのコードなんだけれども、素晴らしいアイディア



概要文を表示するだけの用途でなくても、アイキャッチ画像の代わりに、特別な画像を挿入したり



Oembed で、動画に置き換えたいんだけど、プラグインなんかを使わないで、アイキャッチ画像っぽくちょっとお手軽に表示したいな

等といった変更が簡単になったりする。




概要文で、Oembedを有効にするなら、以下の2行をcontent-single.phpの最初に追加すればいい



<?php
global $wp_embed;
add_filter( 'get_the_excerpt', array( $wp_embed, 'autoembed' ), 9 );
?>


ちょっとしたコードが、「 あー、こんな風にも使えるなぁ というアイディアを触発する 」というのは、すごい事。



これまで、投稿日や、投稿者リンクの前に、「お決まり」のようにつけられていた genericon が 外されているのもいい。




ナビゲーションの 4px の黒いボーダーがやけに目立っている事や、Authorbio が設定されている時、投稿単位で表示されることで、




同じリンクが author と、view all posts by author という 別々のテキストでリンクされることや、ちょっと、気になる事がないわけじゃないんだけれど




新しいバージョンで Twenty Sixteenがデフォルトとして、coreに付属するころにはきっといいものになっている予感 


Twentyfourteen の戦車みたいなやつから、ryu に近い感じ、


でも、やっぱりどこかで、おんなじ人が作っている 感があるなぁ、表現の根っこはひとつなんだなぁ

TOP