技術情報 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 ProjectAMPはGoogleが行っている、モバイル端末でのウェブページの表示を高速化するというプロジェクトです。AMP HTML対応するとgoogleがモバイルの表示を速くしてくれる。...
技術情報 CSSでログインフォームをデザインする
今回はCSSでのログインフォームデザインをご紹介いたします。サンプルユーザーアイコンと錠アイコンにクリック、またはタップするとフィールドにカーソルがフォーカスされます。サンプルhtmlラベルを記述し各フィールドに対応させておくと、アイコンを...
技術情報 CSSで矢印アイコン付きのリストを作る
今回はモバイルでよく見る、矢印アイコン付きのリストを作る方法をご紹介いたします。サンプル右端に矢印アイコンが表示されています。サンプルhtmlulにクラスがついてる普通のリストです。<ul class="cursor"> <li><a hr...
技術情報 テーブルを分けて横スクロールをする
前回はテーブルを分けて縦スクロールをする方法をご紹介いたしました。今回はテーブルを分けて横スクロールをする方法ご紹介いたします。サンプルサンプルでは右側のデータ部分が横スクロールします。サンプルhtmlテーブルをdivで切り、「float:...
技術情報 テーブルを分けて縦スクロールをする
今回はテーブルを分けて縦スクロールをする方法をご紹介いたします。サンプルサンプルではテーブルの見出し下のデータ部分がスクロールします。サンプルhtml外枠、見出し、データ部分に分かれています。見出しとデータ部分のテーブルをdivで切って分け...
技術情報 AMP HTMLの記述例
前回はAMP HTMLの概要をご紹介いたしました。今回は具体的な記述例をサンプルを交えてご紹介いたします。AMP HTMLamp-twitteramp-twitterタグでツイッターを表示するには、ツイートIDを記述します。<amp-twi...
技術情報 モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。というわけで、今回はAMPをご紹介いたします。AMP(Accelerated Mobile Pages)とはAcce...
技術情報 記事を書くのが楽になるWordPressプラグイン「TinyMCE テンプレート」
TinyMCE Templates — WordPress プラグイン今回はWordPressで記事を書くのが楽になる、「TinyMCE テンプレート」をご紹介いたします。「TinyMCE テンプレート」とはWordPress › Tiny...
技術情報 自動でサイトマップを生成するWordPressプラグイン「PS Auto Sitemap」
今回は自動でサイトマップを生成するWordPressプラグイン、「PS Auto Sitemap」をご紹介いたします。「PS Auto Sitemap」とはWordPress › PS Auto Sitemap « WordPress Pl...
技術情報 ソースコードをショートコードで呼び出せるWordPressプラグイン「Post Snippets」
今回はソースコードをショートコードで呼び出せるWordPressプラグイン、「Post Snippets」をご紹介いたします。「Post Snippets」とはWordPress › Post Snippets « WordPress Pl...
技術情報 Movable Typeで「お知らせ」を作る
以前、Movable Typeでトップページを作る方法をご紹介いたしました。前回の続きで、今回は「お知らせ」を作る方法をご紹介いたします。※本記事はWindows10 Pro(64bit)版、Movable Type6.2で行ったものを掲載...
技術情報 Movable Typeでトップページを作る
以前、Movable Typeをローカルで構築する方法をご紹介いたしました。今回は上記の続きで、実際にMovable TypeにWebサイトのページを組み込む方法をご紹介いたします。※本記事はWindows10 Pro(64bit)版、Mo...
技術情報 ボタンクリックでフォントサイズと背景色を変えて状態を保持する
Webサイトの要件定義で、たまにフォントサイズや背景色の変更があるかと思います。今回はボタンクリックでフォントサイズと背景色を変えて、かつ状態を保持する方法をご紹介いたします。サンプルボタンをクリックすると状態が変化します。サンプルをご覧く...
技術情報 slideToggleでアコーディオン風メニューを表示する
メニューが長すぎるのでクリックした時だけ表示したい、という場合があると思います。今回は「slideToggle」を使用してアコーディオン風にメニューを表示する方法をご紹介いたします。サンプル「メニュー見出し」をクリックするとメニューが表示さ...