友達は少ない方が良いんじゃない??

ブログのトップ画面を「記事一覧」表示に変更しました!これでページが見やすくなったね!

はてなブログを運営してきてずっと感じてたんですが、

とにかくトップページが見づらかったんですよ。

 

今までの当ブログのトップ画面は、

↓ の構成でした。

 

f:id:oshaberiitboy:20170822030653j:plain

 

記事の表示設定はデフォルトのまんまで、コードいじってません。

 

つまり一番上に最新記事が表示されるので、

次の記事を見るためにはかなりスクロールしなきゃダメでした。

 

正直、見る側にとっては優しくない作りです^^;

 

一応「続きを見る」ボタンで記事は省略できてたんですけど、

ヒトデさんのブログの様にトップページをもっとコンパクトにしたかった。

 

 

f:id:oshaberiitboy:20170822031804j:plain

 

おじゅんのサイトより、記事がすっきりしていて見やすいですよね。

 

そこでヒトデさんみたいなカスタマイズ設定が見つかったので、

皆さんにお伝えします( ´ ▽ ` )

 

 

 

 

 

カスタマイズの設定

 

①「設定」→「詳細設定」の順に選択

 

f:id:oshaberiitboy:20170822033103j:plain

 

 

Proじゃないのかよ!って指摘は言わないで・・・

 

管理画面の自分のIDを選択すると縦長のバーが出てくるので、

その中から「設定」を選びましょう。

 

そして設定画面に移り3つ並んでいる項目から、

真ん中の「詳細設定」を選択します。

 

②「検索エンジン最適化」の「headに要素を追加」に下記コードを打つ。

f:id:oshaberiitboy:20170822033529j:plain

 

※「検索エンジン最適化」は、詳細設定のやや下の方です。

 

入力するのは、以下のコードです。

 

<script type="text/javascript">

if( location.href == 'http://oshaberiitboy.hatenablog.com/'){
location.href='http://oshaberiitboy.hatenablog.com/archive';
}
</script>
<noscript>
<p><a href="http://oshaberiitboy.hatenablog.com/archive">友達は少ない方が良いんじゃない??</a></p>
</noscript>

 

注意点として、

赤字 → 自分のはてなブログのURLに変更

青字 → 自分のはてなブログのタイトルに変更

を忘れないようにしましょう。

 

コードのURLのすぐ次にある「/」は、消さないでくださいね。

 

③コード入力後、一番下の「変更する」を選択。

 

ここまで上手くいけば・・・

 

f:id:oshaberiitboy:20170822034835j:plain

 

 

わお!ヒトデさんのブログみたいになりました!


 

見やすうううううううううううううい!

 

 

自分でも、ページを見るときのストレスが減ったと思います( ´ ▽ ` )

 

今回は、下記のサイト様を参考にしました。

本当にありがとうございましたm(_ _)m

 

iitaikotoha.hatenablog.com

 

 

ではでは、今日はこのへんで!

 

 

ブログ飯 個性を収入に変える生き方
インプレス (2013-06-21)
売り上げランキング: 3,403