カテゴリー別アーカイブ: WordPress

今週の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中編小説です。


コメントと投稿

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

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

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

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を修正する元気はありませんが)

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

Twitterと連携

WordPressのプラグインで、Twitterと連携(記事の内容を自動的につぶやく)という機能を追加してみました。使い方がまったく分かりませんでしたが、こちらのサイトに丁寧な解説があり、スムーズに設定できました。

さて、この書き込みがTweetされれば成功ですね。

30秒後、確認。成功です。ちなみに、ブログにTwitterボタンを付けるプラグインも入れました。今までのすべての記事にも自動的にボタンが付いたようです。

記事の更新がTweetされるかどうかも試してみましょう。

10秒後、確認。Tweetされています。ということは、頻繁に更新すると、その度に「Post Edited:」というTweetが載ってしまうことになりますね。これはFollowerに優しくない設定かも。

この記事編集ページ内(もちろん、ブログを読んでいる方には見えない場所ですが)に、WordPress to Twitterの設定画面が埋め込まれていて、そこから直接つぶやけるようにもなっています。そこに、「Don’t tweet post(この投稿をつぶやかない)」というボタンがありました。それを押した状態で、この記事を更新してみましょう。

やはりつぶやかれていますね。んー、新規の記事でないと適用されないのか、それとも設定画面内のカスタムつぶやきにしか有効でないのか? いや、にしても、つぶやくためにカスタム画面があるのだから、ブログの記事に対して設定が効かないと変。次、新規でつぶやく時に試してみます。ただ、そうすると、何度か投稿を編集した後でTwitter連携させたくても連携できない、ということになりそう。ひょっとして、そこを便利にしたければ有料版を買いなさい、ということなのか?

$39。微妙な価格ですね。

ブログ記事は一旦公開してからどんどん更新できるところが便利で気に入っていたのですが、内容が固まってから公開したほうが、Twitter連携としては良さそうです。

■再度確認。あれ? つぶやかれていません。

ここでちょっと考えました。WordPressは記事を書いている途中で、どんどん下書きを保存してくれます。恐らく、書いた内容が既に保存されていると、その後でDon’t Tweet Postをオンにしても反映されないのでしょう。

ちなみに、新規の投稿をつぶやいたもの以外のTweetは勝手にTwitterから消えていました。Don’t Tweet Postを押した状態で更新を始めると、新規投稿以外は消されるのかも知れません。

暫くこの感じで使ってみます。

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

またまたヘッダ画像を追加

『さよなら、ロボット』“書店前の行進”
『さよなら、ロボット』“書店前の行進”

お気に入りシーンの一つ。閉店後の書店ですが、ロボットが低い陽を浴びています。朝焼け、ということにしておきましょう。書店のウインドウには『壁色のパステル』のポスターが貼ってあったりしています。予告編でも写っていますが、分かりませんでしたね。楽屋落ちですが。

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なのではないかな。(ユーザー登録をする必要がありますが、ログインしてビデオのページに行くと、ずらりとビデオのリストがあります)

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