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

えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

【カスタマイズ】当ブログのカスタマイズの参考にしたページまとめ *随時更新

f:id:mshimfujin:20160724195409j:plain
自分が何をカスタマイズしたのかの備忘録も兼ねて、デザインのカスタマイズをする度にこちらに追記していこうと思います。

皆様のおかげで少しずつ体裁が整っていきます…。

もしよろしければはてぶのカスタマイズの参考にしてくださいね。


基本部分のカスタマイズ

まずは記法から!

基本の「き」ですねえ。ちょちょっとした小技も記法でちょこっとイジるだけで済む事も多いですね。

はてな記法一覧
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

スマホ用のページをカスタマイズ

今はPC用をレスポンシブにしてるので使っていません。でも見た目は好きです!


見出しのカスタマイズ!

見出しはカスタマイズしたい人も多いのでは?これだけあれば、きっと好みのデザインも見つかるはず!
www.keni-customize.net

エントリータイトル周りのカスタマイズ

blog.mshimfujin.net

アーカイブのページもカスタマイズ

blog.mshimfujin.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

サイドバーのタイトル横にアイコンを表示させたい

blog.mshimfujin.net




CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他
PVアクセスランキング にほんブログ村