タグ別アーカイブ: WordPress

WPの自動成型機能で儲け損ねた阿呆の話

はい、どうも。
と、いうことでですね、今日は久々の失敗談ですよ。

このブログを始めた頃からずっと、自分の著書も含めたセルパブ本を紹介してきました。
最初は普通の文字リンクでAmazonのストアに飛ぶようにしていたのですが、他の方のブログを見ていたら、みなさんかっこいいAmazonの窓みたいなものが貼られてるんですよね。
僕はそれをどうやってやるのか知らなくて、ずっとそのままでした。
まあ、何だか広告っぽいし、自分の知らない世界なんだなあと思っていたのですね。

でも、皆さんのサイトを見ていると、あの書影が入ったリンクが羨ましくってたまらかったのですよ、実は。
かっこいいなあと思って……。

で、ある時ね、ある人に言われたんです。
何でただのリンクなの?
それ、コンバージョンに役立たないじゃない、って。

こ、こ、こ、コンバージョンですって!?

固まりましたね。その時。
もちろん、知ってる振りをしましたよ、確か。
──記憶は定かじゃありませんけどね。

で、まあ、しばらくして、それがAmazonアソシエイトという仕組みであることを知ったんです。
(多分、誰かに教わったのです)

自分としてはそういうものでお小遣いを稼ぐとかって全く考えていなかったので、とにかくかっちょいいリンクが作れるっていうだけでAmazonアソシエイトに登録したわけです。

日常必需品がたくさん候補に出てきてます
日常必需品がたくさん候補に出てきてます

ふむふむなるほど、このページでリンクを生成して、ブログに埋込めばいいんだな。
と、そこまではいいんですよ。

で、僕は考えました。
⇒いちいちアソシエイトのページでリンクを生成するのは面倒くさい!
⇒じゃ、コードをコピーしてASINだけ差し替えればいいんじゃね?

コードをコピーしてASINだけを差し替えてみたところ、ちゃんと書影は変わるし、リンクも生きているようです。
じゃ、これでやれば楽だよな〜。と思い、アソシエイトのページで生成したのは最初のやつだけ、あとはコピペで書き換えることにしました。

ま、もしかしたらそこまでは問題がなかったのかもしれません。
今となっては全て修正したので確かめる方法もないのですが(今さら戻るのも、ね)。

それから1年が過ぎ、作家の方とたまたまAmazonアソシエイトの話になりました。

「月に数百円とか、多い時は千円とかいくよね〜」
「え?」
「淡波さんのサイトだったらそのくらい行くでしょう? たくさんリンク貼ってるし」
「え?」

目が、点です。
僕のサイトでのAmazonアソシエイトは今までの累計で30円ほどだったのですから!

「それ、おかしいよ」
「ですか?」
「だって、私ちゃんと淡波さんのサイトからリンク踏んで本買ったよ。その分だけでも50円くらいになるし……」
「え……」

そこで僕は、ここ淡波ログ内に埋込んだアソシエイト・コードを調べたのです。
見たところ、異常はなさそう(細かいことは分からないし)。ちゃんと書影も出てるしなあ……、と。

ところが、クリックすると直接Amazonの販売ページに飛べないものがあったんですよね。
念のため、それを再度Amazonアソシエイトのページで生成し直してみました。

すると……、
違うんですよ、コードが!

一番大きいのは、改行を示すタグのアスキーコード(って言うんですか?)が随所に埋込まれていました。
そのせいで、全体の長さが全然違う。
アソシエイトのコードはスクリプト内にタグを埋込んでいるので、一見タグには見えない謎文字になるんですよね。

改行が

これが改行コードの化けたやつ。だよね?
これこれ……
って表示されるやつです。

僕はWordPressで記事を書く時、時々「ビジュアルモード」と「テキストモード」を切り替えるんですけれど、それをやるとWordPressの自動成型機能が働いて、勝手にコードが変わっちゃう場合が結構あるのです。
(ちなみにこれを無効化するプラグインもあるそうなんですが、時々、この自動成型機能を使ってコードを整理してもらいたいことがあるんですよね。で、オンの方が恩恵を受けることもあって……)

