WordPressへの軌跡 初心者が辿った道-2/2

はい。続きます。私の愚痴みたいな話。

前回の話↓↓

サイトを作る

やっとこさ本当のスタートラインに立ちました。

で、何から始めんの?と言っても分からないのでとりあえずはカズタイズ画面の一番上から順番に設定していってみる。

owp_customize
OceanWPのカスタマイズ画面

ざっと見ても分かるように項目が沢山ある。更に一つの項目の中にまたいくつかの項目が。

上から順番に設定していっても、ほとんどの設定が何なのかよく分からん。ライブドアで表示してたみたいに表示させたいけど、どこから手を付ければいいかも分からん。
唯一、理解できるとこが色設定。
サイト内の色んな場所の色を設定するんだけど、色を選ぶとこも沢山あれば色の種類もすごくあるんだよね。記事が書いてある背景の色は白以外(白は目が痛い)とは決めてたけど、他のとこなんかは何色にすればいいか分からないから、とても手こずる。

こういうのは性格もあるのかな?
テーマカラーみたいなのを決めても、後から途中で何度も色を変えたくなる。しかも全然違う色じゃなくて、ほんの少し薄いとか、ほんの少し濃い、ほんの少し青が強いとか。「で、どこをどう変えたっけ?」と自分でも思うぐらいの微小な違い。色の設定は今でもチョコチョコ触ってるから、終わりが見えん。

色に時間を割きつつサイトは作っていかなきゃいけない。
サイト作りって言っても、私の場合は大半の時間が検索に充てられてて、実現したい機能や表示方法の構文(PHP,HTML,CSS)を探してきては試してみて、分からない言葉を理解する為に検索してとその繰り返し。何が大変って分からない事があり過ぎてる状態なのと、3日以上前に調べた事は記憶されない事だわ。

「あれ?この問題、前にも経験したけど何だった?」とか「この言葉、前にも分からんくって調べたけど何だっけ?」とか同じ作業を何度やっても3日経つと、どっか行く。記憶野さんよ~。どうなってんの?

データ転送

サイトを作りつつ別で作業してたのはデータ転送。

「検索して試して」とか「分からない言葉を調べて」というのを嫌になる程、繰り返してたので息抜き的に色を触ったり、転送したデータの記事を修正したりしてた。
これが全く息抜きにならん事態になったけど。

記事のアドレス末尾は変えん方がいい!

テータを転送するなら、これに尽きる。記事数が少ないならいいんだけど、私の場合60記事近く?あったので記事内のアドレス変更は一括で変換できるようにした方がよかったの。

アドレス末尾について、ちょっと説明

過去記事にパーマリンクの設定について触れてたけど。

触れてないか?スラッグの事か。
パーマリンクはURLの構造を示してるアドレスの後に続く文字列?識別させてるやつ?管理システムみたいなの?私もよく分かってませんが、私の認識はアドレス直下に続く記事を種類分けさせてる文字列です。

現在のページだと
https://neko-siriana.work/blog/everyday/blog/the-path-followed-by-beginners-2_2
で、水色背景の「everyday」は親カテゴリ、青色背景の「blog」は子カテゴリ、黄色背景の「the-path-followed.....」は記事タイトル(スラッグ箇所)、となってます。

私はカテゴリで分けてるけど、投稿日の人もいるし複数人でサイトを運営しているなら投稿者名でもいいし、自分が分かれば何でもいいかと。

例えばライブドアでの記事のアドレスが
https://neko-siriana.blog.jp/archives/1234567.html

WordPressでの記事アドレスは
https://neko-siriana.work/blog/親カテゴリ/子カテゴリ/記事タイトル
こうなってて、まるでアドレスが違う。上から下まで全部違う。

画像の場合のアドレス(パス)

画像も同じ、と言えば同じ。インポートした時についてるタイトル(ファイル名)がそのままアドレス末尾にくっつくから、ライブドア内で使ってる画像タイトルのままであれば一括で変更が出来たの。

https://livedoor.blogimg.jp/neko_siriana/imgs/-/-/cb57cb6b.png(以前の画像アドレス)

https://neko-siriana.work/blog/img/hair_front_model_illus.png(現在の画像アドレス)

 

何がこれで困るって内部リンク、画像差し替えの時だよ。

