デザインカスタマイズはてなブログを初めて約1年経過しました。旅・マイルブロガーのkokoです。『暮らすように旅する』マイルを貯めて賢くお得に楽しく旅をするためのポイントをまとめました。2019年3月6日マイル情報や旅情報をブログで発信するため、はてなブログを有料化して配信を続けております。現在では月間PV数2万を超えて、徐々に読者様に認知されて来たと思っております。先輩ブロガーさんに手も足も及びませんが、これからも精進します。WordPressへの移行を検討しておりますが、はてなブログへの愛着があって移行を躊躇っております。そこではてなブログでもカード型のテーマ「ZENOーTEAL」を使えばブログレイアウトは格段とカッコ良くなりますし、見た目もスッキリします。「ZENOーTEAL」のデザイン概要はてなブログでカード型デザインに変更したい場合は「ZENOーTEAL」を利用する事をおすすめします。(初心者の方に特におすすめしたいデザインです)ZENOーTEALをおすすめする理由カード型デザインでユーザビリティのUPデザインしやすい(スマホ最適化)見た目がスッキリする変更が簡単ZENOーTEALさんが作成をしたはてなブログ用テーマでカード型テーマが特徴です。zeno-teal.hatenablog.com「ZENOーTEAL」のデザイン後の画面の見え方(スマホ・PC)スマホ画面の見え方トップ画面に表示できるカードの数はいくらでも指定できますが、10記事程度がスマホ表示であれば見やすいと思います。カード型で写真とタイトルが非常に見やすく並んでいるのがわかると思います。PC・タブレット画面の見え方PC画面ですとカード型の記事一覧の横にサイドバーが並んでいて非常に見やすい画面となっております。デザインカスタマイズ(カードサムネ編)基本的に「ZENOーTEAL」のデザインをサイトにDLすればカード型のデザイン環境は完了になります。そこから細かな修正やデザインを行いますので下記をご参照ください。TITLEとなっている場合は下記の変更が必要です。ZENOーTEALでは、カード型デザインに特化をしているため、記事の一番最初に写真を持ってきます。/></p>🔺🔺🔺写真のHTML🔺🔺🔺この写真のHTMLの直後に下記のコードを挿入します。--></p>そうする事で、記事一覧にタイトル画像とタイトルのみが表示されるようになりエラー表示もなくスッキリとした見た目になります。デザインカスタマイズ(ヘッダー編)このようにヘッダーに「カテゴリー」や「おすすめ記事」を持ってくるカスタマイズ方法をお教えします。設定→デザイン→カスタマイズ→ヘッダ→タイトル下に以下のコードを挿入します。href="**記事URL**">●●表示コメント●●</a></li></ul></div>●●→表示コメントは上記の図の「マイル獲得」「ポイ活」「AMEX紹介」に当たります。AMEXカード発行でハワイ往復航空券を・・・」に当たります。おすすめカテゴリの直下におすすめ記事設定を行う事で見た目もスッキリして見る事ができます。サイト自体の文字サイズを変更したい場合は、ヘッダーのタイトル下に上記のコードを挿入します。サイズはお好みで変更をしてください。ユーザーが見やすいサイズは16PXとされていますが、サイトの内容やデザインによっては、大きくした方が良い、小さくした方が良いなどありますので、状況に応じて変更をして見てください。13px;}この変更をしないと記事一覧のタイトルが大きすぎてスッキリとした見た目になりませんので必ず変更をお願いします。5px;}上記のコードを入れる事で、記事一覧に更新日付が入ります。10px;/*日付の文字まわりのスペース*/上記のコードを入力する事でスッキリとした見た目になります。上記の画面のようにサイトの概要などを3つの項目としてデザインカスタマイズする方法は下記のコードをフッタに入力してください。<p>当ブログでは、マイルを貯めるためのお得情報から裏技などをご紹介しております。貯まったマイルで世界中を旅しております。旅行関係の仕事をパートナーと日々旅の事、マイル事を研究しております。<p>マイルを貯める事に目覚めて約1年。今までに貯めたマイルは40万マイル。journey</a>ツイッターでもマイルの事。</p></div></div>*上記赤字は必要に応じて変更してください。上記のコードを入力する事でスッキリとした見た目になります。モルディブでwifiレンタルは必要かどうか。マイル情報や旅情報を配信【マイルで旅のアップグレード】を運営。奥さんは旅行会社勤務なので、「旅の豆知識」や「旅行会社の裏話しネタ」の記事もあり。賢くお得にマイルで旅をする方法を日々追求しています。はてなブログProマイル情報や旅情報を発信してます。関連記事1日100pvのブログの収益化...はてなブログはてなブログ「月間PV数300...はてなブログはてなブログ。【結論】ANAアメックスとANAアメックスゴールドを徹底比較。(13)月別アーカイブお問合せはこちらからABOUT当ブログでは、「賢くお得にマイル旅」をモットーにマイルで旅をアップグレードする方法をご紹介しております。旅の豆知識や旅行会社・業界の裏話しのネタもあります。CREATOR自己紹介:KOKOのマイルで世界一周(猛烈旅好き陸マイラー)マイルを貯める事に目覚めて約1年半。マイルを貯めて、お得に毎年3回は海外旅行へ。奥さんは旅行会社勤務で旅ネタを提供してもらってます!!。journeyツイッターでもマイルの事。モルディブ(年2回目)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。