BETA

早速Qrunchのユーザーブログをカスタマイズしてみた

投稿日:2018-12-30
最終更新:2019-03-14

追記(2019/01/01 あけましておめでとうございます)

Qrunch開発チームから、今回のアップデートについての解説記事が公開されました。
qrunch.net/@useridというページがあるんですね。こちらが『ユーザーページ』でした。
というわけで、記事タイトル変更などの修正と加筆を行いました。
この記事では、userid.qrunch.ioのカスタマイズについて触れていきます。
失礼しました。


追記(2019/02/09)

以下の記事を参考に等幅フォントを用いるようにしました。
ありがとうございます!
Qrunch において <code> タグの内容を等幅フォントを用いて表示する - Z.OOL.ネット信託統治領 Qrunch 諸島


追記(2019/03/04)

Editorialテーマ! かっこいい!!!
乗り換えました!

はじめに

Qrunchがqrunch.ioqrunch.netに分裂しました。
それと同時に、個人のブログ(userid.qrunch.io)の見た目を変更できるようになりました。
そこでは、カスタムCSSを用いてカスタマイズすることもできます。
(将来的に、追加HTML・自作テーマができるようになるとか。すごい!)

やるっきゃない!

ブログ名・ブログの説明

ブログ名はデフォルトでは『username’s tech blog』となっています。
ブログ名はそのままページのtitleになり、検索エンジンにもそのようにインデックスされるので、少し悩みます。

私はVivaldiブログ(全く管理していない)のタイトルをそのまま使いました。
SEO的にどうなのかは知りませんが、まぁいいですかね。

設定ページからも変えられます。

テーマ

今はまだPaperしか選べません。

Codomisuさん(Qrunch開発者さん)のツイートを見る限り、とても面白そうです!

テーマカラー

デフォルトの6色から選ぶか、カラーコードを入力することでアクセントとなる色を変更できます。
私はFuchsia(#FF00FF)というきれいな紫色にしました。

Paper用カスタムCSS

上級者向けだそうですが、いじってみます。

letter-spacing

letter-spacingでは、文字の間隔を変更できます。

.blog-title-inner {  
    transition: letter-spacing 400ms;  
}  
.blog-title-inner:hover {  
    letter-spacing: 4px;  
}

こうすることで、#targetにマウスをホバーしたときのみ幅がなめらかに広がります。
楽しい!

ブログタイトルに使ってみているのでぜひお試しあれ。

#blog-subの順番入れ替え

asideの中身をカスタマイズします。

ブログ内検索って使う人いるのかな?
display: none;するのはもったいないので、下の方に移動しますかね。

この方法を使います。

.blog-sub-inner {  
    display: flex;  
    flex-direction: column;  
}  
.blog-sub-title:first-of-type {  
    order: 1;  
}  
#blog-search {  
    order: 2;  
}  
.blog-sub-title:last-of-type {  
    order: 3;  
}  
#blog-links {  
    order: 4;  
}  

.blog-sub-title {  
    margin-top: 0;  
}

うーん。
タイトルとそのコンテンツがセクショニングされていないので少し長ったらしくなってしまいました。

費用対効果とかメンテナンス性とかを考え、これはお蔵入りで。

その他Tips

CSSセレクターとして>を使おうとしたら、&gt;にエスケープされちゃいました。
お気をつけください。

html,  
body {  
    --theme-color: #ff00ff; /* 各自のテーマカラー */  
    --black: #3f3f3f;  
    --gray: #ECEEF1;  
    --light-gray: #f7f7f7  
}

とのこと。統一感をもたせるときやテーマカラーを利用したい場合に。

style#theme-custom-styleにカスタマイズのためにCSSが入っています。
他の人のものを盗み見ることもできちゃいますね。

最終的なCSS

/* 丸みをもたせる */  
@media screen and (min-width: 800px) {  
    #container {  
        border-radius: 8px;  
    }  
}  

#blog-sub #blog-search .blog-search-input {  
    border-radius: 8px;  
}  

/* タイトルをかっこよく広げる */  
.blog-title-inner {  
    transition: letter-spacing 400ms;  
}  

.blog-title-inner:hover {  
    letter-spacing: 4px;  
}  

/* 『トップ』を真ん中に持ってくる */  
.blog-navigation-inner ul li:nth-child(2) {  
    order: -1;  
}  

/* 検索欄のfocusを見やすくする */  
#blog-sub #blog-search .blog-search-input {  
    background-color: var(--light-gray);  
    transition: background-color 400ms;  
}  

#blog-sub #blog-search .blog-search-input:focus {  
    background-color: white;  
}  

/* 記事エントリにマウスをホバーした際に背景色を変える */  
#blog-main #blog-top-list .entry a,  
#blog-main #blog-entries .entry a {  
    transition: background-color 400ms;  
}  

