CSSで自動連番を表示する

WEB制作覚書

CSSで自動連番を表示する方法のご紹介です。

タイトルにセクション番号やチャプター番号をつけたい場合に便利です。

 

 

 HTMLは以下のようになります。(要素はなんでもかまいません)

<body>

<section>

<h2>あいうえお</h2>

 <h2>かきくけこ</h2>

<h2>さしすせそ</h2>

</section>

<section>

<h2>たちつてと</h2>

<h2>なにぬねの</h2>

</section>

<section>

<h2>はひふへほ</h2>

<h2>まみむめも</h2>

<h2>やゆよ</h2>

</section>

</body>

 

ページ全体で通しの連番にするCSS

body{ counter-reset:title;}

h2{counter-increment:title;}

h2:before {
  content: counter(title);

}

 

section内で通しの連番にするCSS

section{ counter-reset:title;}

h2{counter-increment:title;}

h2:before {
  content: counter(title);

}

 

titleというのは任意につけられるカウンターの名前です。好きな名前にできます。

 

 

 

続: GMOクラウドVPSでPHPを.htmlファイルで動作させる[php7.1/Plesk Onyx]

GMOクラウドVPS WEB制作覚書

前回、.htaccessに追記する方法で、.htmlをPHPとして動作させることに成功したと書きました。

この方法で、目的が達成できたと思い、

Plesk Onyx　ダッシュボード ＞ PHP設定＞PHPのバージョン7.1.xx

と変更してテスト用に.html拡張子ファイルに

phpinfo();

を記述し実行してみたのですが、PHPのバージョンが5.4.xxのままでした。

 

Plesk＞PHP設定

でバージョン7.1(FPM)になっているのにナゼ.html拡張子のファイルでPHP5.4.xxが実行されているのかというと、予想ですが、

.htaccessによるAddHandler php-script .php .htmlでは、Pleskでドメインごとに割り当てているPHP設定(php.ini)は利用されず、サーバーデフォルトのPHPバージョンが利用されてしまうようです。

 

そこでGMOサポートに問い合わせたところ、以下の参考URLをいただき、設定を実行してみました。

 

[Plesk] 拡張子.html でphpを有効に設定できますか？

 

上記によりますと、ターミナルでの操作が必要になるのですね・・。

高いお金払ってPlesk導入してんのになんでコマンド打たなきゃならんのよ！

という心の声はおいといてこれしか方法がないので、しぶしぶMacのターミナルを立ち上げます。。

 

 

f:id:caffeine0:20180417154028p:plain

これは、システムを最新の状態にアップデートしてくださいね、ということですね。

Plesk上でのGUI操作でもできるので、さっさと済ませましょう。

アップデートはしたくないという場合は飛ばしましょう。

 

f:id:caffeine0:20180417154153p:plain

ApacheとNginxの設定を開きます。

f:id:caffeine0:20180417154227p:plain

<IfModule mod_proxy_fcgi.c>
<Files ~ (\.html$)>
SetHandler proxy:unix:///var/www/vhosts/system/example.com/php-fpm.sock|fcgi://127.0.0.1:9000
</Files>
</IfModule>

 

赤字の部分を修正してそのままコピペします。

httpsも利用している場合は両方に同じものをコピペします。

 

ちなみに私はPleskの画面のここでハマったのですが、

HTTP用追加ディレクティブ

HTTPS用追加ディレクティブ

という入力欄が表示されていませんでした。

？？？と思いいろいろ試して見た結果、

ユーザ「admin」でログインしないと出てこない

みたいです！

 

 

さてここからがssh接続をしてコマンド打たなきゃならない部分です。

私はMacユーザなのでMacでの方法を解説します。

 

1.アプリケーション＞ユーティリティ＞ターミナル

　を起動します。

 

2.以下のコマンドを入力しEnterを押します。

ssh -l root xxx.xxx.xxx.xxx

 

xxx.xxx.xxx.xxx　の部分は契約時に割り振られたIPアドレス、または契約ドメイン名に差し替えてください。

すると

root@xxx.xxx.xxx.xxx's password:

 

と返ってきますので、契約時にもらったssh用のrootのパスワードを入力し、Enterを押します。

 

ログインが成功すれば

[root@subxxxxxxx ~]#

 

