ブログ

    1発コピペで終了!はてなブログInnocentのカスタマイズテンプレート

    1発コピペで終了!はてなブログInnocentのカスタマイズテンプレート

    はてなブログを始めたばかりの人が思っている事。

    それは、「デザインがダサいのでカスタマイズしたいけど、何をしていいか分からない」

    そんな悩み解消します。

    1から9までコピペでブログをかっこよく出来るように、カスタマイズのパッケージを作りました。

    ん?なんで10じゃないの?って思いますよね。

    フッタのプライバシーポリシーだけは、さすがに自分のブログ名とURLを入れないといけないので、ここだけは作業が必要になります。

    それ以外は全部コピペでできるので、5分もあったらかっこよくなりますよ。また、各色は自分で好きな色にできるので、時間がある時にやってみて下さい。

    まずは、このテンプレートを使って、簡単におしゃれなサイトにして、ブログを投稿しましょう。

    テンプレート1

    以下を使ったカスタマイズページはこちらから見れますが、トップページはこんな感じにカード型になります。

    はてなブログ カスタマイズ テンプレート

    記事はこのようになります。

    はてなブログ Innocent カスタマイズ テンプレートはてなブログ Innocent カスタマイズ テンプレート

    各色は好きな色に変更できるので、その際には以下の詳細ページを参考にしてください。(参考サイトは下記ページで紹介しています)

    先ほども言ったように、唯一プライバシーポリシーだけは、自分で「ブログ名・URL」を入れなくちゃいけません。

    色の替え方など細かいことは、上記の個別ページを参考にしてください。

    まずは、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「スマホ」→「レスポンシブデザイン」にチェックを入れておいてください。

    はてなブログ Innocent カスタマイズ テンプレート

    Headに要素

    設定→詳細設定→Headに要素を追加に以下を入れます。

    <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.8.2/css/all.css” integrity=”sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay” crossorigin=”anonymous”>

    フッタ

    「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「フッタ」に以下を入れます。この部分だけは、自分のブログに合わせて赤文字部分を変えて下さい。

    <div id=”copyright”>Copyright ©自分のブログ名 All rights reserved.<p><a href=”https://www.example.com/privacy-policy“>プライバシーポリシー </a><a href=”https://www.example.com/profile“>執筆者</a></p></div>

    記事上

    「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事上」に以下のコードをコピペ。

    SNSのシェアボタンですが、記事下に入れたい人は記事下に。記事上下に欲しい人は両方に入れてください。

    デザインCSS

    「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」にコピペ。

    最後に

    どのコードがのカスタマイズか分かりやすい様に名前を入れているので、見やすいと思います。

    フッタ以外は完全にコピペのみなので、実質5分もかからずに結構おしゃれなサイトになりますね。

    他にも「グローバルメニュー」だったり、「おすすめ記事の紹介」などのカスタマイズがあったほうがいいのですが、自分でURLを入れたりしないといけないので今日は紹介していません。

    「はてなブログのカスタマイズ集」で必要なカスタマイズを紹介しているので参考にしてみて下さい。