だいぶ以前のことなのですが、
ギガマックスというサイズの焼きそばがあるらしいのですが、買い物ついでに探してみても、全然商品は見つかりませんでした。
2月の末に、やっとギガマックスを発見
買ってみると、普通のペヤング焼きそばと、どれぐらい違うんだろうと思い始めて
どこでも売っているbigというサイズを買い足しました。
で、食べるでもなく放置していたのですが、数日前「超大盛」というのを見つけ、つい買ってしまいました。
「超超大盛」が、どこかにあるはずだと
無いとおかしいだろーーー
一覧にはないぞ？
超大盛があって、超超超大盛があるなら、なぜ超超大盛はないのか？
あるのか？ 事件か？
フーム 楽しみってどこにでもあるなぁ
テーマを使い始めると、カスタマイズしたくなりますよね！ そんなあなたのための、簡単なカスタマイズを紹介していきます。
デザイン / / スタイルシート を開きます。
テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。
@media (min-width: 1025px){ #wrapper { order: 2; } }
成功すると、サイドバーは左側に表示されます。どうですか？
デザイン / / スタイルシート を開きます。
テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。
@media (min-width: 1025px){ #box2{ background:black; color:ghostwhite; } /*リンクの色*/ #box2 a{ color:lightskyblue; } }
カラーネーム
成功すると、サイドバーは黒背景で表示されます。
はてなブログでは簡単にアイコンを表示することもできますので、時間があるときにいろいろトライしてみると楽しいかも、、、
デザイン / / スタイルシート を開きます。
テキストエリアの一番下に、以下の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; }
テーマを有効にすると、大体こんな感じでブログが表示されます
「あのイーハトヴォのすきとおった風、」夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
『あのイーハトヴォのすきとおった風、』夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
編集 見たまま
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>
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
| 名前 | 色 | 個数 |
|---|---|---|
| りんご | 赤 | 1 |
| みかん | だいだい | 2 |
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
.XXX { width:999px; height:999px; } .propA, .propB, .propC { width:999px; height:999px; } #YYY { width:9px; height:999px; }
<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を境界に、横並びは解除されます。
子要素には、以下のクラスが使用できます。
上記のサンプルは、一つ目のブロックとして、複数画像の横並びを挿入しています。
2列表示のクラスに加えて、以下のクラスを子要素に追加することができます。
以下は、size2of3クラスを追加した例です。
注意：横並べブロック内では、見出しタグを使う事ができません。見出しのような表現のためには、文字サイズを調整するなど工夫をしてください。
<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>
blockquote要素に指定した場合は、左ボーダー、背景に適用されます。
p要素に追加した場合は、１文字分のパティングが追加されます。
100回叩くと壊れる壁があったとする。でもみんな何回叩けば壊れるかわからないから、
90回まで来ていても途中であきらめてしまう。
そうだな、昔パチンコ屋さんでよくスッテンテンになって、真っ黒な感じで帰っていたっけ
編集メニューのUボタンをクリックした場合、デフォルトでは、淡い青線となります。
ヘッダー画像は、アップロードされたサイズを引きのばしますので、よく見ると少しボケてしまいます。
ぼやけるのが困るときには、以下の例を参考にカスタマイズしてください。 :)
以下は、ヘッダー画像のみ表示が設定された場合に、アップロード画像サイズ(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; }
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;
という見え方で表示できる機能です。
Raindropsで、表示する事が困難なブラウザや、利用者がのぞむ場合などに、Raindropsの標準的な表示を変更し、最小限のCSSで表示します。
Raindropsというテーマが、積み上げてきた 表示に関するあれこれを、すべてチャラにして表示する機能も、何年も前から必要な機能だと考えて模索してきた、誰も気づくことがないだろうと思われる機能です。
私は、シルバーウィークという名前が嫌いだ せめて プラチナウィーク ぐらいにしてほしい
だが、せっかくなので 男鹿 秋田辺りを放浪してくる
2015 仙台七夕花火大会
例年だと、七夕の花火大会の頃 何かしらのメモを残してきたんですが 今年は、何も残していなかった。
残すべき、何かなどあるはずもない
今年の花火大会は、例年のように、路上の小さな空き空間に二つ折りの新聞紙を敷いたり、木の枝の影にならない微妙なポイントを探しながら見るわけではなかった
花火大会では、有料席がある。
ビール 3リットル ほどいただく
次期デフォルトテーマが、新しい開発手法でスタートを切った。
これまでのデフォルトテーマは、ベースになるテーマを見直したり、エキスパートによって完成したテーマとして公開されてきた。
今回は、それが、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に付属するころにはきっといいものになっている予感