ひびわれたまご

読者です 読者をやめる 読者になる 読者になる

ひびわれたまご

大人の発達障害(ADHD)当事者のイラストレーター・志乃が、生きづらさや”楽”について考えるブログ。

はてなブログの人気デザインテーマ「Innocent」をカスタマイズ!軽量化&トップページ最新記事一覧などやったこと7つ

お役立ち系 ラクチン系 はてなブログ・カスタマイズ
広告

人気のはてなブログ デザインテーマ「Innocent」を自分好みに改造した箇所

iPadでの表示(変更後のトップページ)

 

はてなブログテーマ「Innocent」を公開しました - MoonNote

とっても素敵でお世話になっている、人気のはてなブログ デザインテーマ「Innocent」を自分好みに改造させていただきました。

備忘録がてら、やったことを記事にまとめておきます。

 

shinoegg.hatenablog.com

 ここからさらに改造しました。

※何かを変える度、実はちょこちょことこの記事を更新しています。重複するかもしれません。

はてなブログ上部のヘッダーメニューバーのデザイン変更

  • バーの色(黒背景)を透明に
  • はてなブログ上部メニューバーのロゴやテキストの色を変更

デザイン→カスタマイズ→デザインCSSに以下を追加。


#globalheader-container {
background: rgba(255,0,0,0);
color: #変えたい文字色のカラーコードを入れる;
}


私はタイトル画像で使っているロゴの茶色に合わせました。

統一感が出て素敵かなと思って。

カラーコードについてよく分からない方はこのサイトから選んでコピペ。

WEB色見本 原色大辞典 - HTMLカラーコード

メニューバー(ナビゲーションバー)のカテゴリを自動生成に

  • HTMLの手打ちでリンクを設定するのが面倒
  • 自動生成に頼れば楽して解決できる
  • パソコン表示だとちょっとみっともない…

既存のカテゴリや、今後増えるであろう新規カテゴリを、いちいち手打ちでリンク設定するのが面倒だったのと、スマホでメニューをタッチすると、カテゴリのせいでベロンと下に長くなったりするのが嫌だったので、それらを一気に楽して解決する方法を探しました。

www.ituore.com

ありました。ありがとうございます。

こちらを、Innocentのメニュー用HTML欄(※)の<ul>と</ul>の間の、<li>と</li>の間に挟むように、ぶっこみました。 

※詳しくはこちらを参照してください

http://moonnote.hateblo.jp/entry/innocent-hatenablog-theme#ナビゲーションバーの設置

 

表示がこれでどうなるかというと…

f:id:shinoegg:20161215040346j:plain

「メニュー」横のマークをタッチすると…

f:id:shinoegg:20161215040418j:plain

ベロンと下にメニュー項目がズラッと出て、さらにCategoryをタッチすると・・・

f:id:shinoegg:20161215040511j:plain

Andloidの場合、こういう表示に。まあ素敵。まあラクチン。

 

PC表示だと、うまいこといかないのが難点。現在も調整中です。良いアイデアがあったら教えてください。

はてなブログトップページを記事一覧表示に

  • トップページである程度、記事が一覧できるように
  • Javascriptで最新記事一覧ページ(/archive)へ自動転送設定

f:id:shinoegg:20161215030544j:plain

Innocentのトップページ・レイアウトはこんな感じ。最新記事の見出しが大きく並びます。画像を置いている場合、ファーストコンタクトでこれしか一覧できず、スクロールしないと全体がつかめません。

ここだけは、はてなブログ公式のスマホ表示に近いものにしたいなあと思い…

f:id:shinoegg:20161215030530j:plain

トップページに来ると自動で「最新記事一覧ページ(/archive)」へ転送されるように設定しました。参考にさせていただいたサイトはこちら。

dokuwohaku.hateblo.jp

 

ありがとうございます。

(上記記事に書いてある通り、デメリットも理解した上で自己責任でどうぞ)

そして、ここからさらに…

