カテゴリー: ブログ制作

ブログを早く書くにはMarkdownが良い

パソコン画面イメージ

ブログを書くにはMarkdownを使う方法がある

ブログを書くにはいくつかの方法があります。WordPressの場合は次のような感じです。

  • ブロックエディター
  • ビジュアルエディター
  • テキストでHTMLソースを書く
  • Markdownを使う

今回は4つめのMarkdownを使うという話です。

簡単なMarkdownの紹介

知らない方向けに説明。Markdownというのは
「ああ、HTMLのタグを書くのが面倒!」
……という思想に基づいて生まれた簡易タグ言語です。詳しい経緯は知りませんが、だいたい合っていると思います。

例えば見出し2を作るなら、タグだと

<h2>見出し</h2>

と書くのですが、Markdownの場合は

## 見出し

と書きます。簡単ですね。行頭にシャープ記号を2つで見出し2です。同じように行頭に記号を入れることによってリストなどが「少ない労力」で作れます。

以上簡単な説明終わり。

WordPressでMarkdownを使う方法

WordPressでMarkdownを使う方法はプラグインです。

探すとプラグインはいくつかありますが、JetPackを入れている場合、オプションでオンにするのが簡単で良いと思います。

ブロックエディターとMarkdownの比較

さて。ブロックエディター。WordPressが5.0から導入した画期的らしいグーテンベルグがどういう言っているアレ。残念ながら自分にとても不評です。

良いところもあるんですよ?スマホで書く場合。スマホなので、半角全角の切り替えが面倒です。なので記号の後に半角スペースを入れるのがとても面倒くさい。

だがしかし。キーボード標準装備のパソコンの場合は半角スペースを入れるのは簡単です。特にMacの日本語キーボードの場合、英数かなのキーを押せばすぐに切り替わるので早いです。
Windowsの場合も設定でそういうキー配置に出来るようですが、最近Windowsを使っていないので、詳しくはWebで(なんか宣伝みたい)。

表にすると

Markdown ブロックエディター
スマホ 書きにくい 使いやすい
パソコン 書きやすい 重い、面倒

という感じです。が、スマホでブロックエディターが有利なのは日本語変換の問題なので、今後変わる可能性があります。

ブロックエディターの欠点

ブロックエディターにはいくつか欠点があります。

  • 重い
  • ソースがでかい(タグが増えてますから)
  • ブロック作成、削除が手間

まとめると、「重くて手間が増えている」。

そして根本的な問題。自分にはブロックエディターの利点が分かりません。重くても有用なら将来性はあります。が、見当たりません。なんで作ったんでしょうコレ?Webで調べても全然分かりません。調べ方が悪いんでしょうか?

もしかしたらリッチなメディアを使う場合には便利なのかもしれませんが、そんな凝ったことすることがどれぐらいあります?無いですよね?

思うにブロックエディターは開発者の自己満足なのだと思います。気持ちはわかります。きっと「もっとオブジェクト指向に!」とか、「今までにない新しさを!」とか思ったのでしょう。しかし、目的が無かったのだと思います。

早く書くならMarkdownがオススメ

ブログの基本は文章です。素早く内容のある文章を書く。これ以上に大事なことがあるでしょうか?なので、簡単に書けて簡単に消せる。それが必要なことです。

Markdownを使えばタグも簡単に消したり書いたり出来ます。H2をH3に変更するのも一文字追加するだけです。

WordPress:デフォルトタイムゾーンが無効です

 WordPressのセッティングの話。

 WordPressのダッシュボードにサイトヘルスステータスと言う項目がいつの間にかありました。

 どうやらWordPress5.2から追加されたサイトヘルスという機能の、ダッシュボード項目らしいです。

 そこに警告が出ていたのですね。

デフォルトタイムゾーンが無効です

 と、サイトヘルス画面に出ていました。

 なんでもdate_default_timezone_setで無効にされているとか。二重にセットされていて、それが問題のように見えました。

 微妙に心当たりが。

 スマホのWordPressアプリに下書き保存すると、その時間が投稿時間になるというクセ(バグ?)があり、後でパソコン側で加筆修正して投稿すると、過去の時間の投稿になってしまうと言う現象があったのです。

 もしかしてタイムゾーン設定のせいかなと最初思って、調べたところ、wp-settings.phpのdate_default_timezone_setの行を変えれば良いと言う情報があったので、

 date_default_timezone_set(‘ UTF ‘)を
 date_default_timezone_set(‘ UTF+9 ‘)

 にしていたのですが、これを元の「UTF」に直したら解決し、警告がでなくなりました。

WordPressのタイムゾーンを設定はなぜか二箇所ある……

 調べてみると、WordPressのタイムゾーン設定は

  • WorePress本体>設定>一般>タイムゾーン設定
  • wp-settings.phpの、date_default_timezone_set(‘ UTF ‘)の一行

 この二つがありました。

 他にもPHPの関数でやる方法もあるらしいのですが、それは置いておきます。

 なぜ二つあるのかは、調べてみても良く分からず。どっちでも設定できると言う情報もあるし。うーん……。

 とりあえず、wp-settings.phpの方は放っておいて、本体で設定で「UTC+9」にしておくのが正解だと思います。

 以上、参考まで。

