ブログのテーマをSOHOからJOURNAL.に変え、少しカスタマイズしてみました。
カスタマイズは大好きですが、わたくしど素人ですので検索してヒットする情報を参考にさせて頂いてます。
自分用の覚書として、
わたしが助かったように、どなたかのカスタマイズの助けになればいいなと記事にしました。
そうそう、注意することとして、必ずバックアップを取ってから行なっています。
今回はテーマも仕様もガラッと変える予定だったので、バックアップからカスタマイズ用のブログを鍵垢で作り、まずそこで納得のいくように整えてからメインブログのカスタマイズをしました。
ブログタイトルの文字フォントを変える
JOURNAL.ではGoogle Fontの「Abril Fatface」を使いますが、このブログでは「Mulish」を使っています。
記入する場所
設定 ▷ 詳細設定 ▷ headに要素を追加
<link href="https://fonts.googleapis.com/css?family='Mulish', sans-serif|Overpass:400,700" rel="stylesheet">
でも変わらなかったので、CSSを追加しました。
追加する場所
デザイン ▷ カスタマイズ ▷ { }デザインCSS
/*ブログ名のフォント変更*/
#title,#title a {
font-family: 'Mulish', sans-serif;
}
メニューの文字色を変更
デフォルトの文字色が白で見難かったので変えました。
カラーコードはここから見つけました。
追加する場所
デザイン ▷ カスタマイズ ▷ { }デザインCSS
/*メニューの文字色*/
#gnav .menu a {
color: #95859c;
}
トップページをカード型の一覧にする
JOURNAL.を作成したutataneclubさんのブログ『うたたね』を見に行って、”はてなブログ”のタグ一覧にしたらカード型に表示されていました。それがカッコ良かったので(^-^)
一覧にカスタマイズするにはどうするか問い合わせしたかったのですが、どうやらutataneclubさんは活動をお休みしているようなので、「はてなブログカスタマイズ カード型」で検索しました。
たくさんヒットした中で、参考にさせていただいたのはこちらのサイトです。
この仕様にするにはPROにしておくことが必要みたいです。
追加する場所
デザイン ▷ カスタマイズ ▷ { }デザインCSS
/* トップページカード型 */
@media (min-width: 768px){
.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 {
margin-bottom: 20px!important;
padding-bottom: 20px;
box-sizing: border-box;
width: calc(50% - 20px);
}
.page-index .entry-thumb {
float:none;
display: block;
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
border-radius: 2px;
}
.entry-thumb-link:hover {
opacity:0.7;
}
}
自分好みに数字を少し変えてます。
だいぶ好みになってきましたが、カード型一覧のはてなスターとタグを消してシンプルにしたいと思いました。
カード型一覧のはてなスターを非表示にする
参考にさせて頂いたのは、こちらのサイト。
追加する場所
デザイン ▷ カスタマイズ ▷ { }デザインCSS
/* はてなスター非表示 */
.star-container {
display : none;
}
}
カード型一覧のタグを非表示にする
検索でヒットした方法の中では出来ないものもあり、いろいろ試して、こちらのCSSで上手くいきました！
一覧では非表示ですが、記事にはちゃんと反映します。
追加する場所
デザイン ▷ カスタマイズ ▷ { }デザインCSS
/***** はてなタグ非表示 *****/
.archive-entry-tags{
display: none;
}
カスタマイズ楽しいですね！
参考にさせて頂いたサイトのみなさま、どうもありがとうございました。
実はもうちょい変えたいところがあります。
★ カード型一覧で、メニューバーとの間をもう少し開ける
★ カード型一覧で、日付の上の余白をもう少し狭く
どこをどう変えたら良いのか、いろいろ調べてCSSを触ってみましたが、うんともすんとも言いません。完全にお手上げ。
時間がある時に気長に取り組もう。。。
ブログは、今はなきauの携帯サイトから始め、アメブロ、Blogger、ワードプレスと変遷し、今ははてなブログに落ち着いています。
カスタマイズにハマったのはアメブロからで、ど素人ながらもネット上にある豊富な情報が先生でした。自分好みにカスタマイズする楽しさ！まっさらな部屋を好みに整えていく感じですね。今ならあつ森で自分の家を作っていく感じでしょうか。
ワードプレスもウキウキしながら作ったんですが、何しろ人が来ない。笑 交流もなく、寂しくなっちゃって。
で、はてなブログに落ち着いたというわけです。
はてなは、書くこと、読むことに集中出来るのが良いですね。コミュニティもあって、いろいろなブログを見つけることが出来る。
そしてテーマが豊富なのも嬉しい。カスタマイズの方法も惜しげも無く、得意な方が公開してくれている。神か！
欲を言えば、もうちょいワードプレスっぽいテーマがあると良いなー。だったらワードプレスにしたらいいじゃん？いやいや、はてなに居つつ、そういうテーマを使いたい。自分で作る？いや無理。なのでそんなテーマが出るのを首を長くして待ってます！