そのせいで、アソシエイトのコードも流用コピペを重ねるうちに汚いコードになってしまっていたんですね。

あぁあ、楽しようとして間抜けなことを──。

指摘をくださったその方がたまたま僕の本を買ってくださる予定があるというので、試しに新しく埋込み直したアソシエイトリンクの方を踏んでみてもらいました(買わせちゃって済みませんー)。

で、翌日……

Amazonアソシエイトの売上げレポートを見たら──、ちゃんと入ってましたよ!!
スゲー!

まあ、15円とかですけどねぇ。
ただ、その他にもたまたまリンクを踏んでからAmazonで買い物をしてくださった方がいたようで、その分の売上げも入っていました。

へええ、すごいなあ、Amazonアソシエイトって……。

素直に驚きました。
こんな簡単に売上げが入っちゃっていいのかなあ、って。
(だって、本が一冊売れた時の印税より高かったりすることもあるんですよ!)

リンクを踏んでから、僕の作品とは何の関係もない商品をすぐ買うと、その売上額の何パーセントかが紹介料として入る仕組みなんですねえ。
これも全く知りませんでした。あはは。
広告嫌いを公言している僕ですが、このお小遣いにはちょこっと目がくらみました……。
まあ、基本的にはブログで紹介した本のリンクを貼るだけですが、ね。

そんなことで、この秋、ちょっとお小遣いが増えそうな淡波です!
(月に数百円とかになるといーなー……←小さいw)

じゃ、今夜はこんなところで!

今週の1枚──さあ、SVGの出番だ!

svg

これは今のところ、Retinaディスプレイを備えたMacにしか当てはまらないことなのかもしれないのだけれど、実はAndroidのスマホなんかでもRetinaディスプレイを超える解像度のものがあったりします。WindowsのノートPCなどでも、高解像度のものがどんどん出ていますよね。
だから、今後はもっともっと気にしておかなければいけないことなんだろうなと思い、ちょっと記事にしてみました。

冒頭の画像は、ご存知この淡波ログのヘッダに使っているもの。
「PNG」と書いてあるほうが先週までのヘッダで、「SVG」と書いてあるのが現在のもの。
明らかに、シャープさが違いますよね。

普通のWEBページだと、大きめの画像を用意しておけばそれなりにきれいに表示されるのですが、Wordpressだとそうはいかないんですよね。Wordpress上の画像管理システムである《メディアライブラリ》に画像を登録する際、自動的に何種類もの画像サイズが生成されて、その画像を表示する端末に最適なサイズのものを自動的に選択してくれるようになっているのですよね。
これ、便利なようでいて、実はとてもおせっかいなくせ者。
(もちろん、僕がWordpressの扱いを熟知していないから、という前提もありますが、ね)

Retinaディスプレイは非常に解像度が高いため、画像表示の仕組みが通常とは違います。普通は1ピクセルを画面の1画素として表示しますが、Retinaでは縦横2ピクセル分(=4ピクセル)を1画素として表示します。画面上の1画素のサイズが細かいため、そうしないと表示する画像が小さくなりすぎてしまうのですよね。そうならないようにcss上で指定してあれば問題なく、つまり画像を用意した人が思った通りの大きさに表示してくれるのですが、Wordpressのシステムでは前述のように扱うため、ページの作者が特別なcssを書かない限りそのまんまで表示しようとします。
まあ、僕も難しいことは全然わからないのですが、なにしろ、Wordpress側が小さめの画像を用意し、それをMacが拡大して表示するという訳のわからない状態になるのです。
だから、自動的に変換、リサイズされた画像は、RetinaMacで見るといつもボケボケのものになってしまうのですよね。

これは寂しい!

