開発環境・インフラ Stylelintを利用してコードを自動整形する方法
cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを...
admin
開発環境・インフラ 
Web運用・SEO・AI最適化 Edgeで画像の右上のマークは何？出る条件と影響について
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？他の画像に同じことをしてもアイコンが出てこないのもあるし制作者の意図なのか紛らわしいですね。クリックするとわかりますが正体はEdgeの画像検索機能です。これはbingの画像検索機能に依存している機能...
開発環境・インフラ jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができるリストのような同じ構造の大量のコードを一か所にまとめることができる今回は２の詳細を紹介します。具体的にはjsonファイ...
開発環境・インフラ webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)
webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。今までの流れは下記記事に書いてあります。npm + Nunjucks + Styl...
開発環境・インフラ StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編）
node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。先発のCSSプリプロセッサsassでも同様のことができますがsassの記述をそのまま持ってきても当然動かないのでstylus...
開発環境・インフラ webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)
前回までで次のようなことをやってきました。nunjucks でhtml生成stylus でcss生成imagemin で画像圧縮javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時のためにwebpackを使用してバンドルする流れも残しておきます。今回はjavascriptを対象にしますが...
開発環境・インフラ 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)
npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。ただ画像ファイルの処理がないのでその処理を追加していきます。画像ファイル処理については大体２つのルートを考えます。画像は画...
開発環境・インフラ ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)
npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。今回はファイル更新を感知して自動更新されるように設定します。watchコマンドを設定する前回同様package.jsonのscrip...
WordPress WordPressテーマ制作時に指定すべきネイティブスタイル
WordPressのテーマを制作時のcssに次の指定をしておけば自動で付け加えるクラスになんとなく正解なスタイルがあたっていることになります。/* エディター用 */p { display: block; margin: 1em 0;}strong { font-weight: bold;}em { font-styl...
WordPress WordPressで管理画面にログインしていても非公開記事を表示させない方法
WordPressは記事のステータスを「非公開」にすると一般ユーザーには見ることができません。しかし、管理画面にログインしているとその記事は表示されます。その際、頭に「非公開：」という文字が入ります。慣れている人が管理画面に入ってみている分には問題ないのですが頻繁に担当が変わるようなお客様とか「そんな機能必要ない」とい...
JavaScript jQueryでリンク先が別ドメインのURL（外部サイト）かどうか判定して自動的にtarget=”_blank” rel=”noreferrer noopener”を加えるスクリプト
完全に備忘録です。前提条件jqueryをheadタグ内で読み込んでいるES2015（ただlet使用しているだけ…）を使用しても問題ない状況である$(function() { $('a').each(function() { let href = $(this).attr('href'); let target = $(...
WordPress WordPressで特定の投稿や固定ページにスタイルやスクリプトを挿入するカスタマイズ
WordPressのテーマ制作時に絶対といってよいほど加えるべき機能がこれです。運用が始まる前はコンテンツ内容は固まっていますが運用段階が始まってしばらくたつと例外処理が発生します。そんなときこの機能を用意しておくとテーマのcssファイルやjsファイルを変更する必要がなく、かつ本番系、開発系で処理をわけることが簡単にな...
WordPress WordPressで直近1年分の記事を取得する方法
WordPressで過去1年分の記事を取得したい場合、テンプレートで以下のコードを描くと取得できます。<?php $args = array( 'post_type' => 'custom_post_type', // ここは取得したい投稿タイプを指定します 'posts_per_page' => -1, 'order...
WordPress 【WordPress】ファイルアップロード時にファイル名を自動で英数字に変換するコード
WordPressのメディアアップローダーで日本語のファイルをアップロードするとファイルがエンコードされます。これを防ぐためにfunctions.phpに以下のコードを追加します。if ( ! function_exists( 'my_rename_mediafile' ) ):function my_rename_m...
WordPress WordPressのdebugログの肥大化を防ぐ方法 安定運用のためにエラーに敏感になる
WordPressでは設定によってデバッグログをファイルに書き出してくれる機能があります。サイトが重くなったり処理が意図通りになっていない場合にこのデバッグログの内容を確認します。デバッグログ出力設定方法wp-config.phpファイルに定数を設定します。運用環境と開発環境（ステージング環境）は若干処理を変更します。...
WordPress 【WordPress】テーマ開発－ブロックパターンの追加方法
WordPressのエディタがGutenbergに変わってしばらく経ちますがブロックエディタは進化してきて馴染んできたと思います。特にブロックパターン機能はHTMLを書けない不慣れなユーザーにも扱いやすくするとても親切なツールです。管理画面を扱うユーザーにとって一度わかってしまえばとても便利なのでブロックパターンは多用...
WordPress WordPressで投稿スラッグ（パーマリンク）を自動的に英数字に変更する方法とコード説明
WordPressの投稿を新規作成したとき、タイトルをつけると同時に投稿スラッグには日本語が入ります。ブラウザがchromeなどのWEBブラウザで直接サイトを見ている場合は日本語スラッグでも一見問題ないように見えますが、SNSなどでシェアした場合、日本語のスラッグは以下のようにエンコードされて貼り付けられてしまいます。...
JavaScript はまると面倒！？Instagramのタイムラインをサイトに表示させる方法
「facebookのページプラグインやTwitterの埋め込みタイムラインのようにインスタグラムの投稿をサイトに表示させたい」という要望があることがあります。しかしfacebookのページプラグインやTwitterのタイムラインのように気軽に表示することができません。表示するにはひと手間、ふた手間かかるので注意が必要で...
WEB制作その他 AdobefontsのwebフォントがIE11表示されない！それでもIE11で表示させたい人へ
いままで問題なく表示されていたものが急にうまくいかなくなることはよくあることです。Adobeが提供しているフォントサービス「Adobefonts」を利用して表示させていたwebフォントがIE11で表示されなくなり困りました。IE11のコンソール画面を見てみるとjavascriptでエラーが発生しているようです。Prom...
JavaScript iPhoneでページ下部のタップイベントを確実に発火する方法
スマホ用に見やすく設定されたWEBページのパターンの1つに画面下に固定されたナビゲーションがあります。ユーザーの親指の位置に近いので良いデザインかと思いきやiPhoneで落とし穴があるので注意が必要です。iPhoneでページ下部固定メニューをタップしても一回では動かない問題iOSの標準ブラウザsafariで下に表示され...
JavaScript そのページでは使っていないjQueryプラグインでエラーを出さないように。jQueryプラグイン存在判定の方法
フロントエンドは開発方法の発展のスピードがすさまじくjavascriptもそのまま書かずwebpackなどのツールを使用することが増えてきました。jQueryに関しては脱jQueryが段々広まっているように見えますが案件によってはまだまだjQueryのお力を借りなければいけません。それはライブラリが豊富でスピーディーに...
WEB制作その他 IEサポート終了がなぜ騒がれるのか。そしてIEモードとは？いつまでも消せないブラウザ事情について
IEの終了がどんなことをもたらすのか米Microsoftは2021年5月19日（現地時間）に2022年6月15日をもってWebブラウザ「Internet Explorer」のサポートを終了すると発表しました。WEB業界（どんな業界だ？）システム関連業界で大きな話題になっています。なぜ騒がれるかわからない人もいるでしょう...
WEB制作その他 タイトルいれてる？PDFファイルをWEBサイトにアップする時のチェックポイント
印刷物をWEB上で活用したいときにPDFファイルはとても便利です。「Adobeのソフト」はもちろん「Microsoft Office」があればWordやExcel、PowerPointなどのアプリケーションで簡単にPDFに変換できます。WEBサーバー上に置いて公開される流れが多いですがアップする前に気を付ける点があるの...
WEB制作その他 facebookページプラグインの曜日がおかしい！？ 便利なプラグインの厄介な点
webサイトにfacebookページの投稿を表示することができるプラグインがfacebookから提供されています。このプラグインを使用するとfacebookで「友達」になっていない人やフォローされていない人にも投稿内容をお知らせすることができます。また、リアルタイムに情報を発信できるのでお知らせとして使用するときに便利...