マウスやキーボードには手首をサポートをするリストレストを使うと身体への負担が一段と軽減します。
私はゲル素材で優しくサポートしてくれるエレコム リストレスト FITTIO MOH-FTPBKを使っています。
2021年に購入して毎日使っているので、少しヘタってきた気もするのでそろそろ買い替えタイミングかも…と思いつつ。
マウスやキーボードには手首をサポートをするリストレストを使うと身体への負担が一段と軽減します。
私はゲル素材で優しくサポートしてくれるエレコム リストレスト FITTIO MOH-FTPBKを使っています。
2021年に購入して毎日使っているので、少しヘタってきた気もするのでそろそろ買い替えタイミングかも…と思いつつ。
電気代の節約もありますが、
頭寒足熱…全身を温めるよりも下半身を温めたほうが頭がボーっとせず仕事にも集中できます。
そんなことで冬の自宅での仕事に「電気毛布」は必需品
広電(KODEN)の電気毛布でサイズ130×80cmの小さめのものを使ってます。
消費電力は40Wで、電気代は1時間当たり約0.61円なので一日中使用しても数円のコスト。8時間で自動OFFになる機能もついていて付けたまま寝てしまっても電気代を使いすぎることがなくとても便利です。
電気毛布は不思議な柄・模様のものも多いですが、これはブラウン一色でインテリアを損なわない見た目も良いです。
電気毛布の魅力を存分に語ってくれているコチラのYouTube動画も参考になります。
https://youtu.be/QulyerZaufo
https://youtu.be/UN-H6fbKyZY
普段使っているノートはツバメノートA5無地を使っています。
A5サイズ・無地・紙質が良い
この3つをポイントに探して行き着いたのが今使っているツバメノートです。
この3点を満たすノートって、意外とありそうでないんですよね…
なぜA5のノートかというと…
・小型で持ち運びしやすい
・iPad miniとほぼ同サイズ
・見開きでA4コピー出来る
などなど。
仕事などで普段文字を書く時に愛用しているボールペンは
スイスの文房具ブランドのカランダッシュのボールペン、限定モデルのブラックコードを使っています。
オールブラックのマットなものです。
これに純正のインクではなく、リフィルアダプターを使って三菱鉛筆のジェットストリームを使っています。
打合せや講演・勉強などでガシガシ書き殴るには0.7mmの太めが書きやすいです。
普段ノートなど文字を書くときはボールペンしか使わないのですが、ブラックコードと同じくオールブラックのマット仕上げのシャーペン販売されないかな?と思っていたらいつのまにか発売されていますね。
しかも0.5mmこれは良いですね。
仕事の打ち合わせ資料など普段使い用のプリンターは
EPSONのインクジェットプリンター PX-K100を使っています。
インクジェットのモノクロ印刷のみですが、本体デザインもシンプルで価格も安く、互換インクも安いのでとても重宝しています。
購入自体は10年前で仕事用によく使うようになったのはここ数年とは言え…
電気製品で10年選手はなかなか強いですね…
今はAmazonで本体も中古で買えないし、互換インクも普段買っているお店での取り扱いがなくなってしまいました。
もし次買うとしたら、後継機のコレかな…
PX-K150
互換インクも現役で売ってそうです。
(用紙の給紙トレイがないのが仕事用の普段使いには向いてないかも…)
レーザープリンターのこっちのほうがいいかな…??
給紙トレイもあって、トナーとかも一応互換品あって、けっこう安く入手できそうだな。
リサイクル品もあるな…
NHKのラジオ講座「ラジオ英会話」は、英語学習において定番のプログラムです。
先日購入したこちらと同じ大西先生が担当しており、聴衆の幅広い年齢層に適しています。
講座は4月から始まりますが、新年の1月から始めるのも良いでしょう。
ラジオはもちろんのこと、音声はNHKのサイト上で聴くこともできます。
また、音声をダウンロードするためには、
https://wiki3.jp/NHK_hta
で提供されている方法を使うことでもできます。
限定詞・名詞関連・接続詞のイメージ イメージを隅々に
12月26日・1月2日 Lesson181 all、everyのイメージ
12月27日・1月3日 Lesson182 noのイメージ
12月28日・1月4日 Lesson183 otherのバリエーション
12月29日・1月5日 Lesson184 both、either、neither
12月30日・1月6日 Lesson185 今週のReview
1月 9日 Lesson186 人々一般を表す
1月10日 Lesson187 itの基本
1月11日 Lesson188 itを説明するリズム
1月12日 Lesson189 itを使って強調する
1月13日 Lesson190 今週のReview
1月16日 Lesson191 可算名詞・不可算名詞:基礎
1月17日 Lesson192 思いがけない不可算名詞
1月18日 Lesson193 可算名詞が不可算になるとき
1月19日 Lesson194 可算・不可算で意味が変わる名詞
1月20日 Lesson195 今週のReview
1月23日 Lesson196 主要接続詞①:流れのand
1月24日 Lesson197 主要接続詞②:選択のor
1月25日 Lesson198 主要接続詞③:流れを打ち消すbut
1月26日 Lesson199 主要接続詞④:because
1月27日 Lesson200 今週のReview
CSSで色の透明度の指定は3パターンあります。
opacityとRGBAが有名ですが、その他にも通常のHEX(16進数)でも指定できます。
/* opacity */
.colorA{
background-color: #000; /* rgb(0,0,0);も可 */
opacity: 0.8;
}
/* RGBA */
.colorB{
background-color: rgba(0,0,0,0.8);
}
/* HEX(16進数) */
.colorC{
background-color: #000000CC;
}
opacityは背景色だけでなく指定セレクタ内に文字など他の要素があると、全て透明になってしまうので注意が必要です。
HEX(16進数)はよく使われる6桁#000000
の末尾に透明度を16進数を2桁追加する8桁にする#000000CC
という色指定なので、便利な一方、透明度を16進数で指定しなければならないため扱いにクセがあります。
透明度5%刻みの場合の16進数は以下のようになります。
不透明度(%) | 16進数 |
---|---|
100 | FF |
95 | F2 |
90 | E6 |
85 | D9 |
80 | CC |
75 | BF |
70 | B3 |
65 | A6 |
60 | 99 |
55 | 8C |
50 | 80 |
45 | 73 |
40 | 66 |
35 | 59 |
30 | 4D |
25 | 40 |
20 | 33 |
15 | 26 |
10 | 1A |
5 | 0D |
0 | 00 |
参考:https://toriton.link/coding/opacity_colorcode/
https://totolog34.com/444/
各ブラウザごとにデフォルトの設定が異なり、
同じHTMLでも微妙に異なる表示となるため、仕事としてコーディングする場合、リセット用のCSSを一番最初に読み込むのが最近は定番になっています。
リセット用CSSもどこまでリセットするかなど様々な考え方もあり
世界中に無数のリセット用CSSが公開されています。
私は、YUI LibraryのCSS Resetをベースに自分なりにカスタマイズした下記のものを標準的に使っています。
YUIのリセット用CSSの一番大きな特徴はH1、H2など見出しタグも全て同じ文字装飾にリセットしている点です。
@charset "utf-8";
/*reset*/
html {
color: #000;
background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
line-height: 1.5;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: inherit;
font: 100%;
}
fieldset,
img {
border: 0;
}
img {
vertical-align: bottom;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: 400;
}
ol,
ul {
list-style: none;
}
li {
list-style-type: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: 400;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
font-size: smaller;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
}
legend {
color: #333;
}
body {
font: 12px "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", "MS PGothic", "Lucida Grande", sans-serif;
letter-spacing: .2em;
font-feature-settings: "palt";
}
.mincho {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "Times New Roman", Times, "HG明朝B", "MS 明朝", serif;
}
#container {
overflow: hidden;
}
input[type=submit] {
-webkit-appearance: none;
}
*:after {
display: block;
clear: both;
}
.cf {
zoom: 1;
}
.cf:after {
content: "";
}
@media (max-width:767px) {
img {
max-width: 100%;
height: auto;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
}
body {
-webkit-text-size-adjust: 100%;
}
input,
textarea,
select {
font-size: 16px
}
/*common*/
a {
transition: all 0.3s linear;
word-wrap: break-word;
overflow-wrap: break-word;
}
a:link,
a:visited {
text-decoration: none;
color: #666;
}
a:hover {
text-decoration: none;
color: #999;
}
button {
background: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.cf
はフロートをクリアするためのショートコードなので
floatではなく完全にflexboxでコーディングする場合、不要です。
フォントの指定も游ゴシックや游明朝も入れていますが、クセ(コーディング上の)も強いので場合によっては削除しても良いかもしれません。
#container {
overflow: hidden;
}
で、特にスマホで横ブレなど起きないように設定しています。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
}
でpaddingやborderなどBOXの横幅に影響するものは全て「込み」で表示されるように指定しwidthの横幅指定からはみ出さないようにしています。
一部色指定なども入れているので、コーディングするデザインに合わせて一部改変して使っています。
HTMLをゼロベースから書くのは効率が悪いので
テンプレート用のHTMLを用意しておいたり、エディターのショートコードなどですぐに呼び出せる状態にしておくことが仕事でコーディングする場合、必要不可欠です。
私の場合は以下のようなHTMLを標準に使っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タイトル</title>
<meta name="keywords" content="キーワード">
<meta name="description" content="ディスクリプション">
<link rel="icon" href="/favicon.ico" id="favicon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">
<!--GA-->
<!--OGP-->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# article: http://ogp.me/ns/ article#">
<meta property="og:url" content="https://●●●.jp/">
<meta property="og:type" content="article">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="ディスクリプション">
<meta property="og:site_name" content="名前">
<meta property="og:image" content="https://●●●.jp/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<!--OGP-->
<!--CSS-->
<link rel="stylesheet" href="./css/common.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
<!--JS-->
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body id="top">
<div id="container">
<div class="main">
</div>
<div class="ftr">
<div class="copyright">Copyright © 名前 All rights reserved.</div>
</div>
</div>
</body>
</html>
レスポンシブ対応として
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
特に最後のmaximum-scale=3
はスマホで3倍までの拡大が出来ることで
ユーザビリティ・アクセシビリティを高めています。
CSSの読み込みも
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
上書きではなく、パソコンとスマホとを完全に分けて効率的にコーディング出来るようにしています。
(CSSを最小限にするために、SPファーストでコーディングし、PCで上書きが本来最もベストです。)
SNSでシェアされて拡散してサイトに訪問してもらうのが最近はメインになるのでOGP
の設定も不可欠です。
PCの性能が向上したとは言え、表示スピードを意識したコーディングのほうが良いので、ヘッダーの読み込みはCSSを先、JSは後
、としたほうが良いでしょう。
下スクロールで消えて、上スクロールで再表示する
ヘッダーメニューをjQueryで実装します。
HTMLを
<div class="header">
<div class="menu">
<div class="inner">sample text</div>
</div>
</div>
CSSを
.menu {
width: 100%;
height: 50px;
position: fixed;
left: 0;
top: 0;
transition: 1s;
}
.menu.hide {
transform: translateY(-50px);
}
50pxの高さのメニューを50px上に移動させて隠す、という動きにしています。
jQueryを
$(function() {
var pos = 0;
var header = $('.menu');
$(window).on('scroll', function() {
if ($(this).scrollTop() < pos) {
header.removeClass('hide');
}
else {
header.addClass('hide');
}
pos = $(this).scrollTop();
});
});
下スクロールでhide
を付けて隠し、上スクロールでhide
を削除して再表示するという挙動にしています。
参考:https://www.esz.co.jp/blog/2885.html
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック(オライリー)
2022年に購入したものの中ではベストバイかもしれない。
もっと早く買っていれば良かったと後悔するほど。
パソコン用のモニターとして憧れのEIZO!
EIZO ColorEdge CS2420-Zを購入して使っています。
本当はUSB-C一本で繋げられるものが良いかな?と思いましたが、金額がグッと上がってしまうので…
HDMI接続のものにしましたが、特に不便なこともなく使えています。
仕事的には印刷物は扱わないので、EIZOのモニターはオーバースペックなのかもしれませんが、
とにかく目の負担が少ない。
そういう意味でももっと早くに買っておけば良かったなと本当に後悔するほど良い買い物でした。(高いけど…)
仕事用の椅子は
イームズのアルミナムチェアを使っています。
仕事用の椅子は10万20万するような高いものも多いですが、
確かに長時間座るものなので人間工学に基づいた良いものを使ったほうが身体には良いのかもしれませんが、
一方で人間工学に基づいていて身体への負担が少ないが故に長時間働けすぎてしまうという弊害もあるのでは?と友人デザイナーが言っていました。
そんなこんなで独立するにあたって、どんな椅子を買おうかと考え、
金額・デザイン性・機能性
この3つをポイントに探しました。
最新の10万20万するような椅子は機能性は高い反面、その分サイズも大きく重量も重くゴツくて取り回しが悪く
(人によるかもしれないけど)デザイン性は決して良いとは言えないかな?と個人的に…
機能性も、最新の身体に負担が少ない反面、働けすぎてしまうのも困ったもので、最新より、長年使われているものが良いもので、人間にあっているのだという考え方も出来るかな…と
そうなるとリプロダクト(ジェネリック)など価格を抑えつつ、
機能性・デザイン性両面を求められるな…
と行き着いたのがイームズのアルミナムチェアになります。
ハイバックのメッシュタイプのものを使っています。
個人的には、敢えてアーム部分やキャスターは付けずに使っています。
楽天のコチラで購入し、
3~4年ほど使っていますが今のところ特に問題なく使えています。
座面もメッシュなのは身体を包み込むような感覚は良いものの
脚の接地面積が大きいためか下半身への血流を圧迫するような感覚を個人的には感じます。(特に夏)
無印良品の座布団キルティングシートクッションは中綿の密度も高く、接地面積を軽減してくれ座り心地が良くなるので組み合わせて使っています。
![]() |
チャールズ&レイ・イームズ アルミナムチェア[メッシュタイプHi_21A] オフィスチェア DAIVA
|
個人的に最強のテキストエディターはEmEditorだと思っている。
普段使っているので、このブログを書き始めたので
オススメツールとして改めて紹介しようと久しぶりにサイトを見てみたら…
永久ライセンス4万円超えなのね…
サブスク全盛時代とは言え、なかなかのお値段…(サブスクだけじゃないのは救いとも言えるかもだけど…)
私が使い始めたのが10年以上前で、その時は永久ライセンス1万もしなかったので
「超お得」だったのですが、4万は…なかなか簡単に「オススメ」ですとは言えないけど…
今、履歴を調べたら4000円だった…だいぶ安いな…
使い始めたのは2009年くらいで永久ライセンス買ったのが2010年だった…
12年13年か…
10,000mAhの小さめのモバイルバッテリーが壊れてしまったので
先日、購入し直した。(10,000mAhより少し小さい8,000のmAhもの)
Qiはまだまだ充電性能などイマイチだから
あまり期待していなかったのですが、実際に使ってみると
充電のためにケーブルを持ち歩かなくて良いのでとても便利!
5Wと充電スピードはそれほど早くないものの
バッテリーとスマホをぴったり重ねていれば充電できるので
ボタンをダブルクリックして重ねて充電状態になったら、ポケットに入れておけば問題なく充電できる。
モバイルバッテリーへの充電もマイクロUSBからでもUSB-Cからでも出来るので汎用性も高い。
(USB-Cは出力も可能)
個人的改善ポイントは
パススルー(充電しながら)Qi充電出来たら完璧だったかな?
2022.12.25現在の価格が1,549円と2,000円以下なのも嬉しいところ。
CSSを書く際、セレクタの命名に時間がかかってしまう場合が
多くあります。
その原因のひとつに、セレクタに日本語が使えないからということもあるかと思います。
(日本語をローマ字に置き換えて…ということは可能ですが。)
そんなときはGoogleスプレッドシートの
自動翻訳機能で英語化すると便利です。
一行目にそれぞれ訳したい言語を記入します。
今回は「日本語を英語に翻訳」なので、それぞれja
とen
を記入します。
二行目以降は…
各要素をdiv
で囲ったBOXの内容を要約し
A列に日本語を記入していきます。
英語を表示したいセル(B列)に下記のように
=IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")
を記述します。
A | B | |
---|---|---|
1 | ja | en |
2 | 最新ニュース | =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"") |
if文の最後のほう$A$1
がja
、$B$1
がen
を指していて、
A2
(最新ニュース)をja
(日本語)からen
(英語)に
訳しなさい…という指定になっています。
一行作成しておけば、2行目3行目はコピペで日本語の部分だけ
変更していけば、自動で英語に翻訳していってくれます。
CSSを手打ちで書いていくと、癖や非効率な記述や記述揺れなども多く発生します。
そのままでもブラウザでの表示には問題ありませんが、
少しでもコードをキレイにしておきたいものです。
CSSの圧縮や整形を活用することで、
効率的にコードを一定の状態に保てます。
エディターの標準機能や拡張機能などでも実現できますが、
Webサービスで簡単に出来るもの。
探すといくつかありますが、
以下のものが使いやすいと思います。
■CSSの圧縮
https://syncer.jp/css-minifier
■CSSの整形
https://lab.syncer.jp/Tool/CSS-PrettyPrint/
圧縮は全コードを一括ではなく、
ブロックごとにコピペを繰り返していくとメンテナンス性を保つことが出来ます。
整形は全てをまとめてコピペで大丈夫です。
効率的なコーディング作業01(CSSのアウトライン生成)で
生成したCSSだと使わない空のセレクタもあるので、これも削除せずそのまま整形すると
div {
}
が
div {}
こうなるので{}
をエディターで検索して
空の行を削除していくと不要なコードを除けます。
HTMLを記述して、そのコードを下記のサイトにコピー&ペーストして
CSSのアウトラインを生成することができます。
私の場合は「Childrens CSS」を使います。
下記のHTMLを貼り付け「Childrens CSS」ボタンをクリック。
<div class="box">
<img src="./photo.jpg" alt="test photo" class="photo">
<p class="txt">text sample text sample</p>
<p class="cmt">comment sample comment sample</p>
</div>
下記のようなCSSが生成されます。
div.box {
}
div.box img.photo {
}
div.box p.txt {
}
div.box p.cmt {
}
エディターでdiv
を削除していくと余分なコードを省けます。
.box {
}
.box img.photo {
}
.box p.txt {
}
.box p.cmt {
}
場合によってはimg
やp
も削除しても良いです。
(残しておいたほうがHTMLの構造が分かりやすい場合もあります。)
セレクタの命名にdiv
を含めない(例:diveやdivingなど)ようにしておくと、div
を一斉置換で削除でき、より効率的なコーディング作業が実現できます。
記事詳細ページに関連記事一覧のリンクを設置する方法。
下記のコードで同じカテゴリーの記事を呼び出します。
<?php
$categories = get_the_category();
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 3,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$query = new WP_Query($args);
?>
posts_per_page
が記事の取得件数になります。「3」を「5」に変更すると最大5件表示されます。
記事のカテゴリーが複数選択されている場合、「AもしくはB」で取得されます。(AとB両方)
'orderby' => 'rand',
を'orderby' => 'date','order' => 'DESC',
に変更すると新着順、'orderby' => 'date','order' => 'ASC',
にすると古い順になります。
orderbyのパラメータは、その他にも以下のようなオプションがあります。
date | 投稿日時による並び替え(デフォルト) |
---|---|
title | タイトルによる並び替え |
name | スラッグによる並び替え |
modified | 最終更新日時による並び替え |
parent | 親投稿のIDによる並び替え |
rand | ランダムに並び替え |
comment_count | コメント数による並び替え |
menu_order | メニュー順による並び替え(ページの場合のみ) |
meta_value | カスタムフィールドの値による並び替え |
meta_value_num | カスタムフィールドの数値値による並び替え |
下記のコードで関連記事一覧のリンクを書き出します。(設置したい場所に、表示したいHTMLで設置する。)
<?php if( $query -> have_posts() ): while ($query -> have_posts()): $query -> the_post(); ?>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
<?php endwhile; else:?>
<p>関連記事はありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
実際にこのページにも設置しているのでご確認ください。(HTMLやCSSは調整しています。)
参考:https://tamatuf.net/wordpress/wordpress-category-in-article/
■中級・実務向け
[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)
■上級・開発向け
エンジニアのためのWordPress開発入門 (Engineer’s Library)
WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉
年明けてから新年に「今年は○○をしよう!」とそこから準備するとなかなか実行できないことが多いので年末の今のうちに準備。
英語の勉強を再開しよう再開しようと思っていて、なかなか出来ていなかったので、この本がクリスマスセールで半額になっていたので今のうち購入
(2022.12.23現在で660円)
NHKでよく講師をされてる大西泰斗先生は「英語をイメージでつかもう」というコンセプトで「単語の意味を詳細に覚えて…」という受験英語的な勉強方法じゃないから、英語を聞いてイメージを思い浮かべる(ザックリ内容を理解)というのにはすごく向いていると思う。
講義編もあるからコチラも安くなったタイミングで購入しようかな?
音声がないけど「英語のイメージをザックリ網羅的に…」というのには
「ハートで感じる英文法 決定版」こちらも結構良い。クリスマスセールで半額以下というのもあるし(2022.12.23現在で825円)
ソースコードを本文にそのまま挿入したい場合
プラグインの「Highlighting Code Block」を
WordPressにインストールします。
ブロックエディターで使用するのが使いやすい。
(個人的には…普段はクラシックエディターが使いやすい。)
投稿画面のブロック追加から「Highlighting Code Block」を選択して
表示された枠(ブロック)にソースコードをそのまま入力します。
こちらのページで実際に使っているので
表示のされ方など参考にしてみてください。
<script type="text/javascript">
jQuery(function($) {
$.fn.extend({
randomdisplay: function(num) {
return this.each(function() {
var chn = $(this).children().hide().length;
for (var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;
$(this).children().eq(r).show().prependTo($(this));
}
});
}
});
$(function() {
$("[randomdisplay]").each(function() {
$(this).randomdisplay($(this).attr("randomdisplay"));
});
});
});
</script>
<ul class="randomdisplay" randomdisplay="3">
<li>~</li>
</ul>
AWS LightrailサーバーでWordPressのプラグイン
WP CSV Exporterを使おうとすると、そのままのインストールでは
500エラーで動作しません。
プラグインフォルダ内(wp-content→plugins)の
wp-csv-exporter→admin→download.php
2行目の
require_once '../../../../wp-load.php';
を
require_once '/opt/bitnami/wordpress/wp-load.php';
に修正します。
AWSに限らず、
wp-load.phpの場所がデフォルトと異なる場合、
修正が必要になります。
(AWSの場合、正確にはwp-contentの位置がデフォルトから変更されていると言えるかも。)