そこで、ない頭を絞って考えました。
冒頭に書いたSVGというのは、Scalable Vector Graphicsという言葉の略。つまり、解像度に縛られないベクター形式の画像フォーマットなのです。これが線画などだったら分かりやすいのですが、普通の画像でもその利点が生きるかどうか、試してみたのです。
ベクターグラフィックを扱えるフリーのソフトといえば、Inkscapeです。
これにヘッダの画像を読み込み、単純にSVGで保存してみました。

すると、ちゃんとSVGとして解像度フリーになっていました。
これまではボケボケだったヘッダ画像が、ついにきれいな画像になりました!

やり方は簡単ですが、一つだけ、大事なコツがあります。

ベクター画像を扱うソフトには《アートボード》という考え方があります。
ビットマップ画像を扱うソフトで新たな画像を読み込むと、ドキュメントのサイズは《その画像のサイズ》になりますよね。
でも、ベクターのソフトでは、ドキュメントサイズはあくまでも起動した時に出る初期設定サイズのままです。
例えば、A4サイズなどですね。

Inkscape起動時のアートボード
Inkscape起動時のアートボード

そこに画像を読み込んでSVGで書き出せば出せるのですが、アートボードごとの画像になってしまいます。これでは、白い画像の中に浮いている形になり、どうにもこうにも使えません。画像のサイズもきちんと調整しないと、アートボードの外にはみ出た部分は切り落とされてしまいます。

解決方法はこちら。簡単です。

1.ファイルメニューのドキュメント・プロパティーを開きます。

スクリーンショット 2016-07-24 16.20.18

 

 

 

2.《カスタムサイズ》という項目の中に、《Resize page to drawing or selection》というボタンがあります。これを、押すだけです。

スクリーンショット 2016-07-24 16.18.33
画像を読み込んだだけではアートボードをはみ出していますが……

 

瞬時に、ドキュメントサイズが画像サイズと同じになりました。

そして、上のメニュー画像にもある《Export PNG image…》で書き出すだけです。
(Inkscapeの画像書き出しには少しクセがあります。まず《Export as..》で書き出し場所を指定してファイル名を入れ、次に《Export》ボタンを押すと書き出されます。不思議な仕様ですね……)

もし、きれいなはずの画像がボケボケに表示されてしまう現象に遭遇したら、是非、SVG画像を使ってみてくださいね!

では、また明日!

この記事が、いつか誰かの役に立ちますように!


《天使は、実在した──!》これがウワサのリアルマジックSF最新作。映画的な展開を意識した、ノンストップアクションSF中編小説です。


WEBページでも字下げしようか?

先日たまたま、WEBページ(しかもWordpress上)に載せた小説の字下げが出来ないという相談を受けました。

ふだんKDPのような縦書き電子書籍ベースで活動していると、やっぱり小説の体裁は出来る限り紙の本に近いものにしたいと思いますよね。

僕も、Wordpressでこのブログを始めた時は、記事の文章も字下げしたいと思っていたし、特に小説だったら、やっぱり段落の始まりは字下げしないと落ち着かないものです。

でも、Wordpressで文章を書いていると、行頭に入れたスペースは勝手に削除されてしまうのですよね。書いている時はちゃんと字下げされて見えていても、保存する時にシステム側が勝手に削除してしまいます。

その時僕はいくつかの方法を試してみたのですが、Wordpress上に元から用意されている書式設定では、字下げをすることはできませんでした。

Wordpressの書式設定ボタン
WordPressの書式設定ボタン

この中に《インデントを追加》という機能があるのですが、これは見ての通り、段落全体を右に下げるものです。
(まさに、この段落がそうです)。

はい、もう皆さんは気がついてくださいましたね。そうです。今回の記事は段落の始めにちゃんと字下げされていますよね(よね? 自信なさげに……)。