記事をインポートしてからカテゴリの設定やタグを付けたりというのは手動でやらないといけないのかな?私は手動で設定してた。記事毎にカテゴリを設定した時の新しいアドレスは
https://neko-siriana.work/blog/親カテゴリ/子カテゴリ/*******.html
これで終わっておけばいいものをスラッグ部分にあたる*******.htmlを全記事、変更してしまったので後で内部リンクのアドレスを変更する時に一括で置換出来ず、一記事ずつ変更してた。

mokumoku
今、改めて引っ越し方法のHowto記事を見るとしっかり説明してるわ。あの時も参考にはしてたけど、多分「データをエクスポートしてインポートすればいいのか」だけの認識だった。置換方法もサイトによって違うけど記事と写真を一括で置換する方法を書いてるここ↓↓は参考になる。もう遅いんだけど。

gazocustomize.com

当初は「変更なんて、軽い軽い」という安易な考えだから、わざわざ記事のスラッグを変えたり、画像のタイトルを変えたけど、全然軽くない。面倒で仕方なかった。何度も「インポートし直そうか」と頭をよぎったけど、それもまた面倒だし、八方塞がりというか。過去記事に関しては修正していかなきゃいけないんだけど、見るのもうんざりしてた。

これらアドレスと画像の差し替えをしながら更に修正してたのは、ライブドアブログについてる「リッチリンク」という機能。これはリンクカードとかブログカードと呼ばれてるもので、リンクを貼るとカードみたいに表示してくれる機能。(上にある)

外部サイトがテキストリンクだけなら、問題ないんだけどリンクカードで作ってるのは、その機能をライブドアから拝借した状態での表示になっちゃうのかな?いまいち分かってないんだけど、自分のページを見るとライブドアの機能を読み込んでリンクカードを表示してるようだったので、これも直すことに。

mokumoku
今さら調べてみたけど、ほっておいてもいいのかなぁ?よく分からんな。この作業も相当、面倒臭かった。一括で変換できるようにPHPで変換する方法をとってる人もいるし、ワードで置換する方法もあるみたい。

私の場合は、内部リンクの修正時にプラグインのPz-LinkCard(開発者 ぽぽづれ。さんのサイト)を入れたので、修正ついでに外部リンクのリンクカードも修正。うん、まぁ全然ついでという気軽な作業では無かったけど。

編集方法でのトラブル

過去記事を修正していく、と言ってもたかだかアドレスの変更、画像差し替え、リンクカード差し替え。コピペで済む事ばかり。

なのに、プレビュー見ると変なんだわ~もう。

画像と文字の間隔がみっちりだったり、吹き出しの画像をよく使ってたけど、それがおかしな位置にあったり、改行がちゃんと入って無かったり。あと、記事内に貼ってる楽天の商品画像とテキストが隙間だらけだったり。

まともな記事がほとんどない。

これもまた一つづつ修正しようとしてたんだけど、編集方法が2種類あって新規投稿での編集はグーテンベルグという編集。過去記事を編集しようとするとクラシックでの編集となっていた。

これが最近まで頭を悩ませ、同じ記事を何度も修正する事になる原因にもなってたんだけど、調べると以前のバージョンではクラシックエディターという編集方法で、現在の編集方法はグーテンベルグ(ブロック編集)という編集方法になってる。

グーテンベルグとクラシックの違い
引用:WEBST8 【Classic Editor】WordPressを旧エディターに戻す方法

上の添付画像は編集画面の画像。左側の方が馴染み深い人も多いんじゃないかな。

グーテンベルグ(ブロック編集)とクラシックエディターでの大まかな違い

ざっくりだけど、下画像はブロックで編集した時の文章や画像のつくり。

ブロック編集画面
ブロックで編集した場合のビジュアルエディタ

この下はクラシックエディターでのつくり。ブロックと違いひとまとめになってる。

クラシック編集画面
クラシックで編集した場合のビジュアルエディタ

ビジュアルエディタだと見た目はさほど変わらんが、テキストエディタで違いが出る。

ブロックは段落毎で編集できるから、一部をHTMLで編集したりビジュアルで編集したりと出来る。
クラシックだと一塊での編集になってしまうので、これをHTMLで編集しようとすると......。

