4minスポンサーリンクSHAREツイートシェアはてブLINEPocketツイートシェアはてブLINEPocketこんにちは、トッド(Todd)(@ThreeFrogblog)です。MEDIA』を使い始めてから1か月ほど経ちます。HTMLやCSS、JSなどのコードの仕組みについて感覚的にですが、イメージするレイアウトの再現が出来るようになってきました。今回、ファーストビューについて個人的に引っかかっていたレイアウト箇所をカスタマイズしてみました。全ての変更をCSSのみでおこなっているので子テーマにコピペで使えると思います。コードの変更は子テーマを使って行いましょう。img=”https://threefrog.com/wp-content/uploads/2018/08/a0557e1b0c7610f938e5a5d5bad0b60c.png”]カテゴリーTOPページのファーストビュー変更部分についてサイトのTOPページからカテゴリーを選択すると画面いっぱいのピックアップ記事が表示されます。MEDIA』には、固定ページでランキング表示ができる機能があり、そっちで十分だと思うので、ここではスマホだけ非表示にする変更を行いました。MEDIA』のデフォルトでは、設定したサムネイルに対して黒い透けた背景が乗っていて、コレはこれでカッコ良い仕様なんだけれど・・・アイキャッチをつくる時に明るい色を使用したいと思う時に、記事タイトルが白なので読みにくい場合があるのと、アイキャッチは記事本文の最上部に置きたい派なので変更してみました。記事タイトルのテキストカラーを黒にして、背景の画像を表示させずに背景色を白に変更することで見やすさが良くなったと思います。img=”https://threefrog.com/wp-content/uploads/2018/08/a0557e1b0c7610f938e5a5d5bad0b60c.png”]パンくず~記事本文までは【記事上SNSボタン】と【記事上広告を廃止】&要素の隙間を削って記事タイトルから本文までの間隔を縮めることでスッキリさせました。0;}あとがき変更後の記事タイトルはGoogleフォントを使用しています。url=”https://threefrog.com/googlefont-implementation/”]また、何か変更したときに追記していきたいと思います。Ultimate」この記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。