これは、Wordpressの《css編集》機能でちょっとだけ書式をカスタマイズして実現しました。どうしてこれを思いついたかって? 答えを言えば簡単です。電子書籍のフォーマットはepub。そして、epubの中には《xhtml》というファイルが格納されています。これ、WEBページを作成するHTMLを拡張したものですから、中身はほとんど一緒なのです。epubの書式もWEBページと同様にcssを用いていますので、「これを流用したら、もしかして出来ちゃうんじゃなかろうか?」と思ってやってみたら、バッチリ出来たというわけなのです。

管理画面内、こちらのメニューから開きます
管理画面内、こちらのメニューから開きます

 

《CSSスタイルエディター》内で記述するのはこれだけ
《CSSスタイルエディター》内で記述するのはこれだけ

 

そして本文は、このようにPタグを指定して、記載します。

スクリーンショット 2016-07-23 20.30.23

この方法、別にWordpressに限ったことではありません。WEBページはHTMLとcssで作るのが基本ですから(あくまでも基本ですが)、いろいろなところで使える簡単なテクニックかと思います。

ただしこの方法は、あくまでもPタグで区切る。つまり、段落を変更する必要があります。そうすると、字下げをした時には必ず空行が一行出来てしまいますので、短い文章で頻繁に字下げしたいような場合には、残念ながら向かないでしょう。

もし、ブログやご自分のWEBサイトなどで字下げをしたくなったら、試してみてはいかがでしょうか?

では、本日はこれまで!

この記事がいつか、誰かの役に立ちますように!

コメントと投稿

自分の投稿にコメントしているつもりはないのですが、何の間違いか、新規の投稿が連続して別の投稿のコメントになってしまいました。「最近のコメント」にタイトルが出ていて間抜けです。

どうしてそうなってしまったのか、まだ分からないのです。判明したら、また書きましょう。

まったく何の役にも立たない記事でした…。

12月3日追記。

ピンバックというんですね。投稿の内容をリンクするとそれがコメントとして残る、と。これをコメントにしないで無視させる設定もあるということですが、まだちゃんと調べていません。まあ、かっこ悪いだけで別に困らないですし。

スラッグとパーマリンク

これまで、このブログのURLはスラッシュ以下が意味不明の記号の羅列になっていました。元々デフォルトの設定では、投稿のID的な記号が入っているのですが、それは意味がないので記事にタイトルになるようにしましょう。という記述をどこかで読んだため、そんな設定にしていました。が、そうすると、文字化けしてしまう日本語が多く、訳のわからないURLになってしまいがちでした。

今日になってようやくそれの対処法が分かりました。すっごく初歩のことなんだと思いますが…。

WordPressの解説ビデオ(今回は日本語)を見ていたら、URLの末尾用にスラッグという文字列を入れましょう、という話があり、それは記事を書く時のタイトルの下あたりにあることになっていました。早速今晩、今までの駄目駄目URLを修正しようと思い、過去投稿を編集モードで見てみました。ところが、スラッグを入力するところがどこにもありません!

そういえば、「表示オプション」でチェックを入れる、って言ってたな、と思ってそこを見ても、スラッグの文字はなく。

しばらくあちこち見ていると、そういえばタイトル入力欄の下には「パーマリンク:」と書いてURLが入っています。そして、「編集」というボタンが…。ここをクリックすると、出来ました! ここに英文字で入力すれば、それがそのままURLになるのですね。「スラッグ」というのはWordPress Ver.3系までの名前で、現在は「パーマリンク」と呼ぶのだそうです。短縮URLというのもありますが、ドメイン名も表示されないのは何となく淋しいので、こちらで行きましょう。

「新作の執筆状況2」の旧URL:http://awa.newday-newlife.com/blog/%e6%96%b0%e4%bd%9c%e3%81%ae%e5%9f%b7%e7%ad%86%e7%8a%b6%e6%b3%81%ef%bc%92/

修正後のURL:http://awa.newday-newlife.com/blog/newnovel2/

素晴らしい!(今夜は全部の記事のURLを修正する元気はありませんが)