のような一行が表示されるはずです。

 

3.以下のコマンドの赤字部分はご自分のドメインに差し替えて入力し、Enterキーを押します。

vi /var/www/vhosts/system/example.com/conf/php.ini

 

viはテキストエディターで開くという意味の操作です。

ここではphp.iniというファイルをテキストエディタで開くという意味のコマンドです。

 

4.viで真っ白な画面が開きますので、以下を入力します。

 

[php-fpm-pool-settings]
security.limit_extensions = .html .php

[php-fpm-pool-settings]も忘れずに入力します。

 

5.入力が完了したら、一回escキーを押すと、テキストエディタモードから抜けます。そのあとに「:wq」と打ち、Enterを押します。

これでphp.iniに設定が保存されました。

 

6.PHP設定を反映させます。

/usr/local/psa/bin/php_settings -u

 

と打ったあとEnterキー。

しばらくすると、

Per-domain PHP settings of all domains were successfully updated.

成功したよのメッセージが返ってきます。 

 

7.pleskのphpサービスを再起動させます。GMOさんの参考ページでは

plesk-php56-fpm.service

となっていますが、今回はphp7.1を再起動させたいので、

 

systemctl restart plesk-php71-fpm.service

 とコマンドをうちました。

71のとことがPHPのバージョンになりますので、ご自分の環境にあわせて差し替えてください。例えば5.6だったら56ですね。

 

そして、xxxx.htmlというファイル内にphpinfo();を書いて実行し、PHP7.1の情報が表示されれば成功です。

 

 

 

 

ゴーストアイコンをラクマに出品中【gicon20180413】

ラクマ フリマ ママネタ 子育て
断捨離のためゴーストアイコンをラクマで出品中。

item.fril.jp

ラクマは写真が4枚しか掲載できずしかも小さい(~_~;)ので
こちらに一覧掲載します。どれも中古品で細かい傷あります。
 ★3個セット販売中(売れ切れてたらごめんなさい) 
名称 写真1
写真2
写真3
  
サンゾウ

販売中
ツタンカーメン

販売中
グリム

販売中
ゴエモン

 
ピタゴラス

 
ビリーザキッド

販売中
エジソン

販売中
オレゴースト

販売中
スペクター

 
石ノ森

ナイチンゲール

販売中
ノブナガ

 
 写真準備中

 
リョウマ

販売中
ロビンフッド

販売中
ナポレオン
 写真準備中

販売中
ベートーベン

 
ダークゴースト

 
ブランク
 
写真準備中
 
写真準備中
 
写真準備中
 
準備中
ムサシ

 
ベンケイ

販売中
ヒミコ

 
ダーウィン

販売中
ライダー1号 45

 
ライダー16 ガイム

 
ライダー11ダブル

販売中
ライダー12オーズ

 
ライダー14ウィザード

販売中
ライダー16ドライブ

ライダー13フォーゼ

 
フーディーニ

 
 
 販売中
平成ライダー45

 
 
 
★単品販売中(売れ切れてたらごめんなさい) 
名称
写真1
写真2
写真3
備考
カノンゴーストアイコン

準備中 
テンカトウイツ

準備中  
ライダー18エグゼイド

 
準備中 
ディープスペクター

 販売中
闘魂ブースト

 
 
 そのほかの仮面ライダー系おもちゃも出品してます。
 
 
 

はてなブログのsitemapは「/sitemap.xml?page=1」に決定。

はてなブログ SEO

 

はてなブログを初めてまた日が浅いのですが、Googleサーチコンソールにsitemap.xmlを送信しようとしたところ、おかしいことに気づきました。

このブログのsitemap.xmlをブラウザで見てみましょう。(以下リンククリック)

http://log.caffeine0.work/sitemap.xml

なんだかページの数がやけに少ない。。(2018.4.12現在2ページ。いやもっとありますって。) そこでいろいろ検索かけたところ、以下のブログを拝見しました。

www.kabufxshikaku.com

ここには「sitemap.xml?page=1」を使えばいいよと書いてあったので素直にそうしてみました。

このブログのsitemap.xml?page=1をブラウザで見てみましょう。(以下リンククリック)

http://log.caffeine0.work/sitemap.xml?page=1

 

