はてなブックマーク

CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。 絶対的に必要なものではありませんが、内容を理解すればとても便利な機能だとわかります。これらセレクタを使いこなすには、まず各々の仕組みをきちんと把握することから始めましょう。 専門用語が多く登場しますが、初心者でもきちんと内容が理解できるように分かりやすい例を挙げて解説していきます。 隣接セレクタとは要素同士を結合子 [+] で結ぶことで、ある要素の後続に出現する隣の要素に対してスタイルを指定することができます。 さて、既に何を言っているのか分からなくなっていませんか？言葉の定義だけで理解するのはとても難しいので、HTML のソースを見ながら内容を確認していきましょう。 隣接セレクタの動作確認 <div class="family"> <div class="parents"

ショートコードとは？ WordPress の functions.php に定義された関数を、投稿画面で呼び出すための [] で囲まれたコード。今回紹介する方法を使わず、全てショートコードで実装してしまうのも手段の１つ。 記事内で外部 PHP ファイルを呼び出す方法一気に全て実装したものを紹介すると理解するのが難しくなるので、１つずつ段階を踏んで説明していきます。 functions.php へ定義するショートコード投稿画面での呼び出し方パラメータを設定した場合の取得方法functions.php へ定義するショートコード //------------------------------ // 記事内に PHP ファイルを呼び出す //------------------------------ function call_myphp( $atts = array() ) { // パラメ

画像圧縮する TinyPNG のプラグインを導入して WordPress の表示速度をアップする方法！転送量の削減にも貢献！ WordPress にアップロードする画像ファイルを圧縮していますか？ レンタルサーバーを借りていると、月間や１日あたりのデータ転送量を意識する人が多いと思いますが、転送されるデータ量の大半は画像ファイルになります。サイトによっては画像をほとんど使っていないケースがあるものの、一般的には 90% 以上、そして多いと 97% 近くが占めることもあります。 １つの画像データサイズが大きいメリットは「画質がきれい」だと思っている人が多くいます。半分正解ですが、半分は間違っています。なぜなら同等の画質でもファイル容量を小さくすることができるからです。 もうちょっと正しい言葉に直すと「人の目では判断できないレベルで画像を下げることにより、ファイル容量が小さくできる」ということ

WordPress にアップロードする画像ファイルを圧縮するプラグインを導入することで、サーバーからのデータ転送量を減らすことができます。 すると、ファイル読み込み時間が短くなるため、全体の画面表示時間も短くなり、ユーザービリティが向上します。最終的には Google 等の検索サイトへの評価にもつながるため、WordPress 利用者であれば画像圧縮プラグインは必須とも言われています。 「画像ファイルの容量を軽くする」ことが目的であれば、基本的にはどのプラグインを使ってもほとんど違いはありません。しかし「データ転送量を含めサーバー負荷を軽減する」ことが目的であれば、どのプラグインでも良いわけではありません。 画像圧縮プラグインで最も有名なのは「EWWW Image Optimizer」です。WordPress での定番プラグインの１つなので、調べてみると数多くの情報が見つかります。ただ、サ

半日かけて SSL 化の作業を行い、無事に移行作業が完了して安心したのもつかの間、翌日に次のようなメッセージが Google から届きました。 SSL/TLS 証明書にドメイン名 https://nj-clucker.com/ がありません 本文には、SSL 化の手順を間違えてしまったのかと思わせる内容が書かれていました。 ブラウザによっては、貴サイトを安全ではないウェブサイトとして認識している可能性があります。この結果、多くのウェブブラウザが、貴サイトにアクセスしたユーザーにセキュリティ警告メッセージを表示してアクセスをブロックすることになります。 このメッセージは Search Console から送られた内容です。文章を読む限り、何かしら対応が必要なのは確なので現在の状況を再確認するところからスタートしました。 状況の確認と主な原因メッセージが届いたのは３サイト中の１つだけSSL 化

