CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート
レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。 レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立たせたい箇所には少し広め・かなり広めといった使い方ができます。 HTMLもCSSもシンプルなので、スニペットに登録しておくと便利です。 Layout Breakouts with CSS Grid HTMLは、非常にシンプルです。 ラッパーに.contentを与え、最大幅を設定した通常のコンテンツはclassなし、あとは幅に応じて.popout, .feature, .fullを与えるだけです。
HTML、CSSの次に。WordPressをカスタムしよう。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そして今回はWordPressの中にページを一つ作ってみましょう。WordPressの用語もしれっと織り交ぜていくので同時に学んでくださいね。 なお今回も前回に引き続きlocalというアプリを使用します。WordPressをお使いのPC上で簡単に使用できるようになります。 HTMLとCSSを学んだ方であれば、あとはデザインを落とし込めばWordPressを使ったサイトをコーディングできるようになります！ それでは行ってみましょう。 WordPressで作れるページについて まずはデフォルトで作れるページについて触れてみます。とくによく使うページとしてトップページ・固定ページ・投稿が存在します。それぞれ下記の通りの機能です。簡単なサイトであればこれだけで構成されることもあります。 トップページ ホームページとも言いますが、URLをブラウザで検索して開くと一番最初に開かれるページです。 ↓作成
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
WordPress テンプレートファイル名で条件分岐する方法 - by Takumi Hirashima
WordPress テンプレートファイル名で条件分岐する方法を紹介します。 例えば、テンプレート別にCSSを切り替えたい時に便利な方法です。 テンプレートファイル名で条件分岐させる方法 WordPress で使用中のテンプレートを判別するには is_page_template() を使用します。 次のコードは、テンプレートが example.php の場合に、使用の有無で表示内容を切り替える方法です。 <?php if(is_page_template('example.php')){ echo 'example.php 使用中'; } else { echo 'example.php 未使用'; } ?> まとめ WordPress テンプレートファイル名で条件分岐する方法を紹介しました。
[WooCommerce]商品詳細ページで独自のテンプレートを適用させるスニペット
[WooCommerce]商品詳細ページで独自のテンプレートを適用させるスニペット 更新日: 2019/10/18 公開日: 2017/02/24カテゴリー: WordPress WordPress 4.4から詳細記事ページ用（single.php）に新しいテンプレートが用意されました。 テンプレートのファイル名をsingle-{post_type}-{post_name}.phpの仕様に則ることで、詳細記事ごとに専用のテンプレートを割り当てることができます。 これを利用し、WooCommerceで登録した特定の商品に対して独自のテンプレートを割り当てようとしたのですが、通常の方法では適用できなかったのでメモです。 WooCommerceの商品ページに独自のテンプレートを割り当てる例えば商品ページのスラッグを「note」と設定し、テーマディレクトリ直下にsingle-product-not
![[WooCommerce]商品詳細ページで独自のテンプレートを適用させるスニペット](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3e97c5341963e1c12bca1a015d2478aea39c48a/height=288;version=1;width=512/https%3A%2F%2Fincrement-log.com%2Fwp-content%2Fuploads%2F2019%2F10%2Fdefault.png)
【2018年WordPress魔改造TOP3】第3位：特定のテンプレートだけ別テーマを使う | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「魔改造」。過剰なカスタマイズを施したものを、我々は時にこう呼びます。この字面に溢れる厨二感……。 こんにちは、バックエンドエンジニアのリョウタです。 WordPress系のイベントに登壇する際のスライドにも書いているのですが、私はWordPressの魔改造が大好きです。 「これやるんだったらスクラッチで作ればいいじゃん」って言われそうなものを、なかば無理やりにでもWordPressで実装するのが楽しいんです。わかりますかね？ この気持ち。 今年も今年とて、新規・リニューアル・保守とさまざまなWordPress案件に関わってきましたが、その中でも特に記憶に残った「魔改造」３つを順に振り返っていこうと思います。今回は第3位の発表です。 第３位：特定のテンプレートだけ別テーマを使う 予算や納期の兼ね合いで、段階的なリリースになる案件はままあります。 新規制作案件の場合、リリース後に待つフェーズ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