<p>少しだけ、<b>毎日更新</b>やってみたけど無理だな。</p>
<p><span style="font-size: 125%;">毎日、毎日そんな頭ん中から何かかんかは湧き出てこん。</span></p>
<p>一番問題なのが、一つ気になるとこが出てきちゃうと<span style="font-size: 125%;">書ききるまで他の事に手をつけられない事。</span></p>
<p>書いてるうちに面倒になってきた頃には一日なんて<b>潰れてる</b>ので、<span style="font-size: 125%;">やらなきゃいけない事が手つかずになってる事</span>だわ。</p>
<p>途中まで書いて保存してあるのも<b>ゴロゴロ</b>いて、それも出してやらなきゃいけないんだけど、書いてた頃の<span style="font-size: 125%;">熱量は枯渇</span>してるから、続きを書く気が出てこんし。</p>
<p>不定期にすると、そのまま止めてしまうので基本週5。やれたら週6、週7。</p>
<p>なんか、なぁなぁになりそうだなぁ。</p>
<figure class="figure-image figure-image-fotolife" title="セツの寝顔">[f:id:はてなID:----:plain:alt=setu]<figcaption>美猫のセツ</figcaption></figure>
<p>手つかずの仕事を見た時は、正にこういう気分なのだよ。<br>
寝顔が酷い美猫、セツ。
<a class="twitter-follow-button" href="https://twitter.com/setsunegao?ref_src=twsrc%5Etfw" data-show-count="false">Follow @setsunegao</a><script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="*****"></iframe>

こんなんになる。この記事は文字数が少ないから、こんなものだけど「長すぎるでしょ!」という記事もあるからね。ただ、この方法はライブドアでも同じなんだよね。ビジュアルエディタとテキスト(HTML)エディタで切り替えしての編集。

またブロック編集だと文字の一部を編集できないというのも私には問題だった。下に見本。

ブロック編集の機能「タイポグラフィー(文字設定)、色設定」での表示

ブロック内で文字の一部を大きくしたり、色を変えたりは出来ません。ちなみに背景色もな。

ブロック編集の機能「HTMLとして編集」での表示

この文章をブロック編集で実現するにはHTML編集せねばならん。

実際の編集画面ではこう見えてる

<p>この文章を<span style="font-size:20px;">ブロック編集
</span>で実現するには<span style="background: linear-gradient(transparent 60%, #0693e3 0%);">HTML
</span><span style="color:red;">編集
</span>せねばならん。
</p>

先に書いたけど、過去記事を編集しようとした時はクラシック編集になっていたので、そのまま編集しようとしたんだけど機能が少ない。全文、HTMLからの編集は避けて通りたいので機能を増やすプラグインを入れる。

何故かビジュアル編集で改行を入れたり、無くしたりすると反映されない時がある。反映されても再度、編集すると改行が増えたり、減ったりしてる

「意味が分からんなぁ」と思いブロック編集を使おうかと思い練習をし出す。

何度も同じ記事を修正する。何巡目かの修正の時にテキストで編集すれば、きちんと反映される事に気付くが再編集ではやっぱり改行が出てくる。

「ブロックでの編集が使いやすい」と思えるぐらいブロック編集に慣れてくる。

もう本当に何巡したのか分からないけど、クラシック編集からブロック編集に変更できる事に気付く。

飛躍的に改行問題が解決。反映されない、再編集してしまうと何故だか減ったり増えたりする改行がブロック編集に切り替えて、問題箇所のみHTMLで編集してやると、ちゃんと反映され再編集しても変な改行が入らない。

ここから、再度記事全文をチェックし過去記事に関しては修正完了。この期間が約1カ月。
手動で一記事ずつコピーした方が早かったよね。きっと。

ぬるっと完成

過去記事を修正してる間にサイト作りの為の検索もカチカチカチカチやってて、何とはなしに形になっていってた。

何か、劇的に変わった瞬間というのがないし細かい調整を全て完了してから、となるといつ終わるか分からないので、とても中途半端な状態で公開してるんだよね。

今でも直さなきゃいけないとこが何点かあって、多分それを解決する前にまた別の問題が増えてく気がするぐらいにキリがない。

やったぞー!という達成感は未だ無いけど、結果何だかんだ文句を言ってた割に楽しんでたってことよ。

この期間、恐ろしいぐらい暇だったので(この月の収入は考えたくない)たっぷり時間を割けたけど、流石に「PC見たくもない!」という数日は、ずっと「子連れ狼」を見てた。原作:小池一夫・作画:小島剛夕のタッグは面白いなぁ。他にも「首斬り朝」「春が来た」「半蔵の門」などなど。
無料漫画サイト?というのかな、ああいうサイトの漫画は古い漫画が置いてあったりするから嬉しい。

kindle unlimitedの会員だったら読み放題。

1話毎に広告入るが無料で全話読める。

www.sukima.me