ブログカスタマイズ

【コピペOK】はてなブログで関連記事をおしゃれなカード風にするスマホ版カスタマイズ【Milliard】

はてなブロガーのまにです。

はてなブログの関連記事一覧がダサい!ダサすぎる!

はてなブロガーのみなさん、一度はこう思ったことありませんか?

ダサすぎて記事執筆に集中できないくらいですよ。えぇ。

「じゃあテーマ変えれば良いじゃん」って思うかもしれませんが、正直僕、Wordpressの良テーマを上回るテーマははてなブログには存在しないと思ってます。

はてなブログは、テーマ開発ではCSSしかいじれないのでWordpressほど自由にデザイン出来ないんですよね。ファッキンは◯な

このままでは、モチベーションが下がって「まに、ブログ辞めるってよ」一直線になってしまう…!まずい!

ってなわけで、オシャレなカード風の関連記事一覧を作っちゃいました!

今回は、はてなブログスマホ版関連記事一覧のカード風カスタマイズをご紹介していきます。コピペOKにしてるので、はてなブロガーの方はぜひご活用ください!

【注意!】

この記事で紹介するカスタマイズは、「レスポンシブデザイン」を有効にしていない方向けです。レスポンシブデザインを有効にしている方は、コードを記述しても適用されませんので、あらかじめご了承ください。

f:id:hanano_mani_0125:20180506212010p:plain

「デザイン」→「スマートフォン」→「詳細設定」のレスポンシブデザインにチェックが入っていない方は、コードをご利用いただけます。

この記事で作れるもの

f:id:hanano_mani_0125:20180506205143p:plain

今回作るのはこんな感じのカード風関連記事一覧。

WordPressテーマのSANGOJINっぽい、ふわっと浮き上がったカード風のデザインにしてみました!

※注意!

個人的に使うだけのつもりだったため、ブラウザでの動作確認はSafariのみ確認しています。

Chromeやその他ブラウザでの確認は行なっておりませんので、ご利用は自己責任でお願い致します。

デザイン崩れ等動作不良があった場合は、コメントで教えていただければ対応いたします。

関連ページプラグイン「Milliard」を使用するよ

f:id:hanano_mani_0125:20180506211059p:plain

Milliard関連ページプラグインについて | シスウ株式会社

今回紹介するカスタマイズでは、関連記事プラグイン「Milliard」を使用します。

デフォルトの関連記事は使用しません。

なので、デフォルトの関連記事一覧はdisplay: none;で非表示にしちゃいます。

※非表示の手順は次の「導入方法」でご紹介します。

導入手順→ コピペでOK!

記事の最後にHTML・CSSコードを載せてます!

コピペで一発実装できるようにしてるので、ぜひご活用ください。

※このカスタマイズでは、Font Awesomeを使用します。導入されてない方は、こちらのサイトが詳しく解説されてますので、参考にしてください。

saruwakakun.com

1.デフォルトの関連記事を非表示

f:id:hanano_mani_0125:20180507110529p:plain

まず事前準備として、デフォルトで表示される「過去の記事一覧」を非表示にします。

関連記事をこれから導入するのに、同じ関連記事一覧が2つあったら見にくいですよね。

非表示にするのは、画像の赤枠の部分。

これを非表示にするために、以下のコードを記述します。

※注意です!記事の最後に、導入に必要なコードを全てまとめて載せてますので、ここで記述する必要はありません!

.pager-permalink { display: none }

このコードを記述すると…↓↓

f:id:hanano_mani_0125:20180507110424p:plain

あらスッキリ!

こんな感じに一切存在が消されます。

これで、導入前の準備は完了です。

2.Milliardのコード生成

それでは、Milliardのコードを生成していきます。

Milliardコードの生成

まず、下記リンクからMilliardコード生成ページにアクセスします。

http://www.shisuh.com/statics/relatedPageSetting/

f:id:hanano_mani_0125:20180507111207p:plain

アクセスすると、こんなページに飛びます。

それぞれ生成に必要な項目に記入していきます↓

f:id:hanano_mani_0125:20180507111824p:plain

ここで記入する項目は、

  • トップのURL→自分のブログのトップページのURLを入力
  • サイトタイプ→「はてなブログ」を選択
  • 紹介文→空欄でOK
  • 並び順→「関連度順」を選択
  • PCでの表示→「パネル」のままでOK
  • スマホでの表示→「パネル」を選択し、「挿入箇所のスクロールを無効にする」にチェック、表示件数は偶数ならいくつでもOK!ここでは「6件」にしておきます。