おお。ページの数が正常になりました。

私の中の「はてなブログのサイトマップ」は

http://xxxx.com/sitemap.xml?page=1

 に決定いたしました。

ありがとうございます。。

GMOクラウドVPSサーバにお名前.comからサブドメインだけ割り当てる方法

WEB制作覚書
 
 

GMOクラウドVPSサーバ契約し、Plesk Onyxでウェブサイトを作成するときのメモ。

 

お名前.comで管理するxxxxx.comがあります。

そのドメインの管理もDNSもお名前.comに残したまま、GMO VPSサーバ上subdom.xxxxx.comを割り振る方法を解説します。

 

まず、お名前.comにログインし、ドメインのDNS関連機能設定へ進みます。

 


内部ドメインの一覧が出てくるのでxxxxx.comを選んで次へ進みます。

 

 

  f:id:caffeine0:20180410165821j:image

内部ドメインの一覧が出てくるのでxxxxx.comを選んで次へ進みます。

設定画面で、お好きなサブドメイン名（ここではsubdom）を入力
自分のサーバに割り当てられたIPアドレスを入力します。
IPアドレスはらGMOから本契約時に送られてくるメールに記載されています。
それ以外の欄はそのままで大丈夫です。
設定を保存したら、お名前.comでの作業は完了です。
次にGMOの管理コンソールにログインします。
 
ダッシュボードのコントロールパネルボタンからPlesk Onyxにログインします。
ドメイン追加ボタンを押します。
 

※ここでは親となるドメインがない単独のサブドメインを登録するため、サブドメイン追加ではなく、ドメイン追加を選択してください。
注意:Plesk Onyxは、ドメイン数でライセンスの料金体系が決まっていますが、ここでやるように、他社管理のサブドメインをドメイン追加すると、1ドメインとして、ライセンスを消費することになりますのでご注意ください。
 
ドメイン追加画面で、www.のあとの欄にsubdom.xxxxx.com
を入力します。
 
 
 
そのほかのオプションを選択して、オーケーを押します。
 
以上で、他社管理のサブドメインをサイトに割り当てることができました。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

 

 

 

 

GMOクラウドのVPSでPHPを.htmlファイルで動作させる

GMOクラウドVPS WEB制作覚書
GMOクラウドのVPSサーバ契約してPHPを.htmlの拡張子で動作させたいときに.htaccessに記述した方法のメモです。
 
 
この記述方法はGMO VPSではダメ
#AddHandler x-httpd-php7.0 .php .html
#AddHandler application/x-httpd-php .php .html
#AddHandler php7-script .php .html
 
この記述方法はOK
AddHandler php-script .php .html
 
 
追記2018.04.17
 
この方法では、各ドメインごとにPleskのPHP設定で選択したPHPのバージョンで実行できませんでした。各ドメインごとのPHPバージョンで.html拡張子のファイルをPHPとして実行する方法はこちら

 

lohacoで無印良品が1900円以上送料無料です。

無印良品 インテリア ママネタ
無印良品といえば、もう言わずと知れたママ御用達のブランドですね。
私もめちゃくちゃ愛用しております。
 

 無印良品の「ホワイトグレー」シリーズ愛用中

特にポリプロピレン収納用品の「ホワイトグレー」色が大好きで、どっさり持っています。
どっさりもっているので最近あまっちゃってるぐらいでございます。
 
 
特に今イチオシがこれ。

 
奥行き26cm、幅37cmの無印収納用品のモジュールとしても使えるし、これのみでもスタッキングできて、中身が見えないホワイトグレーが不思議とどんなインテリアともなじむんですよね。
 
このホワイトグレーという色が、白すぎず、暗すぎず、なんとも微妙でいい色合い。とても気に入っています。
本題に入ります。

 無印良品をネットで注文するならlohacoな理由

このホワイトグレーシリーズを購入するとき、私はいつもlohacoを利用しています。
無印良品の公式ネットストアを利用する時ももちろんありますが、
無印良品の公式ネットストアは対象商品5000円以上送料無料ですが、lohacoはなんと
1900円以上で送料無料🎵
 
この差はおおきいですよね。　(ただし、無印の商品の中にはlohacoで扱っていないものも多くあるので注意が必要です。)
 
