読者です 読者をやめる 読者になる 読者になる

Weed.nagoya

物理教育アプリを開発しています

はてなブログをカスタマイズして商用サイトの様に見せる 3版

Webサービス-電脳生活:ブログ Webサービス-電脳生活 スマホ・ガジェット等 Webサービス

f:id:weed_7777:20160610142235j:plain

商用のホームページを頼むと10万円以上かかる。かといって自分でWordpressで作ると、学習と調整に膨大な時間がかかる。さらに、できればブログとホームページを別々にせず、いっしょに管理できるとラクである。

はてなブログは、そのままだと商用サイトのように見せることができません。なぜなら、投稿日付を未来にして先頭に固定記事を持ってきても、

  • 前後のページへのリンク
  • 記事タイトル
  • 投稿日時
  • ソーシャルボタン
  • コメントボタン

が残るからです。

これらを消すと以下のように、商用サイトっぽい外見にすることができます。

2016年6月12日、パンくずリストの表示を直す方法を追加しました。

2016年6月20日、ブログページの作り方を追加しました。

f:id:weed_7777:20160610135302p:plain

以下では、この方法を説明します。

前後のページへのリンクを消す

これは以下のページを参考にして下さい。

www.bunoshi.com

なお、この記事ではホーム記事をトップに表示させるのを、記事の発行日付を9999年にすることで実現しています。しかしこの方法だと「最新記事」一覧の一番上にも表示されてしまいます。そこで、以下のような別の方法をとります。

1. 投稿日時

まず、ホーム記事の投稿日時を逆に1990年くらいにします。これで「最新記事」一覧には表示されなくなります。

2. カスタムURL

次に、記事の編集画面を開いて右上の編集オプション(歯車のアイコン)→カスタムURLを「../entry/home」の様にします。

3. headに要素を追加

最後に、ブログのダッシュボード→設定→詳細設定→検索エンジン最適化→headに要素を追加、に以下のように記述します(アドレスは適宜読み替えて下さい):

<script type="text/javascript"><!--
  if(location.href === "http://www.weed.nagoya/") {
    location.href = "http://www.weed.nagoya/entry/home"
  }
// --></script>

これで、「http://www.weed.nagoya/」にアクセスすると自動的に「http://www.weed.nagoya/entry/home」に飛ばされます。

その他の不要な要素を消す

まず、記事のidを調べます。該当記事を開いて、開発者ツールなどを開きます。

f:id:weed_7777:20160610141257p:plain

これを見ると、この記事のidは

entry-6653812171400064074

であることがわかります。

あとは、はてなブログのダッシュボードから

デザイン→カスタマイズ→デザインCSS

を選び、以下のように追加します

#entry-6653812171400064074 time,
#entry-6653812171400064074 .entry-title-link,
#entry-6653812171400064074 .social-buttons,
#entry-6653812171400064074 .entry-footer-section,
#entry-6653812171400064074 .hatena-star-star-container,
#entry-6653812171400064074 .comment-box
{display: none};

これでできあがりです。ページタイトルは残した方が良いかもしれません。この辺はお好みで変えて下さい。

まとめ

はてなブログをカスタマイズして、商用サイトのように見せることができました。

この記事は参考になりましたでしょうか?もしそうでしたら、以下の投稿に「いいね」して下さい。コメントをリプライしていただいてもOKです。今後の記事を書く参考にさせていただきます。よろしくお願いします😊

ありがとうございました!

パンくずリストの表示を直す方法

2016年6月12日、追加分です。

「Innocent」テーマの作者は、パンくずリストの表示がおかしくなる対処法を以下の記事に書いています。

moonnote.hateblo.jp

しかし私の手元ではうまくいきませんでした。該当コードを「デザインCSS」の欄ではなく「記事」→「記事上」の欄に追加すると、うまくいきました。

f:id:weed_7777:20160612121914p:plain

これでうまくいきました。正確な原因はわかりませんが、どうもパンくずの生成よりもスタイルの設定の方が早かったようです。参考になれば幸いです。

ブログページの作り方

ブログのように時系列で記事が最新のものから順に並んでいるページが欲しかったため、下記ページを参考にメニューバーを編集しました。

powerbombkun.hatenablog.jp

<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li><a href="/entry/home">ホーム</a></li>
            <li><a href="/entry/profile">プロフィール</a></li>
            <li>
                <a href="/entry/product" class="has-child">プロダクト</a>
                <ul>

                    <li><a href="/archive/category/%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88-%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
">
                        画像処理
                    </a></li>

                    <li><a href="/archive/category/%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88-%E5%8B%95%E7%94%BB%E6%95%99%E6%9D%90">
                        学習動画
                    </a></li>

                    <li><a href="/archive/category/%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88-IoT">
                        IoT
                    </a></li>

                    <li><a href="/archive/category/%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88-Web%E3%82%A2%E3%83%97%E3%83%AA">
                        Webアプリ
                    </a></li>

                    <li><a href="/archive/category/iOS%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-%E3%82%A2%E3%83%97%E3%83%AA">
                        iOSアプリ
                    </a></li>

                    <li><a href="/archive/category/%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88-%E3%83%8F%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A7%E3%82%A2">
                        ハードウェア
                    </a></li>

                    <li><a href="http://www.weed.nagoya/archive/category/%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88-%E8%AC%9B%E7%BF%92%E4%BC%9A">
                        講習会
                    </a></li>

                </ul>
            </li>
            <li><a href="/archive">ブログ</a></li>
            <li><a href="/entry/access">コンタクト</a></li>
        </ul>
    </div>
</nav>

うまく動いているようです。