#blog-main #blog-top-list .entry a:hover,  
#blog-main #blog-entries .entry a:hover {  
    background-color: #fbfbfb;  
}  

/* その都合上、いらなくなった */  
#blog-main #blog-top-list .entry a:hover .entry-title h2 {  
    text-decoration: none;  
}  

/* その都合上、空けたくなった */  
#blog-main #blog-top-list .entry .entry-inner,  
#blog-main #blog-entries .entry .entry-inner {  
    padding-left: 8px;  
    padding-right: 8px;  
}  

/*   
    以下の記事を参考に、コードでは等幅フォントを用いるようにしました  
    https://z80oolong.qrunch.io/entries/bQXU0OePbMsDUUcQ  
*/  

#blog-main code {  
    font-family: SFMono-Regular, Menlo, Lucida Typewriter, Consolas, Liberation Mono, Courier New, Courier, monospace;  
    font-style: normal;  
    font-variant: normal;  
    font-weight: 400;  
}  

#blog-main pre {  
    line-height: 1.25em;  
}

Editorial用カスタムCSS

コメント参照!

/*  
    影をフェードイン  
*/  
@keyframes shadowFade {  
    from {  
        box-shadow: none;  
    }  
    to {  
        box-shadow: 0 0px 6px rgba(30, 30, 30, 0.5);  
    }  
}  

/*  
    暗く  
*/  
html,  
body {  
    background-color: var(--gray);  
}  

/*  
    影あり  
    明るく(その都合上幅を持たせる)  
    角を丸く  
*/  
#container {  
    animation: 1000ms ease-out 0s normal both running shadowFade;  
    background-color: white;  
    border-radius: 8px;  
    margin: 40px auto;  
    padding: 0 40px;  
}  

/*  
    hover時のborderのために用意  
    雰囲気的に細いserif体にしたかった  
*/  
#blog-header #blog-title h1 {  
    border-bottom: 2px solid transparent;  
    font-family: serif;  
    font-size: 40px;  
    font-weight: normal;  
    transition:  
        letter-spacing 400ms,  
        border-bottom-color 400ms  
        ;  
}  

/*  
    下線  
    かっこよく広げる  
*/  
#blog-header #blog-title h1:hover {  
    border-bottom: 2px solid var(--theme-color);  
    letter-spacing: 4px;  
}  

/*  
    なんとなく右へ  
*/  
.blog-description-inner {  
    text-align: right;  
}  

/*  
    hover時のborderのために用意  
    幅を広げる(その都合上中央揃え)  
*/  
#blog-header #blog-navigation ul li {  
    border-bottom: 2px solid transparent;  
    min-width: 100px;  
    text-align: center;  
    transition: border-bottom-color 400ms;  
}  

/*  
    下線消し  
*/  
#blog-header #blog-navigation ul li a:hover {  
    text-decoration: none;  
}  

/*  
    下線  
*/  
#blog-header #blog-navigation ul li:not([selected]):hover {  
    border-bottom: 2px solid var(--theme-color);  
}  

/*  
    使っていないときは検索欄を暗く  
*/  
#blog-sub #blog-search .blog-search-input {  
    background-color: var(--gray);  
    border-radius: 8px;  
    transition: background-color 400ms;  
}  

#blog-sub #blog-search .blog-search-input:focus {  
    background-color: white;  
}  

/*  
    hover時記事エントリを目立たせる  
*/  
#blog-main .entry a,  
#blog-main .log a {  
    transition: background-color 400ms;  
}  

#blog-main .entry a:hover,  
#blog-main .log a:hover {  
    background-color: #fbfbfb;  
}  

/*  
    その都合上いらなくなった  
*/  
#blog-main .entry a:hover h2,  
#blog-main .log a:hover h2 {  
    text-decoration: none !important;  
}  

/*  
    雰囲気的に  
*/  
#blog-main #blog-top-list .entry .entry-title h2 {  
    font-weight: normal;  
}  

#blog-sub .blog-sub-title {  
    font-weight: normal;  
}  

#blog-footer #blog-copyright {  
    font-family: serif;  
    text-align: right;  
}  

/*   
    コードでは等幅フォントを用いる  
*/  
#blog-main code {  
    font-family: Consolas, Liberation Mono, Menlo, Courier, monospace !important;  
}  

/*  
    なぜか記事ページで#blog-subが収まらないので  
*/  

#blog-main {  
    max-width: 70%;  
}

おわりに

この開発スピード、恐ろしい(褒め言葉)。
すごいなぁ。

末永くお世話になりたいですね。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@okayuの大して技術的ではないブログ

よく一緒に読まれる記事

1件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
12/30 08:50

はやい!! まだカスタマイズできる部分とかは少ないですが、少しずつグレードアップしていくのでぜひご期待ください :)

目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!