MENU
トップ > お役立ち > 【コピペで実装】はてなブログのトップデザインをオシャレにする方法【ブログカスタム】

【コピペで実装】はてなブログのトップデザインをオシャレにする方法【ブログカスタム】

お役立ち

【スポンサーリンク】

人気記事セレクション

オシャレトップデザインアイキャッチ

最近リアルがダサいのでブログぐらいオシャレにしたいなと、オシャレに目覚めた苦労詐欺だ。
って言うのも、実は前々からWordPressのテーマで気になっているテーマがあった。

ならWordPressに引っ越せばいいって話なんだけど、僕が気になったのはそのテーマ全体じゃないんだ。
テーマ全体としても確かに魅力的なんだけど、そのテーマのトップデザインにものすごい惹かれた。

WordPressのテーマってお金がかかるからそう簡単には手が出しにくくてね(；・∀・)
ただ、どうしてもそのテーマのおしゃれなトップデザインをはてなブログでもやりたくなったので、今回はそれを再現してみたよ。

WordPressテーマ「STORK」のトップデザインがオシャレ！

僕が気になったWordPressのテーマは「STORK」
ブログマーケッターJUNICHIさんが監修していて、OPENCAGEさんが開発したテーマだよ。

JUNICHIさんが監修してるだけあって、ブロガーが使いやすいようなテーマになってる。
サイトのデザインが手軽にできて、記事作成に集中できるようになってるのが一番特徴的かな。

僕がブログを引っ越すor立ち上げるならこのテーマにしたいな～と思ってる。
アフィリエイトサイトやるなら別のテーマだけどね。

↓のかのさんが書いた「STORK」と「AFFINGER4」の比較記事とかかなり参考になるよ。
WordPressのテーマで悩んでたりしてるなら一読してみることをお勧めする

STORK(ストーク) とAFFINGER4(アフィンガー4)、どっちにする？ - 手書きのようで、活字のようで、

僕はまだWordPressへのお引っ越しやWordPressでの新サイトの立ち上げは考えてない。
けど、どうしてもブログでやりたいことがあって、それがWPテーマ「STORK」風のトップデザインを作ること。

「STORK」にはトップデザインを4つから選べる機能がついて。
↓の4つから選択してサイトのトップとして設定することができる。

  • マガジン型
  • カード型
  • シンプル
  • ビッグ

この中で僕が特に気になったのが「カード型」のデザイン。
「マガジン型」もちょっと惹かれたけど、ブログ記事がキッチリと並んでいる「カード型」デザインにものすごく惹かれた。

open-cage.com

このデザインたまらねぇ～

いずれSTORKは使いたいが、はてなブログなんかでもこのカード型のトップデザインを再現したい！

そう思ったので、今回このカード型のデザインを再現してみた。
もちろんコピペで他の人も設定できるようにコードも公開するよ！

WordPressでSTORK以外のテーマで、このデザインが使いたいって人用にも一応解説もする。
ただ、WordPressなら、資金に余裕があればSTORK自体を購入することをおすすめするかな～

まずは記事に「続きを読む」ポタンを設置

はてなブログのトップページは基本、更新した記事の内容がまるっとそのまま表示される仕様になってる。
最初、テーマごとでトップの仕様も変更されるだと思ってたけど、どうも全テーマ共通みたい。

STORKカード型風トップデザインを再現するにあたって、全文が表示されている状態でやるのはかなり難しい。
僕のブログはトップにアクセスするとアーカイブページに飛ぶ仕様になってるから、はじめはアーカイブページで再現できないかどうかもやってみた。

ある程度はそれっぽくできたんだけど、アイキャッチがiframeっていうのを使っていて、うまく表示範囲の変更とかができなかった。
色々と試行錯誤した結果、通常のトップページに「続きを読む」のボタンを設置して、そこからならうまくカスタムできることがわかったよ。

調べるまで「続きを読む」ボタンの設置方法すら僕は知らなかったんだけど、調べたらめちゃめちゃ簡単だった。
やり方は簡単で、記事編集画面内のトップに表示させたい部分までカーソルを持っていき、画面上部にある「続きを読む」ボタンを押すだけ。

続きを読むボタン

押すと「･････････････････」って点線が表示されるんだけど、これより上に表示されているものがトップに表示されて、それより下は「続きを読む」ボタンに変更されるよ。
これで準備はできたから、後はSTORKカード型風トップデザインになるようコードの設置をしよう。

「･････････････････」追加

「続きを読む」ボタン設置

※基本、記事の一番上にアイキャッチ画像が掲載されていること前提

