こんにちはこいけです。
はてなブログをやっていて少し寂しいところ、
それはブログがブログとして
完結してしまっているところでした。
何が言いたいかと言うと、
トップページにただ記事が並んでいるだけ
になっているということです。
でも僕はホームページにしたい！
ホームページって開いた時に、
この人この会社はこうなんだ！
ってわかるページになってると思うんです。
それがやりたい。
はてなブログから移行なんて面倒なのでしたくないし、
なんとか出来ないか。
でもデザインをいじるというのは少しハードルが高い。
そんなわけで今使ってるデザインはそのままに、
少しカスタマイズをしました。
Google先生からいろいろ教わりました。
そのURLも貼りつつ、やっていきます。
それではサクッと行きましょう。
現状・やりたいこと
現状トップページにいくと、
記事が並んでいるだけになっていると思います。
これをなんかホームページ！って感じにしたい。笑
そうするためには、
このサイトは何なのか。
というのを端的に伝えるトップページが必要。
ページを作成
トップページというページを作成し
それが一番上かと思わせる作戦。
はてなブログproになっている人は、固定ページを作り
URLに homeとか入れればそれっぽくなるし、
じゃない人でも、カスタムURLでそれらしき並びにする。
それでトップにしたいページを作ります、
リダイレクトをかける
ただトップにしたページを作っただけだと、
誰もそのページに辿り着きません。笑
そのためトップにアクセスがきたら、
リダイレクトをかけて
そのページに飛ばすという作戦でした。
これは良いのを思いついた。
やり方がわからない、
その方法については、このサイトで教えてくれています。
そこでこちらを参考に、
親切です。
下記コードをコピーし、
設定の詳細設定から、
ヘッド要素に追加します。
<script type="text/javascript"> if( location.href == 'https://www.kotikeblog.com/'){ location.href='https://www.kotikenablog.com/home'; } </script>上記のサイトより引用しました。
初めに調べた時は、うまくいかず
原因は、URLを囲む部分が、'シングルコーテーション'か
"ダブルコーテーション"の違いでした。
トップページをカスタマイズ
大体やりたいことはできたので、
ここでは少し凝ったデザインにします。
トップページらしくするために、
経歴を書いたり
SNSを貼ったり
ただここが少しいまいちで改良中のところです。
アカウントのマークだけにして
各ページに飛ぶようにする方がかっこいいよね？
Instagramがなんか厄介なんだよなあ。
今度調べてみます。
また、人気の記事がURLを貼り付けするのではなく、
記事内に埋め込みたい。
そんな思いでGoogleで調べると、
この方が教えてくれました。
こちらのコードを、
記事に直接記述(HTMLに)します。
<div class="hatena-module hatena-module-entries-access-ranking" data-count="3" data-source="access" data-enable_customize_format="0" data-display_entry_category="0" data-display_entry_image="1" data-display_entry_image_size_width="100" data-display_entry_image_size_height="80" data-display_entry_body_length="80" data-display_entry_date="1" data-display_entry_title_length="20" data-restrict_entry_title_length="0" data-display_bookmark_count="1">
<div class="hatena-module-body"> </div>
上記サイトより引用し、カスタマイズしました。
画像のサイズを変更したり、表示する数を減らしたり。
表示する数は、data-countっていうところを変えれば、
簡単に変更できます。
完成
トップページはこんな感じにしました。
タイトルは何もなくしたかったので、
空白文字を調べ一文字入力しました。
以上ではてなブログをホームページみたいに使う！
という記事でした。
ありがとうございました。