lohacoで送料無料1900円に届かない時は無印良品以外の商品を一緒に買っても合計の金額が1900円を超えていれば送料無料なので、洗剤とかトイレットペーパーなどの生活用品を一緒に買えば、無理に送料無料の金額まで無印良品の商品の中から選ばなくていいので楽なんです。
また収納用品などは店舗で
 
また、lohacoはYahooとAsukulさんが運営しているので
・届くのが速い！
・Tポイントが貯まる・使える！
などのメリットもあります。
 
みなさんも無印良品の店舗で買っても持って帰るのがタイヘン。
そんなときにもlohacoが便利ですね〜〜！
 
 

GMO cloud VPSを初めて契約してみた

GMOクラウドVPS WEB制作覚書
最近共有レンタルサーバーでできることに限界を感じ始めた。ちょっと大人になったのかもしれない。
 
WEBサイト周りのお仕事をしていると、共有レンタルサーバーでちょっとネックになるのが
・1gb超えなどのファイルのアップロードが許されない
・reactなどのサーバーサイドプログラムが置けない
・受信送信メールサーバーアドレスも独自ドメイン化したい
・apacheやPHP,付随するライブラリなどのバージョンアップが勝手にされてしまうので、ある日突然サイトやサービスが止まってしまったなどのエラーが起こる
 
 
 
GMOのVPSを選んだポイント
・コンソールの黒い画面みなくてもサーバー設定ができるサーバー管理ツール「Plesk onix」(現時点での最新バージョン)があらかじめインストールされている
・価格がリーズナブル
 

※ちなみにPleskはOSに自分でインストールすることもできます。https://www.plesk.com/でPleskと契約し、その後パッケージをインストールする流れです。直接コンソール操作に自信がない筆者のような方は、今回ご紹介のGMO Cloud VPSのようにすでにサーバー側にインストールされているプランを選ぶこといなります。

 
GMOのVPSのプラン
 
 プランはとりあえず2GBを選択。スケールアップは自由だそうな。
ただしスケールダウンはできないので慎重に！
 
 
 

 
スペックを選択
 
Plesk Onyxを使いたいのでCentOS7.3を選択し、Plesk Onyxを選択。
余裕をもって30ドメインプランを選択。30ドメインまでPleskでサーバー設定できるよということなので、GMO VPS自体にはドメインの設定上限数などはないみたいです。
 
 

画面案内に沿って進めて。
 
でた。お値段
2GBプラン/100GB/CentOS7.3/
Plesk Onyx Web Pro Edition30ドメイン
 
初年度　40344円(初期費用込)
次年度　36024円(月3002円)
 
内訳
月額費用1382円
Plesk PleskOnyx Web Pro Edition 30ドメイン 1620円
 
まあ仕事で使う専用サーバ代金としてはお安いと思います。
個人だったらちょっと考えちゃう。
 
次回は申し込んだ後のコントロールパネルの操作方法をご紹介します。
 
 

HTTP/2について勉強してみる

PHP WEB制作覚書

HTTP/2という言葉、遅ればせながらやっと認識し始めた今日この頃。
Hetemlサーバは2017年にすでに対応していたんですね。

さくらも先日やっとこさHTTP/2対応したみたいです。

さてHTTP/2は、インターネットの通信プロトコルHTTPの最新バージョンなのだということは名前から推測できますが、いったい何がどうよくなったのか勉強がてらまとめてみました。

 

ソフトウェアデザイン 2015年 11 月号 [雑誌]

ソフトウェアデザイン 2015年 11 月号 [雑誌]

 

 

 HTTP/2を利用するメリット

通信の効率化＝高速化

クライアント－サーバー間の通信が効率化されることでコンテンツの伝送が10％〜20％高速化されると言われている。優先度制御や非同期でのリクエスト/レスポンス処理が可能になり、Webブラウザにおけるページレンダリングの時間を短縮できる可能性がある。

HTTP/2を使うには？

SSL通信を行えば、何もせずともHTTP/2プロトコルが利用できるので利用するために特に何かコードを書いたりする必要はありません。

ただしアプリなどで通信を任せるライブラリなどをいれている場合は、対応しているかどうか確認が必要です。