ブログ復活!

 一年ほどブログを閉じていましたが、このたび復活。活動を記録するのに、なんとなく必要だなと。雑文も書けるし。

 さて、WordPressブログを復活させるにあたって、少々手間取りましたので、手順とポイントを書いていこうと思います。以下、WordPress分かる人向け記事。

WordPressを復活させた手順

 さて。ブログを再開させるには、バックアップデータから復活させる必要があります。自分の場合、BackWpupと言うやつを使って圧縮ファイルでとってありました。Webを漁ってやり方を調べると……

  • まずファイルを解凍。前のブログがディレクトリ構造のまま解凍されます。
  • その中の必要なファイルのみをサーバーにアップロード。(アップするとセキュリティ的にまずいファイルがあるらしい……調べて……)
  • サーバーのデータベースを選択して、phpMyAdmin(SQLデータベース操作するやつ)を立ち上げる。
  • インポートタブを選んで、ローカルにある圧縮されたままのsqlファイル(自分の場合はgz圧縮でした)を選択。読み込む。

○問題1:データベースが選択されていません

 ここで一つ問題発生。データベースをセレクトしていないよ!……と言われました。

 調べると、phpMyAdminのSQLタブでSQLコマンドでセレクトすればよろしいと書いてありました。が、なんやかんや操作しているうちに、やらなくても出来てしまい、自動解決。データベースのツリー触っていたからですかね?

 で、WordPressのSQLデータがインポートが完了。

○問題2:投稿記事が復活しない

 データベースが読み込めたので、今度はWordPress側です。WordPressに戻ってみると『データベースの更新が必要です』と言われたので更新。

 しかし、ここで二つ目の問題発生。プラグインとテーマは復活したものの、投稿記事がまるで無い。全然無い。

 あー、もしかして投稿記事だけバックアップ取れてなかったかな?とか思い、小一時間ほど途方に暮れたものの、思い直して『BackWpup 投稿 復活」などと検索してみた。しかし全然それらしい記事がヒットしない。うーん……。

 わからないなりに考えていると、phpMyAdminの構造はどうやらWordPressのデータ構造そのものであることに気付く。もし投稿が残っているなら、データの中にあるはず。

 で、データベースのツリーを良く見ていくと、『post』と書かれたものが見つかった。うん、どう見てもこれが記事でしょう。

 中を見てみると、以前に書いた記事のタイトルらしきものが見つかった。つまり、データはどうやらあるっぽい!

 しかし、色々調べども、全く投稿記事一覧は表示されず。また小一時間ほど途方に暮れる。

 で。ツリーを見ていて気がついた。データテーブルの接頭辞が2種類ある。『wp1』と、もう一つ妙に長いやつ。そして両方に『post』がある。

 postのデータを開いて、記事タイトルと見てみると、どうやら『wp1』の方が古い投稿で、長いやつはついさっき作ったやつらしいことが判明。

 つまり、WordPress用のデータが2つある。なぜだ(インポートしたからさ……)。

 じゃあ、どうすればいいか。消すか、データを指定すれば良さそう。と推測。

 調べました。wp-configで『接頭辞を指定する項目』がある。これだ!……と言うわけで、wp-configをサーバーでゴニョゴニョしてデータを指定すると!

 ……ついに復活!おめでとう!パチパチパチパチ!

 と言う感じで、七転八倒はしませんでしたが、二転三倒ぐらいでWordPressブログが復活したのでした。

 さて、色々整えつつ、書いたり作ったりして行きますかね。

 

WordPressでプレビューが表示されない


下書きした記事のプレビューが出ない症状でしばらく悩んでたんですが、色々いじってるうちにサイト自体が表示されなくなり……おーい

探ってみるとキャッシュがどうこうと言う記事を見つけました。キャッシュ……(プラグインが怪しい)……と言うことでWordPressのキャッシュ系のプラグインを停止。直ったー。

WordPressは便利なプラグインがいっぱいありますが、そろそろバージョンも上がって最適化されて来ているだろうし、なるべく素のまま使うのがいいかもしれませんね。プラグイン止めてみましたが、体感変わらないし。

レスポンシブデザインに対応

ReponsiveIM

まあ……大体出来た……かな。iPhoneからでも使い易くなりました。

レスポンシブデザインとは何か

PCとかiPhoneとか、タブレットとか世の中には色んなサイズの端末があります。

これをCSSを工夫することによってなんとかサイズの違う多様な端末に対応したデザインにしようと言うのが、レスポンシブデザインになります。

詳しくはこの辺読んでもらうとして。

ブラウザの幅を変えてみてもらえれば成果が分かると思います。