SSL 化に伴い内部リンクを http から https へ変更したい。target="_blank" を全て削除したい。そんな時に全ての投稿を対象に検索して、HTML の一括置換が行える WordPress のプラグインを紹介します。 その名も Search Regex です。 このプラグインは、正規表現による置換処理が行える機能もあり、例えば h3 タグで記述した部分を全て h2 タグに置き換えることも出来るのです。 投稿を１つずつ開いて編集するのは手間な上、目視では修正漏れが生じる可能性もあります。確実に漏れなく変換をかけるためには、プラグインの力を借りるのが一番手っ取り早いです。 では実際に使い方を見ていきましょう。 Search Regex を利用する前にバージョン２リリースされました2020年5月9日に約５年半ぶりにバージョンアップが行われました。これまでのバージョン 1.4.

ブログを運営する上で、困ることの１つである画像の直リンク。自分がアップロードした画像を直接参照されるため、自身が借りているサーバーにも負荷がかかる影響を及ぼします。 このような自体を招く原因は、キュレーションサイトやバイラルメディア、そして画像ばかりを集めた謎なサイトが増えたことが要因の１つに挙げられます。 直リンクされているか否かは、アクセス解析して見つけるのが一般的な方法です。僕の場合、別の要因で確認していたアクセス解析から、直リンクの形跡を偶然見つけました。自分が撮った写真を、記事の一部として何事もなく使われているのを知った時は、ただただショックでした。 サイト管理者に直接連絡する手段がなかったため、.htaccess ファイルを作成して画像の直リンクを禁止する対策を講じました。 WordPress で外部から画像への直リンクを禁止する方法プラグインは非対応WordPress のプラ

以下の内容は Android 6.0.1 にて問題が解消していますので、予めご承知の上お読みください。 自分のサイトのスマートフォン表示チェックを Android で行っていた時のことです。中途半端にアルファベットだけ太字になっている箇所があるのに気付き、ソースコードを見てみると日本語部分を含め太字設定しているのに、何故か日本語が太字にならない事象が確認されました。 試しに iPhone で確認してみると、僕が意図したソースコード通りに表示されています。別途、テスト用ページを作って確認すると、やはり Android では日本語が太字にならない事態になっているようです。 Android 6.0 と iOS 9.3.5 を比較全く同じ文字装飾を施した内容で、Android と iOS の表示具合を比較してみました。 iOS 側は明らかに全ての文字が太字になっていますが、Android は全角文

iframe で読み込んだ子ページの高さが動的に変わる場合、読み込み元の html に固定サイズで height 属性を設定するのは望ましくありません。 サイズ設定が大きすぎると余白ができるし、小さすぎると縦スクロールバーが表示されます。ページ内の一部に縦スクロールバーが表示されるのはユーザビリティが悪くなります。 よって iframe 内のコンテンツサイズが動的に変わるのであれば、親画面で設定する iframe の高さも動的に変更すれば良いのです。 iframe の子画面要素に合わせて動的に高さを指定する方法呼び出し元の親画面の設定まず親画面での iframe 呼び出し方法です。ここで高さを設定しないのがポイントです。

document.execCommand('copy')ただしこの処理には前提条件があって、コピーされるのは「処理実行時に画面上で選択しているテキスト」に限られます。つまりこのメソッドだけでは、任意の文字列をコピーさせることはできないのです。 そこでこの機能を拡張して、引数で渡した文字列を擬似的に選択状態にしてコピーさせる関数を用意しました。 JavaScript で任意のテキストをクリップボードにコピーする関数この関数を実装する上でのポイントは、裏で文字列を選択するためのコピー用テキストエリアを一時的に作ることです。ここにコピー対象文字列を出力し、JavaScript で選択状態にすれば冒頭のコピーメソッドを実行することができます。 そしてコピーが完了したら、作成したテキストエリアを削除します。プログラム処理においては一瞬の出来事なので、画面上にテキストエリアが表示されるのを目視すること