(実際、私の周辺でもAndroidアプリ内で利用しているライブラリがHTTP/2に対応していなかったため、ダウンロード障害がでた案件がありました。）

 

従来のHTTP/1、HTTP/1.1、HTTP/2何が違う？

HTTP/1

クライアントが1リクエストを送る

サーバーが1レスポンスを返却

のように、必ず1リクエストに対して1レスポンスの形式となるため、サーバーからのレスポンスが帰らないと次の処理に進めないので、表示や処理が遅い。

HTTP/1.1

クライアントが同時に複数のリクエストを送ることが可能になった。

しかしサーバーはリクエストされた順に1レスポンスを返すので、容量の大きいファイルや、処理に時間がかかるような場合には、前のレスポンスが完了するのを待たなくてはならない。

 

HTTP/2

近年の一回の処理におけるデータ通信量の増大によるレスポンスの遅延を解消するために新たに開発されたのがHTTP/2。

HTTP/2は従来のHTTPを踏襲しつつも、新たな転送手段を追加して少ない通信量でより多くの転送を行える。最大の特徴は、「ストリーム」という概念の導入で、ストリームよって1つのコネクション内で同時並行で、クライアントが複数のリクエストを送り、それぞれのリクエストに対し、サーバーがそれぞれ同時平行で処理してレスポンスを同時に複数返却できるようになった。

 

 

HTTP/2の新機能

ストリーム

あるストリームでの処理がほかのストリームに影響を及ぼすことがないため複数のリクエスト/レスポンスを同時並行的に処理でき、処理に時間がかかるような場合でも他のストリームの処理は影響を受けずに処理できる。

バイナリベース

従来のHTTPはクライアント/サーバー間を「テキストベース」で通信が行われていたが、HTTP/2では「バイナリベース」で行われるようになった。

サーバープッシュ

リクエストされていないコンテンツをサーバーがクライアントに送信する「サーバープッシュ」ができる。クライアントがHTMLファイルをリクエストした場合、それに続いてそのHTMLファイル内で指定されているCSSファイルやスクリプトファイルなどがリクエストされる可能性が高いなど、サーバープッシュ機能を利用して自動的に関連ファイルをプッシュ送信できる。

識別子

使用するデフォルトのポート番号はhttpの場合80番、httpsの場合443番で従来から変更なし。しかし新たに識別子という概念が追加された。

h2（HTTP/2 over TLS）

※https通信でTLS暗号化で保護されたコネクションを行う

h2c (HTTP/2 over TCP）

※http通信で保護されない平文のコネクションを行う

 

 

サイトをSSL化するのは、もはや当たり前みたいな風潮になってきている昨今で、もはやHTTP/2はあたりまえになってきているのですね。 

 

 

Learning HTTP/2: A Practical Guide for Beginners

Learning HTTP/2: A Practical Guide for Beginners

 

 

Evernote でタグなしノートを検索・表示

Evernote

 

Evernote

Evernote

  • Evernote
  • 仕事効率化
  • 無料

 

Evernoteの有料プランをついに導入しました。

使い始めてみてまだ数ヶ月ですが、ふと困ったことが。

タグをつけたノートは把握しているけれど、どのノートにタグがついていないのかわかりません。

Googleさんに聞いてみます。

そんな時は・・。

 

 

-tag:*

と検索窓に打ち込みましょう。すると、タグがついていないものが表示できます。

 

*

アスタリスクの意味は「全て」となり、

例えば

「個人メモ」というタグがついているものを探すときは

tag:個人メモ

 

「個人メモ」というタグがついていないものを探すときは

-tag:個人メモ

なので

-tag:*

こう書くと、「タグがついていないものすべて」となりますね♩

 

さらに、この検索条件は保存しておくことができます。

Macの場合ですがメニューの

編集＞検索＞検索を保存

で、検索窓の候補によく使う検索条件を保存できます。

検索条件の名前を適当に「タグなし」とつけたとすると・・

f:id:caffeine0:20180329172445p:plain

検索窓に文字を打つ時に、候補に「タグなし」と出ました。

次回からはコマンドを打たなくても、タグなしノートを簡単に表示できますね。

 

f:id:caffeine0:20180329172431p:plain

 

個人的にはタグなしノートの表示は、メニューに標準であってもいいくらい必要ではないかなと思うのですが。