最新記事

  • 恐怖!クロールエラー「404(見つかりません)」が大量発生 Goring local pathサーチコンソールにGoogle先生からメッセージが届いていました。大量の「クロールエラー」が発生したようです。問題URLの特定と処置方法、原因4つについてメモメモ。
  • 【2019年3月更新】ワードプレス は難しいのか? Wordpress_16-9ワードプレスは正直言って、面倒くさい。でも、「難しいか?」と聞かれるとそうでもない。できることが多くて圧倒されるけど、慣れたらなんてことないですし。2017年4月に引っ越して2年。エディタもGutenbergに変わってしばらく経つし、記事を更新しました。
  • Twenty Seventeen、「外部リンク」のアイコン自動化 take a walk in oxford 16-9外部リンクと内部リンクのアイコンが自動つくようにCSSに追記しました。アイコンはFont Awesomeを使用しました。TwentynineteenとTwentyseventeenの両方が同じ構造なので、どちらにも使えます。
  • Font Awesomeで作った”見出しデザイン”がすっきりキレイ! アイコンフォントのFont Awesomeを利用して、先頭だけにデザインが入った、すっきりした見出しを作りました。Twenty Seventeenの様な余白が美しいテーマには、CSSで凝った 見出しデザイン を作るよりも、あっています。 CSSでお手製の”見出しデザイン”を作るのも楽しいですが、どこのサイトも似たり寄ったりになりますよね。 見出しデザイン (h1~h6)のを変更 今回デザインを変更したのは、見出し要素h1~h6までです。 ちょっと趣向を変えて、アイコンフォントのFont Awesomeを使ってみました。こんな感じ↓ ピンク色のアイコンフォントをタグの頭に入れるだけの手抜きCSSです。 h1:before { font-family: FontAwesome; content: "\f00a\00a0"; color: #ff7f7f; } 変更したい見出しをh1~h6から選ぶ 見出しの頭にアイコンが入るように、疑似要素「:before」をつける font-familyは、FontAwesome Font Awesome、The Iconsから選ぶ 好みの色を選ぶ 見出しに使う場合は挿し色があった方がいいでしょうね。最低必要なのはこのくらいです。 Font Awesomeが入っていない場合は、関連記事「Font Awesome をセットアップ」をご参照ください。 Twenty Seventeenの個別投稿の本文だけに反映させる Twenty Seventeenの見出しは、最近の流行なのか?、よく見かけるようになったスッキリとしたデザインでした。余白も美しいので、それを活かしつつ、チョットだけ挿し色が欲しかっただけなので、大満足です。 ちなみに、h2タグとh5タグだけ微妙にグレーだったり、h5タグよりh6タグの方が大きかったり、余白が上下左右で均等じゃなかったりするのは、Twenty Seventeenの初期状態です。何だか不思議な作りです。 それぞれの追記CSS h1、大見出しのCSS h1.entry-title:before { font-family: FontAwesome; content: "\f00a\00a0"; color: #ff7f7f; } 単独の投稿・固定ページだけにアイコンが入るように、entry-titleというクラス内でのh1を指定しています。h1をとっちゃえば、アーカイブページなどでも記事タイトル部分にアイコンが表示されます。 CSSでアイコンを指定する際は、Unicodeでアイコンを指定出来るので便利です。 アイコンと最初の文字の間に空白(\00a0)を入れました。 CSS追記機能を使っても、CSSスタイルシートに書き加える方法でもどちらでも動きました。 h2、中見出しのCSS div.entry-content h2:before { font-family: FontAwesome; content: "\f14a\00a0"; color: #ff7f7f; } こちらも投稿・固定ページの本文のh2だけにアイコンが入るように、entry-contentというクラスを指定しています。こちらは投稿ページと固定ページの両方に効いています。 アーカイブページでは、カテゴリーやタグの名前が大見出し(h1タグ)に使われ、中の記事タイトルはh2に降格しますから、記事タイトルと記事内のh2の両方が中見出し扱いになります。上のh1タグのh1指定をとれば、見た目上は辻褄が合うように表示できるのですが、中身が実はh2だらけになってしまうので、投稿内にh2を使用するかどうか悩ましいところです。 h2~h6は、アイコンが変わるだけで、構成は同じですから、説明を割愛させていただきます。 h3、中小見出しのCSS div.entry-content h3:before { font-family: FontAwesome; content: "\f138\00a0"; color: #ff7f7f; } h4、小見出しのCSS div.entry-content h4:before { font-family: FontAwesome; content: "\f0a9\00a0"; color: #ff6a6a; } h5、極小見出しのCSS div.entry-content h5:before { font-family: FontAwesome; content: "\f12e\00a0"; color: #ff7f7f; } h6、最小見出しのCSS div.entry-content h6:before { font-family: FontAwesome; content: "\f135\00a0"; color: #ff7f7f; } まとめ ま、とりあえず、テーマの余白の美しさを活かしつつ、ちょっとした刺し色を入れることができたので、よしとします。
  • 画像ポップアップのWPプラグイン”Simple Lightbox” かっこいぃ~。ワードプレスに変えたら使ってみたかったプラグイン”Simple Lightbox”で、メディア(=画像ファイル)をポップアップ表示出来るようになりました! Simple Lightbox この画像をポップアップで表示させるプラグインを”Lightbox”と呼ぶようです。汎用名かどうかは分かりませんが、プラグイン検索は、このワードがおススメです。 今回、私が選んだのは↓です。 Simple Lightboxプラグインページ いくつか見てみたのですが、どれも似たような感じだったので、プラグイン検索結果の一番最初に表示されていることが決定理由です。(この方法で失敗することもあります。) 仕上がり図 元のページに戻りたいときは、背景部分(黒色)か、ポップアップ右上の×印を押します。 同じ記事・ページに貼り付けられている画像をスライドショーにしてくれますから、見たい場合は再生マーク。画面下のキャプション情報にその記事での再生可能な画像数が表示されます。(デフォルトでは、自動再生になっています。再生スピードは秒数を指定できます。) 写真中段両端の矢印マークを押すと、手動で送ることもできます。 最初は、Jetpackのメディア設定にて、「画像と写真をスピードアップ」、「豪華なフルスクリーンのブラウジング体験で画像とギャラリーを表示」を有効にしていました。この方法だと、リンク先がJetpackのURLに変わってしまって、外部リンクに変わってしまいます。個人的にはどの画像がクリックされたか分かってコンテンツ作成の参考になるのですが、ファビコンなども変わってしまい、ビジターが意図せずして外部にリンクさせられたらイヤな人もいるかもね…っと、設定を解除しました。 初期設定、唯一の変更点 上の図は、”Simple Lightbox”の設定画面です。日本語ですし、初期値からいい感じの設定なのですが、唯一スライドショーが自動的に再生される仕様が好きではなかったので、変更しました。 私が他のブロガーさんの記事を参考にさせてもらうときは、画像を見ながら作業をするので、画像が変わらないでほしいのです。 外観→Lightbox→UI→スライドショーを自動的に再生するを外す→変更を保存で、変更できます。 Simple Lightboxでのメディアの貼り方 メディアファイルを挿入する際に、リンク先が4種類あるのですが、ポップアップさせたい(グループ化したい)画像は、「メディアファイル」もしくは「添付ファイルのページ」を選ぶ必要がありそうです。下は、各リンク先のサンプルです。

筆者のリライト宿題

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

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