ブログのシェアボタン・目次・見出しを変更したのでCSSをソースを公開する

スポンサーリンク

f:id:tkhstol-929:20180930185328p:plain みなさんどうもこんにちは、サーロインです。

過去の記事でもやったのですが、相変わらずはてなブログの公式テーマのデザインがイマイチなのでまたCSSをいじってデザインを変えました。(CSSの勉強も兼ねて)

いつものように備忘録としてソース公開したいと思います。

※各項目でソースを1つしか紹介していないものは、PCページとスマホページで共通のCSSを使用しています。PCとスマホで別々のCSSを実装している項目ではPCページ→スマホページの順でソースを紹介しています。

はてなブログCSSソースを変更する方法

CSSを自分でいじる場合、PCのページとスマホページで別々に設定する必要があります。
PCの場合は「ダッシュボード」→「デザイン」→「デザインCSS」、スマホの場合は「ダッシュボード」→「デザイン」→「ヘッダ」から編集可能です。

PCの場合CSSソース編集場所(PC)スマホの場合CSSソース編集場所(スマホ)

詳しくはコチラの記事で解説しています。

www.sirloin-nagurigaki.net



ブログタイトル部分

/*PCページ*/
#blog-title-inner {
  border-bottom: ridge;
}

#title a {
  font-size: 60px;
  text-shadow: 0.1em 0.1em 0.1em silver;
}
#blog-description {
  font-size: 25px;
  font-style: italic;
  color: silver;
  padding-bottom: 50px;
}


#blog-title-inner #title a ってなんだよ!という方はコチラの記事で触れていますので先にこちらを読んでからのほうがこのあとの内容が入ってきやすいと思います。

PCページでは文字の大きさを少し大きくし、文字の後ろに灰色の影を設定しています。
また、タイトル部と記事部の間にborder-bottomで線を引いています。
タイトル下の説明文はイタリック体にして色を灰色にしました。 f:id:tkhstol-929:20180930173809p:plain

次に、スマホページ

/*スマホページ*/
.blog-title {
  font-size: 60px;
  font-family: "ヒラギノ明朝 ProN W3";
  text-shadow: 0.1em 0.1em 0.1em silver;
}

PCでと比べて、文字の大きさと影の部分は同じでフォントをヒラギノ明朝にして、以外はすべて取っ払いました。
訪問してくれた方にブログタイトルを覚えてもらおうと思って、敢えてスマホページにしては大きめの文字サイズを設定しています(笑)
インパクト大事。
f:id:tkhstol-929:20180930175654p:plain

目次部分

目次に関しては以下のえむしてっくさんのブログに載っていたものを参考にさせていただきました。(ありがとうございます)

mshitech.hatenablog.com

フルコピペで実装したところ私の環境だと目次全体が左にずれてしまったので、以下のようにmarginを追加して調整しています。

.table-of-contents li {
  margin-left: 3em; /* 目次の中の見出し(h3) */
}
.table-of-contents li ul li {
  margin-left: 0; /* 目次の中の見出し(h4) */
}

実際の目次レイアウト画像がこちら(↓は画像なのでクリックしても何も起こりません) f:id:tkhstol-929:20180930175315p:plain 画像の目次は↓の記事のものです

https://www.sirloin-nagurigaki.net/entry/2018/09/15/%E3%80%90ITP2.0%E5%A7%8B%E5%8B%95%E3%80%91iOS12%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%AB%E3%82%88%E3%82%8B%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%82%A8www.sirloin-nagurigaki.net



シェアボタン(はてブTwitterなど)

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

www.notitle-weblog.com

↑の通りにコピペして自ブログを確認した際、シェアボタンが表示されなくなりパニックになったのですが、

どうやらはてなブログでは個別の記事ページではシェアボタンを表示するがTOPページではシェアボタン非表示になる仕様らしいですね。(シロマさんのブログのコメント欄にも同様のことが書いてありました)

個別に記事ページに飛んだら問題なく表示されました。 f:id:tkhstol-929:20180930180602p:plain

おわりに

いかがでしたでしょうか。
今後も追加でCSSをいじると思うのでその時はまた記事にしたいと思います。

余談:久しぶりにMarkdown形式で記事を書いたけど、はてなMarkdown編集画面つかいにくすぎる。Qiitaを見習ってほしい。(またはてな悪口)

にほんブログ村 IT技術ブログへ
にほんブログ村