ベースシステム
- PukiWiki
主な制作項目
- CMS設置設定
- データベース最適化
- テンプレート制作
- 各種デザイン
- モバイル対応カスタマイズ
- SEO対策
- 広告自動挿入スクリプト
「Easy Table of Contents」で長い見出しが改行されても行頭を揃えるコピペ用CSS
補助金で将来のためにWebサイト整備を
PukiWiki 1.5.2対応XMLサイトマッププラグイン
Apache 2.4でバーチャルホストを実際に運用する際の参考記事
Google reCAPTCHA v3をコピペで簡単に導入
常時SSL証明書の更新エラー対処法
フレッツ光を使っている人はウイルス対策ソフトを買う前に確認
highlight.jsに「強調表示」を追加する拡張CSS
自社・自宅サーバーをVPSに移行するための有力候補3サービス
常時SSL化(https)後に旧サイトのアクセスが減らない
WordPressの新エディタGutenbergは待ち望んでいたUI
WordPressでメディアをアップロードできない
ConoHa VPSでサーバーOSにFreeBSDを使っている場合のパーティション拡張方法です。
大分県豊後高田市の小中学生に、1人1台導入されるタブレットについて概要を独自にまとめました。
Webコンテンツの適正画像サイズをディスプレイ解像度の利用者統計データを元に検証します。 ホームページに載せる適正画像サイズをデータで検証という記事から11年も経ってしまいましたので2018年版を載せました。 (StatCounterによる統計データを元にしています。) 2018年版が確定したのでデータおよびグラフを修正しました。 2019年版も(確定版ではありませんが)掲載しました。 Webコンテンツに使用する画像サイズ結論 掲載データが多くなってしまいましたので、結論を先に書いておきます。 パソコンのモニター幅いっぱいの可変サイズの画像(ヘッダ等)を想定するのであれば、(w)2,000ピクセルは必要。これくらいあれば(w)2,560ピクセルで表示したとしても耐えられるクオリティ。10年前に比べると回線環境は良くなったとはいえ、画像サイズが大きくなれば読み込みに時間がかかり、またスマホユーザーに無駄なデータ通信量を消費させてしまう。 記事に添える画像は300~800ピクセル程度のサムネイルを表示して、高解像度が必要であれば元画像にリンクを張る。 レスポンシブデザインの場合、表示サイズと同等にリサイズされた画像が表示される工夫が必要。(CSSにwidthを書いても元画像が同じであればデータ量は変わらず、w320のスマホユーザーにw2,000の画像を送り付けるという事態に。) jQueryで端末サイズに応じて読み込む画像を振り分けるのが今のところ良さげ。 下記のようなメディアクエリーを書いても読み込む画像が増えるだけで逆効果。 <img class=”w1920″ src=”../img_1920.png” /> <img class=”w480″ src=”../img_480.png” /> .w1920 { display: block !important; } .w480 { display: none !important; } @media only screen and (max-width: 480px) { .w1920 { display: none !important; } .w480 { display: block !important; } } 2018年ディスプレイ解像度利用者率Best10(世界) 1366 […]
Windows 10 April 2018(1803)の不具合【前編】から5時間ほど経ちました。 https://www.ii-sys.jp/notes/331 msconfigの「サービス」タブからMicrosoft以外のサービスを全て停止した状態ですが、Chromeで作業している限り何時間でも問題が発生しないで使えています。 しかし別のアプリを操作しようと、タスクバーをクリックすると反応しなくなる時があります。(長時間経過した時にはほぼ確実に) 電源管理でドライブの電源が切れないようにしてみたり、ページファイル(pagefile.sys)を削除してみたりしましたが症状変わらず。 また、アクティビティを止めたり、履歴を完全にクリアしたりもしましたが症状変わらず。 以下のコマンドでWindows Updateをクリアしてみましたが、こちらも変わらず。 net stop usosvc net stop dosvc net stop wuauserv net stop cryptSvc net stop bits net stop msiserver ren %systemroot%\SoftwareDistribution SoftwareDistribution.old ren %systemroot%\System32\catroot2 catroot2.old del “%ALLUSERSPROFILE%\Microsoft\Network\Downloader\qmgr.db” del “%ALLUSERSPROFILE%\Microsoft\Network\Downloader\qmgr.jfm” net start msiserver net start bits net start cryptSvc net start wuauserv net start dosvc net start usosvc 5月17日にWindows 10 バージョン1803(RS4)更新プログラムKB4100347が出ていました。 「この更新プログラムをインストールすると、Windows の問題が修正されます。」と一瞬期待したのですが、インテルのマイクロコード更新プログラムのようで、古いi7使いの私は対象外。 一応害は無さそうだったので単独でインストールしてみました。 M […]
最近すっかりWordPressから離れていたんですが、良くも悪くも情報量が豊富ですね。 WordPressは10年以上前(WordPress MEの頃)からいじってますが、どんどん複雑化してきて最近はhome.phpやらfront-page.phpやらindex.phpやらと、テンプレート構造を理解するのさえ大変です。 時間があったので何年か前に構築したサイトを手直ししていたところ、トップページのページネーションが効かなくなってしまいました。 100個近いカスタムフィールド・300超えのカテゴリ・function長すぎなコンテンツで、どのタイミングで表示されなくなったのか不明なまま、ネット上の情報を頼りにあれこれ試して半日が過ぎ、ようやく解決しました。 固定ページ用WP-PageNavi対策コード function.php function pagenavi_home($wp_query) { if (!is_admin() && $wp_query->is_main_query() && $wp_query->is_home()) { $wp_query->set(‘cat’, 5); $wp_query->set(‘post_type’, ‘iisys’); $wp_query->set(‘posts_per_page’, 12); } } add_action(‘pre_get_posts’, ‘pagenavi_home’); 3行目のcatはカテゴリーID5を指しています。不要であれば行ごと削除。 4行目のpost_typeはカスタム投稿タイプを指定。iisysは一例で、通常の投稿であればpostになります。 両方を指定したい場合には配列にします。 $wp_query->set(‘post_type’, array(‘post’, ‘iisys’)); 5行目のposts_per_pageは表示件数。記事数よりも多い数にするとページネーションは表示されません。 上記を書いたうえで、該当テンプレート(私の場合はindex.php)のquery_posts等を消してください。 以下は私の環境では効果ありませんでした。 管理画面の表示設定にある「1ページに表示する最大投稿数」を1件にする pa […]
新型コロナウイルスで休校中の学生を持つ親として学力の低下を懸念。 オンライン学習の早期実現に向けて、素案やZoomに代わるオンラインミーティングツールを独自の視点で考えます。
公開しているメールアドレスは、最近トレンドなフィッシングメールをピックアップで紹介したように、フィッシングメールが毎日山ほど届きます。せっかくなので訪問してみました。 フィッシングサイトに嵌ってみました 最近のブラウザはデフォルト設定で注意喚起してくれます。 Chromeの場合 Firefoxの場合 Firefoxのほうがキッパリと言い切っていてかっこいいですね。 どのブラウザも、うっかり誤クリックで進んでしまわないように「無視して進む」というボタンが無いインターフェイスになってますが、頑張って先に進んでみました。 仮想PC・ブラウザをプライベートモード・LAN切り離し・IPアドレス変更等を行ったうえでの検証です。アクセスするだけで様々な情報を抜かれる恐れがありますので、安易に先に進むようなことはしないようにしてください。 APPLEっぽいサイトが表示されました。 一見APPLE公式のように見えますが、中央の入力フォーム以外はリンクすらされていない張りぼてです。 ですが疑いの目を持って見ない限り、偽サイトだということに気づかないと思います。 フィッシングサイトの見抜き方 騙されないためにはアドレスバーに表示されているURLをよく見てください。まずこの習慣をつけましょう。 見るのは最初に現れるスラッシュ「/」よりも左側です。それよりも後(右側)は一切気にしないで大丈夫です。 http://cert-protection-account-appleid-apple.com ブラウザによっては cert-protection-account-appleid-apple.com とhttp://(またはhttps://)が省略されて表示されます。 以下のような場合にはさらに注意が必要です。 apple.example.com/rmd_nid_vcss… google.example.com/rmd_nid_vcss… ドメイン名「example.com」の前にドット「.」が入っている場合、それより左側はドメインの保有者が自由に好きな文字を設定できるサブドメインと呼ばれます。 一番最初に知っている名前が入っているからといって絶対に信用してはいけません。 itunes.apple.com これはitunesがサブドメインですが、その右側を見るとドメイン名がapple. […]
アクセス解析を見ていたら、ここ最近のWindows 10アップデートに関係する検索クエリが多く、さらにネガティブワードだらけで、改めて大きな問題なんだと認識しました。 復旧しようと何日も寝ずにがんばって再インストールから何からしてみたあげく、ハードを疑いだして何時間もかけてデバイス買いに行って取り付けてみたものの結局変わらず無駄な出費だけがかさみ(←それ私)と、パソコンが利用できないとどうしようもない方々や、スマホから情報収集したりと、人それぞれの重みを感じる検索クエリ達。 windows10 1803 不具合 一番人気。不具合てんこ盛りですもんね。 windows10 1803 chrome そもそもの始まりはChromeがフリーズするあたりからでした。 kb4103727 失敗 守護霊のおかげかもしれません!様子見ましょう。 kb4103727 不具合 はい。私はなんとか削除できました。 windows10 1803 不具合 ネットワーク 具合が悪くなるとあっちもこっちも辛くなりますよね。 windows10 kb4103727 シュールですね。 1803 windows10 不具合 そういえば「Windows」と「10」の間に半角スペースが入っているのを最近知りました。 1803 不具合 「デリーの戦い」に勝るとは。 intel ssd 1803 SSD買いに行ったお店で店員さんも言ってました。 kb4103721 ssd 登場しましたね、3721。 kb4103721 削除 私もしました~ kb4103727 インストールできない 幸せかも。 4103727 エラー 該当の郵便番号は無いようです。静岡県っぽいですけど。 kb4103727 再起動 1週間で再起動100回以上しました。SSDを誰よりも活用しているかも。 kb4134661 不具合 1709も戦ってますね! win10 kb4103727 昔「ホムペ」って言う人に違和感覚えていたのを思い出しました。 windows 10 1709 kb4103727 お手本のようなワード区切り。 windows 10 april 2018 update 不具合 Aprilとか1803とかRS4とか呼び名多すぎですよね。 windows 10 kb4103727 情報リテラシー高そうな方ですね。 windows […]
ページ内に複数の広告がある場合には、広告コードの1行目にある<script>~</script>は1回で良いそうです。 ページ上に複数の広告コードがある場合、各広告ユニットに <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> を含める必要がありますか? 非同期タグでしたので何も考えずに最後の方(</body>直前)に書いたのですが、どうやらそれが原因で広告が表示されたりされなかったりしていました。 プラグイン等の外部ファイルにAdSense表示部分が書かれている場合には、非同期での読み込みが間に合って表示されるようで、インラインで書かれている場合だけが不安定でした。 Nginx(Webサーバ)のFastCGI(キャッシュ)も影響していたようで、気が付くまでに時間がかかってしまいました。 <head>~</head>の間に記述して安定しました。 <head> ・ ・ ・ <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> </head> ・ ・ ・ <ins class=”adsbygoogle” data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” data-ad-slot=”XXXXXXXXXX”></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
10年以上ぶりにPukiWikiをいじっているんですが、昔の情報は豊富にありますが最近の情報が乏しいですね。 PukiWikiの全盛期は、Nginxが誕生したばかりでしたので仕方ないのかもしれませんが。 PukiWikiのindex.php無しでURLを統一する URLの正規化としてまず、 http://example.com/ http://www.example.com/ https://www.example.com/ これらをhttps://example.comに301リダイレクトしました。 これについては各所に載っているようにserverディレクティブを追加して、return 301~といった感じです。(ここでは詳細は割愛します) これで完璧!と思いつつGoogle Search Consoleを眺めているとindex.php有りと無しが…。 pukiwiki.ini.phpの設定でindex.phpを表示しないという項目があります。 // Shorten $script: Cut its file name (default: not cut) //$script_directory_index = ‘index.php’; コメントアウトを外して試してみましたが、何かが違う。 確かに表示はされなくなりました。 index.php有りの膨大なURLがすでにGoogleにインデックスされているので、index.php有りで404エラーになると困るのですが、結果はindex.phpを入れたURLでもちゃんとページが表示されました。 しかしindex.phpが表示されたままの状態。ステータスコードは200。index.php有りと無しの両方のページが存在した状態です。 ということでNginxの設定を変更しました。 server { if ($request_uri ~* “^(.*/)index\.php(.*)$”) { return 301 $1$2; } } 上記のようにdefault serverディレクティブに書き加えて、 nginx -s reload で完了です。 PukiWikiネタってまだ需要あるんでしょうか。 今回PukiWiki 1.5.2(utf8)をベースに以下のようなカスタマイズをしたのですが、要望があれば時間を見つけて記事 […]
WordPress 5.0から採用された新エディタGutenbergですが、WP 5.2を導入して本格的に触ってみました。 ネット上の意見は賛否両論のようです。 (否定派が圧倒的に目につきますが、声を上げるのは決まって反対派が多数ですので…。) 追記:Classic Editorプラグインのダウンロード数(5,000,000以上)と評価を見る限り、以前のエディタの人気が伺えます。 NetCommonsのようなUI NetCommonsというCMSをご存知でしょうか。 今から10年以上前になるのですが、各学校で簡単にWebサイトを管理できるように、NetCommonsを使ったシステム提案を教育委員会に行った覚えがあります。(スルーされたと思っていたら翌年には似たようなシステムが導入されていましたが…) WordPressは「文章を書く」のに対して、NetCommonsは「ブロックを配置」するのに特化していたため、HTML知識が無い方でもコンテンツの書き換えや追加時に、それなりの見た目が維持できるという利点がありました。 複数の学校の先生がそれぞれの担当枠を書き換えたり、毎年担当者が変わるることを考えると、WordPressでは書く人によって、見た目に大きな差が出てしまうのです。 ページ更新・追加・削除のたびに数千円~数万円をWeb制作会社に支払って更新依頼するという形態は、現在は稀なケースだと思います。 WordPress等のCMSが主流になり、クライアント自身が好きなタイミングでコンテンツの更新を行うように移り変わりました。 ですが、制作時にどんなに頑張ってCSSを用意しておいても、更新する人が適切なHTMLタグやショートコードを使わなければ、素っ気ないページに仕上がってしまいます。 素っ気なさすぎるからと、ホームページビルダーで作ってHTMLを貼り付けたり、WordやExcelから貼り付けたり、スペースで文字を揃えたりと、なんだか悲惨なページになってしまったりもします。 更新者のスキルに左右されにくいブロックエディタ ブロックエディタの強みは、見栄えの良いページが直感的に作れるので、HTML・CSSを何も知らない人が更新やページの追加をしていっても、あまり酷い結果にはなりにくいという部分です。 私は制作時に、クライアントのWeb担当者スキルに合わせて管理 […]
全自動「3分」で実用的なバーチャルドメイン対応のメールサーバーを構築できるQMAIL2020を配布しています。cdb+tcpserver+qmail+SMTP AUTH+VPopMailと諸々のパッチ自動化 for FreeBSD
数か月くらい前に取得して製作途中だったサイトが、いつからかアクセスできなくなっていました。 アクセスできない問題の切り分け サーバーの確認 IPアドレスを指定したsshやsftpなどではサーバーへアクセスできました。 Webサーバー(Nginx)の確認 正常に動作していた時から設定を変更していませんが、念のため見直しました。問題なさそうです。 DNSの動作確認 $ host my.domain Host my.domain not found: 3(NXDOMAIN) DNSの設定に問題がありそうですが、少し前までは正常に引けていて、それ以降設定は変更していません。 $ ping my.domain PING my.domain.work(xxx.xxx.xxx.xxx): 56 data bytes 正引きできないのに、設定した覚えがないホストに向かっています。(xxx.xxx.xxx.xxxは心当たりがないIPアドレス) そもそもドメインの最後にworkがついているのは何故…。 resolv.confを書き換えてみたり、hostsに書き込んでみたり、別のDNSサーバーに設定を移してみたり、半日格闘しましたが解決せず。 レジストラ(Value Domain)に問い合わせ Value Domainの問い合わせフォームにチャットでの問い合わせがあったので、初めてクリックしてみました。 運が良かったのだと思いますが、待ち時間6秒! 非常に手際よくドメインの状態を調べてくれて、2分後には的確な回答をいただきました。 (06:55:30) *** MYNAME joined the chat *** (06:55:30) MYNAME: ドメインが参照できません(DNS) (06:55:34) ※自動メッセージ: お問い合わせありがとうございます。只今込み合っております。お急ぎの場合はフォームよりお問い合わせいただきますようお願い申しあげます。 (06:55:36) *** Chat Support joined the chat *** (06:55:39) Chat Support: お問合せありがとうございます。担当の 【***】 と申します。 どうぞ、よろしくお願いいたします。 (06:55:44) MYNAME: よろしくお願いいたします。 (06:55:4 […]
CS2用ライセンス認証サーバの停止に伴って、Photoshop・Illustrator・Premiere等をシリアルナンバーと共に無料でダウンロードできるようになっていますが、Windows 10では「動作を停止しました」とエラーになってしまう事が多いようです。 ※あくまでも正規ライセンスを所持している方が対象です。 ネットで検索をすると、この対策として「言語設定」の「アプリウインドウごとに異なる入力方式を設定する」にチェックを入れると良いという情報が多くヒットします。 しかし残念ながら、Windows 10 October 2018 Update (1809)以降ではこの手法は使えなくなってしまったようで、「デバイス」→「入力」→「キーボードの詳細設定」から「アプリウインドウごとに異なる入力方式を設定する」にチェックを入れてもPhotoshop等は起動しなくなってしまいました。 Windows 10 October 2018 (1809) 以降でAdobe CS2を起動する応急処置 以下の方法で2回に1回程度の確率で起動できます。 Photoshop等のアイコンを右クリックして「その他」→「タスクバーにピン留めをする」 タスクバーにできたアイコンをクリックする 「アプリウインドウごとに異なる入力方式を設定する」は関係なさそうなのでデフォルト(チェックなし)に戻しておく スタートにピン留めやデスクトップにショートカットを作って試してみましたが、なぜかタスクバーだけが起動確率が非常に高いです。 もっと確実な方法がありましたら教えてください。 2019年5月追記 Adobe CS2の公開ダウンロードは終了したようです。 https://www.ii-sys.jp/notes/1324 https://www.ii-sys.jp/notes/1900
Windows XP関連のFAQを10年以上前にPukiWikiで公開していたのですが、最近は限られたアクセス数となっていたため、Webサイト全体を常時SSL化した際にバッサリと切り捨ててしまいました。 ですが、Google Search Consoleのクロールエラーが気になり、整備をした手順です。 プラグインで簡単にPukiWiki→WordPressにできないかと探しましたが、現行バージョンのWordPressで動作するものを見つけられませんでした。 コンテンツも100程度とそんなに多くなかったので、それぞれのページを手動で変換できればいいやと思い、PukiWiki記法をHTMLに変換してくれそうなツールを探したのですがこれも見つからず。 考えてみれば、PukiWikiの該当ページをプラウザで表示させてソースをコピーすれば良い訳なので普通は利用しないですよね。 ですが私の場合すでにPukiWiki環境が無く、そのためだけに環境を構築するのも非常に面倒でしたので…。 (WebサーバーをNginxに移行したのでさらに億劫になりました。Apache環境が手近にある方はPukiWikiを動かしたほうが早いかもしれません) PukiWiki記法をなんとかして別の表記に PukiWiki表記からMarkdown表記に変換してくれるサービスをなんとか見つけることができました。 非常に精度の良い素晴らしいツールで完璧に変換してくれます。 左側にPukiWiki記法のソースコードを貼りつければ、右側にMarkdown記法に変換されたものがリアルタイムで表示されます。 ここで一つ問題が発生。 Markdownには<dl> <dd> <dt>といったdlリストの記法が存在しません。 幸い上記の変換サービスでは行の先頭にdt ddと残してくれます。 これを使ってテキストエディタ(秀丸)で全置換を行いました。 検索:dt (.+)\ndd (.+)\n 置換:<dl><dt>\1</dt><dd>\2</dd></dl>\n ※正規表現です これでMarkdown記法+HTMLタグになりました。 MarkdownをHTMLに変換 MarkdownをHTMLに変換するサービス […]
