ようこそ、ウラとボツへ

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

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

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

カテゴリー、Twentynineteen記事一覧

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

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

        最新記事

        • ワードプレス は難しいのか?(1年間使用後の振り返り) Wordpress_Customizeワードプレス は正直言って、面倒くさい。でも、”難しい”かと聞かれると言葉に詰まってしまいます。 ブログ村などで人気が出たブロガーさんたちが、収益化をすべく”ワードプレス”へ引っ越して、テンプレートを崩しまくっているのを見て、”ワードプレス”恐るべし、あれはかなり難しそうだ!!!っと思い込み、尻込みしておりましたが、使い始めて3ヶ月ぐらい経った頃、拍子抜けし、一周年を迎えた今、杞憂だったことに胸を撫でおろしております。 ワードプレス の難所(?)について3か月目に書いた所感を、1周年モノに更新しました。
        • Twenty Seventeen、「外部リンク」のアイコン自動化 take a walk in oxford 16-9外部リンクと内部リンクのアイコンが自動つくようにCSSに追記しました。アイコンはFont Awesomeを使用しました。TwentynineteenとTwentyseventeenの両方が同じ構造なので、どちらにも使えます。
        • Twenty Seventeen、Font Awesome をセットアップ “Font Awesome”とは “Font Awesome”は、オープンソースのアイコンフォントで、←こういうアイコンをフォントとして使用できます。 2017年7月9日現在、version 4.7.0で、675アイコンが利用できます。詳しくは「The Icons」 導入方法はいろいろですが、私はこのブログではCDNを利用、テスト用ブログではプラグイン「Better Font Awesome」を使用しています。この他、ダウンロードして使用する方法があるみたいです。リストは→「Font Awesome, Get Started」をご参照くださいませ。 CDNのセットアップ テーマによっては、初めから使える状態になっている場合もあるみたいですが、Twenty Seventeenでは、残念ながら初期状態では使用できないので、追加が必要でした。 ↓検索すれば、もっとシンプルな方法が見つかります。 私は、「Font Awesome, Get Started」にて、e-mailにコードを送付し、届いたメールの指示に従い、head部分に初期コードを貼り付けた後、Font Awesomeでアカウントを取得し、そこで得られたCDNコードをhead部分に差し替える方法で使用しています。 初期状態では、java scriptのコードになっていますので、管理画面でCSSを選択して、CSS用のコードを取得しました。 ※繰り返しですが、ネット上にはもっとシンプルな方法が転がっていましたよ。 色を変更したい場合 初期値のアイコンは、白黒ですが、タイトルのワードプレスマークなどのように色を付けたいときは、アイコンのページでクラス名を調べて、下記のようにCSSで追記できます。Color:#xxxxxx;のxの部分は、色見本などで選んでくださいね。 .fa-wordpress { color: #0087be; } その他、”Font Awesome”利用メモ 私の利用法は下記のとおりです。 「”外部リンク”と内部リンクのアイコンの自動化」に利用 「見出し(h1~h6)のデザイン」に利用
        • 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種類あるのですが、ポップアップさせたい(グループ化したい)画像は、「メディアファイル」もしくは「添付ファイルのページ」を選ぶ必要がありそうです。下は、各リンク先のサンプルです。

        筆者のリライト宿題帳

        • ワードプレスで”404エラーの原因”になった失敗集 ワードプレスは自由度が高いブログプラットフォーム(CMS、コンテンツマネジメントシステム)!使いはじめたばかりの頃、いろいろ試したことが、ことごとく”404エラーの原因”となりました。 うっかり失敗を繰り返さぬよう、NG集を作成しておくことにしました。 “404エラーの原因”になった失敗 今のところ5つ思いつきます。 パーマリンクを型を決めるためにいろいろ試した 「ワードプレス、”記事のパーマリンク”は早めに定めること」でも書いたように、ワードプレスはパーマリンクの型の自由度が高いので初期にいろいろ試して、現在の型に落ち着くまでいろいろ変更した結果、大量のリンク切れが発生しました。 パーマリンクを日本語から英語に変えた 「ワードプレス、”日本語URL”は二度とごめんだ!」で、パーマリンクを日本語から英語に変えた際、古いURLがリンク切れになったので、リダイレクションをかけました。 カテゴリー削除 ワードプレスを始めたばかりの頃、7つのボツネタブログのカテゴリーを統合した関係で、それぞれに存在したカテゴリーが一斉に集結して150に及んでいました。最初は気づかず粛々と仕上げてカテゴリー付きで公開していたのですが、途中で2カテゴリーに集約した関係で、大量のリンク切れが出来ました。 タグを削除 FC2では、一つの記事に5つまでユーザータグを設定できます。そこからFC2のコミュニティーの他の記事を読みに行けるので、楽しく活用しておりました。 ワードプレスにもそういう機能があるのかどうか知りませんが、ワードプレスのタグはそういう用途ではありません。普通にページができてインデックスされるので、管理が面倒くさくなって、一斉削除しました。 削除=リンク切れで、これもリダイレクションの対応に追われました。 アーカイブの表示記事数を2件→5件へ変更した もともとアーカイブページは、本文が全文表示されるスタイルで、長たらしかったので、設定→表示設定→1ページに表示する最大投稿数を2件にしていました。但し、2記事ずつ表示されるページと1記事ずつ表示されるページの両方が存在する意義が見いだせなかったので、「Twenty Seventeen、”archives.php”を要約スタイルへ」にて、アーカイブページでの本文全文表示を要約文表示に変更しました。 あわせて、1ページの表示件数を5件へ変更したことで、ページ数が大幅減少し、リンク切れが発生し、301リダイレクションをかけました。 サイト作成は計画的に! ワードプレスは、何故かインデックスがめちゃめちゃ早いので、GoogleにすぐにURLを覚えられてしまいます。 以前の無料ブログの時と同じ感覚で、色々試して痛い目にあいました。
        • “疲れの兆候”あるある?、6パターン(自己管理用) early retirement in wales私が自分で認知している疲れの兆候は、 1、最適な語彙が繰り出せない。言葉に詰まる。 2、目的地を通り過ぎる。 3、鍵が見つからない。 4、冷蔵庫に携帯電話などの変な物が入っている。 5、外出時、携帯品を置き忘れる。 6、通勤鞄にごはん粒付きのしゃもじなどの変な物が入っている。 仕事大好きな社畜(=私)は、自分では疲れている事に気が付けない事もありますから、自己管理用にご自分のパターンを書きだしてみました。
        • オクスフォードの”コインランドリー”では、一回分の洗濯物が£13.95 Thames oxfordバックパッカーの味方、”コインランドリー”へ行きました。めちゃめちゃ高くて、ビックリ!!!Googleで”Launderette”と”都市名”で検索するといくつか出てきます。(←イギリス)1回分の洗濯に£13.95もかかりました! 水洗い(=wash)が£6、乾燥(=dryer)が£4、洗濯洗剤(=washing powder)が£3.95です。ぬぉ~。これから家が決まるまで手洗いです。