技術情報 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で...
技術情報 AMP HTMLの記述例
前回はAMP HTMLの概要をご紹介いたしました。今回は具体的な記述例をサンプルを交えてご紹介いたします。 AMP HTML amp-twitter amp-twitterタグでツイッターを表示するには、ツイートIDを記述します。 <amp...
技術情報 モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。 というわけで、今回はAMPをご紹介いたします。 AMP(Accelerated Mobile Pages)とは A...
技術情報 記事を書くのが楽になるWordPressプラグイン「TinyMCE テンプレート」
TinyMCE Templates — WordPress プラグイン 今回はWordPressで記事を書くのが楽になる、「TinyMCE テンプレート」をご紹介いたします。 「TinyMCE テンプレート」とは WordPress › T...
技術情報 自動でサイトマップを生成するWordPressプラグイン「PS Auto Sitemap」
今回は自動でサイトマップを生成するWordPressプラグイン、「PS Auto Sitemap」をご紹介いたします。 「PS Auto Sitemap」とは WordPress › PS Auto Sitemap « WordPress ...
技術情報 ソースコードをショートコードで呼び出せるWordPressプラグイン「Post Snippets」
今回はソースコードをショートコードで呼び出せるWordPressプラグイン、「Post Snippets」をご紹介いたします。 「Post Snippets」とは WordPress › Post Snippets « WordPress ...
技術情報 Movable Typeで「お知らせ」を作る
以前、Movable Typeでトップページを作る方法をご紹介いたしました。 前回の続きで、今回は「お知らせ」を作る方法をご紹介いたします。 ※本記事はWindows10 Pro(64bit)版、Movable Type6.2で行ったものを...
技術情報 Movable Typeでトップページを作る
以前、Movable Typeをローカルで構築する方法をご紹介いたしました。 今回は上記の続きで、実際にMovable TypeにWebサイトのページを組み込む方法をご紹介いたします。 ※本記事はWindows10 Pro(64bit)版、...
技術情報 ボタンクリックでフォントサイズと背景色を変えて状態を保持する
Webサイトの要件定義で、たまにフォントサイズや背景色の変更があるかと思います。 今回はボタンクリックでフォントサイズと背景色を変えて、かつ状態を保持する方法をご紹介いたします。 サンプル ボタンをクリックすると状態が変化します。 サンプル...