技術ブログを開設する
ログイン
プログラマのための技術ブログプラットフォーム

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

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

はじめに

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

やるっきゃない!

ブログ名・ブログの説明

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

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

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

テーマ

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

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

テーマカラー

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

カスタム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セレクターとして>を使おうとしたら、>にエスケープされちゃいました。
お気をつけください。

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 400ms;  
}  
#blog-main #blog-top-list .entry a:hover,  
#blog-main #blog-entries .entry a:hover {  
    background: #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;  
}

おわりに

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

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

関連記事

この記事へのコメント

12/30 08:50

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

6
@okayuの大して技術的ではないブログ
6
このエントリーをはてなブックマークに追加