WEB MEMO LOG

  • WordPress

【WordPress】1ページ目と2ページ目以降で一覧記事の表示件数を変更する。それに合わせてナビゲーションのページ数を調整(WP-PageNavi)。

【WordPress】1ページ目と2ページ目以降で一覧記事の表示件数を変更する。それに合わせてナビゲーションのページ数を調整(WP-PageNavi)。

1ページ目の最初の記事だけ1カラム、その他は2カラムにした場合など、1ページ目と2ページ目以降で表示件数を変更したい場合がありますよね。 その方法をメモメモ。 それに合わせてページナビゲーション(プラグインのWP-PageNaviを使用している場合)を変更する必要があるので、そちらの方法をメモメモ。 ▼functions.php ▼core.php(plugins/wp-pagenaviフォルダ内・・・

  • WordPress

【WordPress】記事の位置判定(最初、最後、奇数、偶数)

【WordPress】記事の位置判定(最初、最後、奇数、偶数)

最初の記事や最後の記事等の判定をするための方法をメモメモ ▼記事位置の判定(functions.phpに記載) ▼home.phpの最初の記事にクラスをつける

  • CSS

【CSS】n番目の要素を指定できる「nth-child」と「nth-of-type」の違いと方法

【CSS】n番目の要素を指定できる「nth-child」と「nth-of-type」の違いと方法

便利なn番目の要素を指定できる「nth-child」と「nth-of-type」ですが、違いや方法をメモメモ。 ▼E:nth-child(n):親要素のn番目の子要素であるE要素 ▼E:nth-of-type(n):親要素内で兄弟関係にあるE要素でn番目のもの 【参考】 何番目系の便利なCSSまとめ CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い

  • CSS

【CSS】フッター要素を常に下に表示したい!CSSで!

【CSS】フッター要素を常に下に表示したい!CSSで!

コンテンツが少ないときなど、フッター要素が上にきてしまうので、なんか思ったんと違ーう!となってしまうケースありますよね。 それを回避するための方法をメモメモ。 ▼HTML ▼CSS

  • Web

【Web】input要素にFontAwesomeを設定する方法

【Web】input要素にFontAwesomeを設定する方法

簡単にアイコンを表示できるFontAwesome。 input要素で書かれたボタンにFontAwesomeを表示する方法をメモメモ。 ▼HTML ▼CSS

  • Web

【Web】postion:fixedだけど、スクロールしたい。しかもスクロールバーは非表示

【Web】postion:fixedだけど、スクロールしたい。しかもスクロールバーは非表示

「positon:fixed」だけどスクロールしたい、しかもスクロールバーバ非表示にしたい場合のメモメモ。 ▼HTML ▼CSS 【参考】スクロールさせる領域だけどスクロールバーは非表示にしたい。

  • WordPress

【WordPress】ページの条件分岐

【WordPress】ページの条件分岐

WordPressには様々な種類のページタイプがあるので、そのページタイプによる条件分岐のメモメモ。 ▼ホーム判定(2ページ目や3ページ目も、is_home() では true が返ってくる。) ▼フロントページ判定 ▼シングルページ判定(パラメータを渡してあげると、もっと細かく条件を付ける事もできます) ▼固定ページ判定(パラメータを渡してあげると、もっと細かく条件を付ける事もできます) ▼カテ・・・

  • WordPress

【WordPress】投稿のタイトルや日付などの各種データの取得方法

【WordPress】投稿のタイトルや日付などの各種データの取得方法

基本的なことなんですが、よく忘れるので、よく使う項目をメモメモ ▼タイトルを表示 ▼日付を表示 ▼パーマリンク の URL を表示 ▼投稿の本文を表示 ▼投稿の概要(抜粋)を表示 ▼概要(抜粋)の文字数調整、文末の[…]を別の文字に変更する方法(functions.phpに記載)

  • WordPress

【WordPress】WP_Queryのパラメーターのまとめ

【WordPress】WP_Queryのパラメーターのまとめ

▼WP_Queryのパラメーター 【参考】これは便利!WordPressのWP_Queryでよく使うコードスニペット

  • WordPress

【WordPress】WP_Queryを使った記事表示の方法

【WordPress】WP_Queryを使った記事表示の方法

WordPressでの記事の出力方法ですが、毎回毎回検索しているのでメモメモ。 ▼WP_Queryの基本的な記述例 【参考】WordPressで押さえておきたい!get_posts,WP_Query,query_posts の違いと用例

  • CSS

【CSS】フォームを作る際に入れておくCSS

【CSS】フォームを作る際に入れておくCSS

お問い合わせフォームを作る際に入れておきたいCSSをメモメモ。 ▼iOSでのボタン等のデザインをリセット ▼半角英数字の文字列を折り返す

  • CSS

【CSS】Flexboxでレイアウト

【CSS】Flexboxでレイアウト

いままでfloatやJSで横並びのボックスを調整していましたが、楽になりますね~。 よく使いそうなものをメモメモ。 ▼flexboxレイアウト ▼flexアイテムの複数行に配置 ▼flexアイテムの等間隔配置 ▼flexアイテムの高さを揃える 【参考】CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス