CSSで背景に水平方向に貫いてるラインを入れたい
web制作中に「背景にwidth100%で水平方向(横)に1本のライン(線)が入ってて、その上に要素がある」ものを作る機会がありまして…
見出しのデザインで「文字の左右にラインが入ってる」ものありますよね
これで左右の余白0にすればいけるんじゃね?と思ったのですが、
要素にマージンつけちゃうと当たり前なんですがラインも途切れました。
そこで「文字にマーカーみたいに線いれる」デザインで使うlinear-gradientを応用して、グラデーションで中央にだけ線があるように見せれば…
html: <div class="container-fluid"> <div class="bg-line my-5"> <div class="inner mx-auto"> <img src="img/01.svg" alt="" width="40px"> <img src="img/02.svg" alt="" width="40px"> <img src="img/03.svg" alt="" width="40px"> <img src="img/04.svg" alt="" width="40px"> </div> </div> </div>
css: .bg-line { width: 100%; padding: 3em 0; background: linear-gradient(transparent 48%, #ffa22f 48%, #ffa22f 50%, transparent 50%); } .inner { max-width: 80%; display: flex; justify-content: space-around; }
■結果
なんとかなった!!!
(もっと賢い線の引き方あると思うのであれば教えて下さい…)
補足:
・bootstrap4.2.1を使用しています。
・ラインの上に乗っける要素は自身でご準備ください。
・bg-lineかinnerのクラスにpaddingかheight設定しないと上手く表示されません。
・ラインの位置ですが、
background: linear-gradient(transparent 48%, #ffa22f 48%, #ffa22f 50%, transparent 50%);
の箇所の数値いじると変わります。超決め打ちです。
Twidereで保存した検索キーワードを消去する
半年ぐらい前からアンドロイドスマホでツイッターを見るのに「Twidere」を使っています。
以前、Twidere上で興味のない検索キーワードを間違えて保存してしまい消去ができず困っていたのですが、公式アプリから消去できたので書いておきます。
(このような状況です)
1.Twitterの公式アプリをダウンロードして開き、twidereでログインしているアカウントでログインする。
2.検索画面にいくと下部に保存済みキーワードが出てくるので消したいキーワードを押して検索する。
3.検索すると右上に歯車アイコンが出るので押して「保存した検索を消去」を押す。
Twidereから消えるのにはちょっとだけラグがあります。ちなみにiOS版公式アプリだと左スワイプですぐ消えます(なんで統一しないの?)。
公式クライアントと保存キーワードが連動してるとは知らなかったのでちょっとビビリました。
macで液タブを使ってると日本語入力ができなくなる
macで液晶タブレットを使用してillustratorで作業している際に検索等で日本語入力しようとすると、
画面右上の入力ソースは日本語ひらがなになっているのに半角英数が打ち込まれるという現象です。
筆者の環境
・OS:high sierra
・液晶タブレット:wacom cintiq 13HD
・液晶タブレットのドライババージョン:6.3.32-3
前からこの現状自体は発生していたのですが最近頻繁に発生するようになり、直し方としては
・メイン画面のデスクトップとかツールバーとかの適当な箇所をクリックする(メイン画面をアクティブにする)
・画面右上の入力ソースからひらがな以外のソースを選択▶キーボードの方でひらがな切り替える
のどちらかっぽいです(クリックで直るからmac側のディスプレイ割り当てとかの問題っぽい気もします)。
同僚に話すと自分以外にも数人、OSのバージョンの違いはあれど、同じ現象が起きている様子。
筆者はgoogle日本語入力を使っているのですが、同僚はことえりだったのでそのあたりは関係ないっぽいです。
一度タブレットのドライバ消去→再度インストールしましたが、改善はしませんでした。
以下のクリップスタジオの質問スレッドを見てもソフト側の問題ではなさそうです。こちらも未解決で止まっています。
Mac/文字入力時に強制的に半角英数になってしまう | CLIP STUDIO PAINTの要望・不具合ボード | CLIP STUDIO
どうにか検索バークリックだけでアクティブになってくれないものでしょうか……。
【wordpress】商品一覧ページを作る おまけ(値段の表示)
その1
【wordpress】商品一覧ページを作る その1 - さびぬき覚書
その2
【wordpress】商品一覧ページを作る その2 - さびぬき覚書
その3
【wordpress】商品一覧ページを作る その3 - さびぬき覚書
その3で作った商品一覧ページですが、商品1つ1つに値段が表示されていれば便利ですよね。
今回は個別に金額を表示させます。
商品ごとに金額を追加する
まず「その1」でタクソノミー(商品の分類)を作りましたが、同じように新規で「値段」のタクソノミーを作ります。
管理画面からCPT UI▶タクソノミーの追加と編集
・タクソノミースラッグ:products_price
・複数形のラベル:値段
・単数形のラベル:値段
・利用する投稿タイプ:商品
上記のように入力して保存します。
保存したら商品一覧から値段をつけたい商品の個別ページに行きます。
右側に値段の枠が出来ていると思うので、そこに値段をカンマなしで打ち込み、追加。
そして保存します。
products.phpにコードを追加
products.phpを以下のように書き換えます。
<?php /* Template Name: products */ ?> <?php get_header(); ?> <div class="container"> <p>すべての商品</p> <?php $args = array( 'post_type' => 'products', 'post__not_in' => array($post->ID), 'posts_per_page' => -1, ); ?> <div class="products_list"> <?php $myposts = get_posts($args); ?> <?php foreach($myposts as $post) : setup_postdata($post); ?> <div class="post"> <div class="products_thum"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(auto,300)); ?></a></div> <div class="products_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div> <div class="product_ctgy"> <?php $terms = get_the_terms($post->ID,'products_category'); foreach( $terms as $term ) { echo '<span>'.$term->name.'</span>'; } ?> </div> <!-- 金額を追加 --> <?php $terms = get_the_terms($post->ID,'products_price'); foreach( $terms as $term ) { echo '<span class="price">'.number_format($term->name).'円(税抜)</span>'; } ?> <!-- 金額ここまで --> </div> <?php endforeach; ?> </div> </div> <?php get_footer(); ?>
抜粋すると、「金額を追加」から「金額ここまで」の箇所を追加します。
(後ほど値段のフォントの大きさを変更するのでspanで金額を囲っています)
<!-- 金額を追加 --> <?php $terms = get_the_terms($post->ID,'products_price'); foreach( $terms as $term ) { echo '<span class="price">'.number_format($term->name).'円(税抜)</span>'; } ?> <!-- 金額ここまで -->
products.cssを編集
これでも表示されますが、金額のフォントなどを少し直します。
その2にあるcssの「商品タイトル」以下を少し編集します。
/*商品タイトル*/ .products_title { font-weight: bold; } .products_title a { color: #333; text-decoration: underline; } .products_title a:hover { color: #777; } /*商品カテゴリ*/ .product_ctgy { border-bottom: 1px solid #969696; } .product_ctgy span { font-size: 0.8em; } .product_ctgy span+span:before { margin: 0 0.2em; content: "/"; } .price { font-size: 14px; }
保存します。これでproductsページを確認してみると…
無事に値段が個別に表示されました。
【wordpress】商品一覧ページを作る その3
その1
【wordpress】商品一覧ページを作る その1 - さびぬき覚書
その2
【wordpress】商品一覧ページを作る その2 - さびぬき覚書
products.phpを作る
やっと固定ページを使用してhttp://●●●/products/のようなアドレスの商品一覧ページを作ります。
まず新規でproducts.phpを制作し、以下を記述。
<?php /* Template Name: products */ ?> <?php get_header(); ?> <div class="container"> <p>すべての商品</p> <?php $args = array( 'post_type' => 'products', post__not_in' => array($post->ID), 'posts_per_page' => -1, ); ?> <div class="products_list"> <?php $myposts = get_posts($args); ?> <?php foreach($myposts as $post) : setup_postdata($post); ?> <div class="post"> <div class="products_thum"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(auto,300)); ?></a></div> <div class="products_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div> <div class="product_ctgy"> <?php $terms = get_the_terms($post->ID,'products_category'); foreach( $terms as $term ) { echo '<span>'.$term->name.'</span>'; } ?> </div> </div> <?php endforeach; ?> </div> </div> <?php get_footer(); ?>
基本的にはtaxonomy.phpと変わらないです。
上部のこの部分
<?php /* Template Name: products */ ?>
これを記述すると、テンプレートとして固定ページに反映させることができます。
productsページ(商品一覧ページ)を作る
wordpressの管理画面に戻り、固定ページ▶新規追加でproducctsページを制作します。
・固定ページタイトル:products(商品一覧ページでも何でも良いです)
・パーマリンク:products(urlになります)
右側にページ属性▶テンプレートとあるので、そこで先程作った「products」を選択します。
以上ができたら公開します(cssはその2で読み込ませている&タクソノミーページとデザイン共通なので省きます)。
完成
ここまでできたら完成です!http://●●●/products/を見てみると…
無事表示されました。
次の記事はおまけで値段表示させます。
おまけ(値段の表示)
【wordpress】商品一覧ページを作る おまけ(値段の表示) - さびぬき覚書
【wordpress】商品一覧ページを作る その2
その1はコチラ
【wordpress】商品一覧ページを作る その1 - さびぬき覚書
その2ではCSSを読み込ませたりと表示のカスタマイズを行います。
表示のカスタマイズ
その1で表示まではできたので、今度は表示をカスタマイズしていきます。
今回は上の図みたいに表示&商品が増えたときのことを考えて、1列に3つの商品が並ぶようにします。
新規でtaxonomy.phpを制作して、以下のように記述します。
<?php get_header(); ?> <div class="container"> <div class="products_list"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post();/* ループ開始 */?> <div class="post"> <div class="products_thum"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(auto,300)); ?></a></div> <div class="products_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div> <div class="product_ctgy"> <?php $terms = get_the_terms($post->ID,'products_category'); foreach( $terms as $term ) { echo '<span>'.$term->name.'</span>'; } ?> </div> </div> <?php endwhile; ?> </div> </div> <?php else : ?> <div class="post"> <h3>製品がありません</h3> <p>表示する製品がありませんでした</p> </div> <?php endif; ?> <?php get_footer(); ?>
サムネイル画像の大きさは以下の箇所の(auto,300)をいじると変更できます。
<div class="products_thum"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(auto,300)); ?></a></div>
下部のここですが、
<?php else : ?> <div class="post"> <h3>製品がありません</h3> <p>表示する製品がありませんでした</p> </div> <?php endif; ?>
スラッグはあっても割り当てられている商品がない場合に表示されます。
taxonomy.phpを制作したら、cssも作ります。名前はproducts.cssにします。
/*商品全体を表示させる領域*/ .products_list { width: 900px; height: auto; margin: 0 auto; display: flex; flex-wrap: wrap; } /*商品1つの横幅*/ .post { width: 29%; margin: 1em; } /*サムネ*/ .products_thum { text-align: center; background-color: #FFF; } .products_thum a:hover { opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; } /*商品タイトル*/ .products_title { font-weight: bold; border-bottom: 1px solid #969696; } .products_title a { color: #333; text-decoration: underline; } .products_title a:hover { color: #777; } /*商品カテゴリ*/ .product_ctgy span { font-size: 0.8em; } .product_ctgy span+span:before { margin: 0 0.2em; content: "/"; }
作ったphpとcssをftp等でアップします。
taxonomy.phpはwp-content/theme/使用しているテーマ(今回はneve)フォルダの中に
products.cssもnaveの場合はtaxonomy.phpと同じ所でOKです。
cssを読み込ませる
現状だとproducts.cssが読み込まれないので読み込まれるようにします。先程アップしたフォルダ内にfunction.phpというファイルがあるので開きます。
34行目の後あたり、もしくは一番下に以下を追加します。
/* products.css読み込み*/ function add_files() { wp_enqueue_style( 'products', get_template_directory_uri() . '/products.css'); } add_action( 'wp_enqueue_scripts', 'add_files' );
ここまできたらまたhttp://●●●/products_category/toys/を確認します。
1列に3つ商品が表示されるようになったと思います(画像はいくつか商品を増やしてみた状態です)。
次の記事でやっと固定ページを使用してproductページを作ります。
【wordpress】商品一覧ページを作る その3 - さびぬき覚書