本日は、このブログのカストマイズをご紹介します。
本来であれば、カストマイズした内容を1つ1つご紹介すべきところですが、私のブログの更新ペースを考えますと、いつになるのか分かりません。そこで、一旦すべてのコードを公開させていただきます。
それぞれの項目については、別記事にてご紹介する予定ですので、よろしくお願いします。
なお、今後の記事によって・・・
- コードを変更する可能性があります。コードはすべてgistsにて管理しているため予告なく変更しますが、本記事を通じて表示されるコードは常に最新のものにする予定です。
- 個々の記事でご紹介をしたときには、本記事も同時に更新します。ただし、本記事内の変更部位については特に明記しません。(本文中にxx月xx日掲載は記載します)
- 個々の記事でご紹介した後に再変更した場合は、本記事と個々の記事を直接修正する予定です。このとき、投稿日時を修正時点に直す予定ですので、購読中のブログが更新されましたメールが送られる可能性があります。そのときは”よしなに・・・”でお願いします。
そもそも、何でカストマイズが必要なの?
はてなブログは、標準でも十分に使えています。でも、諸先輩方がカストマイズしているのを見て、これカッコいい!!とマネをしたくなったからです。
さらに、ブログをはじめて1年がたち、すこしはオサレにしたかったからです。
使っているデザインテンプレートはInnocentです
パソコン用とiPhone用に2カ所でカストマイズを行うのが面倒なこともあり、レシポンシブ対応のテンプレートを探していました。
また、利用している"はてなブログ"は無料版なので、スマホ版のカストマイズがあまりできないのです。
いろいろと探していたところ、Innocentに出会いました。シンプルでありながら、なかなかセンスも良くて気に入っています。
カストマイズ項目
Innocentテンプレートに追加したカストマイズ一覧です。
※2017/3/8 初版では枠組みだけ記載します。
- 01.Inocentのスタイル変更
- 01-01.初期スタイルの設定 (2017/03/09 掲載)
- 01-02.はてなグローバルヘッダー
- 01-03.メインとサイドバーモジュール (2017/03/11 掲載)
- 01-04.ブログタイトル
- 02.グローバルメニュー
- 03.モーダルウィンドウのスタイル
- 04.カテゴリ一覧のデザイン
- 05.関連記事などの表示位置
- 06.目次のデザイン変更(表示/非表示つき)
- 07.表示/非表
- 08.吹き出し会話形式 (2017/03/14 掲載)
- 09.写真フレーム (2017/3/20 掲載)
- 10.カエレバ・ヨメレバ
- 11.トップに戻る
コードはこれです
設定個所とコードです。
ダッシュボート → 設定 → 詳細設定 → headに要素を追加
※"http://t450.hatenablog.com/"は、私のブログ専用部分です。もし、コピペされる場合には、ご自分のブログにあわせて変更して下さい。
ダッシュボード → デザイン → カストマイズ → ヘッダ → タイトル下
※"http://profile.hatena.ne.jp/tk450/"と"http://drive.google.com/open?id=1iorepa68k0QjDwlka6sbbKeo68TfvOLfIQm-DyTSew8"は、私のブログ専用部分です。もし、コピペされる場合には、ご自分のブログにあわせて変更して下さい。
ダッシュボード → デザイン → カストマイズ → 記事 → 記事上
ダッシュボード → デザイン → カストマイズ → 記事 → 記事下
※にほんブログ村とGoogle AdSenseは、私のブログ専用部分です。もし、コピペされる場合には、ご自分のブログにあわせて変更して下さい。
ダッシュボード → デザイン → カストマイズ → フッタ
※"tk450"が含まれる部分は、私のブログ専用部分です。もし、コピペされる場合には、ご自分のブログにあわせて変更して下さい。
ダッシュボード → デザイン → カストマイズ → デザインCSS
まとめ
取り急ぎ、私のブログに設定しているコードを紹介しました。『意味がわからないので参考にならないよね』という声が聞こえてきそうですが、もうしばらくお待ち下さい。必ず説明記事をアップしますので・・・。
おしまい