FirstLayout

Web 制作 : 3 ページ目

Web 制作

AMP に「ページトップへ戻る」ボタンを設置する方法

amp-animation と amp-position-observer を使い、AMPページ に「ページトップへ戻る」ボタンを設置する方法の紹介です。

Web 制作

全ブラウザ対応!preload で CSS を非同期で読み込み高速化

ブラウザの対応を気にせず rel="preload" で CSS を非同期で読み込める JavaScript の Polyfill「loadCSS」の紹介です。

Web 制作

WordPress を PWA に!ホーム画面への追加機能を実装

WordPress に PWA の「ホーム画面への追加」機能を実装する方法の紹介です。サイトをウェブアプリにできます。

Web 制作

WordPress のユーザー名を隠しセキュリティ強化

WordPress のセキュリティを高める効果があるユーザー名を隠す方法の紹介です。

Web 制作

WordPress プラグインを使い CSS をインライン化する方法

Autoptimize などのプラグインを使い、WordPress で CSS をインライン化する方法の紹介です。

Web 制作

border-image でグラデーションのボーダー

グラデーションのボーダーを簡単に指定できる CSS プロパティ border-image の説明です。

Web 制作

HTML エラーを出さず複数の Google Fonts を 1 つの link タグで読み込み

16 進数の %7C を使えば、複数の Google Fonts を 1 つの link タグで HTML エラーを出さず読み込めます。

Web 制作

WordPress で video タグの動画を AMP に対応する方法

amp-video を使い、WordPress のメディアにアップロードした動画を AMP に対応する方法の紹介です。

Web 制作

高速で Noto Sans 日本語を使う方法

Noto Sans 日本語を高速で読み込む方法の紹介。サブセット化済みのフォントファイルを Web Font Loader で非同期で読み込みます。

Web 制作

WordPress に reCAPTCHA v2 をプラグインを使わず導入する方法

スパムコメントを防ぐ reCAPTCHA v2 を WordPress にプラグインを使わず設置する方法の紹介です。

Web 制作

Simplicity に画像付き SNS フォローエリアを設置するカスタマイズ

Simplicity に画像付きの SNS フォローボタンを設置するカスタマイズの紹介です。AMP にも対応しています。

Web 制作

Simplicity で画像をスマホの画面幅いっぱいに表示する方法

WordPress テーマ Simplicity で本文中の画像をモバイル端末の画面幅いっぱいに表示するカスタマイズの紹介です。

Web 制作

インデックスリストのサムネイルを左右交互に配置するカスタマイズ

Simplicity のインデックスリストのサムネイルが、左右交互に並ぶ CSS カスタマイズの紹介です。

Web 制作

Simplicity の AMP に WordPress のコメント欄を設置するカスタマイズ

Simplicity の AMP ページに、WordPress のコメントリストを表示するカスタマイズの紹介です。

Web 制作

WordPress の AMP ページに検索フォームを設置する方法

WordPress の AMPページに検索フォームを設置する方法の紹介です。拡張コンポーネント amp-form を使用します。

Web 制作

amp-sidebar で WordPress の AMP にスライドメニューを設置

WordPress の AMP ページにスライドメニューを実装する方法の紹介です。拡張コンポーネント amp-sidebar を使用します。

Web 制作

画像のホバーエフェクト

モバイル端末を考慮した画像に対する CSS のホバーエフェクトの紹介です。

Web 制作

Simplicity のページネーションを使いやすくするカスタマイズ

Simplicity のページネーションを使いやすくするカスタマイズの紹介です。モバイルでの使いやすさを考慮しています。

Web 制作

AMP ページで Google Fonts を使う 2 つの方法

AMP ページで Google Fonts を使う方法の紹介です。「link タグで読み込む」と「サーバーにフォントファイルを設置し preload で読み込む」と 2 つの方法があります。

Web 制作

Simplicity の AMP でシェアボタンのアイコンとフォローボタンを表示

Simplicity の AMP ページで「シェアボタンのアイコン」と「フォローボタン」を表示するカスタマイズの紹介です。

Web 制作

Simplicity の 2 列・3 列の一覧リストの行をそろえる方法

Simplicity の一覧リストのスタイル「タイル 2列」と「タイル 3列」の行をそろえる CSS のカスタマイズです。

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール