技術情報

技術情報

WordPressテーマの「Simplicity」で固定表示されるモバイルのメニューを、スクロールで非表示するようにしてみた

当サイトで採用しているWordPressテーマの「Simplicity」は非常に高機能で、カスタマイズでモバイルのメニューをブラウザのトップに表示して固定する機能があります。 ただ、モバイルのメニューをブラウザのトップに固定すると、コンテン...
技術情報

WordPressの記事内にある、imgのaltの中身が空の場合にエラーを表示するようにしてみた

記事内に画像を挿入した後、うっかりaltの中身を空(alt="")にして投稿してしまうことがあると思います。 ある記事を見て出来そうだったので、altの中が空の場合に投稿画面でエラーを表示するようにしてみました。 functions.php...
技術情報

WordPressテーマのSimplicityにナイトモードのようなものを実装してみた

少し前のiOSに画面を暗くして、ブルーライトを軽減するというNight Shift(ナイトシフト)という機能が実装されました。Night Shiftとはちょっと違いますが、当サイトでも夜間に色を変えるナイトモードのようなものを実装してみまし...
技術情報

ショートコードで一部のWordPressの内容を指定日時で表示する「datecontent-shortcode」プラグイン

WordPressの記事内にある一部の内容を、指定した日時で表示できないか考えていたところ、ちょうどよい方法を紹介しているサイトがありました。 訪れてみると、プラグインとして動作するようにされており、ショートコードで利用できるようになってい...
技術情報

ignoreショートコードでWordPressの内容を非表示にする

WordPressで記事を書いてる時に、内容を非表示にしたいときがあると思います。 非表示にもいろいろな方法がありますが、ショートコードを使った方法をご紹介いたします。 ignoreショートコード WordPressのテーマにある「func...
技術情報

WordPressテーマのSimplicityにローディング画面とAMPの遷移を促す要素を表示してみた

以前、WordPressテーマの「Simplicity」に「AMP」ページへの遷移を促す要素を表示する方法をご紹介いたしました。 次はもっと自然に「AMP」ページへの遷移を促したいと思い、ローディング画面を表示してその範囲内に表示してみまし...
技術情報

CSSでHTMLの記述順とは異なる並び順にする

今回はHTMLのソースの記述順とは異なる見た目の並び順にする方法をご紹介いたします。 「float」、「position」使う方法 サイドバーを左、メインを右の表示にする(2カラム) html <div class="main"> メイン ...
技術情報

AMPページのバリデーションをWeb上で行える「The AMP Validator」を使ってみた

The AMP Validator 通常、「AMP」ページのバリデーションを行う場合、検証したいページのURLの末尾に「#development=1」と入力して、Chromeブラウザのコンソール表示で確認する必要がありました。 「#deve...
技術情報

AMPデザインテンプレートの「Simp」に、通常の「Web」ページへ遷移するボタンを表示させてみた

以前、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法をご紹介いたしました。 WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入...
技術情報

WordPressテーマの「Simplicity」に、「AMP」ページへの遷移を促す要素を表示してみた

以前、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法や、「Google AdSense」を表示する方法などをご紹介いたしました。 WordPressの「Simplicity」テ...
技術情報

CSSでレスポンシブなテーブルを表示する

以前テーブルを分けてスクロールさせる方法をご紹介いたしました。 今回はCSSでレスポンシブなテーブルを表示する方法をご紹介いたします。 サンプル サンプルではPCで横に見出しがあるタイプのものを、400px以内の表示の時に「th」と「td」...
技術情報

「AMP」ページに「Google AdSense」を表示させてみた

先日、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法をご紹介いたしました。 WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入...
技術情報

WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入してみた

AMP記事テスト – Sho-Yamane.info 以前、モバイル端末でのウェブページの表示を高速化する「AMP」をご紹介いたしました。 WordPressのプラグインで気軽にAMP HTML化はできるのですが、デザインがパっとしないのが...
技術情報

WordPressのビジュアルエディタでテーブル要素を作成する時に便利なプラグイン「TinyMce Advanced」

WordPressのエディタで記事を作るときに、テーブルの挿入がひとつの壁になります。 上級者であっても、テーブルのタグをエディタでまともに記述するのはかなり面倒です。 高機能のエディタではビジュアルモードでテーブルの挿入や、編集ができる機...
技術情報

リストタグで長さの違う要素を合わせる

今回はリストタグで長さの違う要素を合わせる方法ご紹介いたします。 サンプル リスト1~4とリスト5の両端をピッタリ合わせています。 サンプル html 今回はよくありそうなので、liの中にaタグを入れてみました。 ポイントは「</li><!...
技術情報

AMP HTML まとめ

Accelerated Mobile Pages Project AMPはGoogleが行っている、モバイル端末でのウェブページの表示を高速化するというプロジェクトです。 AMP HTML 対応するとgoogleがモバイルの表示を速くしてく...
技術情報

CSSでログインフォームをデザインする

今回はCSSでのログインフォームデザインをご紹介いたします。 サンプル ユーザーアイコンと錠アイコンにクリック、またはタップするとフィールドにカーソルがフォーカスされます。 サンプル html ラベルを記述し各フィールドに対応させておくと、...
技術情報

CSSで矢印アイコン付きのリストを作る

今回はモバイルでよく見る、矢印アイコン付きのリストを作る方法をご紹介いたします。 サンプル 右端に矢印アイコンが表示されています。 サンプル html ulにクラスがついてる普通のリストです。 <ul class="cursor"> <li...
技術情報

テーブルを分けて横スクロールをする

前回はテーブルを分けて縦スクロールをする方法をご紹介いたしました。今回はテーブルを分けて横スクロールをする方法ご紹介いたします。 サンプル サンプルでは右側のデータ部分が横スクロールします。 サンプル html テーブルをdivで切り、「f...
技術情報

テーブルを分けて縦スクロールをする

今回はテーブルを分けて縦スクロールをする方法をご紹介いたします。 サンプル サンプルではテーブルの見出し下のデータ部分がスクロールします。 サンプル html 外枠、見出し、データ部分に分かれています。見出しとデータ部分のテーブルをdivで...