サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
spuit.tech
WordPress 4.7 では、カスタムテンプレートに投稿タイプを指定することで、固定ページ以外の投稿タイプ、たとえば「投稿」やカスタム投稿タイプなどでテンプレートを使えるようになりました。あんまフューチャーされてない気がするので備忘録的に使い方をまとめました。 WordPress 4.6 以前ではカスタムテンプレートは基本的に固定ページでしか使えませんでした。カスタムテンプレートとは、テーマディレクトリ内に /* Template Name: テンプレート名 */ のコメントで始まるファイルを置くことで、投稿画面でテンプレートを選択して利用できるようになるというものです。 4.7 以降では、このテンプレートファイルを固定ページ以外でも使えるようになりました。 やりかた テーマディレクトリ内に新規PHPファイルを用意し、冒頭を以下のようにします。 <?php /** * Template
ブログ的なレイアウトだと、サイドバーをスクロールに合わせて固定させたいということがよくありますよね。一般的にこれは JavaScript で実装されますが、せっかくなので CSS の position: sticky で試してみました。 position: sticky とは 使用頻度の高い position プロパティにあって sticky なる値は聞いたことがないかもしれませんが、これは CSS Positioned Layout Module Level 3 にて追加された新しいもので、なかなか説明するのがムズカシイのですが、fixed と relative を合わせたようなものだと MDN では説明されています。 position: sticky と しきい値 (top, right, bottom, left プロパティ)を指定することで、画面上の絶対位置がしきい値より大きいとき
ぽすとしーえすえす。僕は普段CSSを書くときにはSassを使っていますが、最近PostCSSの名前を頻繁に目にするようになったので、備忘録も兼ねて概要や導入方法、Sassとの違いなんかを見ていきたいと思います。 PostCSS とは? PostCSSは「JavaScriptプラグインを用いてCSSを変換するツール」(README直訳)で、node.js製です。Sass等のCSSプリプロセッサとは違ってPostCSS自体にmixinやネストなどの機能は搭載されておらず、プラグインを追加していろいろやっていくという仕組みになっています。言うなればMinecraft serverにおけるspigotみたいなイメージですかね(伝わらない)。 自分でプラグインを選んで必要な機能だけを追加していけること、必要になれば自分でプラグインを作ることも可能なことなど、柔軟性の高さが特徴なんですね。また、Sas
まだまだ実用的ではない段階のCSSプロパティを無駄に使ってみる企画。今回はスクロールに関する振る舞いを指定できる scroll-behavior です。 概要 スムーズスクロールといえば、マウスホイールでスクローリングするときの挙動(Firefoxではデフォルトで有効なやつ)のことを言ったりもしますが、ここではページ内リンク・・・たとえば目次や「一番上に戻る」ボタンなどを押したときのスクロールを滑らかにするテクニックのことを指します。jQueryを用いて実装しているサイトが多いかと思います。 scroll-behavior はこのページ内スクロールに関する振る舞いを指定できるCSSプロパティで、値は auto と smooth があり、初期値は auto です。smooth を指定するとスムーズスクロールになります。 // 例 html { scroll-behavior: smooth;
公式テーマディレクトリにアップロードしていたWordPressテーマ「Tokimeki」のステータスが「live」になり、晴れて公開状態になったので、軽く紹介&公式ディレクトリのあれこれを備忘録代わりに。 Tokimeki – WordPress.org 「Tokimeki」は、ブログ・ニュースサイト・オウンドメディアなどのWebサイトに適したWordPressテーマです。2カラム・レスポンシブで、schema.orgによる構造化マークアップを施したパンくずリストなどを備えています。 ヘッダーにはサイトロゴやメニュー、ソーシャルリンクを設置することができます。各種ボタンやリンクの色、コピーライトの表記などはカスタマイザーから変更が可能。 全体的にアイキャッチ画像が設定されていること前提のデザインとなっていて、投稿一覧や関連記事ではサイズの異なるアイキャッチ画像を同じアスペクト比で表示させる
HTML5で追加された aside 要素は一見単純なようで、使って良いのか迷う場面がよくあります。ということで、備忘録がてら aside 要素の役割や使いどころを再確認してみましょう。 aside 要素とは? HTML5 – aside(その日本語訳) HTML5(仕様書)によると aside 要素は、 aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。 と書かれています。また、MDNには、 HTML <aside> 要素は、メインコンテンツとの関連性が希薄でメインコンテンツから 切り離すことが可能なセクションを表します。いわゆる「サイドバー」や、メインの記事内のコラムの部分に頻繁に用いられます。サイドバー
このページを最初にブックマークしてみませんか?
『Spuit - Web・フロントエンドブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く