以前から変更したいと思っていたブログデザインを変更してみた。
やったことは
・カテゴリーを親-子カテゴリーに変更
・トップページの表示をカード型に変更
こっちの方が記事一覧が見やすいため変更をずっと考えていて何度が変更を試みたが中々上手くいかず変更→バックアップに戻すを何度か繰り返していた。
本日上手くいったのでやったことをまとめてみた。
カテゴリーを変更
カテゴリーに関しては細かくは書かないが
今までカテゴリーは記事を書いていてその場で作っていた為ごちゃごちゃになっていたものを親カテゴリと子カテゴリーに分けた。
この記事を参考にフッタに以下スクリプトを追加した。
<src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script>
<src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>
トップページをカード型に
苦労したのがトップページをカード型に変更することだった。
まずテンプレートは変更していないが、テンプレートの配信が終わっているのか使用中のテンプレートの先まで飛べなかった。
次にCSSのコードだが色々探していたが一発で好みのカード型の配置になるものを見つけた。
この記事のコードを丸ごとコピペする。
デザインは完ぺきだがアイキャッチが表示されない。
アイキャッチ設定してなかったか確認するが間違えなく設定している。
アイキャッチのコードを変更
.page-index .entry-thumb{ display: none; }
どうやらこの部分がアイキャッチのコードのようで以下サイトを参考に書き換える。
.page-index .entry-thumb{ width: 100%;
height: 200px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
position: absolute; }
書き換えると上手くアイキャッチが表示されたが、次の問題が。
アイキャッチの画像がずれている。
テーブルだしmargin追加でなるんじゃね？という浅はかな考えで「margin: 0px auto;」を「 .page-index .entry-thumb-link」内に追加する。
.page-index .entry-thumb-link{
display: block;
margin: 0px auto;
width: 100%; height: 200px; background-position: center; background-size: cover; position: absolute; top: 0; left: 0; }
すると上手くいったようで綺麗にアイキャッチが収まった。
時間が取れたためカスタマイズしたが意外と何とかなるものでカード型で見やすくなって良かった。
後はアイキャッチ画像が設定されてない記事がある為アイキャッチ画像を設定していくのと記事のリライトを徐々にしていきたいと思う。
スマホのためのメディアクリ
アイスさんのブログを参考にしているがスマホには対応していないとのことだったのでスマホのためのコードを追加で記載した。
参考はこちら。
この記事に書かれている以下を追加した。
@media only screen and (max-width: 700px) {
.page-index .entry {
width: 100%;
}
}
時間が取れたためカスタマイズしたが意外と何とかなるものでカード型で見やすくなって良かった。
後はアイキャッチ画像が設定されてない記事がある為アイキャッチ画像を設定していくのと記事のリライトを徐々にしていきたいと思う。
コード公開
ひたすらコピペしただけですがそれぞれの記事のコード単体だと好みじゃなかったり不具合が起こったりだったのでデザインを利用したいって人が居た場合のことを考えて公開しておきます。
.page-index .archive-entries{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.page-index .archive-entry{
background :#f9f9f9;
width: 47%;
padding-top:210px;
padding-left:7px;
padding-right:7px;
padding-bottom:10px;
position: relative;
}
.page-index .entry-title{
padding-top:10px;
padding-left:10px;
}
.page-index .entry-description{
display : none;
}
.page-index .entry-thumb {
width: 100%;
height: 200px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
.page-index .entry-thumb-link{
display: block;
margin: 0px auto;
width: 100%;
height: 200px;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
.page-index .date{
padding : 5px 0px 0px 5px;
}
.page-index .archive-entries .categories {
position :absolute;
top:0;
left:0;
z-index:1;
}
.star-container {
display : none;
}
@media only screen and (max-width: 700px) {
.page-index .entry {
width: 100%;
}
}
