ようこそ、ウラとボツへ

現在、新テーマ「Twentynineteen」のテスト中です。ご不便をおかけするかもしれません。m(__)m

特にプラグインについては、最終更新日が12月12日以前の記事は新テーマで未テストです。ボチボチ進めます。

テスト環境の「Untold Stories」では、英語環境でよりオリジナルに近い形でテスト中です。

カテゴリー、Twentynineteen記事一覧

    カテゴリー、モンスターハンターワールド記事一覧

      カテゴリー、イギリス記事一覧

        最新記事

        • Twenty Seventeen、メインとサイドの幅を変更( 固定ページ ) Twenty Seventeenは、”固定ページ”も妙にサイド(左側)が大きいです。メインは大きく、サイドは小さくなるようにCSSにて幅を調整しました。 「投稿ページ」の幅の調整については、関連記事「Twenty Seventeen、メインとサイドの幅を変更( 投稿ページ )」をご覧くださいませ。 “固定ページ”の幅、修正前後比較 修正前 修正後 黄色部分が、固定ページの幅を指定する部分です。この修正を行うと、黄色以外の部分のページの幅も変わってしまいますので、固定ページだけ変更したい場合は、この部分だけを抜き取り、別に記述する必要があります。 オレンジ枠で囲まれたサイドは、正確にはクラス名「entry-header」です。 最大値は、1,000pxの26%の幅で左側にふわふわ寄ります。スクリーンの幅によって小さくはなりますが、wrapの26%を保持します。スクリーン幅がとても狭く、スクリーン幅の最小値に収まらないときは上段に表示されます。 ピンク枠で囲まれたメインは、正確にはクラス名「entry-content」です。 最大値は、1,000pxの58%の幅で右側にふわふわ寄ります。スクリーン幅によっては小さくなりますが、wrapの58%を保持します。スクリーン幅がとてもが狭く、スクリーン幅の最小値に収まらない場合は、下段に表示されます。 メインとサイドの間隔は、100% – (68% + 26%) = 6% (wrapの最大値1,000pxの時、60 px)がメインとサイドの間の余白になります。 幅の変更方法 幅の修正は、4ステップです。 ステップ1、修正箇所を探す 幅を修正したい箇所を反転させて、右クリック→検証を開きます。 ステップ2、現在の指定値を探す ここで現在の指定値が分かったら、右側のstyle.css?ver=4.8.1をクリックして、ソースモードに遷移します。 ステップ3、ソースモードでシミュレーション オレンジで囲まれた部分をいろいろ変えて好みの幅が決まったら、関連個所をコピーします。 body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header { float: left; width: 26%; } .blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments { float: right; width: 68%; } ステップ4、テーマに反映させる 外観→CSS編集にペーストします。 沢山のclassが同時に指定されていますが、固定ページは”body.page-two-column:not(.archive) #primary .entry-header”なので、他の部分を変更したくない場合は、他のclassを削除することもできまます。 その辺は、お好みで。
        • Twenty Seventeen、メインを大きく、サイドを小さく( 投稿ページ ) Twenty Seventeenの”投稿ページ”はサイドバーが妙に幅を利かせて、メインが窮屈ですので、CSSを修正しました。 固定ページの幅を修正したい方は関連記事「Twenty Seventeen、メインとサイドの幅を変更( 固定ページ )」をご参照ください。 “投稿ページ”の幅を変更、完成図 今回の変更イメージは下図の通りです。 メインがメインらしく大きくなっています。幅の指定は、好みに合わせて変えられます。 ステップ1、修正箇所を探す 結論から言うと、Twenty Seventeenのメインはid=”primary”で、サイドがid=”secondary”という命名でした。投稿全体の幅はid=”wrap”で1,000pxです。 調べ方は、まず、調整したい箇所のエリアのid(もしくはclass)を探します。 変更したいブロックの開始地点だと思われる語句を反転し→右クリック→検証 ステップ2、現在の指定値を探す。 次に”id=”primary”の幅を指定している箇所を探します。 この設定のように、サイドバーがあって、404エラーページではないページは、wrapの1,000pxに対して58%の幅で、左側にフワフワと寄るように設定されています。 右側のstyle.css?ver=4.8.1をクリックしてソースデータモードに切り替えます。 ステップ3、ソースモードで幅のシミュレーション 検証のソースデータモードで、幅を変えてシミュレーションしてみます。 Twenty Seventeenの場合は、Wrapに対する率で変更するスタイルです。 メイン:サイドの初期値は、58%:36%、私はこれを68%:26%へ変更しました。 ※100% – {68% + 26%} = 6%で、6%がメインとサイドの間の余白です。 ※合計が100%を超えるとサイドの方が下の段に移動します。 青色の部分が修正完了したコードですので、テーマにコピペします。 .wrap { margin-left: auto; margin-right: auto; max-width: 1000px; padding-left: 2em; padding-right: 2em; } .has-sidebar:not(.error404) #primary { float: left; width: 68%; } .has-sidebar #secondary { float: right; padding-top: 0; width: 26%; } ステップ4、修正をテーマへコピペ 上でコピーしたコードを、外観→CSS編集にペーストします。 とりあえず、これが一番簡単な方法だと思います。 余談、FC2、Seesaaで書いている他のブログと比較してみますと… 一番上のTwenty Seventeenは、wrapのwidth=904pxです。メインが押し潰されている感じがして息苦しく感じていました。 FC2でここ一年使っているテンプレート(メインブログ用)は、width=900pxで全体としてはあまり変わりませんが、メインが650px、サイド200pxなので、逆にちょっとサイドが狭いのです。 SeesaaのCustomise your Blog!は、width=960pxです。写真ブログにするために1カラムに仕立て直したものですが、1カラムだけに、メインが広々として、見やすいです。
        • オールグリーン をとっだど~!(プラグインYoast) ワードプレスのプラグイン「Yoast SEO」のSEO判定を”オールグリーン”にしたくていろいろ試してみました。”オールグリーン”を獲得したのは、まさにこの記事です。 ただ、この記事はオールグリーンに固執しないことをおススメしております。 オールグリーンの記事は、非常に読みづらくなるからです。 やり方は分かっているけど、諦めるべきところはサクッと諦める。 どの部分を諦めるのかは、それぞれのブロガーさん次第でしょうけれど、私は結構あきらめています。 ゲーマー魂ですべてをクリアし、オールグリーンにしたいのですが、手数が多く、正直面倒くさいです。 今回は、面倒くさい部分じゃなくて、グリーン判定に変える方法がわからなかった部分について書きます。 SEOプラグインのSEOアドバイス ワードプレスを使い始めてから、SEOプラグイン「Yoast SEO」をインストールして、記事毎にSEOの判定をしてもらっています。 タイトル、URL(スラッグ)、メタディスクリプション、イメージの貼り方、外部・内部リンクなど、包括的な改善提案を貰えます。 英語だと簡単に”オールグリーン”にできる ↓下図↓は、「英語」記事の判定です。 すごく簡単にすべてをクリアでき、機能が壊れているわけではない事が確認できました。 検証に使った英語記事「Early retirement at the age of forty five」 です. 内容的には, 日本語の600文字程度かな? 日本語記事に対応していないだけ 「だけ」じゃなくて、そこが肝なのですが… このプラグイン、日本語の文字の区切りを認識しません。 文書全体の文字数ではなく、単語数で判定します。 これが日本語記事では全てをグリーン判定にすることが非常に困難な理由です。 それでも、使うメリットの方がはるかに大きいですけれどね。 Yoast SEO メタボックスで “オールグリーン”をとる方法 この記事では、一般知識でまかなえる「外部・内部リンク」、「画像添付」などについてのアドバイスは触れず、Yoast固有の癖で苦戦した部分だけ書きます。 日本語記事が不利なポイントは、下記の3つです。 「文字数」、 「英数字スラッグ」、 「単語区切り認識」 それでは、それぞれ詳しく見てみましょう。 推奨される300単語よりも少ないです 最大の難関は「単語数 300」です。 英単語って、単語の合間に空白がありますよね。これがYoastの単語数の認知方法なので、スペースで区切られない日本語は、改行するか、段落が変わるタイミングでしか単語数が増えていきません。 I am a Japanese expat living in the UK, and this is the third foreign assignment after China and India. Living in foreign countries for more than 10 years, there always are something new and beyond my imagination. At the ...
        • “Yoastメタボックス”に記事の書き方を学ぶ ワードプレスのSEOプラグインといえば、「Yoast SEO」と「All in One SEO Pack」。ブログカスタマイズが趣味なので、「両方とも」使ってみる気満々だったのですが、”Yoastメタボックス”のコンテンツ分析・指導が素晴らしすぎて、「All in One SEO Pack」を使ってみる機会を失っております。 “Yoastメタボックス”内の「可読性(Readability)」と「コンテンツ分析(Contents Analysis)」に作文の基本を学んでいる途中のワタクシとしては、なんとなく今は師匠を変えたくない気分なのです。 Yoastメタボックスの機能 後で詳しく説明予定の「可読性(Readability)」と「コンテンツ分析(Contents Analysis)」以外にも、ソーシャル(FacebookとTwitter)でのタイトル、説明文、画像を指定する機能や、高度な設定としてnoindex/index、nofollow/follow、パンくずリストのタイトル、カノニカルURLの設定などが可能です。 かゆいところに手が届いています!! これで無料版なのですから、有料版はどんなに凄いんでしょうね… 可読性(Readability)機能 Yoastの最大の難点なのですが、対象言語が英語などの語族で、日本語とは相性が良くない感じです。 1つの小見出し内の単語数は300語以内。 一段落が長すぎない。 20語以上の長文が25%以内。 などなど… 英単語ベースになっているので、日本語ではほとんど判定できません。 興味本位で、英語で記事を書いたりしてみました。 しかし、ほとんどの日本人が、これ意味ないねっと思った結果なのか??、和訳されていないみたいです。笑。 コンテンツ分析(Contents Analysis) これが私の作文の師匠です。素直に教えに従っています。 コンテンツ分析(Contents Analysis)機能では、SEOタイトル、スラッグ、メタディスクリプション、フォーカスキーワードを個別設定することができます。 それらと本文を照らし合わせ、あれこれ指摘をしてくれます。 それまで単に本文をダラダラ書いていただけだった私は、最初は1つの記事を仕上げるだけでも大変でした。でも下手なりに上達している感があって、なんとなく止められません。苦笑。 本当に行き届いているのに日本語訳が… メタボックスだけで、こんなに充実している上に、パンくずリスト、XMLサイトマップ、サーチコンソールとの連携などなど、お便利機能が満載なのに、日本語訳が完全でないのが残念です。 早期リタイアできたら、出来た時間でこのプラグインの翻訳プロジェクトに参加させてもらいたいな~なんて思っています。 Translator Handbookを読んだら敷居が高そうだったので、おいおい時間ができてから… 熱心な方は、Yoastの初期設定の最後のページのyoutubeビデオトレーニングが秀逸でしたよ↓ Yoast SEO for WordPress training – Metabox: Focus Keyword and Content Analysis Tab
        • ワードプレス、Yoastで”XMLサイトマップ”をサクッと作成 “XMLサイトマップ”とは、検索エンジンにサイト構造をわかりやすく伝える為のロボ用サイトマップです。 ワードプレス使用者は大抵プラグインで出力していると思われます。当ブログでは、万能SEOプラグインのYoastを使用しています。 “XMLサイトマップ”とは “XMLサイトマップ”は、簡単に言うと、Googleなどのサーチエンジンにサイトの構造をわかりやすくお伝えする、ロボ用のサイトマップです。 サイトマップを出力する環境が整ったら、各検索エンジンが提供している検索用ツールに登録しておくことで、新規投稿のインデックス登録などがスムーズになります。 私はGoogleサーチコンソールとBingのWebマスターツールに登録しています。 詳しくは、Google、Search Console ヘルプ、「サイトマップについて」をご参照ください。 “XMLサイトマップ”専用プラグインとSEOパッケージプラグイン このXMLサイトマップを出力するプラグインには、専用のプラグインを追加する方法と、SEOパッケージ系のプラグインを追加する方法があります。 私が使っているプラグインでは、JetpackとYoastに”XMLサイトマップ”作成機能があり、私はYoastの方を有効化しています。 Yoast SEOでの”XMLサイトマップ”生成方法 Yoast SEO→Dashboard→Featuresタブ→Advanced settings pages→Enabled→Save Changes Advanced SettingをEnabledにすると、Titles and Metas、Social、XML Sitemaps、Advanced、Toolsの機能が表示されるようになります。 SEO(General – Yoast SEO)→XML Sitemaps→XML sitemap functionalityをEnabled→Save Changes Yoast SEOには”XMLサイトマップ”が10種類!? 上の画像のyour XML sitemapをクリックすると、下図のように(ページがあれば)10種類のサイトマップインデックスに遷移します。 投稿タイプから5種 投稿 (post) 固定ページ (page) メディア (attachment) プロジェクト (jetpack-portfolio) 推薦文 (jetpack-testimonial) タクソノミーから5種 カテゴリー (category) タグ (post_tag) フォーマット (post_format) プロジェクトタイプ (jetpack-portfolio-type) プロジェクトタグ (jetpack-portfolio-tag) Post TypeとTaxonomiesのタブで出力の是非を選択できます。 上のサイトマップインデックス(目次)をクリックすると、それぞれの”XMLサイトマップ”に掲載されているページURLリストが表示されます。これが実際にサーチコンソールに登録されるものです。 私は、面白がって全部テストレコードを作って、出力テストをしています。 その割に、サーチコンソールに実際に登録しているのは、投稿(post)と固定ページ(page)のみだったりします。 “XMLサイトマップ”をサーチコンソールに登録する 上の画像のyour XML sitemapをクリックすると、下図のように3種類のサイトマップが生成されます。 post.sitemap.xmlやpage-sitemap.xmlのURLをコピー サーチコンソール→クロール→サイトマップ→サイトマップの追加/テスト→1でコピーしたURLの後方をペースト→送信 FC2の”XMLサイトマップ”は、一つたりともインデックスされたことがないのですが、Yoastの”XMLサイトマップ”はかなり速いスピードでインデックスされます。驚異!でした。

        筆者のリライト宿題帳

        • 腕時計に”立ちましょう!”と促されれば、素直に立つワタクシ。 heathrow boarding gate会食中に腕時計に「ずっと座り続けているので、ちょっと立ちましょう。」っと促されているのをみたドイツ人の同僚達に「時計に管理されてるってどうなの?」っと小バカにされた事があり、国際会議の際は、(マナー的にも)同機能を無効化する方法を調べた気がするのですが、やり方を忘れてしまいました。
        • “イヤなら止めたら?”の謎のプレッシャー Tobi Kadachi友人に誘われてモンハンワールドを始めて8ヵ月。何度も脱落しては、何度も再開している謎の状況です。 止めるのは大抵、欲しい装飾品や鑑定武器のドロップ率の低さにゲンナリなった時。 再開のタイミングは、他のゲームをクリアした時や、モンハンワールドに新モンスターが入った時などです。 イヤなら止めたら? 友人は10年超のベテランハンター。脱落ハンターの私とは違う。 ドロップ率の低さを歓迎しているわけではないものの、「そんなもんだ」っと受け入れている様子。 ちょっと淋しくなって、共感を求めてドロップ率の低さに不満を持っている記事を探してみたら、「それがイヤなら、止めれば?」とか、「文句言うぐらいなら、止めれば?」というような、正論を浴びせられていたりして、縮こまってしまいました。 うん。 ごもっとも。 遊びなんだから、ムリに続けなくていいよね。 でも、なんとなく、「楽しいと思えない人は、遊んでくれるな」みたいな感じの響き。 たかがゲーム、されどゲーム。 熱くなれた方が、面白い! 楽しく遊んでいる人たちにとっては、グチを書かれると不愉快だよね。 しかしな〜。 悪口じゃなくて、弱音なの もうちょっと遊びたいと思いつつ、ドロップ率の低さがつらくなって脱落を繰り返した私目線では、「心のままにツライという事が許されず、弱音を吐く奴は遊ぶ資格がない」感じがして、敷居の高さを感じてしまいます。 幸いにも私の場合は、しばらく遊んでないと「新しいモンスターの武器と装備が凄くいいよ〜」とか、「新しいモンスター、激ツヨで楽しいよ〜」などと声をかけてくれ、介護してくれる神様のような友人がおり、何度も出戻りしちゃってます。 実際にしばらく止めた後で再開すると面白さが蘇ってきて、またしばらくハマっちゃいます。 学業とか、仕事とか、人間関係とか、世の中には出戻りが効かない事が多すぎて、「イヤなら止めれば」と言われるとなんだかプレッシャーを感じてしまいますけれど、ゲームは何度でも出戻り可能だから、至極もっともで建設的なアドバイスなんですよね〜。 わかっていても感じてしまう言われ得ぬプレッシャー。こういうのを脅迫観念というんでしょうかね〜。 お。ようやく飛行機が離陸できそうです。
        • 退職後やりたい100のこと、ワードプレスの”テーマを自作” early retirement in walesブログのカスタマイズのどこが楽しいのか、上手く言い表せず、自分でも不思議でならないのですが、大好きです。退職して時間ができたら、ワードプレスの”テーマを自作”してみたいです。 FC2での”テーマの自作” FC2ブログでは(実際には使っていないものの)自作のテンプレートを作りました。HTMLとCSSだけで、デザインファイルを参照しないシンプルなテンプレートでした。週末に少しずつしか進まないので、3か月ぐらいかかりました。その時期は、時折恐ろしく崩れたテンプレートが出現していたかもしれません。笑。 1カラムと2カラムの2種類を作りました。2カラムの方はリスポンシブデザインにしました。JSON-LDの構造化データをもりもり入れたり、レビューや★マークなどのリッチスニペット用ひな形を準備したり、できることがたくさんあって、本当に楽しかった!! FC2はカスタマイズ用のテンプレート用 変数一覧が共有されていて、タグをとるのが簡単だったんです! 振り返ると、公開されている変数の数が限られていたことが良かったんだなと思います。 できることに限りがあると、取りうる選択肢の中から選ぶだけで、迷いがありません。 いつものゲーマー的発想で、テンプレートを書き進めては、W3CのHTML ValidatorやCSS Validatorで文法チェックをしてノーミスにしていました。(GoogleはW3Cの文法は気にしていなさそうですが、パーフェクトの方が楽しいし。) ワードプレスは選択肢が多すぎる ワードプレスは、phpのおかげでサイトの構造設計がかなり柔軟にできるほか、変数も多く、プラグインで機能をパカっとはめ込むことも容易です。 選択肢が多すぎて、悩んじゃいます。 こういうサイトが作りたい!!っと明確なビジョンを持って作る人はいいかもしれませんケドね。 時間をかけて、じっくり、まったり、作れるような環境になったら是非一度挑戦してみたいです。