Design notes – WEBサイト制作効率化のための、デザイン・wordpressの試作や覚え書き

おむすびまるのデザイン覚え書き

DESIGN NOTES

ワードプレスやCSS、調べたことをまとめておけば次回はスピードアップできるかな！？
空いた時間でもっといいデザインをつくります！！

最近の記事

: 2021/02/14

スマホでhoverが効かない！タップでも対応させたい！

スマホでもhoverでつけた動きを反映させたい ontouchstart属性を追加する場合 ontouchstart属性を追加します。要素は特に入れなくてOKです。疑似クラス「:hover」を設定した …

: 2021/01/31

スライダー「slick」の使い方

スライダー slick jsでスライダーを設置するならjQueryのプラグイン「slick」がおすすめです。導入必要なファイルをhead内に読み込みます。URLはパスに合わせて書き換えます。 [c …

2021/01/31

アイキャッチ画像

アイキャッチ　テンプレートタグ分岐　アイキャッチ

例）
<?php if ( has_post_thumbnail() ): //アイキャッチを指定している場合 ?>
<?php the_post_thumbnail( 'thumbnail' ); ?> //カッコ内はアイキャッチ画像のサイズ（初期値は150×150px）。
<?php else: // それ以外 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="no image" width="100" height="100" />
<?php endif; ?>

例）

<?php if ( has_post_thumbnail() ): //アイキャッチを指定している場合 ?>

<?php the_post_thumbnail( 'thumbnail' ); ?> //カッコ内はアイキャッチ画像のサイズ（初期値は150×150px）。

<?php else: // それ以外 ?>

<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="no image" width="100" height="100" />

<?php endif; ?>

アイキャッチが設定されていない場合「no-image.png」を表示します。最初 …

: 2021/01/24

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは？隣接セレクタ要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。間接セレクタ要素 …

2021/01/24

CSSで縦書き

縦書き文章を縦書きにして右から左へ流す。縦書きの基本文章を縦書きにして右から左へ流す。

親{text-align:right;
display: inline-block;}
子{writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;/*IE用*/
text-align: left;
display: inline-block;

親{text-align:right;

display: inline-block;}

子{writing-mode: vertical-rl;

-ms-writing-mode: tb-rl;/*IE用*/

text-align: left;

display: inline-block;

1月11日数字の回転二桁の数字など英 …

2021/01/17

CSSで上下センター揃え

上下センター揃えフレックスボックス「display: flex」を使います。

セレクタ{display: flex;
  justify-content: center;
  align-items: center;}

セレクタ{display: flex;

justify-content: center;

align-items: center;}

左右センターは「justify-content: c …

2021/01/11

よく使うテンプレートタグ

パスを取得するテンプレートタグホームページのURL

<?php echo esc_url( home_url( '/' ) ); ?>

例）
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>

<?php echo esc_url( home_url( '/' ) ); ?>

例）

ワードプレスのURL ホームページのURLとワードプレスのURLが異なる場合に便 …

2021/01/11

よく使う条件分岐

便利な条件分岐トップページとその他

<?php if ( is_home() || is_front_page() ) : ?>
  トップページに表示させたいものを入れる
<?php else: ?>
  トップページ以外はこちら
<?php endif; ?>

<?php if ( is_home() || is_front_page() ) : ?>

トップページに表示させたいものを入れる

<?php else: ?>

トップページ以外はこちら

<?php endif; ?>

カテゴリーとその他カテゴリーごとに表示を変える場合 [crayon-609f347f9ff4b …