Primeiro:プリメイロ

誰でも最初は素人だ！初めてのことをやりこむブログ。

はてなブログテーマ「Primeiro」公開！

左サイドバーのシンプルなはてなブログテーマです。 様々なカスタマイズを公開していますので導入直後からおしゃれなブログを作ることができます。

はてなブログテーマ「Primeiro」公開！

トップ > はてなブログカスタマイズ > 月間PV100万以上の人気Webサイト4つの記事トップデザインを参考にはてなブログをカスタマイズ

月間PV100万以上の人気Webサイト4つの記事トップデザインを参考にはてなブログをカスタマイズ

はてなブログカスタマイズ はてなブログカスタマイズ-Primeiroカスタマイズ

f:id:yumedasuke:20190311152517p:plain

月間PV100万以上の人気のWebサイトは「読ませるための工夫」や「読みやすいデザイン」、「直帰率を下げるための工夫」などを施していたりとデザインの参考になります。

今回はそれらの人気WEBサイトの「記事トップデザイン」に注目！
記事トップのデザインを参考にしてはてなブログをカスタマイズしていくカスタマイズ記事となります。

カテゴリをいくつ表示しているかも参考にしていきましょう！

Primeiroを使っている方へ

トップページのカテゴリが多い場合や長い場合、カテゴリタグが重なる可能性があります。

cssにこちらを記述しておいてください。

.page-archive .archive-entries .archive-entry .categories a:nth-child(2) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(3) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(4) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(5) {
    display: none;
}

それでは始めていきます！

参考にするWebサイト

liginc.co.jp

LIG

f:id:yumedasuke:20190312092519p:plain
LIG
株式会社LIG | 東京都台東区上野発のWeb制作会社、世界へ

デザイン

「タイトル、著者、データ、カテゴリー」

カテゴリーデザインはシンプルでカテゴリー表示数は多くて5つですね。

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312123823p:plain

記事下

<div class="athersmaru">
<div class="profiruimg">
<img src="プロフィール画像のurl"></div> 
<div class="orofinames">
<a href="aboutページのurl">くろやん</a>
</div>
</div>


css

.entry-header {
    position: relative;
    padding: 25px 10px 45px;
    border-bottom: 1px solid #f7f8f9;
}

.entry-header .entry-categories.categories a {
    color: #666;
    border: 1px solid #444;
}

.entry-header .date.entry-date.first {
    position: absolute;
    bottom: 45px;
    right: 0;
}

    .athersmaru{
        display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
    .profiruimg img{
        border-radius: 50%;
    border: 2px solid #e5e6e6;
    }
    
    .orofinames{
            margin-left: 10px;
    }
    
    .orofinames a{
    text-decoration: none;
    color: #444;
    font-size: 13px;
    font-weight: 700;
    }

    .orofinames a:hover{
    color: #eee;
    }

Engadget Japanese

f:id:yumedasuke:20190312101425p:plain
Engadget Japanese

Engadget 日本版 : 最新ガジェットと家電、テクノロジーのニュースとレビュー

デザイン

「タイトル、コメント、著者、データ、カテゴリー、sns」

著者部分のなかに日付、カテゴリーを格納したデザインです。
snsのシェア数を表示しているのがいいですね！

LIGもそうですが、多数の人が記事を書くサイトはタイトル下に著者情報を記載していますね。

カテゴリ表示数は1つのみです。

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312123535p:plain

head内にjqueryを読み込ませる。

管理画面→設定→詳細設定→検索エンジン最適化→headに要素を追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>

記事下

<div class="athersmaru">
<div class="profiruimg">
<img src="プロフィール画像のurl"></div> 
<div class="orofinames">
<a href="aboutページのurl">くろやん</a>
</div>
</div>

<div class="share-buttons">
    <div class="share-text hatebu-count">
    </div>
    <div class="countsdsa">シェア</div>
</div>

<script type="text/javascript">

  var countHatebu = function (response) {
    var nodeList = document.querySelectorAll('.hatebu-count')
    Array.prototype.forEach.call(nodeList, function (v) {
      v.innerHTML = response || 0
    })
  }


  document.addEventListener('DOMContentLoaded', function () {
    var addScript = function (src) {
      var script = document.createElement('script')
      script.src = src
      document.body.appendChild(script)
    }

    addScript('https://b.hatena.ne.jp/entry.count?url={Permalink}&callback=countHatebu')
  })
</script>

css

.athersmaru {
    display: flex;
    align-items: start;
    width: 40%;
}

   .profiruimg img{
        border-radius: 50%;
    border: 2px solid #e5e6e6;
    }
    
    .orofinames{
            margin-left: 10px;
    }
    
    .orofinames a{
    text-decoration: none;
    color: #444;
    font-size: 13px;
    font-weight: 700;
    }
    
    .orofinames a:hover{
    color: #eee;
    }

.entry-header-html {
    display: flex;
}

.entry-header .entry-categories.categories {
    position: absolute;
    bottom: 44px;
    left: 160px;
}

.entry-header .entry-categories.categories:hover {
    position: absolute;
    bottom: 44px;
    left: 160px;
}

.entry-header .date.entry-date.first {
    position: absolute;
     bottom: 50px;
    left: 80px;
}

.entry-header .entry-categories.categories a {
    color: #9a58b5;
    border: 0px solid #444;
    font-weight: 400;
    font-size: 12px;
}

.entry-header .entry-categories.categories a:hover {
    border: 0px solid #66bdb3;
    color: #9a58b5;
}

.share-buttons {
    width: 10%;
    text-align: center;
    position: relative;
    display: grid;
    align-items: center;
border-left: 1px solid #aaa;
}


@media screen and (max-width: 991px){

.athersmaru {
    width: 80%;
}

.share-buttons {
    width: 20%;
}

ul.circle_group {
    margin: auto;
    list-style: none;
    padding: 0;
    position: absolute;
    bottom: 0px;
}
}

はてブのみをカウントして表示しています。

あとはsnsボタンを設置して終了です！

snsボタンはこちらの記事を参考にしました。
www.daipanman.com

このデザインを少しだけいじります。

/* リンク領域をブロック全体に */
.sns_circle a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-indent:-999px;
    color:#FFF;
}