こんな感じで入力してもらえればOK!

入力したら、「コードを取得」をクリックしてコードを生成します。

f:id:hanano_mani_0125:20180507111944p:plain

このコードは最後の方に使いますので、そのままページは閉じずに残しておくか、テキストエディタに保存しておくかしておいてください。

3.コードを貼り付け

次は、今回ご紹介するコードを貼り付けていきます。

コードを貼り付ける場所は、

f:id:hanano_mani_0125:20180507113116p:plain

「ダッシュボード」から、

「デザイン」→「スマートフォン」→「記事」→「記事下」にコードを挿入します。

貼り付けるコード

肝心のコードはこちら!

「記事下」にコピペで一発で使えます!

<div id="milliard-title">
<h3><i class="fa fa-thumb-tack"></i>RECOMMEND</h3>
<p>こちらの記事も人気!</p>
</div>
<!--- ここから下にMilliard生成コードを挿入 -->
<!--- ここまでMilliard生成コード -->
<style type="text/css">
.ssLimitedContainerHeader > div > div > div {
display: none;
}
#milliard-title {
background-color: #f4f4f4;
padding: 10px;
margin-top: 0px;
text-align: center;
}
#milliard-title i {
margin-right: 5px;
}
#milliard-title h3,
#milliard-title p {
margin: 0;
}
#milliard-title p {
font-size: 0.5em;
font-weight: bold;
}
.pager-permalink {
display: none;
}
.entry-footer-html .ssArticlesContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.entry-footer-html .ssArticlesContainer .ssArticle{
width: 150px !important;
}
.entry-footer-html .ssArticlesContainer .ssArticle.img .ssArticleContent {
width: 100%;
height: 160px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
margin: 10px 0;
}
.entry-footer-html .ssArticlesContainer .ssArticle.img .ssArticleContent .ssArticlePhotoContainer {
position: absolute;
width: 100%;
height: 100%;
}
.entry-footer-html .ssArticlesContainer .ssArticle.img .ssArticleContent .ssArticlePhotoContainer .centerChild {
vertical-align: top;
}
.entry-footer-html .ssArticlesContainer .ssArticle.img .ssArticleTitleContainer {
height: 75px;
background-color: #fff;
}
.entry-footer-html .ssArticlesContainer .ssArticle .ssArticlePhotoContainer .ssArticlePhotoParent .articlePhoto {
height: 85px;
object-fit: cover;
pointer-events: none;
cursor: default;
}
.entry-footer-html .ssArticlesContainer .ssArticle.img .ssArticleTitleContainer > a {
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
line-height: 21px;
height: 60px;
color: #4d4d4d;
}
.entry-footer-section {
display: none;
}
</style>

 

4.Milliardコードを貼り付けて完了

そして最後に、先ほど生成したMilliardコードを挿入します!

<div id="milliard-title">
<h3><i class="fa fa-thumb-tack"></i>RECOMMEND</h3>
<p>こちらの記事も人気!</p>
</div>
<!--- ここから下にMilliard生成コードを挿入 -->
<!--- ここまでMilliard生成コード -->
ここの「ここから下にMilliard生成コードを挿入」 と「ここまでMilliard生成コード」の間に生成コードをコピペ!
これで完成です!
f:id:hanano_mani_0125:20180506205143p:plain
こんな風になっていれば成功です。
「全然ならない」「デザイン崩れまくってる」という方は、エラーが出ていたり、他のCSSコードが干渉している可能性もありますので、確認して見てください。

最後に

はてなブログにはWordpressほどのデザインが整ったテーマ・カスタマイズが全くなくて(当社比)、我慢できず自分で作ってしまった結果生まれたのが今回の関連記事カスタマイズです笑

一応他にも関連記事をカード風にするカスタマイズを紹介してる記事がないか調べて見みましたが一切ヒットしませんでした。

おそらく、はてなブログの関連記事一覧をカード風にするカスタマイズはこの記事だけだと思うので、是非ご活用していただければと思います。

それでは!
ABOUT ME
まに / mani
まに / mani
『好きな事×ニート』の働かない生活がしたい夜間大学生。ブログやフリーランスで「ニート暮らし」のライフラインを構築するため奮闘中です。ブロガー兼プログラミングメンター。