WordPress で p タグが消えるのを解決する方法

WordPress の記事を書くのに HTML タグを手打ちしてるんですが、その記事を公開して表のウェブページで見ると <p> が出力されてないのです。なんじゃこりゃ。

もちろんデータベースには <p> タグがそのまま保存されています。 PS Disable Auto FormattingRaw HTMLTinyMCE Advanced 、 function.php に remove_filter('the_content', 'wpautop'); を追加する、を試しましたが、まぁそもそも勝手に <p> タグ挿入するのやめて! っていうような話であったり、 <p> タグが消えなくしてくれるはずのプラグインも仕事してくれなかったり。

で、ふと気付きました。 <p> タグ内で改行すればいいんです。ちょっとウザいですが簡単です。

ダメな書き方

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

いい書き方

<p>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
</p>

ファイルをスタートやタスクバーにピン留めする方法

はじめに

ファイルスタートタスクバーピン留めできたら便利だと思うのですが Windows はやらせてくれません。そこでちょっと考えてみました。

ファイルをスタートにピン留めする

下の要領でピン留めします。タスクバーにピン留めするのも同じ感じです。

  1. 目的のファイルを開くアプリのショートカットを作ります。

    アプリのショートカットを作る
  2. ショートカットのプロパティ画面で、アプリのパスにファイルのパスを付け足します。例えば下のようにします。

    "C:\Program Files\EmEditor\EmEditor.exe" "\\illya.c\sviel\bridge.txt" アプリのプロパティの画面
  3. ピン留めします。

    ピン留めする
  4. スタートにピン留めできました。

    スタートにピン留めされている

小説家になろうの表示を変更するブックマークレット 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>

Sublime Text への回帰と設定とか

回帰!

テキストエディタには、ここしばらく Atom を利用していたのですが、以前愛用していた Sublime Text回帰しました!

複数のパソコンで使用したいので設定の同期をしたかったのですが、以前は Dropbox を利用する方法しかありませんでした。でも Atom にあった GitHubGist を利用する方法が提供されてるんじゃないかと思って探したらありましたね。素晴らしい。

設定とか

Package Controll のインストール

まずは Package Controll のインストールです。以前はコードをコピペしなくてはなりませんでしたが、コンソールを起動( Ctrl + Shift + P )して package と入力したらインストールのメニューが表示されます。

Pakcage Controll のインストール

パッケージのインストール

Sync Settings

他のパソコンと設定を同期するパッケージです。 GitHubGist を利用するので GitHub のアカウントが必要です。

  1. いい具合に GitHub のアカウントを作ります。

  2. 設定画面へ行きます。

    Settings
  3. Personal access tokens をクリックします。

    Personal access tokens
  4. Generate new token をクリックします。

    Generate new token
  5. トークンの設定をしてトークンを作ります。

    トークンの設定
  6. 作られたトークンをテキストエディタなどへコピーしておきます。

    トークン
  7. Gist を作ります。

    Gist を作る
  8. 何か書かないと作れないので何か書きます。何でもいいです。 Create secret gist でいいです。

    Gist の内容
  9. 青い文字とか URL に Gist の ID が表れているのでコピペしておきます。 gist: は不要です。

    Gist ID
  10. Sync Settings の設定ファイルに下のような書式でトークンと Gist の ID を書きます。

    Sync Settings の設定ファイルを開く
    {
    "access_token": "012a345b678cd90efg1h12345h6789ij01k2l345",
    "gist_id": "38608a26c138565f95eead6fbb4493b3"
    }

    コンソールから sync とか入力していくとメニューが表示されます。設定を GitHubGist にアップロードして、他のパソコンでダウンロードして同期を取る仕組みです。他のパソコンでアップロードして~とかもできます。

IMESupport

日本語入力の際、いい具合に表示してくれます。

A File Icon

アイコンが素敵

サイドバーのアイコンが素敵な感じになります。

ApacheConf.tmLanguage

.htaccess とか Apache httpd のシンタックスハイライトとアイコンを追加します。

BracketHighlighter

対応する括弧をハイライト

カーソル位置の括弧の対応先をハイライトします。

Color Highlighter

コードに色を付ける

CSS とかの色設定に色がつきます。

ColorPicker

カラーパレット

CSS などで色のコードを記述する際にカラーピッカーを利用できます。デフォルトではアルファベットが大文字になるのですが、パッケージの設定ファイルに下のように記述すると小文字になります。

{
"color_upper_case": false
}

StringUtilities

コンテクストメニューから選択する

HTML の記号とかいろいろをエンコード、デコードしてくれます。