何をやったのかと言うと

  • 画面幅が小さくなったら display: noneでサイドバーを消す
  • それより小さくなったらメインの幅を%に
  • トップイメージの画像や文字の位置を%で指定。
  • サムネイルの大(size-large)と中(size-medium)を%表示に
  • iPhone用にヘッダーにメタタグを記述。
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

みたいなことを作りながら1コ1コ対処してみたらなんとなくそれっぽくなりました。

基本的に幅さえなんとかすればなんとかなります。高さはautoで十分です。

メディアクエリー

画面の幅でCSSを切り替えるのにはメディアクエリーと言うのを使います。
ソース書くとこんな感じ。

幅600ピクセルを超えると幅がauto(本来のサイズ)に切り替わります。

img.size-large{
	width: 100%;
	height: auto;
}
@media screen and (min-width:600px){
	img.size-large{
		width: auto;
	}
}

padding……

なんかいくらやっても横スクロールバーが出やがりまして。凄く謎だったんですが、paddingのせいでした。

paddingと言うのはdivとかの枠の内側に余白を持たせるCSSなんですが、これが元の幅に”足して”サイズを決定するものなんです。

例えば幅300ピクセルにpaddingを左右20ピクセル入れようと思ったら、幅を260ピクセルに変更しないといけません。……誰なんでしょうねこの仕様を考えた人は……。

という謎仕様によってあちこちに微妙なズレがあったんです。最終的にほとんど使わないことにしちゃいましたけど。いや、強敵だった。レスポンシブデザインの大ボスがpaddingだったとは。

もしやってみて、何故か横スクロールしてしまうと言うときはpaddingとかで何かはみ出てないかチェックしてみるといいかと思います。

分かりにくいサイト、分かりやすいサイト

Webで色々やり方を調べていると、教えてくれるサイトというのが沢山あります。プログラムとか絵とかストーリーとか。

大変有り難い存在なのだけれども、何度もそう言うサイトを巡っているうちに、妙に分かりやすいサイトと、いくら読んでもなかなか合点がいかないサイトというのがあるのに気付きました。

凄い懇切丁寧に書いてあるんだけれど、まるで頭に入らないサイトというのがあるんです。

続きを読む

[Mac] Mars Edit お試し中

Mars Edit

ブログエディターと言うもの

試しにMacな記事を書いてみる。

ブログを書くのがラクになるという噂のブログエディター、Mars Edit (Mac)をお試し中。

今のところいいなと思っているところは、

  • 画像を投稿と同時にアップロードしてくれること。
  • オフラインでエディット出来ること。
  • スピード。軽い。

かな?

労力の削減という点で言うと、画像を同時にアップロードしてくれると言うのはありがたい。リサイズもしてくれる模様。

スピード。タグで書く場合だけど、プレビュー画面を横に出して結果を見ながら書ける。

Rich Textモードでも書ける。まあ、ソースを汚したくない場合は普通のテキストモード(HTML)かなー。

欠点もあります。

今のところ分かっているのは、画像がベタ貼りだということ。
WordPressで貼ると、サムネイルになって、画像ファイルにリンクが貼られるのですが、それがありません。
もしかしたらまだ知らないところにそんな設定があるのかも知れませんが。

さて、どうしたものか

確かにメリットあるけれど、どうかなー。スーパー凄い便利ソフトという感じでもない(個人の感想です)。タグ書くの好きな人ならいいけれど、別に好きじゃないんだからねっ(誤解される書き方)。
えーと、Mac App Storeで3450円ですか…考えよう…。

理想としてはタグ書かずにソースが汚れなくて、ついでにお絵描きとかも出来るソフトがいいんですが(無茶言ってる)、Adobeさんあたりが作りませんかそうですか作りませんか。

お試しは下のリンク、Red Sweater Softwareさんから30日限定版がダウンロード出来ます。

Red Sweater Software

ブログを1コにしようかと

azu.png

色々検討中なのですが、ブログをマゼマゼにしようかと検討中。

今、他でプログラム系のブログがもう一つあるのですが、あれも「モノ作る系」だし、混ぜちゃってもいいんじゃないかなーっと。

それと、興味のあることって結構遷ろいますから、個人ブログだし、相当逸脱しない限りはMacとかiPhoneとか興味のあることは何でも書いちゃってもいいんじゃないかと。

そんな感じでしばらくジリジリとテストしてみます。


改装中だったりする

改装中です。

自作テーマ作ってまして、まだちょっと完成してないんですが、あまりにブログが使いにくかったので他の人が配布してるテーマにちょっと変えてしまいました。んで、今まで特殊なテーマ使ってたので、ギャラリーが表示できなくなってます。

という訳でしばらく絵は無いっすー。データは残ってるはずなので何とかなるはず。ならなかったら再投稿かなー。

絵だけ並べるってのも、もう一つページとしてどうかなとも思うので、形式変えてやるのもありかなと思ってます。