最新記事

  • Twenty Seventeen、メインとサイドの幅を変更【 固定ページ】 Twenty Seventeen、メインとサイドの幅を変更【 固定ページ】ワードプレスのテーマ「Twenty Seventeen」にて、固定ページのメインエリアの幅を大きく、サイドバーの幅を小さくなるように調整しました。CSS追記にコピペする方法です。
  • 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 ...
  • 【2019年3月更新】Yoastにブログ記事の書き方を学ぶ… 【2019年3月更新】Yoastにブログ記事の書き方を学ぶ…SEOプラグインYoastの真骨頂は、メタボックス!記述を細かく添削され最初は面倒くさく感じていたのですが、慣れると以前よりまとまりがある記事が書けるようになってきました。SEOのプラグインに作文の書き方を学ぶとは思っていませんでした。
  • 【2019年3月更新】Yoastでボタン一つで「XMLサイトマップ」作製 【2019年3月更新】Yoastでボタン一つで「XMLサイトマップ」作製「XMLサイトマップ」は、検索エンジンにサイトの構造を分かりやすく伝えるロボ用のサイトマップです。雑多なブログページの中からインデックスしてほしいページをリスト化して登録しておくことができますし、新規投稿のインデックスもスムーズになります。

筆者のリライト宿題

  • スランディドノ (ウェールズ)、不思議の国のアリスが生まれた場所。 “スランディドノ”(Llandudno)は、北ウェールズの有名な避暑地です。不思議の国のアリスの物語は、ここで避暑中に生まれたそうです。 街の中にウサギの銅像などをはじめとする、アリスのキャラがチラホラ見受けられます。 白黒じゃないのに、ちょっと白黒っぽくなってしまった写真です。

本日もよい一日をお過ごしくださいませ。