/* 回り込み解除のためのクラス */
.clearfix{
    zoom:1;
}
.clearfix:after{
    content:"";
    display: block;
    clear: both;
    height: 0;
    visibility:hidden;
}

/* サークルのスタイル */
.sns_circle {
    position: relative;
    width: 36px;
    height: 25px;
    margin: 0 10px 0 10px;
    float: left;
    list-style: none;
    color: #eee;
    border-right: 1px solid #e5e6e6;
}

/* Webフォントに関する指定 */
.sns_circle span{
position: absolute;
    font-size: 16px;
}


/* マウスオーバー時のスタイル */
.sns_circle:hover{
    color: #444;
}

/* シェアボタンエリア */
ul.circle_group{
    margin:auto;
    list-style: none;
    padding:0;
}

li.sns_circle.pocket:last-child {
    border: none;
}

/* Font Awesome hatena bookmark（手作り） */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
}

@media screen and (max-width: 991px){

ul.circle_group {
    margin: auto;
    list-style: none;
    padding: 0;
    position: absolute;
    bottom: 0px;
}
}

CNET Japan

f:id:yumedasuke:20190312124555p:plain
CNET Japan

CNET Japan

デザイン

「アイキャッチ画像、タイトル、著者、データ、sns」

カテゴリーを表示せず「パンくずリスト」でどのカテゴリに属すかを示すデザインですね。
シンプルですっきりとした印象を受けますね！

タイトル横にアイキャッチ画像を設置しているのはあまり見かけませんので珍しいデザインだと思います。

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312131023p:plain

記事上

<script>
    $('<div class="kokonigazougahairu"></div>').insertBefore('.entry-title');
</script>

<script>
  $(window).on("DOMContentLoaded", function(){
    $('.kokonigazougahairu').prepend('<img src="' + $('meta[property="og:image"').attr('content') + '">');
  });
</script>

css

.entry-header .entry-categories.categories {
    display: none;
}

.entry-title {
    color: #020814;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.03rem;
    text-align: left;
    padding: 15px 0 30px;
    margin: 0;
    line-height: 1.3;
}

    .kokonigazougahairu{
    float: left;
    width: 160px;
    height: 90px;
    overflow: hidden;
    display: block;
    position: relative;
    margin-right: 15px;
}

 .kokonigazougahairu img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

Roomie

f:id:yumedasuke:20190312135607p:plain
Roomie

ROOMIE（ルーミー）｜クラフトな遊び心地

デザイン

「アイキャッチ画像、タイトル、データ、カテゴリ」

アイキャッチ画像をカバーにタイトルを表示する「今風」のおしゃれなデザインですね！
カテゴリのハッシュタグがおしゃれです。

カテゴリ数は5から

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312135447p:plain

記事上

<script>
    $('<div class="kokonigazougahairu"></div>').insertBefore('.entry-title');
</script>

<script>
  $(window).on("DOMContentLoaded", function(){
    $('.kokonigazougahairu').prepend('<img src="' + $('meta[property="og:image"').attr('content') + '">');
  });
</script>

<style>

.kokonigazougahairu {
    width: 100%;
    position: relative;
}

 .kokonigazougahairu img{
        width: 100%;
    height: auto;
    position: relative;
}

.entry-title {
    padding: 5px 10px;
    position: absolute;
    bottom: 135px;
}

.entry-title a{
    color: #fff;
}

.entry-header {
    position: relative;
    padding: 0;
}

.entry-header .entry-categories.categories a {
    color: #fff;
    border: none;
}

.entry-header .entry-categories.categories a:hover {
    border: none;
}

.entry-header .entry-categories.categories:hover {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.entry-header .date.entry-date.first {
    left: 0;
    z-index: 5;
    bottom: 30px;
}

.entry-header .date.entry-date.first a {
    color: #fff;
}

.entry-header .entry-categories.categories a::before{
    content:"#";
}

</style>

月間PV100万以上の人気のWebサイトはまだまだありますので探してみて「これいいな！」と思うデザインを見つけてみてください。

以上で「月間PV100万以上の人気Webサイト」の4つのデザインのご紹介を終わります。

僕がおすすめする入門書

作りながら学ぶ HTML/CSSデザインの教科書
posted with ヨメレバ

高橋朋代/森智佳子 SBクリエイティブ 2013年12月17日

非常に実践的で，記述したコードが即座に体現する為どう行った意味を持って描いているかが記憶に残りやす入門実践書！僕が一番初めに読んだweb関連の本です。

楽天ブックス
楽天kobo
Amazon
Kindle

yumedasuke 読者になる

広告を非表示にする
関連記事
コメントを書く
Copyright 2019 Primeiro:プリメイロ All rights reserved.