テキストファイルを小説家になろうの表示にするブックマークレット

はじめに

テキストファイルをウェブブラウザで読み込んで実行すると、表示が「小説家になろう」でのものになるブックマークレットです。

|《》でのルビに対応しています。漢字 + ()でのルビには対応していません。

小説家になろうのモバイルサイト表示には対応していません。

ブラウザでテキストファイルを表示
ブラウザでテキストファイルを表示
ブックマークレットで表示変換
ブックマークレットで表示変換

ブックマークレット

下のリンクをブックマークバーへドラッグしてブックマークに追加してください。

テキスト -> 小説家になろう ブックマークレット

別の方法


使い方

ウェブブラウザ上へテキストファイルをドラッグするなどして開き、ブックマークレットを実行してください。


コード

ブックマークレット

javascript:(function(e){var r=document.createElement("script");r.src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",document.documentElement.appendChild(r),r.onload=function(){var r=jQuery.noConflict(!0);e(r)}}(function(e){var r='<style>body{margin:50px auto;padding:0 20px;width:600px;font-family:"メイリオ",Meiryo,"Lucida Grande",sans-serif;font-size:15.2px;line-height:22.8px;text-align:left;vertical-align:baseline;direction:ltr;unicode-bidi:bidi-override;word-break:normal;word-wrap:break-word;color:#444}</style>',a=e("body").text().replace(/\n/g,"<br>").replace(/|(.+?)《(.+?)》/g,"<ruby>$1<rt>$2</rt></ruby>").replace(/|((.*))/g,"$1");e("head").append(r),e("body").empty(),e("body").append(a)}));

元の JavaScript

(function(f) {
  var s = document.createElement('script')
  s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'
  document.documentElement.appendChild(s)
  s.onload = function() {
    var $ = jQuery.noConflict(true)
    f($)
  }
})
(function($) {
  var css = '<style>body{margin:50px auto;padding:0 20px;width:600px;font-family:"メイリオ",Meiryo,"Lucida Grande",sans-serif;font-size:15.2px;line-height:22.8px;text-align:left;vertical-align:baseline;direction:ltr;unicode-bidi:bidi-override;word-break:normal;word-wrap:break-word;color:#444}</style>'
  var word = $('body').text().replace(/\n/g, '<br>').replace(/|(.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>').replace(/|((.*))/g, '$1')
  $('head').append(css)
  $('body').empty()
  $('body').append(word)
})

元の CSS

body {
  margin: 50px auto;
  padding: 0px 20px;
  width: 600px;
  font-family: "メイリオ", "Meiryo", "Lucida Grande", "sans-serif";
  font-size: 15.2px;
  line-height: 22.8px;
  text-align: left;
  vertical-align: baseline;
  direction: ltr;
  unicode-bidi: bidi-override;
  word-break: normal;
  word-wrap: break-word;
  color: #444444;
}

小説家になろうの表示を変更するブックマークレット 1

はじめに

表示変更のサンプル

小説家になろうの表示を黒背景で白文字にするブックマークレットを作りました。完全な黒と白ではなくて monokai と呼ばれるカラースキームを真似てみたので色っぽいはずです。

今回のやつは色や文字サイズが決め打ちなんですが、ゆくゆくはブックマークレットをカスタマイズできるジェネレータを作りたいと思っています。他には縦書きになるやつも作りたいですね。

使い方

小説家になろうの本文があるページでブックマークレットを実行します。元の画面へ戻るにはページをリロード(再読み込み)します。

ブックマークレット

表示変更ブックマークレット

ブックマークレットのコード

javascript:(function(){var e="<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,div,p{margin:0;padding:0}body{font-family:Meiryo,Helvetica,Arial;font-size:16px;letter-spacing:.05em;line-height:1.7;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{width:100%;max-width:640px;margin:20px auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{width:80%;margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>",n='<meta name="viewport" content="width=device-width, initial-scale=1">',o=$("title"),i=$("#novel_color");$("head, body").empty(),$("link, style, script").remove(),$("head").append(e),$("head").append(n),$("head").append(o),$("body").append(i),$("*").removeAttr("style")})();

元になるコード

元になる JavaScript

$(function() {
  var style = '<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,div,p{margin:0;padding:0}body{font-family:Meiryo,Helvetica,Arial;font-size:16px;letter-spacing:.05em;line-height:1.7;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{width:100%;max-width:640px;margin:20px auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{width:80%;margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>'
  var viewport = '<meta name="viewport" content="width=device-width, initial-scale=1">'
  var title = $('title')
  var novel_color = $('#novel_color')
  $('head, body').empty()
  $('link, style, script').remove()
  $('head').append(style)
  $('head').append(viewport)
  $('head').append(title)
  $('body').append(novel_color)
  $('*').removeAttr('style')
});

元になる CSS

body,
div,
p {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Meiryo", "Helvetica", "Arial";
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: #f8f8f2;
  background-color: #272822;
}
a,
a:link {
  color: #66d9ef;
}
a:visited {
  color: #f92672;
}
#novel_color {
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  padding-right: 20px;
  padding-left:  20px;
  box-sizing: border-box;
}
.novel_bn {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.novel_bn:last-child {
  margin-top: 30px;
}
.novel_bn a {
  display: inline-block;
  margin-right: 10px;
  margin-left:  10px;
}
#novel_no {
  margin-top: 15px;
  text-align: center;
}
.novel_subtitle {
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}
#novel_p,
#novel_a {
  margin-top: 10px;
  color: #75715e;
}
#novel_honbun {
  margin-top: 10px;
}

小説家になろうの作品ページの Twitterカードを作る方法

概要

固定されたツイート

小説家になろうの自分の作品を Twitter で宣伝したいのですが、宣伝するなら目立つのがよいわけで、それならってことで画像を添付しようかってなります。でもここは1歩進んで Twitterカードを表示しようと考えたわけです。

Twitterカードから飛ばしたい先は小説家になろうの自分の作品ページで、 Twitterカードの記述を設置する場所は自分のホームページとかになりますから、ちょっとややこしくて、自分のホームページにリダイレクトの JavaScript を記述します。 .htaccess は上手くいかないので。

Twitterカードとリダイレクト

下のような記述になります。 <body> タグとかないですが、下のが全てです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明文( 68 文字まで)">
<meta name="twitter:image" content="画像の URL">
<meta name="twitter:card" content="カードの種類「 summary_large_image 」 「 summary_small_image 」">
<meta name="twitter:site" content="Twitter のユーザ名">
<script>
window.location.href = "飛ばしたいページの URL";
</script>
</head>
</html>

例えば僕は下のようにして Twitterカードを表示しています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="⚔イオの冒険🛡">
<meta name="twitter:description" content="🌏世界を見る旅へ出た青年は同じ目的を持つ2人の少女に出会い共に歩み始める。世界をめぐる中で彼らを待っているのは様々な初めての体験だった。">
<meta name="twitter:image" content="http://yayoi-thyme.com/image/default-site-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<script>
window.location.href = "https://ncode.syosetu.com/novelview/infotop/ncode/n0041ed/";
</script>
</head>
</html>

WordPress のテーマ Bhari の個別ページでサイドバーを表示させる方法

問題と解決

WordPress のテーマ「 Bhari 」の個別ページでサイドバー(ウィジェット)を表示させたかったのですが、それをするオプションが見つからないので PHP の関数を少し変更しました。

変更するファイルは ~wp-content/themes/bhari/inc/extras.php と ~wp-content/themes/bhari/inc/customizer/customizer.php で、変更場所は下のとおりです。

extras.php

function bhari_body_class( $classes )
{

    if (is_home() || is_archive() || is_search() ) {
        $layout = bhari_get_option('sidebar-archive');
    } elseif (is_page() || is_404() ) {
        $layout = bhari_get_option('sidebar-page');
    } elseif (is_single() ) {
        $layout = bhari_get_option('sidebar-single');
    }

    switch ( $layout ) {

    case 'layout-sidebar-content' :         $classes[] = 'layout-sidebar-content';
        break;
    case 'layout-content-sidebar' :         $classes[] = 'layout-content-sidebar';
        break;
    case 'layout-content-sidebar-sidebar' :    $classes[] = 'layout-content-sidebar-sidebar';
        break;
    case 'layout-sidebar-content-sidebar' :    $classes[] = 'layout-sidebar-content-sidebar';
        break;
    case 'layout-sidebar-sidebar-content' : $classes[] = 'layout-sidebar-sidebar-content';
        break;
    case 'layout-content-sidebar' :
    default:
        $classes[] = 'layout-content-sidebar';
        break;
    }

    return $classes;
}
add_filter('body_class', 'bhari_body_class');

endif;

customizer.php

if (! function_exists('bhari_get_defaults') ) :

    /**
     * Set default options
     */
    function bhari_get_defaults()
    {

        $bhari_defaults = array(

         /**
             * Container
             */
         'container-width-page'    => 1100,
         'container-width-single'  => 1100,
         'container-width-archive' => 1100,

         /**
             * Sidebar
             */
         'sidebar-page'    => 'layout-content-sidebar',
         'sidebar-single'  => 'layout-content-sidebar',
         'sidebar-archive' => 'layout-content-sidebar',
        );

        return apply_filters('bhari_theme_defaults', $bhari_defaults);
    }

endif;

おわりに

PHP の書き方を知らないので、どうにかこうにかできた感じです。スマートな方法とは思えませんが、まぁできたしいいかなぁ、と。