左固定サイドバーのはてなブログテーマ「Primeiro」を公開しました！

f:id:yumedasuke:20190308124519p:plain

デモページ
テーマを導入したらやること・知っておくこと
デザイン
- トップページ
  - PC
  - スマホ
カスタマイズ

はてなブログのテーマを作ってみました。

その名も「Primeiro」

私のブログ名まんまです。
初めて作ったのですがうまくいったと思います。

バグやデザインの崩れを見つけ次第、改善してアップデートしていきます！

皆様にもご協力いただければと思います。
それではテーマのご紹介と注意点等を解説していきます。

テーマのダウンロードはこちらからどうぞ！

blog.hatena.ne.jp

デモページ

デモ：Primeiro:DEMO

テーマを導入したらやること・知っておくこと

「Primeiro」はカスタマイズ前提で初期デザインをシンプルにしていますので少しだけカスタマイズが必要になります。

アイキャッチ画像

※1060×700の画像をアイキャッチ画像に設定することを推奨します。
サイズが小さすぎたりすると画質が荒くなることがあります。

レスポンシブデザイン

f:id:yumedasuke:20190308131423p:plain

テーマ「Primeiro」はレスポンシブデザインですのでPC・スマホとも同じデザインで使用できます。

デザイン→スマートフォン→詳細設定の「レスポンシブデザイン」にチェック
f:id:yumedasuke:20190309164138p:plain

PCのみにテーマを適用する場合はしなくても大丈夫です。

一覧表示
f:id:yumedasuke:20190308113915p:plain

全文形式の場合は違ったデザインになりますのでご注意ください。

設定→詳細設定→トップページの表示形式→「一覧形式」にチェック
f:id:yumedasuke:20190308135951p:plain

記事数

※トップページの記事数は８記事・14記事・20記事でデザインしています。

設定→詳細設定→トップページの記事数→
８記事（14・20記事）
f:id:yumedasuke:20190308140021p:plain

デザイン

f:id:yumedasuke:20190305114525p:plain

Windows標準のメールアプリやGoogleの様々なサービスで見られる、左サイドバー固定レイアウトで左サイドバーのレイアウトはコンテンツをよりよく見せることができるといわれており直帰率・離脱率が右サイドバーに比べて低く、他のページへの遷移が起こりやすく、より長くユーザーを留めておく滞在率が平均より長くなります。

人間は無意識的に左から見るとされており、広告の世界やウェブデザインの世界で有名な「Fの法則」、「Zの法則」的にも左サイドバーのほうが優れているとされます。

トップページ

トップ記事・4番目の記事を大きく表示するデザインです。

スマホの場合は1番目・4番目・5番目・8番目の記事を大きく表示します。

PC

f:id:yumedasuke:20190309162856p:plain

スマホ

f:id:yumedasuke:20190309162904p:plain

詳しく見たい方はデモページをご覧ください。

デモ

カスタマイズ

f:id:yumedasuke:20190305114149p:plain

二次配布違反などのテーマに実装していいものか分からなかったモノ、読者になるボタンデザインやヘッダー・フッターの背景画像などをカスタマイズしていきます。

記述する場所は「デザイン」→「カスタマイズ」→「デザインcss」です。
f:id:yumedasuke:20190308141104p:plain

トップページのカテゴリ

トップページのカテゴリが多い場合や長い場合、カテゴリタグが重なる可能性があります。

cssにこちらを記述しておいてください。

.page-archive .archive-entries .archive-entry .categories a:nth-child(2) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(3) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(4) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(5) {
    display: none;
}

ブログロゴを表示

f:id:yumedasuke:20190308102614p:plain

ロゴがない方はこちらのロゴクリエーターでご用意ください。

TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。

ロゴメーカー＆ロゴクリエーター - 無料のオンラインロゴジェネレーター

サイドバーにHTMLモジュールを追加します。

f:id:yumedasuke:20190308141144p:plain

タイトルは空欄にしておきます

html

<a class="imgcenter" href="自分のブログのURL">

<img src="自分のブログのロゴ画像" alt="ロゴ">

</a>

css

.imgcenter{
    text-align: center;
    display: block;
}

ブログロゴを表示しない場合

css

@media (min-width: 992px) {
#box2-inner {
    padding-top: 40px;
}
}

読者になるボタンカスタマイズ

/*フォローされていないときの色*/
.hatena-follow-button.unsubscribing {
    background: #444;
}

/*ホバー時の色*/

.hatena-follow-button.subscribing.hover{
    background: #eee url(none) no-repeat 0 -18px;
}


/*フォローされているときの色*/

.hatena-follow-button.subscribing {
    color: #f7f8f9!important;
    background: #233a50 url(none) no-repeat 0 -18px;
}

.hatena-follow-button.subscribing {
    background: url(https://cdn.blog.st-hatena.com/images/theme/hatena-follow-button.png?version=4761c38…&env=production) no-repeat 0 -18px,-o-linear-gradient(top,#fff 0,#ddd 100%);
}

.hatena-follow-button-box .subscription-count-box {
    display: none;
    position: relative;
    float: right;
    margin: 8px 0 0 5px!important;
}

.hatena-follow-button {
    width: 80%;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    text-align: center;
    display: inline-block;
    zoom: 1;
    height: 18px!important;
    padding-left: 20px;
    padding-right: 5px;
    min-width: 40px;
    border: 1px solid rgba(0, 0, 0, 0)!important;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 10px;
    transition: .3s ease;
    transition-property: opacity,border,color,background;
    -o-transition: .3s ease;
    -o-transition-property: opacity,border,color,background;
    -moz-transition: .3s ease;
    -moz-transition-property: opacity,border,color,background;
    -webkit-transition: .3s ease;
    -webkit-transition-property: opacity,border,color,background;
    line-height: 18px!important;
    font-weight: 700;
    text-decoration: none;
    color: #fff!important;
    background: #ebebeb;
    float: none;
    letter-spacing: 0!important;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 10px;
    color: #fff;
    overflow: hidden;
}

.hatena-follow-button-box .subscription-count {
    float: right;
    border: 1px solid #bbb;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    display: block;
    min-width: 8px;
    font-size: 12px;
    color: #454545!important;
    background: #fff;
    border-radius: 50px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 50px;
    margin-left: -1px;
    position: relative;
    z-index: 9;
    font-family: Helvetica,Ariel,sans-serif;
}

.hatena-follow-button.subscribing.hover{
    width: 80%;
}

サイドバーデザイン

f:id:yumedasuke:20190308120153p:plain

haijpuro.hateblo.jp

Primeiro:プリメイロ

誰でも最初は素人だ！初めてのことをやりこむブログ。

左固定サイドバーのはてなブログテーマ「Primeiro」を公開しました！

デモページ

テーマを導入したらやること・知っておくこと

デザイン

トップページ

PC

スマホ

カスタマイズ

トップページのカテゴリ

ブログロゴを表示

html

css

ブログロゴを表示しない場合

css

読者になるボタンカスタマイズ

サイドバーデザイン

ヘッダーデザイン

カテゴリータグデザイン

注目の記事を表示する。

フォントデザイン

ナイトモード実装

見出しデザイン

カスタマイズ記事投稿予定

関連記事デザイン