ブログ運営-はてなブログはてなブログでは、アイキャッチに使われる画像を記事を作成する度に設定できますが、それが表示される箇所によってサイズがまちまちであり、ちょっと気持ち悪いですよね。各記事へと遷移するための重要な導線元である「トップページ」や「カテゴリー扉ページ」にはしっかりとしたサイズで表示しておきたいものです。そちらに対して、サイズを標準化するためのカスタマイズ方法が他のブロガ―さんの記事で紹介されていたりしますが、プラスアルファでちょっと修正したいなと思ったので、今回はそのお話。「トップページ」や「カテゴリー扉ページ」のアイキャッチ画像は勝手に正方形にトリミングして表示されるという仕様があるため、トリミング位置によってはどうもしっくりこない。www.imuza.com私はこちらのやり方で「トップページ」や「カテゴリー扉ページ」を正しいサイズで表示させていましたが、ちょっと気になる事が。こちらは私のブログのトップですが、紹介されている手法でcssとjavascriptを実装すると、正方形から本来のサイズへと変わってくれます。カテゴリーの扉に行くと、あれ??画像のサイズがトップと揃っていない。表示サイズは同じなのですが、びっくりするくらい画像が拡大されて表示されてしまっています。今回やることトップに合わせて、カテゴリー扉のアイキャッチも見た目を揃える!!これだけです。今回の修正対象はjavascriptだけですね。紹介されたものを、一部改変します。}}());</script>どこが変わったか分かりますでしょうか。修正箇所は3行目の「page-index」を「page-archive」に修正しただけです。このjavascriptはbodyタグに埋まっているclassをフックにして、対象の画像の探し出し、表示サイズ変更をしているのですが、「page-index」はトップページ専用となっており、カテゴリー扉ページが修正対象から漏れてしまうんです。それをトップページ、カテゴリー扉ページどちらも含んでいる「page-archive」に変更する事で、修正対象が拡大されて、トップページ、カテゴリー扉ページが共に修正されるという形になります。まとめ私はデザインを考える時に、同じ意味を持った要素がページによって見た目が揺れる事は極力避けるべきと思っています。それは使う側の事を配慮しなければいけないという理由からです。シンプルに内容の分かりやすさだけを求めるのではなく、視覚的な統一もしっかり行っていく事で、見やすいデザインを心掛けたいですね。(1)検索プロフィール資産運用に専ら興味が出てきた30代独身男。必殺技はHTML、CSS、javascript(ES6+)、jQuery、Vue.js、Reactなど。「自分が感じたことは他人が感じること」をモットーに、小さな事でも、「自分が興味を持ったこと、感じたこと、気になったこと、体験したこと、手に取ってみたこと」を記事にしていきます。ユーザビリティにも配慮した見やすい、使いやすいデザインを心がけて、日々サイトをブラッシュアップしていきます。当サイトのプライバシーポリシーについては、こちらをご覧ください。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。