記事一覧から邪魔なものを非表示にして調整

  • カテゴリ・はてなスターを、CSSで最新記事一覧から非表示設定
  • そのせいで出来た空白(マージン)を調整

f:id:shinoegg:20161215031108j:plain

もともと、「はてな公式SNSシェアボタン群」と「はてブコメ」を、「デザイン→カスタマイズ→記事」で非表示にしていた(ページが重くなって読み込みが遅くなるから)ものの、「はてなスター」だけは残していました。でもやっぱり遅い。

上記の方法で非表示にしてしまうと、記事一覧だけでなく、本文中でも消えてしまうので、記事本文中では「はてなスター」を残して、記事一覧ページのみ非表示になるように設定(最新記事一覧だけでなく、カテゴリ一覧ページでも非表示になるので注意)。

 

<コピペ場所>※自己責任で…

デザイン→カスタマイズ→デザインCSS


/*アーカイブ*/
.archive-entries .categories a {
display:none;
}
.archive-entries .hatena-star-star-container{
display:none;
}
.page-archive .archive-entry-body {
margin-top: 0px;
}
.page-archive .entry-thumb {
margin: 0px 26px 0px 0;
}

.entry, .page-archive .archive-entry {

margin-bottom: 20px;
padding-bottom: 20px;
}


大見出し<h3>と中見出し<h4>のデザイン変更

  • 大見出しに下線(ボーダー)をつける
  • 中見出しに色をつける

本文中でテキストを太字にした時、パッと見でメリハリが足りなくなるような気がしたので、多少見やすくなるかと思い、見出しのデザインを変更しました。

色はブログのテーマカラーの緑にして統一感を持たせています。

<コピペ場所>※自己責任で…

デザイン→カスタマイズ→デザインCSS


/*見出し*/
.entry-content h3 {
position: relative;
padding: 0.5em;
}
.entry-content h3::after {
 color: #674132;
width: 100%;
position: absolute;
bottom: -5px;
left: 0;
content: '';
height: 5px;
background: repeating-linear-gradient(-45deg, #ccc, #ccc 3px, #fff 3px, #fff 6px);
}
.entry-content h4 { color: #28AF94;}


参考:シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

はてな目次記法の目次デザイン変更

  • 「目次」ってテキストを入れる方法
  • リストを点でなく数字表記に

※デザイン→カスタマイズ→デザインCSSに↓


/*目次*/
.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}
.content-inner-follow-buttons{
width: 100%;
text-align: center;
letter-spacing: -.40em;
}
.table-of-contents li{
list-style-type: decimal;
}


参考:はてなブログの目次のデザインを少しカスタマイズしたよ - ボム君.com

 

目次など、記事中のリストにボーダーをつける方法

※デザイン→カスタマイズ→デザインCSSに↓


.entry-content li{
padding: 5px;
border-bottom: dotted 1px #CCC;
}
.entry-content li a{
text-decoration: none;}


その他諸々

  • はてなブログが重いので軽量化のために色々と調査&調整
    参考:はてなブログの読み込みを速くするために行ってきたことまとめ - NO TITLE
  • 読者登録ボタン、SNSシェアボタン、フォローボタンのデザインを変更
    デフォルトのままだと重いそうです。はてなブコメ表示、はてなスター表示もよくないんだとか。色んなサイトを参考にしまくりました。「はてなブログ 〇〇ボタン」などで検索して、気に入ったデザインを探してみてください)
  • SNSシェアボタンの一部をLINEシェアボタンに変更&デザイン調整
    参考:設置方法|LINEで送るボタン

最終的な表示・見え方(iPhone6、iPad、PC表示)

iPhone6でのトップページ表示

f:id:shinoegg:20161215051805j:plain

うーん、惜しい

iPadでのトップページ表示

f:id:shinoegg:20161215051854j:plain

パソコンでのトップページ表示

f:id:shinoegg:20161215142107j:plain

 

他にもちょくちょくとやったような気がしますが、覚えてないのでこのへんで。

参考にさせていただいたサイト様、本当にありがとうございました。

 

オススメ関連記事(このブログ内)