ブログや Web サイトを構築している人であれば、スマートフォン用サイトの構築に頭を悩ませる経験をお持ちではないでしょうか。 昨今では、ウィンドウサイズによって CSS の適用を変え、同一ソースで表示を調整できるレスポンシブデザインが主流となり、デスクトップパソコン用のサイトだけで事足りる時代は終わりました。 また2015年にはモバイルフレンドリー、2018年にはモバイルファーストインデックスと、スマートフォン用の表示サイトに対するウエイトが大きくなってきている現実もあります。 ただ Web サイトを構築するのはパソコン作業になることが多いため、別途モバイル用のレイアウトをチェックする必要があります。スマートフォン本体で直接確認すれば確実ですが、構築してる段階でもっと簡易的にモバイルレイアウトを確認できると便利ですよね。 そこで登場するのが、スマートフォンからの表示を確認するシミュレーター

WordPress の投稿記事リストの一覧をデータ抽出するために、SQL を発行してこれらの項目を出力した一覧を取得します。 URL リストがあれば、Google Analytics からエクスポートしたデータと突合させることも可能です。Analytics 上では得られない、アクセス数０のページだって見つけられます。他にも毎月の記事投稿数のチェックや月々のアクセス数の変化など、１つのファイルにまとめておくことで様々な情報が得られます。 投稿記事のリストは WordPress のデータが格納されている MySQL のデータベースから取得します。 MySQL のデータベースから一覧を抽出する方法まずはデータベースサーバーの phpMyAdmin にアクセスします。各レンタルサーバーによってアクセス方法が異なるので、phpMyAdmin の開き方については割愛させていただきます。 なおバージョン

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索！クリック１つでコードをコピー【アイコン一覧】 Font Awesome はアイコンをフォントで表現できる便利なツールです。このサイトでも、各種アイコンは画像ファイルでなく Font Awesome を利用しています。CDN で提供されているため、サーバーにアップロードしなくてもリンクを掲載するだけで簡単に利用でます。 ただ、公式サイトのアイコン一覧は英語でしか検索できないため、目的のアイコンを探すのに少々手間が掛かります。

#humberger { position: relative; height: 20px; width: 28px; display: inline-block; box-sizing: border-box; } #humberger div { position: absolute; left: 0; height: 2px; width: 28px; background-color: #444; border-radius: 2px; display: inline-block; box-sizing: border-box; } #humberger div:nth-of-type(1) { bottom: 20px; } #humberger div:nth-of-type(2) { bottom: 10px; } #humberger div:nth-of-type(3)

入力した数値を JavaScript で自動的に3桁カンマ区切りにして表示する方法！全角入力を許容する拡張機能も実装！ 数字項目、特に金額の入力項目においては、打ち込んだ数字の桁が間違っていないか確認する上で、３桁のカンマ区切りで表示されていることが重要視されます。 テキストボックス上で３桁カンマ区切りを実現すると、データ登録時のカンマ外しやデータ参照時のカンマ付与など実装すべきことが多くなります。それでもシステムの利便性を考慮すると、機能としては外せないものとなっています。 以下紹介するサンプルプログラムでは、次のような機能を実装しています。 テキストボックス入力後フォーカスが外れると3桁カンマ区切りで表示する再びテキストボックスにフォーカスが当たるとカンマが消える小数やマイナス符号付きの数値に対応全角で入力されたら半角に自動変換前後のスペースはトリムで排除ゼロ埋めした数字は頭のゼロを除

Web 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することができます。 background: url(data:image/png;base64, (コード値) );通常はファイルへのパスが記される部分を、コード値で表現しているのが特徴です。このように記述しても、画面上には画像が表示されてます。このコードは base 64 形式 と呼ばれる特殊なフォーマットで、HTML や CSS に直接記述することができます。 元の画像ファイル自体が大きいと コード値が自体肥大化してしまうので、あまり恩恵は受けられません。しかし、ちょっとした部品に使うような小さい画像であれば、サーバーに対する全体のリクエストが減少するメリットが受けられます。リクエストが減る、つまり表示速度の改善につ

先日ロリポップからエックスサーバーへレンタルサーバーを変更したことをお伝えしましたが、今回は具体的な手順を説明していきます。