※画像は文章まで入った位置でやっているけど、実際は文章が邪魔になるから、アイキャッチ画像の直下に「続きを読む」を入れよう

cssをカスタムしてSTORKカード型風トップデザインを再現

ここからはcssを使ってブログのトップをSTORKカード型風トップデザインにカスタムするよ。
まず、今回は↓のブログ記事を参考にさせてもらったよ。

www.cocococococococococococo.com

はてなブログのテーマ「Innocent」のトップページデザインをオシャレにカスタムしてるよ。
参考元ではサイドバーを下側に移動させて、記事を3カラム表示にさせてるね。

僕としては目指すのはSTORKのカード型風トップデザインだから、参考元のコードをカスタマイズした。
コードとしては↓のような感じになったよ。

/* ブログ記事を囲っている要素 */
.page-index #main-inner{
    margin-right: -20px;
    margin-left: -20px;
}

 /* 各ブログ記事 */
.page-index .entry{
    width: 48%;  /* 50%で2カラム、25%で4カラム */
    height: 360px;
    display: inline-block;
    vertical-align: top;
    font-size: 0.8rem;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #aaa;
    margin-bottom: 32px;
    -webkit-box-shadow: 3px 3px 4px #bbb;
    box-shadow: 3px 3px 4px #bbb;
}

 /* 各ブログ記事 */
.page-index .entry-inner{
    display: table;
}

 /* 日付、ブログタイトル、カテゴリの親要素 */
.page-index .entry-header{
    display: table-footer-group;
    padding: 8px 10px;
}

 /* ブログ本文の親要素 */
.page-index .entry-content,
.page-index .entry-content p{
    margin: 0;
    padding: 0;
    line-height: 0;
    position: relative;
}

 /* はてなスター、SNSボタン関連 */
.page-index .entry-footer,
.page-index .entry-content .entry-see-more{
    display: none;
}

.page-index img.hatena-fotolife{
    width: 100%;
    height: 230px;
}

これをはてなブログ管理画面内「デザイン」→「カスタマイズ(スパナマーク)」→「デザインCSS」に貼り付けた結果がこれ↓

実装結果

※画像ははてなブログテーマ「Brooklyn」に実装させたもの

う～む…思った程オシャレ感出てないかも…

このコードにはちょっとした問題がある。
まず、アイキャッチや記事全体のheightの指定がpxで指定してるので、レスポンシブだと枠内からはみ出る。

PCとスマホで表示を変えているサイトならスマホ表示を別で設定すればいいけど、レスポンシブの場合%指定じゃないと枠をはみ出してしまう。
かといって、%指定すると、今度はアイキャッチ画像の大きさ等が影響して、一記事ごとに大きさが変化してしまう。

まぁ、STORKのマガジン型風に見えなくもないから、そっちがいい人はheightを%表記にすれば再現できるよ。

もう一個問題があるのが、画像をクリックしても画像が拡大表示されるだけで、記事ページに飛ばないこと。
本家STORKでは画像をクリックしても記事ページに飛ぶようになってた。

画像部分のheight問題はアイキャッチ用画像のheightサイズを揃えれば解決するかな。
記事全体のheight問題はタイトルの文字数も影響しているからちょっと難しいかも(；・∀・)

画像のリンク問題は、消してる「続きを読む」ボタンを拡大してアイキャッチの上から重ねて、表示を透過させればいけるかも。
時間の都合上取り敢えずでコード公開したけど、後日修正したのを出したいと思う。

cssが弄れて他のWordPressテーマが解析できるのなら、WordPressでも実装は可能

今回ははてなブログのブログテーマでやったけど、cssが弄れる＆WordPressテーマが解析できる人なら実装は難しくないかと。
公開したcssコード内のクラス名を一致する箇所に置き換えて、微調整すればそれなりにできるんじゃないかと。

やってみて、STORKほどのオシャレ感は出なかったけど、理想に近い形になって結構満足してる。
cssやscriptを使ってのブログカスタマイズは色々苦労するけどやっててすごい楽しい。

本来はWordPressサイト作ってSTORK購入するべきなんだろうけど、如何せんお金がないもんで。
金が無いなら無いなりに、自作して創意工夫でどうにかするという貧乏根性を出してみた。

公開したコードに関して質問などあればお問い合わせフォーム又はブログコメント・はてブコメントから( ｀・∀・´)ﾉﾖﾛｼｸ
出来る限り答えるよ～

ztrabbit02 読者になる

広告を非表示にする

【スポンサーリンク】

コメントを書く