サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
webdesign.practice.jp
投稿画面に WordPressサイトの記事のURLを書くだけで Embedカードで置けるそうなので、どんなカードが貼られるのか試してみました。 画像の縦横比によってカードのレイアウトが変わったり、WoredPress4.4以上同士でもカードが貼れない場合があるようなので、そのあたりをメモ。 WordPress4.4からの機能ですが、4.5から EmbedのPHPの構成がかなり変わったようです。 PHPの構成は次回まとめます。 本日のINDEX WordPressのoEmbed Embedカードの構造（iframe要素内にHTMLを出力） iframe要素の幅を変更する どんな表示のカードが貼れるのか 画像アスペクト比1.75未満 画像アスペクト比1.75以上 アイキャッチ画像なし Embedカードが貼れない場合もあり oEmbed非対応では貼れない SSLサイトに非SSLサイトのカードは貼
記事のタイトル部分に「投稿日」だけでなく「更新日」も表示させるようにしてみました。せっかく書き直しても古い日付だけなのもナンですから。 一度も更新してない記事には「更新日」は表示されないようにしています。 ついでにHTMLの<time>要素の「datetime属性」でタイムゾーンも仕込みました。 で、日付だけ表示する場合でも「the_date」より「the_time」のほうがイイとか、今回調べたことをメモっておきます。 本日のINDEX 投稿日と更新日の表示のコード the_time と the_dateの違い 投稿日と更新日が異なる場合だけ更新日を表示する time要素で正確な日時やタイムゾーンを記述する 投稿日と更新日の表示のコード 投稿日と更新日の表示のためのコードの例です。time要素も仕込んでいます。 投稿・固定ページとも同じコードで使えます。 必ずループ内で使用。（じゃないと日
前回の記事で、WordPress 4.5 の Embedカード（ブログカード）の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。これを元に、デフォルトのスタイルを編集します。 CSSを編集する方法は2つ。 1つは functions.php で新しくCSSファイルを追加する方法。 もう1つは、embed-content.phpをアクティブなテーマ内に置いて編集する方法です。 本日のINDEX EmbedカードのCSSファイル CSSはカードの <head> 部にじかに書き出される 方法1：CSSファイルを追加する 方法2：embed-content.phpをテーマ内で編集 もっとガッツリとカスタマイズするなら 余談です：overflow:autoで回りこみを制御する カードのCSS編集は自サイトのカードのみ有効 前回の記事はこちらです↓ WordPress4.5で Em
WordPressで勝手に付いちゃう<p>や<br>を無くしてスッキリ！ remove_filterで自動整形をオフ WordPress管理画面で記事を「HTMLモード（テキスト）」で書くと、プレビューで変なスペースができていたり、テキストが意図しない位置で改行されてたりします。 この「スペース」や「改行」は、WordPressの自動整形機能によるものだそうで、ユーザが改行した位置に自動的に <p> や <br> を付けるせいだそうです。 WordPressのオートマチックさは便利だけど、余計なことをされると悩みますね。 この機能、remove_filterを使って簡単にオフできるので、メモっておきます。 （こんなに簡単なら、もっと早く調べれば良かった…w） 犯人は「wpautop()」という関数 皆さんそうかと思うんですが、私は記事本文をHTMLで書いて、ローカルでプレビューを確認してか
プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須
background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。 出典：Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか
ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー（ハンバーガーメニュー）にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS だけで簡単に作れることがわかったので、メモっておきます。 デモを作りました。（画像クリックで別ウィンドウで開きます） スマホで見るならこちらから→ 本日のINDEX クラスを付与・解除できる jQueryの「.toggleClass」 ドロワーメニューの動作の原理 ドロワーメニューの作り方 ハンバーガー部分のCSS参考サイト クラス名を付与・解除できる jQueryの「.toggleClass」 ヘッダー部分のグローバルナビゲーションは、<nav>要素の中に <ul>を仕込んで作ります。 これを、PCビューの時は表示させて、
CSSのfloatを解除するclearfix で「display:table」を使いました。 clearfixでは、table内のセル(trやtd)が0ならぺったんこで何も表示しない特徴を利用しましたが、 実際のレイアウトで「display:table」を使う場合は、必ず「display:table-cell」と一緒に使います。 逆に言えば「display:table-cell」を使う時は、親要素に「display:table」を指定していないと何も起こらない、意味が無いということです。 また、「display:table-cell」には、tableのセルで設定できる「vertical-align」が使えます。 そのため、通常の要素では指定できない「縦方向の中央揃え」も実現できて、とっても便利です。 本日のINDEX display:tableは、display:table-cellと一緒
今回は、投稿にコメント欄を設置する方法をメモ。 コメント欄とは「コメントのリスト」と、新しいコメントを書いてもらう「コメントフォーム」のセット。 そのセットをcomments.phpにまとめておき、投稿用テンプレートsingle.php（WordPressのテーマ作成9で作成）に配置。 function.phpで、コメントフォームの機能を調整します。 本日のINDEX single.phpにcomments.phpを読み込む comments.phpを作る wp_list_comments()でコメントリストを表示 comment_form()でコメントフォームを表示 ディスカッション設定でコメントに関する設定を function.phpに追加する コメントフォームでのオートリンク機能を無効化 コメントフォームで使用できるタグを無効化する comment-reply.jsで返信時にフォーム
ビジターにSNSでシェアしてもらうためのシェアボタンを設置するプラグインを探してみて、 1番スマートだったのがSimple Share Buttons Adderでした。 Simple Share Buttons Adderは、管理画面で設定するだけ。テンプレートファイルの編集をしなくても、カンタンに設置できます。 記事本文の「上」「下」「両方」のいずれかの位置にシェアボタンを置けて、ボタンセットのデザインは8種類も用意されています。しかも自作したボタンのアイコンを使うことも可能。 ただ、作者のDavid Nealさんはイギリス人なので、日本の「はてなブックマーク」などは、当然含まれていません。 というわけで「はてな」だけはCSSではめ込みました。超カンタンです。 本日のINDEX Simple Share Buttons Adderの特徴 Simple Share Buttons Add
前回、サイトの表示スピードアップのために4つほど作業をしたが、これらのほかに「ファイルサイズを縮小」することも有効。 javaScriptやCSSファイルの「改行」や「ホワイトスペース」「コメント」は、ヒトが読みやすくしているだけ。ブラウザにとって不要なこれらを削除すればファイルサイズを縮小できる。 小さくする事をMinify（ミニファイ）、Minifyされたものを整形して読みやすくする事をBeautify（ビューティファイ）という。また、2つのファイル内容をCompare（コンペア=比較）するサービスもある。 それぞれWeb上で利用できるサービスがあるので、今回はそれらをメモ。 Minify、BeautifyのWebサービス Minifyのみ Beautifyのみ どんなファイルでもいける、マルチな「Pretty Diff」 多数のサービスをまとめたページ「cleancss.com」 ち
WordPressのテーマ作成7では、ヘッダー部分に検索フォーム（サーチボックス）を作ったが、その検索結果を一覧表示するテンプレートはまだない。 今回はその、検索ワードにマッチする記事を一覧表示するテンプレート「search.php」を作ります。 手順は、WordPressのテーマ作成13で作った「category.php」をコピーして「search.php」と言う名前にし、タイトル部分を編集。 さらに、ループ部分で、検索ワードにマッチした記事があるかチェックさせる。 function.phpにも検索用の記述を追加する。 本日のINDEX category.phpをコピーしてsearch.phpを作る 検索結果一覧の表示用のテンプレートについて search.phpの編集 the_search_query()で「検索ワード」をタイトルに出力 ループ内で検索ワードにマッチする記事をチェックさ
WordPressでOGP設定。Facebook, Twitter Cardsもプラグイン無しでOK！ OGPを WordPressにプラグイン無しで設置する方法です。 Facebookや Twitter Cards も一緒にまとめて設置します。 前回の「OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！」で、OGPの基本的なことを押さえておきましたので、まずはご覧ください。 こちらで、OGPの基本HTMLソース、Facebook, Twitter Cardsの設定、OGP画像のサイズ、Facebookの App-IDの取得方法について書いておきました。 本日のINDEX header.php を編集 パーツテンプレート header_ogp.php を作る WordPressに OGPを設置するプラグインはいろいろありますが、<head
OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！ サイトにSNSへのシェアボタンを設置したからには、OGPの設置もしたほうがイイですね。 OGPの設置は、サイトの <head>部分の <meta>要素に記述をするだけで簡単。 FacebookとTwitter (Twitter Cards) は、基本のOGPの記述があれば、そこに数行を足すだけ。 ということで、本ブログにもOGPを設置したので、忘れないうちにメモっておきます。 ＊今回は、まずOGPの HTML上での基本構造や、Facebook・Twitter用の設定をメモ。まずは基本を整理。 ＊WordPressでの設置は、パーツテンプレートを作り、タグを編集する必要があるので、次回メモ。 本日のINDEX OGPは<meta>要素に記述する <head>要素のprefix属性への記述
各カテゴリーに属する記事を一覧表示するテンプレート「category.php」を作ります。 いわゆるアーカイブページってヤツ。そのカテゴリー用ね。 今後同じフォーマットを使用して、タグ用の一覧や、サーチ結果ページのテンプレートも作るので、今回の「category.php」を1つ作ればラク。コピーして使い回します。 手順は、WordPressのテーマ作成8で作った「home.php」をコピーして「category.php」という名前に変更。 「home.php」のループは最新記事用になっているので、普通のWordPressループ変更。 [抜粋セット]の「each_exrpt_post.pnp」はそのまんま流用できるのでラク♪ さらにプラグインでページャー（ページナビ）をつけて、わかりやすくします。 本日のINDEX home.phpをコピーしてcategory.phpを作る アーカイブ用のa
このサイトの制作時にスマホで表示確認をしていたとき、フォームのテキスト入力部分（input type=”text” や textarea）は大丈夫なのに、送信ボタン（input type=”submit”）だけは、どうしても意図したスタイルにならず、困った。 CSSの指定を無視してデフォルトスタイルのままになる、これは、webkit系のモバイル用ブラウザのバグみたい。 主要なモバイル用ブラウザは、ほとんど webkit系（Safari、Android標準、Android Chrome）なので、直す方法があるなら…と調べてみたら、appearance プロパティに-webkit-のベンダープレフィクスをつけて、値をを none にすれば初期化できるらしい。ということで、さっそく試してみた。 webkit系ブラウザに関する参考サイト：WebKit-Wikipedia appearance に関
今回は投稿用のテンプレート「single.php」を作る。 WordPressのテーマ作成8で、トップページの表示用のテンプレート「home.php」を作ったところからの続きです。 手順は、「home.php」をコピーして「single.php」にし、投稿記事を表示する部分をパーツテンプレート「content.php」にする。加えて前後の記事にリンクするナビも作成する。 WordPressの管理画面で書いた投稿記事は、データベースに蓄えられ、このテンプレート「single.php」に出力されてブラウザに表示される。 「single.php」では、記事を出力するためにループを使う。WordPressのループは、投稿・固定ページ・アーカイブページ用など、ほとんどのテンプレートで使う大事なPHPソース。 ループ（loop）というだけあって、繰り返し処理をしてくれる。 WordPressを使うなら
category.php（tag.php も）では、ループ内に get_template_part(‘each_exrpt_post’); を使って、パーツテンプレート「each_exrpt_post.php」を呼び出している。 これは home.php の時に作った「抜粋セット」をまんま流用したもの。 今回の全記事一覧でも、コレを流用します。 同じく category.php（tag.php も）で設置したページャーもそのまま流用したい。 というわけで、既にできているアーカイブ用のテンプレートを使えば早い。 category.phpをコピーして、適当な名前を付けます。 ここでは「page_all.php」にしました。（ファイル名はなんでもOK。自分がわかりやすいものに） これを、固定ページのカスタムテンプレートにします。 カスタムテンプレートの宣言 カスタムテンプレートには、ファイルの冒
今回は、各タグに属する記事を一覧に表示するテンプレート「tag.php」を作る。 手順はスゴく簡単。WordPressのテーマ作成13で作った「category.php」をコピーして「tag.php」という名前にして、タイトル部分の背景色などを変えるだけ。同じフォーマットなので。 本日のINDEX category.phpをコピーしてtag.phpを作る アーカイブ用のarchive.phpでもいいんだけど タグ一覧の表示用のテンプレートについて タグ名を表示する部分を編集 category.phpをコピーしてtag.phpを作る WordPressのテーマ作成13で作った「category.php」をコピーして「tag.php」という名前に変更。 このtag.phpという名のファイルがあれば、WordPressは「タグ別一覧」表示用テンプレートとして使用する。 アーカイブ用のarchiv
レスポンシブレイアウトで、CSSでMedia Queriesを設定したら、HTMLでviewportを指定しなければ意味ない。何も起こらないんですね〜。Media Queries使うならviewportは必須。 ところで、viewportのプロパティや値はいろいろあるけど、どれを使うのが最適なんだろう？ 「width」と「initial-scale」は同時に指定しないほうが良いってホント？（…違ってました） などの疑問を今回いろいろ調べてみた。 そのほか、レスポンシブレイアウトでの画像サイズ、 -webkit-text-size-adjust（文字サイズ自動調整）についてもメモ！ 本日のINDEX viewportの指定について viewportの「width」と「initial-scale」 viewport の使い方パターン2つ メディアクエリ無しなら viewport 不要 メディア
CSSのfloatを解除するclearfixはコレで決まり！display:tableを使ったmicro clearfix floatを使ったら、それが不要になるとき解除(clear)する必要 があります。 それ以降のボックス要素に対してもfloatし続けてレイアウトが崩れるし、floatした要素は親から浮いた状態なので、親要素の背景で囲まれない などの弊害を解消するために。 それにはclearfix（クリアフィックス）と呼ばれるソースをfloatさせる要素の親ボックスに使います。 display:tableの特徴を利用したmicro clearfixと呼ばれるソースが、オールドIEにも対応しているし、ソースも短くてシンプルです。 本日のINDEX micro clearfixのソース オススメの micro clearfix ちなみに、float以外にボックスを横に並べる方法は disp
トップページ用テンプレートhome.phpを作る（get_postsで新着記事を数件表示）[WordPressテーマ作成の手順8] WordPressのテーマ作成を1〜7まで順にメモってきたが、今はまだindex.phpをパーツテンプレートに分割しただけ。投稿や固定の記事を表示するところはまだ無い状態だ。 今回から、トップページや投稿・固定ページの記事を表示する部分を作っていく。 まずは、トップページから。 このブログでは、トップページに新着記事の「抜粋セット」を6個並べて表示するために、テンプレートタグ get_posts を使用した。 新着記事の「抜粋セット」は、パーツテンプレートにしてまとめた。 （この抜粋セットは、他のアーカイブページ（カテゴリ、タグ、検索結果など）でも使うことになる） 本日のINDEX index.phpをコピーしてhome.phpを作る トップページ用のテンプレ
今回は固定ページ用のテンプレート「page.php」を作ります。 手順は、前回のWordPressのテーマ作成10で作った「single.php」をコピーして「page.php」って名前にし、記事を表示する部分のパーツテンプレート「content.php」もコピーして「content-page.php」に作り替える。 本日のINDEX single.phpをコピーしてpage.phpを作る 固定ページ用のテンプレートについて 固定ページの表示部分を整える パーツテンプレートcontent-page.phpを作る 固定ページは、WordPressをCMSとして使うなら、おおいに活用するページ。 「投稿」は時系列で並ぶように設定され、カテゴリ分けやタグも付けられるブログ記事用。 「固定ページ」は投稿と違って、 ・メニューでの表示順序を自由に変えられる ・親ページ子ページの階層設定ができる ・ペ
検索フォームを表示したいところに「get_search_form() 」と書くだけで、WordPressは検索フォームを表示する。 これは、あらかじめWordPressで用意された検索フォームが表示されるのだが、この検索フォームの見た目をカスタマイズする方法をメモ。 WordPressのビルトインの検索フォームは、余計なlabel要素やプレースフォルダーがある。これらを取り去ったり、idやclassも自由に指定できるのでスタイル設定もしやすくなる。 自分で formの actionファイルが書けない非エンジニアでも、WordPressを使えば超簡単に、しかも自分でカスタマイズした検索フォームが作れるなんて、WordPressの1番の魅力は、このフォーム関連の簡単さだと思う。 （コメントフォームやメールフォームも、エンジン部分の知識がまったく無くても、あっさりできちゃうからね） 本日のIND
このページを最初にブックマークしてみませんか？
『＊Web Design 覚え書き＊』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