Xserver を契約すると、独自ドメインの更新料がずっと０円になる永年無料特典が受けられます。 この特典は、エックスサーバーを契約し続ける限りドメイン代が無料 になるサービスです。また新規取得でなくても、既に他のサービスで取得済みのドメインにも適用 できる特典です。 僕自身も Xserver 契約時にこの特典を利用して、他に運営している Web サイト NJ-CLUCKER のドメインをムームードメインから移管しました。具体的にどのような手順で移管したのか、手順を紹介します。 なおこの特典は、契約するプランに関係なく提供されます。 移管できる対象ドメイン移管できるのは全てのドメインではありません。キャンペーンを適用できるのは、以下のいずれかのドメインに限定されます。 .com / .net / .org / .biz / .info / .xyz / .link ここでは .com ドメ

文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。 蛍光ペン風マーカーの黄色を指定した場合。 蛍光ペン風マーカーのピンクを指定した場合。 しかしブラウザによって解釈が違うようで、iPhone で見てみると transparent で設定して透明になるはずだった部分が黒くなってしまいます。 この時指定していた CSS は次の通り。上が黄色で下がピンクです。 strong { background: linear-gradient(transparent 30%, #FEFE98 90%); } strong.pink{ background: linear-gradient(transparent 30%, #FFCCFF 90%); }さて、この黒くなる原因はどこにあるのか。 結

jQuery でのテキストボックスに対する操作をまとめました。 テキストボックスの value 値に対する操作は、jQuery の中でも基本的な処理になります。ベースとなるテキストボックスの操作を覚えれば、各種フォームオブジェクトに対する操作も難なく覚えることができます。 以下、サンプルプログラムでは id 属性「sampletext」のテキストボックスを用いて解説していきます。

ブログの中身を書き換える Javascript を仕掛けたブログのエントリー内に次のような Javascript のコードを仕掛けてみました。 <script> if( location.hostname == "top-news.red" ) { document.getElementsByTagName("body")[0].innerHTML = ""; } </script>ホスト名が top-news.red だった場合、body タグの中身を空っぽにしてしまう処理です。記事がパクられたサイトのホスト名は nj-clucker.com になるため、if 文の分岐内の処理は行われません。一方 top-news.red 上でこのコードが読み込まれた場合、分岐内の処理が動いて body タグ内が空っぽになるので、真っ白な画面が表示される仕組みになります。 このコードを仕掛ける場所は、ど

画像ファイルは容量が大きいため、Web ページのデータ転送量に直接影響を与えます。もし、画面のスクロールに応じて、表示に必要な画像だけを後追いで読み込めば、次のようなメリットがあります。 サイト転送量の80%は画像ファイル僕のサイトの場合、Web サイト内の転送データの 8割強が png や jpg の画像ファイルです。通常はページの閲覧途中で離脱しても、ページ内の画像は全てダウンロードされ、ブラウザにキャッシュされます。 全ての人が表示したページを最後までスクロールするわけではないため、かなり無駄なデータ転送が発生している現実があります。サーバーによっては一日あたりの転送上限が決められているので、可能ならば無駄な転送は抑えたいのが正直なところではないでしょうか。 転送量が減ればサーバーへの負荷が減るメリットがある一方で、サイト閲覧者も無駄なデータ取得がなくなるため、トータルでサイト表示の

ブラウザ上で半角入力の制御は CSS の ime-mode プロパティが存在します。しかしこれは Internet Exporer 独自のものなので、Chrome ブラウザなど対応していないブラウザも存在します。 全角入力を拒否するような制御を JavaScript に組み込むことも可能ですが、半角に直してもう一度同じ内容を入力させる仕様は最適な対応方法ではないと考えています。 そこでユーザビリティを損なわず、故意ではない全角入力を許容するために、英数字や記号を全角から半角に変換する処理を提案させていただきます。 全角から半角へ変換するメリットある特定項目のデータを半角で統一することで、生まれるメリットもたくさんあります。例えば、検索画面で対象となるデータは、全角と半角が混在していると部分一致の条件を拡張しなくてはいけないので抽出するのが大変です。 Oracle であれば TO_SINGL