このブログのカストマイズ

本日は、このブログのカストマイズをご紹介します。

本来であれば、カストマイズした内容を1つ1つご紹介すべきところですが、私のブログの更新ペースを考えますと、いつになるのか分かりません。そこで、一旦すべてのコードを公開させていただきます。

それぞれの項目については、別記事にてご紹介する予定ですので、よろしくお願いします。

なお、今後の記事によって・・・

  1. コードを変更する可能性があります。コードはすべてgistsにて管理しているため予告なく変更しますが、本記事を通じて表示されるコードは常に最新のものにする予定です。
  2. 個々の記事でご紹介をしたときには、本記事も同時に更新します。ただし、本記事内の変更部位については特に明記しません。(本文中にxx月xx日掲載は記載します)
  3. 個々の記事でご紹介した後に再変更した場合は、本記事と個々の記事を直接修正する予定です。このとき、投稿日時を修正時点に直す予定ですので、購読中のブログが更新されましたメールが送られる可能性があります。そのときは”よしなに・・・”でお願いします。

そもそも、何でカストマイズが必要なの?

はてなブログは、標準でも十分に使えています。でも、諸先輩方がカストマイズしているのを見て、これカッコいい!!とマネをしたくなったからです。

さらに、ブログをはじめて1年がたち、すこしはオサレにしたかったからです。

使っているデザインテンプレートはInnocentです

パソコン用とiPhone用に2カ所でカストマイズを行うのが面倒なこともあり、レシポンシブ対応のテンプレートを探していました。

また、利用している"はてなブログ"は無料版なので、スマホ版のカストマイズがあまりできないのです。

いろいろと探していたところ、Innocentに出会いました。シンプルでありながら、なかなかセンスも良くて気に入っています。

moonnote.hateblo.jp

カストマイズ項目

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

まとめ

取り急ぎ、私のブログに設定しているコードを紹介しました。『意味がわからないので参考にならないよね』という声が聞こえてきそうですが、もうしばらくお待ち下さい。必ず説明記事をアップしますので・・・。

おしまい