感化と変化の記録

3.俺14

体験と生活と芸術の考察ブログ

はてなブログのアーカイブページを見出しだけにしてみた

タイトルのみの記事一覧ページ

f:id:DaikiYamagishi:20161103194631j:plain

こうなりました。

アーカイブページを見出しのみにした理由は、ページの縦幅を抑えるため。デフォルトだと、スマホのアーカイブページは大変長いですよね。最下部までスクロールするとなると、モンスターボールを外しまくってる人みたいになります。

そこで、「日付」、「カテゴリー」、「サムネイル」、「本文抜粋」を思い切って消してみました。これはアーカイブページだけでなく、カテゴリーページにも適応されます。以下、そのコピペコードになります。

※設定をレスポンシブデザインにしていない方は、参考程度にどうぞ。スマホ表示って、アーカイブページの記事数が良い感じですよね。

タイトルのみにするcss

.archive-entries .date {
   display:none;
}
.archive-entries .categories a {
   display:none;
}
.page-archive .archive-entry-body {
   display:none;
}
.page-archive .entry-thumb {
   display:none;
}

「none none! none!! none!!!(消えろ。消えろ! 消えろ!! 消えろー!!!)」って感じで。これで、タイトルだけになったと思います。後は、見出しデザインをお好みでどうぞ。

見出し(h1)css

もし、冒頭の画像にある見出しのようなデザインにするには、以下のコードをコピペしてください。

.archive-entries h1{
border: 1px solid #383838;
padding: 5px 15px 9px 15px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #f9f9f9;
}
.archive-entries h1 a{
    color: #383838;
    font-size:16px;
}

最後に

ferret-plus.com

ChromeまたはFirefoxの「検証」モードを使用すると、反映具合を確認しながらコードがいじれるので便利です。Edgeにもありますが、class(またはid)のマウスホバーで対応する部分が範囲選択されないので使いにくいです(説明むずい)。

不具合があれば教えてください。