[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする
<?php the_post_thumbnail(); ?>タグでアイキャッチ画像を表示すると以下のような形で img タグがHTMLに出力されます。 この img タグ内の width/height 指定やクラス名を任意のものへ変更したり、削除する方法のメモです。 img タグ内のサイズ指定を変更する the_post_thumbnail() に以下のように array( 橫, 縦 ) に表示したいサイズを渡します。 <?php the_post_thumbnail( array(200, 200) ); ?> これで以下のように img タグが変更されます。 独自のクラスを付ける the_post_thumbnail() タグの第二引数に以下のように任意のクラス（myClass の部分）を入れます。 <?php the_post_thumbnail( 'thumbnail', arra
![[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする](https://cdn-ak-scissors.b.st-hatena.com/image/square/9fffa04cf0902c71ea0b733c9cd94f510b361cff/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2012%2F10%2Fwp-orange-640x960.png)
Browser Market Share Japan | Statcounter Global Stats
Sorry, JavaScript is required to view Global Stats charts.
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
パンくずリストの基本と気をつけるべきポイント
あなたが広大な敷地で迷ったとしたら、真っ先に知りたいことは自分が今どこにいるかでしょう。一度自分の現在地を知ることができれば、目的地からどのくらい離れているのか見つける事ができます。ショッピングモールなどで「You are here（現在地）」と地図に表記するのも同様の理由からです。 ユーザーはサイト内で迷子になったとき、自分たちがどこにいるのか知りたいのです。ユーザーが自分の現在地を知るということは、ユーザーがどこに行くべきなのかを示すことと同義です。その方法として、パンくずリストを使って道順を示す地図をユーザーに提供するべきです。これはサイトの構造の中での「You are here（現在地）」表示のようなものになります。 パンくずリストを使うべき状況とは 全てのサイトはコンテンツを階層化しています。コンテンツの量によって、浅いものもあれば深いものもあります。もしあなたのサイトの階層が３
パンくずリストって必要？SEO的な視点を抜きにしたパンくずの考察
パンくずリストって本当に必要？パンくずリストはサイト内での自分の現在地を把握しやすくするための階層を表したナビゲーションです。ページの上部や下部に配置されていることが一般的です。 パンくずについての考察にSEO的な視点を混同してしまうと純粋な判断できなくなっちゃうので、SEO的な視点は抜きにして考えます。 なぜパンくずが不要に思えたか 実はページ下部にあるパンくずについては、不要だとは思っていません。不要だと感じたのはページ上部にあるパンくずリストです。 ページ上部にあるパンくずが不要に思えた理由 ページ上部にあるパンくずリストが不要に思えた理由は、ほとんどのユーザーが利用しないのでは？と考えたからです。 コンテンツを読み進めてから、わざわざページ上部に戻ってパンくずを利用するとも思えませんし、アクセスしてすぐにパンくずを利用するとも考えにくいからです。 セグメントされていないコンテンツだ
Breadcrumb NavXTの使い方ーWordPress | TechAcademyマガジン
Breadcrumb NavXTとは WordPressのプラグインBreadcrumb NavXTを使用すると、サイト内での現在位置を表示するパンくずリストを追加することができます。 SEO的にもどこに何のページがあるのか正確に伝えることができます。 インストールと設定 このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。 有効化したら、次に左メニューの「設定」→「Breadcrumb NavXT」を選択します。 Breadcrumb NavXTの設定画面です。設定内容は設置後に変更しても反映されます。 「投稿タイプ」タブではパンくずリスト内にカテゴリーやタグなどを表示させるかを選択することができます。 [
受託制作における大きいデザインと小さいデザイン、デザインで解決できることとは？ | ツクロア - DESIGN LAB
先日、“RIDE” UX Sketch SUMMER 2016 〜リアルな現場のUXがビジネスに必要だ！〜 というイベントに参加してきた。 UXということばがついているので、拒否反応が出る人は出るかもしれない。 わたしは途中までしか参加できなかったけど、内容は「大きいデザイン」の話だった。 最近は、わたしも大きいデザインに携わることが多くなってきてやっとわかってきた。世の中には、大きいデザインと小さいデザインがあることが。 なにが大きくてなにが小さいのかは、厳密な定義はないし人によってちがうとおもうのと、そんなに重要ではないので特に言及しませんが、大きくわけるとそういうふたつの考え方があるということ。 ベタですが、建築でいうと、 大きいデザイン：設計 小さいデザイン：実際の施工 といったイメージです。 大きいデザインとは 大きいデザインは、「人」と「もの、こと」が結びつくのを実現するために
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
みややも on Twitter: "AIはとても面白いと思うけどいつでも止められる状態にしておきたい 独自言語を開発して会話を始めたロボット、フェイスブックが処分: https://t.co/7g5syoTp7p @sputnik_jpから"
Markdown practice 1