この記事が、いつか誰かの役に立ちますように!!

SEO ?

このブログがGoogle等で検索しても全くヒットしないのですが、WEBで色々調べてもよく分かりません。。Google Webmaster toolに登録したり、Word PrssにもGoogle XML sitemapsを入れたりしましたが、sitemapの送り方、というのが既に分からず。

「送るには投稿してください」という説明の意味が分からないのですが、プラグインのインストール後に何らかの投稿をすれば良いのだろうか…と思い、これを書いています。

このブログサイトの親サイトとしてnewday-newlife.comがある訳なのですが、こちらもアクセス数があまりに少なく(月に一人とかだったり…)、でもそんなものか、と諦めていました。

こちらのサイトもWebmaster toolに登録したのですが、案の定、ヒットがありません。と表示。原因を調べると、「robot.txtにより検索がブロックされている」という信じられない結果。どうしてなんでしょう?? レンタルサーバーの設定を調べてもそんなものはないし、webサイト自体も自分でhtml + css で構築したので、robot.txtなんて置いていないんですよ。。

いやあ、難しい。と言っていても何も変わらないので、まずはこの記事を投稿して、結果を調べましょうか…。

⇨投稿後、インデックスされました! やはりsitemap.xmlの送信による効果なのでしょう。ただ、親サイトにはsitemapがないので、どうしたら良いのか分からないですねえ。

Google Webmaster tool上のrobots.txt テスターを掛けてみました。どのサイトもrobot.txtは存在しないとのこと。そりゃそうだ。サーバーのルートにも何もないし。

Fetch as Googleも設定して、Googleにインデックスを送信しました。今夜はもうできることが何もないです。明日以降、sitemap.xmlの作り方を調べてみましょう。

WordPress

ブログをWordPressで始めました。

定期的に何かを更新して、来てくれた方の反応を知る方法として、ブログが最適なのかな、ということに最近やっと思い至ったのです。遅すぎですが…。

ブログツールと言えばWordPressが有名。この際挑戦してみましょうか、ということになりました。

さて、まずはインストールからだな、と思い、WordPressの日本語サイトを調べました。

ほほう、「有名な5分間インストール」などと書いてあるじゃありませんか!

どれどれ。

こりゃあいかん。5分どころか、これじゃ5日かかっても分からんぞ。

どういうことか、というと、MySQLだ、PHPだ、秘密鍵用のパスワードだ、と、専門用語がずらりと並んでいる。これを知っていて常識だと言う人は、相当ITに偏っているのではないか。これから初めてブログを始めたいと思った人が、こんな用語に親しんでいる訳はない。(一応、大体何のことなのかは分かりますが、それを「どうにかしろ」、と言われてもね…)

最新版をダウンロードして解凍したのはいいけれど、その先が分からないまま諦めました。自分で運営している自分のサイトにWordPressをインストールしたい人がみな、ITやWEBの専門家では決してないのですものね。

で、ふと思い出したのが、このサイトを載せているレンタルサーバー、「お名前.com」のサービスでWordPressインストールってのがあった。ということ。

技術的な用語への理解は一つも必要でなく、それこそ1分でインストールが完了しました。良かった良かった。

さて、記事を何か書いてみようと思いましたが、今度はどうやって記事を管理したり区分したりするのかが分からない。ですが、これは別に技術的な話ではなく、単に使い方を知らないだけなので、「WordPress Tutorial Video」などでググりました。

出てくる出てくる、山のように情報が!

選んだのがこのサイト。

http://www.wpbeginner.com/

数分程度の初心者用ビデオがてんこ盛り。1本あたり1つのトピックで、非常に分かりやすい。言葉は英語ですが、喋り方もゆっくりで丁寧なので、英語は全くダメ、という人でなければOKなのではないかな。(ユーザー登録をする必要がありますが、ログインしてビデオのページに行くと、ずらりとビデオのリストがあります)

これから、少しずつ勉強して行きますよ。