のあの

のあの日常ブログ

ブログのカスタマイズ

新しいことを始める前にまずは設定(環境)が気になります。
使いやすい/見やすいようにカスタマイズしていきましょう。

目次

カスタマイズではないですが目次のつけ方を覚えました。
目次を付けたい位置に [:cpmtemts] と入力するだけ。
あとは見出しが勝手に目次に入っていきます

f:id:nor24:20180817204829p:plain

かんたん!

ソーシャルボタン

最近のブログには必須だそうです。
読者がそのままSNSで発信できるボタンになります。

私は他の方のブログを読んでソーシャルボタンで共有はしたことありませんが、 一応用意しておきたいとおもいます。

blog.minimal-green.com デザインなどはこちらから頂きました。ありがとうございます。

やり方も載っているのその通りにコピペをしていきました。

f:id:nor24:20180817210104p:plain

想像ではこの辺りが変わるはずだったんですが・・・何も変化がありませんでした。

調べてみるとブログトップページではカスタマイズしたソーシャルボタンは表示されない様子
記事をクリックして開いてみると無事にソーシャルボタンが表示されていました!(^^)!

f:id:nor24:20180817210459p:plain

背景のストライプ柄が私のブログとは合っていなかったのでちょこっと修正

/* social */
.sns-share {
        background: rgba(255,255,255,1); /* ここ! */
        text-align: center;
        margin: 10px auto;
        padding: 10px;
        box-sizing: border-box;
}

これで背景が透明になりいい感じになりました

パンくずリスト

設定をいじっていると パンくずリスト という言葉を発見
こいつはなんぞや!?と思い調べてみました

ブログ中の今どこにいるのかを表示してくれる機能でした

f:id:nor24:20180817211609p:plain これ

Linuxpwd のようなものですね
便利なので表示させておきました。

余談. なぜパンくずリストっていうの?

私気になります!

童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

パンくずリスト - Wikipedia

ナルホドネ

見出し

見出しをかっこよくできるそうなのでぜひともそうしたい!!

uxmilk.jp

こちらの記事を参考にさせていただきました。

CSSをそのままコピペして、HTMLはどこに使うんだ!!?と迷っていました。
結果ですがHTMLは記事を書くときに使いますね・・・ハイ

f:id:nor24:20180817213529p:plain

こんな感じです

後から気づきましたがこれ見出しをカスタマイズしているというより、
無理やり文字を修飾しているイメージなんですかね?

ほかにもやり方があり、そこではh3,h4などの見出しを直接修正しているように見ました。
といことで擬似見出し作成といったところでした

擬似ということもあり、正式には見出しではないので目次に反映されません。。。
ちょっと悲しいです。

<div class="demo demo5">
  <div class="heading"><span>hogehoge</span></div>
</div>

それとこれ毎回打つの面倒です
特に調べてませんがそのうちいい感じに使える方法探します

ページトップへスクロール

こちらの記事を参考に導入しました

www.imuza.com

とっても簡単!慣れてきたのか一瞬でできました。

ついでにホームボタン(トップへ飛ぶ)もコピペしましたmm

ページトップへスクロールボタン、あるとないとじゃ段違いですね。
キーボード操作やマウスジェスチャーなどでもいけますが用意しておくほうがいいと思います!

スマホへ反映

ここまでいろいろやってきました。

ちょっとスマホで確認してみたら、あらあら全然うまく表示されていません。
(見出しやソーシャルボタンなど)

スマホ版のデザイン設定はproにならないといじれないそうなんですが、
PC版のデザインと似せる(?)ことはできるそうです

highso.hatenablog.com

こちらを参考に、記事上にCSSをコピペしてstyleで囲んでチェックつけて完了!!
無事にスマホでも表示できました(-"-)

その他

その他設定したものです

1.Google Analytics 1.ウェブマスターツール 1.検索エンジン最適化 1.XMLサイトマップRSSフィード送信

どれも検索したらすぐに出てきて簡単に設定できました。
疲れたからはしょったわけではないです


これでやっと一通りカスタマイズが終了しました。
ブログ自体のデザインや色なんかも少しいじりました。あまり変わっていないですが。

CSSは触ったことどころか見たことすらなかったです。
HTMLもなかなかに初心者。。。

設定も大変ですがブログ書くのも大変です。。。。
これから先続けていけるのかな

頑張ります。

スクショと引用を多用することになりそうです。

著作権とか怖いので気を付けていきたいです・・・・・それではノン