「最大行表示エディター」を無効化、AFFINGERブログカード、エラー修正等

投稿日:2018年2月14日

今回もサイト完成に向けたカスタマイズの諸々の作業をしていきます。
 

プラグイン『Preserve Editor Scroll Position』

まずはビジュアルエディター関連。 記事執筆画面のことですね。

直接ブログの運営とかに関わってくる部分ではないのですが、最も使用頻度の高い機能ですので、やはり快適に使えるに越したことはないはず。

特に私は話を短くまとめるのがどうも苦手だったようで、毎回4000字っくらいは軽くいってしまい、この間は1万字超えてしまいましたし(^^;
 

で、文字数が多くなってくると一気に書き切ることができなくなってくるんですよね。
間に休憩を挟んだり、日をまたいでの作業になったり…

そうすると「下書きとして保存」をこまめに使うことになるんですが、この「下書きとして保存」を押す度にエディターのトップまでスクロール位置が戻ってしまうんですよ。

そのまま作業を中断するならまぁ良いのでしょうが、すぐに続きを書き始めようとする場合には編集箇所までスクロールしなおさねばなりません。 ちょっとイラッとしますよね?
 

この「下書きとして保存」時、及び「公開」時にスクロール位置を固定してくれるプラグイン、それが『Preserve Editor Scroll Position』
 

…ここまで書いといて何ですが、私はそんなに下書き保存時のスクロールリセット自体は気にならないんですよ。

私が気になるのは、別タブや別ウィンドウを見て戻ってきた時にスクロール位置がおかしくなってる時があるってことなんですよ!!
…ありません? ありますよね??

なのでその際のスクロール固定用のプラグインとか探していたんですが、これしか見つからなかったので、この『Preserve Editor Scroll Position』でついでに改善できたりしないかなぁー…なんて。

 

それでは『Preserve Editor Scroll Position』を使ってみようかなーと思ったんですが、どうやらこのプラグインを使うには、「最大行表示エディターと集中執筆モード機能」を無効化する必要がある、とのこと。

はて? なにやら聞き慣れない言葉が出てきましたね…(;´д`)
 

「最大行表示エディターと集中執筆モード機能」

これらは本来別々の機能なんですが、有効/無効化の際は一括のチェックボックスにて設定するようです。

場所はちょっと分かりにくいのですが、エディター画面の上部にある「表示オプション▼」で展開したオプションメニュー内の「最大行表示エディターと集中執筆モード機能を有効化します。」のチェックボックスです。

ここのチェックを外しておけば、『Preserve Editor Scroll Position』プラグインが使用できるようになるみたいです。

 

でもそもそもこの「最大行表示エディターと集中執筆モード機能」、ってのはなんなんでしょ?

というわけで調べてみました。
 

「最大行表示エディター」

まずは「最大行表示エディター」。

これがオンになっている場合、エディター内のテキストが長くなるとテキストエリアそのものが自動で伸びていく仕様。

私は今までデフォルトのこの仕様で記事を書いていたんですが、伸びたテキストエリアをスクロールする際には、テキストエリアの外のエディター画面のスクロールバーを使用しなければならなかったんですよね。
これがとにかく不便。 私が今使ってるマウスはコロコロ(スクロールに使うヤツ)が壊れてるんですよ…

さらに、テキストエリアの上にある記事タイトルや下にある設定項目を使おうとしても、テキストエリアを一番上(下)にまでスクロールさせないと表示されないというハッキリ言ってクソ仕様。
 

ところがこの機能をオフにすると、テキストエリアの高さはテキストの量によらず固定され、テキストが長くなった場合にはスクロールバーが表示されるという仕様。
まーこれが「一般的な」仕様かと。
 

言葉ではよく分からんでしょうから、以下にテキトーなスクショを。

「最大行表示エディター」オン
「最大行表示エディター」オン

「最大行表示エディター」オフ
「最大行表示エディター」オフ

 

「集中執筆モード」

続いては「集中執筆モード」。

これはなんとなく分かりますね。
なんか周りのウィンドウが消えてテキストエリアだけが画面に表示されるようになるヤツですよね。

これって以前のWordPressではデフォでこうなるようになってませんでしたっけ?
ちょっとウロ覚え(-∀-`;)
 

今は「集中執筆モード」のアイコンを押すことでそのモードに切り替わる仕様みたいですね。
バージョンアップで変わったんかな?
私がなんか設定いじったんだったかなぁ?

ま、いいや。 こっちもテキトーなスクショを。

「集中執筆モード」

 

――というわけで、この2つの機能をオフにしておきました。 『Preserve Editor Scroll Position』プラグインを使用するために。
 

そしたらですね、めっちゃくちゃエディターが使いやすくなったんですよ!!

上記の「最大行表示エディター」を無効化した効果ですね!
 

特別なにが便利ってわけじゃあ無いんですが、今までのエディターが不便すぎたんですね。
でもWordPressってこういうもんなんじゃろうと割り切っていました。

いやーもっと早く知りたかった。
 

で、肝心の『Preserve Editor Scroll Position』なんですが……

なんかエディターが使いやすくなったことでもう満足しちゃいまして…
 

けっきょく入れませんでした。 テヘペロ

 

画像注釈ソフト『Screenpresso』

さて、ついでにこいつの話もしておきましょうか。 ほんとについでですけど。
 

先ほど載せたスクリーンショットなんですけど、画像内にちょっと矢印とか入れたかったんですよね。 ブログやってりゃそういうことありますよね?
皆さんはそういう時どうしてます?

たぶん大抵の人がフリーの画像編集ソフトあたりなんじゃないかと思いますが、私は一応『Photoshop』を使っていたんですよ。 生意気にも。
 

フォトショの説明はいらんですよね?
画像編集ソフトのとてもいいやつで、まーだいたいのことはできるんじゃない?

ただその分操作が複雑で、仕事とかで使う人でもない限り使いこなすのは難しいのではないかと…。
私がポンコツなだけ?
 

ともかく、そんな複雑な画像編集とかじゃなくて、文字とか矢印とかを軽ーく入れたいってだけなのに、フォトショはいちいちメンドくさいんですよ。

そこでなんかそういう簡単な画像編集(どうやら「画像注釈」というらしい)に特化したフリーソフトでも欲しいな、ってなったわけですよ。
 

んでまーネットでなんやかんや調べた結果、『Screenpresso』(スクリーンプレッソ)というフリーの画像注釈ソフトをインストールすることにしました。

ただし、使用には『.NET framework 4』以上がインストールされている必要あり。
 

このソフトで何が出来るかとか使い方なんかは書き出すと長くなるので、気になる人は自分で調べてください。(いつもの丸投げ)
 

私が使ってみた感想としては、かなりお手軽に画像注釈が行なえるようになったので入れてみて良かったです。

が、ファイル操作関連の動きはちょっと良くないですね。 だいぶクセが強い。

まず編集したい画像の開き方が分からんし、アプリとして立ち上がらずタスクトレイに常駐という形をとる意味も分からん。

保存するファイル形式も選択できんし、「保存」ボタンを押してもワークスペース上のファイルの上書きだけで元画像は変更されてなかったりでいちいち「意味が分からん」。

あと、これはフォトショとの比較になってしまいますが、矢印や楕円といった図形の扱いは確かに優れていますが、文字に関してはフォトショのがやりやすいですね。 慣れによるところかもしれませんが。

画像の圧縮とかもしてくれないっぽいので、個人的には基本はPhotoshopで、図形を入れたい時だけ『Screenpresso』って感じですかね。
これ一つで何でも、とまではいかなそう。

 

その他ブログカスタマイズ

残りはちょっとしたブログカスタマイズを備忘録程度にまとめておきます。

今回のはカスタマイズというよりひたすら「修正」って感じでした(-_-;)
 

AFFINGERブログ風カード

まずは私がこのサイトを作るのに使用しているWordPressテーマ『AFFINGER4』の機能の1つである「ブログ風カード」。

↓こんなのです

HG エールストライクガンダム 【レビュー】

  HG(ハイグレード) 『エールストライクガンダム』 の素組みレビューです。 ●センサー部にハイキューパーツ製「センサー用偏光シール ミラージュ」を使用 ●アンテナ、翼先端部の安全基準フラッグの切除 ...

続きを見る

こいつを前回の記事で初めて使ってみたのですが、かなり良いですね!
今風のブログって感じ?
 

でもできれば私はこのブログカードをクリックした時、別タブで開いてほしいんですよ。

記事途中に貼ったブログカードからその記事を読んでもらえるのは嬉しいのですが、読み終わった後に元記事の続きを読もうと思ったとき、ブラウザの戻るボタンでしか戻れないってのは煩わしく感じません?
少なくとも私はそういうブログは嫌い。

 

なので、このブログカードを別タブで開く方法を調べてみました。
…ま、先に結果を書いておきますと、できませんでした
 

他のWordPressテーマはどうだか知りませんが、AFFINGER4でブログカードを作るときは、[ショートコード]ってのを使うんですよ。

このショートコードには "id"、"label"、"name" という入力欄っぽいのがあるんですが、 "id"は挿入したい記事の記事IDなんですが、残りの "label" と "name" ってのは何に使う物なのかさっぱり。

公式マニュアルにもこれ書いてないんですよね…。
というよりそもそもこんな入力項目載ってもいないんですよ。 あるのは "id" だけで。

他のAFFIGER4の使い方を説明しているブログをいくつか見て回りましたが、同じく "id" の説明しか無い。
AFFINGERのバージョンによる違いなのかなぁ…?

この項目がもしかしたら別タブで開く機能だったりするのでは? とマニュアルを探してみたのですが、結局使い方すら分かりませんでした(T-T)
 

3月5日追記

上記についてお問い合わせをいただきました。
当方で使用しているAFFINGER4は、単品購入した通常版のAFFINGER4で、記事執筆時点での最新バージョンを使用しています。

 
最新版で追加された、ショートコードで記事内での装飾を色々と使い分ける機能と似たコードの書き方だったので、マニュアルからいくつか抜き出して fontawesome のアイコンやカラーコードなどを書き足してみたりもしたんですが、ブログカードの見た目・機能に変化はありませんでした。
 

まーここは空欄のままでも問題なく使えてるので、他の方法を探してみることにしました。
…たぶん label や name でそんな機能面での違いが出るとも思えませんし。

 

調べて出てきたのは、WordPressに共通したリンクを別タブで開く方法でした。

<a href="" target="_blank">

とかいうコード(?)を書けばいいらしいです。
 

target="_blank" って聞いたことありますね。

AFFINGER管理画面の中の、「 記事内の外部リンクを別ウィンドウで開く(target="_blank"を付与)」 という設定項目で見かけました。
AFFINGER4なら「外部リンク」ならこの設定で一発で別ウィンドウで開けるんですが…、今は内部リンクをどうにかしたいんですよね。
 

で、この target="_blank" の中にAFFINGERブログカードのショートコードを入れてみたんですが、ブログカードが表示されたりされなかったりしただけで、別タブで開けることはありませんでした。 くそが。

どうやらショートコードってのはそういう使い方をするもんじゃないっぽい系??
なんかテーマを変えたら前のテーマのショートコードは使えなくなるらしいとか?
私は根本的なところで勘違いしてるくさい。

 

今から一からコードのお勉強をしてる時間は惜しいので、諦めることにしました。
一応、

<base target="_blank">

とかいうコードなら、ページ内の内部リンクを全部別タブで開けるようになるようですが、それはそれで不便ですよね…(;´ェ`)
 

どうやら私の技術でどうこうできる問題ではなさそうなので、おとなしくAFFINGERのアップデート待ちですかね。

ネットで見た感じ、「内部リンクは同タブで。外部リンクは別タブで。」 みたいのが一般的な考え方らしいので、実装されるかは期待薄ですが…

 

『Broken Link Checker』のリンクエラー

次はプラグイン『Broken Link Checker』が吐き出していたリンクエラーの修正対応の件。

[リンクエラー]のページを見ると、「リダイレクト」に8件のリンクがヒットしていました。 まぁ、リダイレクトなだけマシではありますが、放っておいてもいいという問題でもないでしょうし、なんとかせねば。
 

リダイレクトされていた理由はいくつかあったのですが、①つ目は、「パーマリンクが変更されたページへのリンク」

このサイトは未完成のため、ちょくちょくページを作ったり消したりしていたので、こういうのも起こって当然ですね(^^;

でも、新しく設定しなおしたパーマリンクへ自動的にリンク先が切り替わっていたので、問題ないっちゃー問題ない、のかな? よくわかんない( ゚ 3゚)
 

そんでまーリンクの古いパーマリンクを新しいパーマリンクへと書き換える必要があったわけですが、私はてっきりこの古いリンクの書かれた記事ページの編集画面まで行って書き換えなければいけないのかと思っていたのですが、どうやらこのリンクエラーの画面から書き換えができるみたいですね。 これは便利!

 

②つ目のエラーは、「SSL化の際にhttpsを付け忘れた画像」
これもリダイレクトで http から https に自動で変わっていたのですが、簡単に修正できるのでパパッと。

リンクエラーから「URLを編集」で、 http に "s" を付け足すだけ。

まさか付け忘れがあったとは思いませんでした。
そもそも http のリンクが残っていたら、そのサイトは「完全な保護」状態(緑色の錠マーク)にはならないはずでは?
この『ガンプラ気分(仮)』は緑錠が付いていたので https化には成功したもんだと思ってましたが…
リダイレクトされてればセーフ、ってことかな?
 

最後の③種類目のエラーは「アドレスの変わった外部リンク」

これはWordPress設置時に勝手に置かれていたサンプルページ(私はまだ残してある)に張ってあった外部リンクです。 「Gravatar」とかいうサイト。
どうやらここのアドレスが少し変わったみたいです。

どうせサイト完成時には削除しているページなので、ここは「リンク解除」ボタンを押してただのテキストに変えておきました。

これも便利なコマンドですよね。
このリンクが張ってあるページのリンクを一括削除できるわけですから。

 

本来はこれで終わりだったんですが、この記事を書いてる間に、初の「リンクエラー」が検出されました。 リダイレクトもされてないガチのやつ。 「404 Not Found」というヤベェやつですね。

といってもこれには心当たりがあるんですけどね。
前回のブログカスタマイズで固定ページを1つ削除しましたから。
なのでコレは④「削除されたページへのリンク」。 ある意味王道エラーとでも言いましょうかw

これも新しいリンク先となるURLへ書き換えて、エラーチェックはこれにて完了!(`・д・´)ゞ

 

サイトマップエラー

こちらもまたエラーの修正。

おなじみ 『Google サーチコンソール』 にてサイトマップに「警告」が出ていました。
 

警告の内容は…

忘れちゃいました。 テヘペロ

なんかサーバーの応答が無いだか遅れてるだとかでURLの一部にアクセスできないだとかそんな感じだったと思います。
 

警告されていたのはある月のxmlファイル。 1つだけでした。
その月はこのサイトにサイトマップを設置した月だったので、私のサイトマップに何か欠陥があったのか? と結構あせりましたが、内容もサーバー遅延っぽいし、「最終処理日」(だったかな?)もだいぶ前の日付だったので、まずはサイトマップの「テスト」→「再送信」(だったかな?)をやってみたところ、1時間後っくらいには警告が消えていました

はいめでたしめでたしー。

サイトマップにゃやたらとエラーっぽいのが出ますが、大抵こんなんですね。
今でもWordPressデフォルトの「サンプルページ」(削除済みのヤツ)が見つかりませ~ん、みたいなエラー何度も出るし。
「修正済みとする」ボタンを何度押したことかw

 

h1タグのカスタマイズ

最後はh1タグ(記事タイトル)のカスタマイズ。

なんとなく記事タイトルの装飾が寂しい気がしたので、カスタマイザーからテキトーに上下ボーダーあたりを設定。
上の線だけ太いのがやたらと気にくわないですが、自分で画像素材用意すんのもメンドくさいんで、とりあえずこれでいいや。

 

はーーい、これで今回のカスタマイズは終~了~~

お疲れ、俺!!
 

次回はいよいよ、というかついにこの『ガンプラ気分』のヘッダー画像を作ろうと思います。
これでもう「準備中」のフリー写真とはおさらばだ!!

-ウェブサイト作成

Copyright© ガンプラ気分 , 2019 All Rights Reserved.