常に画面のど真ん中に文字を配置するCSS

2019年09月11日 正午の月齢:12.1  月名:十三夜  潮汐:中潮 月齢:12.1[十三夜] 潮汐:中潮 (最終更新日:2019年09月16日) 旧暦:2019年08月13日 友引
2週間前に投稿 | ウェブ・IT関係 | コメントはありません

2分ぐらいで読めます。

ふだんはあまりセンタリングしないのですが、どうしても画面のど真ん中に文字を配置したくなって、CSSを探してみるといろいろな方法がありました。その中でも特にシンプルなものを備忘録として書いておきます。

HTML

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>どまんなか</title>
</head>

<body>
<p>どまんなかにテキストが出るよ</p>
</body>

</html>

CSS

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

p {
text-align: center;
}

記述が少なく安定しているので、いろいろと応用がきくと思います。

…ところで数年前に勤務管理システムを構築したとき、あのときもスタート画面のど真ん中にテキストを配置したんだけど、どんなCSS書いたかな。うーん、全然覚えてない。

PWA(Progressive Web Apps)を用いた「ホーム画面に追加」機能(Service Worker)で、ウェブサイトがまるでアプリのようになる。

2019年09月09日 正午の月齢:10.1  月名:十日余の月  潮汐:若潮 月齢:10.1[十日余の月] 潮汐:若潮 (最終更新日:2019年09月16日) 旧暦:2019年08月11日 赤口
2週間前に投稿 | ウェブ・IT関係 | コメントはありません

6分ぐらいで読めます。

パソコンだけでなくスマートフォンでもFirefoxを愛用しているのですが、先日あるサイトを訪れたときに、アドレスバーの横に見慣れないアイコンが出ているのに気が付きました。

謎の家型アイコン

そのアイコンを押してみると、「ホーム画面に追加」というダイアログがにゅっと出てきて「ホーム画面に追加しますか?」という感じでとても自然にホーム画面への追加が誘導されます。なんかカッコイイ!

ぜひ取り入れてみたいけれど、これはいったいなんなんだろう…

どうやらこれは「Service Worker」というものらしい。早速実装に挑戦してみました。

「PWA(Progressive Web Apps)を用いた「ホーム画面に追加」機能(Service Worker)で、ウェブサイトがまるでアプリのようになる。」の続きを読む。

WordPressのコメント欄、ミステリーマンのアバターを好きなものに変更する。

2019年09月06日 正午の月齢:7.1  月名:弓張月(上弦)  潮汐:小潮 月齢:7.1[弓張月(上弦)] 潮汐:小潮 (最終更新日:2019年09月16日) 旧暦:2019年08月08日 先負
2週間前に投稿 | WordPress | 2件のコメント

2分ぐらいで読めます。

ほとんどコメントのつかない当サイトにはあまり意味のないことですが、オリジナルのアバターを設定していない人がコメントするときには「ミステリーマン」が表示されます…

…WordPressを開いてみると、あれ? いつの間に「ミステリーパーソン」に変わったんだろ。昔は「ミステリーマン」だったのに。言葉狩りに屈するのもイヤなので、ミステリーマンのままでいいや。

mistery man

これはこれでシンプルな良さはあるのですが、あまりにも味気ないので、好きな画像に変えてしまいましょう。

今回用意した画像は…

ゲストアバター

これにします。「CHARAT CHOCO | キャラメーカー」でさくっと作ってみました。これを適用するためにまずはテーマファイルのimagesフォルダに画像をアップロード。続いて「functions.php」に記述。

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/avatarguest.png';
$avatar_defaults[$myavatar] = "GUEST";
return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'newgravatar' );

というふうに追記します。ピンクい文字の部分はファイル名やディレクトリに合わせて変えてください。

ダッシュボードから「設定」→「ディスカッション」を開くと、作った画像が選択できるようになっているので、

ディスカッション設定

作った画像を選択して、変更を保存すれば作業完了。これでコメント欄に画像がうまく表示されていたら成功なのデス。

WordPressでthe_archive_titleの余計な文字列「月別: 」を消して、さらにアーカイブページの「yyyy年m月」を「yyyy年mm月」と月をいつも2桁になるよう変更してみた。

2019年09月04日 正午の月齢:5.1  月名:六日月  潮汐:中潮 月齢:5.1[六日月] 潮汐:中潮 (最終更新日:2019年09月16日) 旧暦:2019年08月06日 先勝
3週間前に投稿 | WordPress | コメントはありません

3分ぐらいで読めます。

以前、サイドバーのアーカイブに表示される年月表示を1~9月のときでも2桁で月が表示されるようにしたのですが、アーカイブのページ(archive.php)を表示したとき、「月別: 2016年1月」と表示されていて月が2桁になっていませんでした。それに「月別: 」の文字もいらないので消してしまいたい…

まずは「月別: 」の文字を消しましょう。

いろいろな方法があるみたいですが、アップデートしても影響を受けないようにfunctions.phpと独自テーマファイルだけで完結する方法にこだわりました。functions.phpに、

