自分が何をカスタマイズしたのかの備忘録も兼ねて、デザインのカスタマイズをする度にこちらに追記していこうと思います。
皆様のおかげで少しずつ体裁が整っていきます…。
もしよろしければはてぶのカスタマイズの参考にしてくださいね。
基本部分のカスタマイズ
まずは記法から!
基本の「き」ですねえ。ちょちょっとした小技も記法でちょこっとイジるだけで済む事も多いですね。
はてな記法一覧
http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E8%A8%98%E6%B3%95%E4%B8%80%E8%A6%A7hatenadiary.g.hatena.ne.jp
Markdown記法の一覧
mametanuki.hateblo.jp
Markdown記法のススメ
karaage.hatenadiary.jp
使用させて貰ってるブログテーマ「Spirea」のカスタマイズ
シンプルで素敵だと思います。16年7月現在テーマとして使用していますよ。
www.ituore.com
見出しのカスタマイズ!
見出しはカスタマイズしたい人も多いのでは?これだけあれば、きっと好みのデザインも見つかるはず!
www.keni-customize.net
エントリータイトル周りのカスタマイズ
アーカイブのページもカスタマイズ
良い感じのSNSリンク
SNSのボタンをいい感じにカスタマイズ!
www.ituore.com
www.ituore.com
www.yukihy.com
aoplanning.com
www.ninja.co.jp
プロフィールもカスタマイズ出来るようになりました!
shiromatakumi.hatenablog.com
真似したいけど真似できない…
細かな部分のカスタマイズ
プロフィールもカスタマイズしたい!
素っ気ないはてブのプロフィール欄もカスタマイズでこんなに可愛くできますよ!
hmaki.hatenablog.com
続きを読むもカスタマイズ!
www.ituore.com
現在当ブログで使わせて貰ってるのが使ってるのが「背景が上から降りてくる」です。
下記の斜線を引く方法と合わせて少しカスタマイズしました
CSSだけで色々出来るもんなんですねぇ…
blog.mshimfujin.net
自分でも作ってみました!
CSSだけで背景に斜線を引く方法
mae.chab.in
web.helog.jp
大見出しはこれ使って背景に斜線を引いてます。
コードはこんな感じ
background: linear-gradient( -45deg, #fff 25%, #f4f4ed 25%, #f4f4ed 50%, #fff 50%, #fff 75%, #f4f4ed 75%, #f4f4ed ); background-size: 4px 4px;
上記のコードを貼り付けるために、コードを貼る方法も調べた!
はてな記法かmarkdawnにしか対応してないので注意ですよ。
シンタックス・ハイライト、と言います。
help.hatenablog.com
目次に「目次」を追加する方法!
目次記法で目次を貼り付けても、「目次」の文字がないですよね。そこでこちらのカスタマイズ!
www.yukihy.com
ページの下に関連記事を表示する Milliardの利用法
昔の記事もやっぱり読んでほしいですもんね。
というわけで設置しました「関連記事」!
関連記事ツール設定画面まずはこちらでsprictを取得
www.jimpei.net
そのカスタマイズ
www.yukihy.com
カテゴリをタグクラウド風に!
カテゴリをタグクラウド風にするのも面白いですね。
tech.tmd45.jp
タグっぽくする方法もどうぞ!
blog.mshimfujin.net
はてなブログの最新記事と注目記事を画像付きにする方法
デフォルトの画像表示とは違う方法です。
クールな印象になりますよ。
URLを入力すると自動化でコードまで生成してくれます。ユースフルです。
chiroru.hatenablog.com
chiroru.hatenablog.com
ブログのトップページを記事一覧にする方法
トップページをスッキリ見せられます、上質です。
powerbombkun.hatenablog.jp
吹き出しを出して会話風に表示!
使わせていただいてます!
georges.hatenablog.jp
直帰率対策!
上と同じく急がば急いでまわれさんから。うちのサイトは記事のタイトルの下に入れました!
georges.hatenablog.jp