page contents

たれいちどっとこむ

やりたいことをやりたいように、がんばらないブログ

たれいちどっとこむ

はてなブログの404ページをコピペ編集してみた

おはようございます。たれいちです。

コピペカスタマイズ系のウケが良かったみたいなのでもう一回

ご安心ください、明日にはインスタント記事に戻ります(笑)

 

 404ページのカスタマイズをしてみました。

ついこの前私もトップページが404になり慌ててリセットしました。

headの記述が間違っていただけでしたが。

 

誰かのブログを訪問した時、

「お探しの記事は見つかりませんでした」

なんて表示されたら即効で右上の×をクリックしちゃいますよね。

 

せっかく来てくれたんだから何か見ていってよ、ってことです。

 

参考にした所

iro.hateblo.jp

www.fair-skinned-monster.com

設定→詳細設定→headに要素を追加

まずはここにコードを追加します。

 

jQueryを使用できるようにします。
既に他のスクリプトを使う目的で取り込んでいる場合は不要です。

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 

そしたら続けて

<script type="text/javascript">
var RSS_URL = "http://b.hatena.ne.jp/entrylist?sort=count&url=http%3A%2F%2Ftareichi.hateblo.jp%2F&mode=rss";
google.load("feeds", "1");

function shuffle(array) {
array.sort(function() {
return Math.random() - .5;
});
}

function initialize() {
var feed = new google.feeds.Feed(RSS_URL);
feed.setNumEntries(30);
feed.load(function(result) {
if (!result.error) {
shuffle(result.feed.entries);

var count = 3;
if (count > result.feed.entries.length) {
count = result.feed.entries.length;
}
for (i = 0; i < count; i ++) {
var entry = result.feed.entries[i];
var html = "";

var img = entry.content.match(/(http:){1}[¥S_-]+( (¥.png)|(¥.jpg)|(¥.JPG)|(¥.gif))/);
html += "<a href='" + entry.link + "'>";
if(img){
html += "<img class='feed_thumbnail' src='" + img[0] + "'>";
}
html += entry.title.replace("たれいちブログ", ""); + '</a>';
html += "<a href='http://b.hatena.ne.jp/entry/" + entry.link + "' target='_blank'><img src='http://b.hatena.ne.jp/entry/image/" + entry.link + "' class='feed_hatena_count'></a><br clear='left'/>";
$("#feed").append(html);
}
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function() {
if ($('#main-inner').children().hasClass("no-entry")) {
var content = "<img src='https://cdn-ak2.f.st-hatena.com/images/fotolife/t/tareichi/20171211/20171211162824.jpg' width='100%'>";
content += "<br/>大変申し訳ございません。<br/>記事の削除、URLの変更などにより<br/>せっかく訪問いただいたページが表示できませんでした。<br/>" ;
content += "<br/>代わりといっては何ですが<br/>こちらの記事が多くの方に読まれている記事です。<br/>宜しければご覧下さいませ。<br/>" ;
content +="<br /><br /><hr>";
content +="<div class='hatena-module hatena-module-entries-access-ranking'";
content +=" data-count='10'";
content +=" data-display_entry_category='0'";
content +=" data-display_entry_image='1'";
content +=" data-display_entry_image_size_width='100'";
content +=" data-display_entry_image_size_height='100'";
content +=" data-display_entry_body_length='0'";
content +=" data-display_entry_date='0'";
content +=" data-display_bookmark_count='1'";
content +=" data-source='total_bookmark'";
content +=">";
content +=" <div class='hatena-module-body'>";
content +=" </div>"
content +="</div>";
$('.entry-footer').addClass('sorry_content');
$('.entry-footer').html(content);
}
});
</script>

コピペした後に編集する箇所があります。

 

2行目の

 

var RSS_URL = "http://b.hatena.ne.jp/entrylist?sort=count&url=http%3A%2F%2Ftareichi.hateblo.jp%2F&mode=rss";

 

ここを自分のRSSへ変更

よくわからないひとは多分以下でなんとかなる

b.hatena.ne.jpまずはてなブックマークに行き

右上のキーワード・URLを検索の所に自分のブログURLを入力して検索

そのURLの後ろに「&mode=rss」を追加するだけ。

 

真ん中あたりの

 

html += entry.title.replace("たれいちブログ", ""); + '</a>';

 

これも自分のブログ名に変更しましょう。

 

下の方にある

 

var content = "<img src='https://cdn-ak2.f.st-hatena.com/images/fotolife/t/tareichi/20171211/20171211162824.jpg' width='100%'>";

 

これは画像です。お好きなものを使いましょう。

 

デザインCSSも編集しておくとフォントサイズ等変えることができます。

.sorry_content{
color: #434343;
font-size: 1.13em;
line-height: 170%;

}
#feed {
margin-top: 10px;
font-size: 1.13em;
}
.feed_thumbnail {
margin: 2px 10px 2px 0;
float: left;
min-width: 100px;
max-width: 100px;
}
.feed_hatena_count {
margin-left: 5px;
}

 

では見てみましょう。

http://tareichi.hateblo.jp/存在しないページ

 

まずめったに遭遇しない404ページですが

これで即離脱の確率を減らすことができるかと。

 

以上コピペカスタマイズでした。