add_filter( 'get_the_archive_title', function ($title) {
if (is_category()) {
$title = single_cat_title('',false);
} elseif (is_tag()) {
$title = single_tag_title('',false);
} elseif (is_tax()) {
$title = single_term_title('',false);
} elseif (is_post_type_archive() ){
$title = post_type_archive_title('',false);
} elseif (is_date()) {
$title = get_the_time('Y年n月');
} elseif (is_search()) {
$title = '検索結果:'.esc_html( get_search_query(false) );
} elseif (is_404()) {
$title = '「404」ページが見つかりません';
} else {

}
return $title;
});

を追記します。参考にしたのは

これで「月別: 」は消すことができました。

次に日付を修正します。archive.phpの

<?php the_archive_title(); ?>」の記事

という部分を、

<?php
$tit_monthnum = get_query_var('monthnum');
echo get_query_var('year').'年'. sprintf("%02d",$tit_monthnum).'月';
?>」の記事

という感じで、月の数字を取り出し、年の数字と2桁化した月の数字をつなぐようにしてyyyy年mm月を表現します。参考にしたのは、

これで1月から9月も「2016年01月」のように2桁で表示されるようになりましたー。

2019年10月からの最低賃金。

2019年09月02日 正午の月齢:3.1  月名:黄昏月  潮汐:中潮 月齢:3.1[黄昏月] 潮汐:中潮 (最終更新日:2019年09月10日) 旧暦:2019年08月04日 大安
3週間前に投稿 | 分類無用 | コメントはありません

5分ぐらいで読めます。

学生だった今から25年前、当時としては破格の時給1000円(その後1150円まで昇給)でアルバイトをして、思いっきり稼ぎました。クルマも持って旅行も行きまくって、充実した学生生活を送ったものです。

令和元年7月31日(水)
労働基準局賃金課

令和元年度地域別最低賃金額改定の目安について

~目安はAランク28円、Bランク27円、Cランク26円、Dランク26円~

本日開催された第54回中央最低賃金審議会で、今年度の地域別最低賃金額改定の目安について答申が取りまとめられましたので、公表いたします。

各都道府県の引上げ額の目安については、 Aランク28円、Bランク27円、Cランク26円、Dランク26円(昨年度はAランク27円、Bランク26円、Cランク25円、Dランク23円)。

注.都道府県の経済実態に応じ、全都道府県をABCDの4ランクに分けて、引上げ額の目安を提示している。現在、Aランクで6都府県、Bランクで11府県、Cランクで14道県、Dランクで16県となっている。

そして2019年、東京都と神奈川県がついに時給1000円を超えてきました。「おおっ、すごい。」と思う反面、AからDに格付けされた地域間の格差はとても目立つ感じがします。なんか700円台がとても安く見えてしまう…最低賃金カースト恐るべし。

2019/8/7 20:19

鹿児島地方最低賃金審議会は7日、鹿児島県の最低賃金を現行より29円(3.81%)引き上げ、1時間当たり790円にするよう鹿児島労働局長に答申した。中央最低賃金審議会(厚生労働相の諮問機関)が引き上げの目安として示した26円を3円上回り、引き上げ額、引き上げ率とも現行制度になって以降、過去最大となる。

鹿児島県の前年度の最低賃金は761円で、単独で全国最下位となったが、今回の引き上げにより、すでに結審している大分や熊本などと同額に追い付いた。

鹿児島の最低賃金790円に 単独最下位から脱出

とりあえず鹿児島県は、単独最下位を抜け出したようです。まぁそれでも最下位なんだけど。

「2019年10月からの最低賃金。」の続きを読む。

鉄道模型用グリスとしてミニ四駆のものを使ってみた。

2019年08月31日 正午の月齢:1.1  月名:二日月  潮汐:大潮 月齢:1.1[二日月] 潮汐:大潮 旧暦:2019年08月02日 先負
3週間前に投稿 | 鉄道模型 | コメントはありません

1分ぐらいで読めます。

鉄道模型(とくに動力車)にお手入れは欠かせませんが、今までバイクやクルマのメンテナンスで使っている手持ちのグリス「グリースメイト」を使っていました。

グリースメイト

手に着くとへんなニオイがするのと、プラスチックへの影響が不明なので、もう少しちゃんとしたグリスを使おうと思い検討してみました。

  • 候補1 KATO ユニクリーンオイル
    …サラサラ系? もう少し冒険してみたいので今回は不採用。
  • 候補2 DAIWA リールオイル2
    …リール用のオイルも多分過酷な環境で使えそう。機会があったら試すとして今回は見送り。
  • 候補3 タミヤ ミニ四駆 Fグリス
    …樹脂ギヤが高速回転するといったらミニ四駆。フッソ樹脂配合で摩擦係数が低く、プラスチックを侵さないということで今回採用!

TAMIYA ミニ四駆 Fグリス

これを針先に乗せてチョン付け。

実際に使ってみたところ、プラシーボ効果も含めて、なかなかいいんじゃない? っていう感じがします。

Translate »