WordPress 初心者のための「ワプ通」https://otomami.orgTue, 16 May 2023 03:26:15 +0000jahourly1https://otomami.org/wp-content/uploads/2020/08/cropped-otologon-1-1-32x32.pngWordPress 初心者のための「ワプ通」https://otomami.org3232 【YouTube のサイト埋め込み】動画の角を丸くして表示させる方法【枠線も付けてカスタマイズ】https://otomami.org/howto-youtube-kadomaru/Tue, 16 May 2023 03:26:14 +0000https://otomami.org/?p=1694

  と悩んでいる人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   YouTube 動画をサイトに埋め込むとき、大きさやメニュバーの表示などは簡単に設定できるん ... ]]>

YouTube 動画をサイトに埋め込むと角がカクカクになるけど、角を丸くして表示させる方法はないかな…

 

と悩んでいる人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • YouTube 動画の角を丸くしてサイトに埋め込む方法

 

YouTube 動画をサイトに埋め込むとき、大きさやメニュバーの表示などは簡単に設定できるんですよね。

ただし、「角」は簡単に設定できません。

そこで、コードをちょこっと追加して YouTube 動画の角を丸くする方法をご紹介しましょう。

YouTube 動画の角を丸くさせる方法

YouTube 動画を埋め込むとき、「共有」からこの部分をコピーしてサイトに貼り付けるのが基本ですよね。

オトマミ

テーマによっては、リンクまたは ID のみを貼り付ければ表示されるショートコードがあったりします。

 

このコピーした部分を見てもらうと分かりますが、iframe の要素を使って YouTube が表示されています。

なので、この iframe をカスタマイズして動画の角を丸くしていきます。

 

CSS を追加して動画の角を丸く

シンプルに、iframe に対して角を丸くする設定をすると、YouTube 動画の角も丸くなります。

CSS

iframe { border-radius: 25px;
}

 

ただこれ、全ての iframe において角が丸くなります。

なので、サイトの雰囲気に合わせて SNS などの表示も丸くしたい場合に有効です。

オトマミ

デフォルトを 25px にしていますが、角の丸さ加減を調整したい場合は数字を変更してください。

 

YouTube 動画だけ角を丸く

YouTube 動画だけ角を丸くしたい場合は、YouTube からコピーしたコードに直接書き込む方法もあります。
 

コピーしたコードを一旦貼り付けて、

HTML

style="border-radius: 25px;"

を追加します。
 

すると、こんな感じになっているはずです。

HTML

<iframe style="border-radius: 25px;" width="560" height="315" src="https://www.youtube.com/embed/IO212sfQaEQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

すると、角が丸い YouTube 動画が表示されます。

枠線も付ける

YouTube 動画の角を丸くした上で、枠線も付けることが簡単にできます。

先ほどのコードをそのまま使うと、赤い部分を追加すると枠線が表示されます。

HTML

style="border-radius: 20px;border:10px solid #ff0000"

 

すると、こんな感じで動画が表示されます。

 

ただの 1 本線で枠を表示させていますが、もし点線などに変更したい場合は下記を参考に solid の部分を変更してみてください。

  • solid:1 本線
  • double:2 本線
  • dashed:破線
  • dotted:点線

YouTube 動画もカスタマイズして表示してみよう

せっかく可愛らしいサイトなのに、YouTube の角がカクカクしていると雰囲気が台無しになってしまうこともありますからね。

カスタマイズ自体はとても簡単なので、YouTube 動画の表示も変えたいと思っていた人は、当記事を参考にして角を丸くしてみてください。

オトマミ

YouTube も上手くカスタマイズして、サイトの雰囲気作りをしてみましょう!
]]>
ブログに暗号資産(仮想通貨)のチャートと価格を表示させる方法【ほぼコピペでOK!】https://otomami.org/how-to-show-crypto-price-blog/Sat, 20 Aug 2022 02:32:01 +0000https://otomami.org/?p=1689

  と気になっている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   トークンを稼ぐゲームなどが活発化してきているので、暗号資産(仮想通貨)について記事を投稿 ... ]]>

オトマミ

ブログに暗号資産(仮想通貨)の現在のチャートや価格を表示させている人がいるけど、どうやってるんだろう…

 

と気になっている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • ブログに暗号資産(仮想通貨)のチャートや価格を表示させる方法

 

トークンを稼ぐゲームなどが活発化してきているので、暗号資産(仮想通貨)について記事を投稿するブログが日増しに増えてきていますよね。

そんなブログを読んでいると、たまにリアルタイムのチャートや価格を表示している記事を見かけることがあると思います。
 

そこで、ほぼコピペで暗号資産のチャートや価格を表示させる簡単な方法をご紹介します。

ブログに暗号資産のチャートと価格を表示させる手順

だいたいの人は、価格などの表示部分を見て出どころは察しているはずです。
 

表示されているときは、こんな感じで表示されてますよね。

 

まあお察しの通り、「CoinMarketCap」です。

オトマミ

だって、「Powered by CoinMarketCap」って書いてありますからね。

では、どうやって表示させるのか手順を紹介しましょう。

手順①:「サイトウィジェット」を開く

まずは、「CoinMarketCap」にアクセスします。
 

そして、上部メニューの「プロダクト」を開いて、サブメニューの「サイトウィジェット」を押します


 

手順②:表示させたい内容を選択

「サイトウィジェット」を押すと「Coin Ticker Widget」という画面が出るので、ブログに表示させたい通貨や内容を選択します。


 

そして選択し終わったら、「Website Widget」と書かれた下にある script コードをコピーして、ブログに貼り付ければ完了です。

オトマミ

これだけなんで、めちゃ簡単ですよね。

暗号資産の価格をいろんな表示でも出せる

ブログではチャートや価格を表示させるだけの場合が一般的ですが、「サイトウィジェット」には他の表示方法もあります。

マーキーを表示させる

よく画面の上下に価格などが流れるように表示されていることもありますが、これも「サイトウィジェット」で設定できます。

 

設定手順は、左のメニューから「Coin Price Marquee」を選択します。


 

あとは表示させたい通貨などを設定して、同じように script コードをコピペすればブログに表示できます。

複数の通貨をブロックで表示させる

いくつかの通貨を比較して見せたい場合は、複数のブロックとして表示できます。

 

設定手順は、左のメニューから「Coin Price Blocks」を選択します。


 

あとは表示させたい通貨などを設定して、同じように script コードをコピペすればブログに表示できます。

さっそくブログに暗号資産の価格を表示させてみよう

暗号資産を扱うのが初めてのユーザーさんなんかは「どのくらいの価格なんだろう?」と思っているでしょうから、表示させてあげると親切だと思います。

基本的にコピペだけで表示できるので、ブログ初心者の人でも簡単にチャートや価格を教えてあげられます。

ということで、さっそくブログに暗号資産の価格を表示させてみましょう!

]]>
AdSense の Lab にある「自動広告の関連する検索を有効にする」とは?【どのようになるのか解説】https://otomami.org/adsense-auto-ads-search/Thu, 23 Jun 2022 02:32:01 +0000https://otomami.org/?p=1679

  と気になっている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   お試し機能が追加される「Lab」なんですが、「利用可能なLabs」に「自動広告の関連する ... ]]>

AdSense の Lab に「自動広告の関連する検索を有効にする」という項目があるんだけど、これを有効にするとどうなるんだろう…

 

と気になっている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • 「自動広告の関連する検索を有効にする」の機能について
  • 有効にするとどのような広告が表示されるのか

 

お試し機能が追加される「Lab」なんですが、「利用可能なLabs」に「自動広告の関連する検索を有効にする」という項目が表示されました。

ただ、「自動広告の関連する検索を有効にする」と言われても、どうなるのかピンとこない人も多いはずです。
 

そこで、「自動広告の関連する検索を有効にする」はどんな機能なのかを紹介します。

「自動広告の関連する検索を有効にする」とは

正直なところ、この「自動広告の関連する検索を有効にする」という文言を最初に読んだときに「何が有効になるのか全然分からん」と思った次第です。

でも有効にするとある広告が表示されるようになったので、それに基づいて紹介していきます。

「関連トピックの発見」という広告が表示される

結論から先に言うと、「自動広告の関連する検索を有効にする」を有効にすると記事内に「関連トピックの発見」という広告が表示されるようになります。


 

以前から AdSene を利用している人なら、どこかで似たようなのを見たことがある気がしません?

オトマミ

「数年前に廃止されたリンクユニットに似てない?」と僕は思ったんですよ。

 

おそらくシステムとしては同じで、記事に関連するキーワードを自動的に抽出して検索へ促すタイプの AdSense 広告だと思います。

以前の「リンクユニット」は自分で配置場所を決めなければなりませんでしたが、今回の「自動広告の関連する検索を有効にする」は記事内に自動で表示させる仕様になっています。
 

どのように表示されるのかを確認したところ、記事の途中の場合もあれば、記事の最後に表示されているケースもありました。

どのような場合に「関連トピックの発見」が表示されるのか

公式な情報がなかったのであくまで肌感ですが、PV 数が多い記事では表示されている感じがします。
 

「AdSense ショッピングリンク」では「商品名」などがトリガーとなっているようですが、今回の機能はキーワードがトリガーにはなっていないような気がします。

とはいえ、同じ記事を見ても表示されないときもあるので、必ずしも決まったトリガーがあって表示される仕様ではないのかもしれません。

「自動広告の関連する検索を有効にする」を利用する手順

「自動広告の関連する検索を有効にする」を利用するには、「利用可能なLabs」にある「自動広告の関連する検索を有効にする」のスイッチを切り替えるだけです。


 

しかも、自動広告の有効・無効に関わらずスイッチを切り替えるだけでこの機能は有効になるので、AdSense を固定配置しているサイトでも利用可能です。

オトマミ

AdSense のタグさえ埋め込まれていれば、どのタイプでも機能するってことですね。

収益にどの程度影響してくるかは分からない

以前にあった「リンクユニット」は、バナー広告よりクリック率がいいと言っている人は多かったです。

確かに、いかにも「広告です!」というバナー広告よりは、ユーザーが気になりそうなキーワードだけを表示させる方が警戒心は薄れそうですからね。
 

ただし、「自動広告の関連する検索」を有効にすると収益が上がるか否かは、正直なところサイトによりけりな感じはします

なので、実験的な「Lab」に追加されたんだと思います。

「自動広告の関連する検索」は有効にしとこう

僕個人としては、「自動広告の関連する検索」はひとまず有効にしておけばいいのではないかと。

理由としては、有効にして AdSense の収益が下がることはないと思います。
 

ただ AdSense 絡みのときで考えておくべきは、アフィリエイトとの兼ね合いですね。

この「自動広告の関連する検索」のクリック率が良いのだとしたら、アフィリエイトの収益が下がってしまう可能性もあるからです。
 

記事毎に機能の有効・無効が設定できればいいのですが、おそらくそのような設定は AdSense 側で追加されないと思います。

でも WordPress テーマによっては AdSense の機能を記事毎にオフにできるのもあるので、そういったテーマを利用してみるのもいいでしょう。

オトマミ

「自動広告の関連する検索」の新しい情報が入ったら、また記事を更新しますね。
]]>
AdSense のショッピングリンクとは?【ブログによっては収益増の可能性も!?】https://otomami.org/about-adsense-shoppinglink/Tue, 14 Jun 2022 07:41:25 +0000https://otomami.org/?p=1674

  と気になっている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   多くの方は、「新しいラボがあります。[Labs] タブにアクセスして、詳細をご確認くださ ... ]]>

アドセンスに「AdSense ショッピング リンクをオンにする」という項目が表示されたんだけど、これは何だろう…

 

と気になっている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • AdSense ショッピングリンクとは何か
  • どんな人が収益に影響するのか

 

多くの方は、「新しいラボがあります。[Labs] タブにアクセスして、詳細をご確認ください。」という通知を受け取って「何だ?」と思ったはずです。

「Labs」の項目にあるということで「実験的」か「最新機能で様子見」の要素が強いと思われますが、気になった方はさっそく機能をオンにしてみるといいかもしれません。
 

それでは、「AdSense ショッピングリンク」について現段階の見解を解説します。

AdSense ショッピングリンクとは

概要をまるっと解説すると、「AdSense ショッピングリンク」は対象となる商品名を記事から検出すると、その単語がハンパーリンクになります。

そのハイパーリンクをユーザーがクリックすると、関連する商品が広告として表示されるようになる機能です。
 


 

そのため、機能をオンにしてもバナーの数が増えたりするわけではないので、ユーザーにとっては広告が埋もれていることすら気づかないことになりそうです。

AdSense ショッピングリンクを有効にする手順

「AdSense ショッピングリンク」を有効にする場合は、アドセンス画面の左メニューにある「最適化 > Labs」にアクセスします。
 

すると「利用可能な Labs」に「AdSense ショッピングリンク」があると思うので、スイッチを切り替えれば有効となります


 

有効になると、その項目自体が「有効な Labs」に移っているはずです。

現時点ではサイトごとには設定ができない

「Labs」で「AdSense ショッピングリンク」を有効にはできますが、パッと見ではサイトごとに有効・無効にするような項目が見当たりません。

そのため、現状ではサイトごとでの設定は出来ないのかもしれません。
 

なので、複数のサイトでアドセンスを利用している人には悩みどころになりそうです。

オトマミ

この部分については、追々調べてみようと思います。

「自動広告」や専用のリンクコードは不要

機能的に「自動広告」っぽい感じはしますが、アドセンスのリンクコードが何でも埋め込まれていれば発動するようです。
 

ショッピング リンクを機能させるために自動広告を有効にする必要はありません。ページに AdSense コードのみ設置されている必要があります。
引用元:ショッピング リンクを機能させるには、自動広告を有効にする必要がありますか?

 

なので、従来のようにアドセンスを決まった場所に配置している人でも、「AdSense ショッピングリンク」を利用できます。

AdSense ショッピングリンクを有効にすべきか

基本的には記事の投稿者が何するわけでもなく、スイッチを切り替えるだけなので手間は全くありません。

ただし、この機能を有効にしてどれだけ収益に影響を与えるかは気になるところですよね。
 

当記事を作成する数時間前に登場した機能なのでまだデータがなく何ともいえませんが、個人的な「考察」として機能を有効にすべきかどうかを解説しておきます。

収益が増える可能性があることをする傾向にある

Google は常に収益が増えるような施策を提案してくるので、この機能を実装してきたからには増える可能性があるからだと思われます。

そのための「Labs」という位置づけだと思うので、逆に効果がなければ廃止になる可能性もゼロではありません。
 

どれだけ収益に影響があるのか現段階では不明ですが、気になる人は有効にしてから数ヶ月間はデータ分析してみるといいでしょう。

影響のあるサイトとないサイトがあるかもしれない

「AdSense ショッピングリンク」は対象の商品名を検出するとハイパーリンクになる仕組みなので、商品名をよく出すか出さないかで大きく影響しそうです。
 

例えば、「公園へ行って読書をした」という日記的な記事を書いても、おそらくハイパーリンクになることはないでしょう。

でも、iPhone や Beats Fit Pro といった特定の商品について解説するような記事なら、ハイパーリンクがばんばん貼られるかもしれませんよね。
 

なので、これからガジェット系などの商品を扱うような記事では、特定の商品名をしっかりと書いておくと広告が出やすくなるはずです。

アフィリエイトとの共存を考える必要がありそう

商品名を記事に多く入れるタイプの記事なら、「AdSense ショッピングリンク」は収益を増やしてくれるシステムになるでしょう。

ただ、もしアフィリエイトをしている場合にはどうかという問題があります。
 

アフィリエイトの方だと収益が多いのに、アドセンスで購入されて収益が少なくなってしまう可能性もゼロではないからです。

逆に、これまではアフィリエイトでは紹介しずらかった商品も、「AdSense ショッピングリンク」でたくさん紹介してくれる可能性もあります。
 

そのため、「AdSense ショッピングリンク」を有効にしたら、どんな広告が表示されるのか誰かにチェックしてもらった方がいいかもしれません。

AdSense ショッピングリンクを有効にしてみよう

有効にすること自体はめちゃくちゃ簡単ですが、自分のブログではどのくらいの影響があるのかは悩むはずです。
 

なので、

  • アドセンス一本の人は有効で OK かと
  • アフィリもやっている人はデータを注視して分析が必要

という感じだと思います。
 

ひとまずは有効にしてみて、1 〜 2 ヶ月間くらいは収益の様子を分析してみるといいでしょう。

オトマミ

また色々と分かってきたら、情報を更新します。
]]>
ブログに iOS と Android アプリを両方スマートに紹介する方法【アフィリエイトにも便利なツール】https://otomami.org/about-app-reach/Thu, 02 Jun 2022 07:40:37 +0000https://otomami.org/?p=1669

  と悩んできる人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   スマホアプリを紹介するときは、どうしても iOS と Android の両方を表示させたいも ... ]]>

ブログでスマホアプリを紹介したいんだけど、iOS と Android の両方を上手く表示させる方法はないかな…

 

と悩んできる人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • iOS と Android アプリをスマートに表示させるツール
  • アプリを表示させるツールの使い方

 

スマホアプリを紹介するときは、どうしても iOS と Android の両方を表示させたいものです。

ただ、リンクを 2 つ表示させたり画像をカスタマイズしたりするのは大変ですよね。
 

そこで、簡単に iOS と Android アプリをまとめて表示できる便利なツールを紹介しましょう。

iOS と Android アプリをまとめて表示できる「アプリーチ」

「百聞は一見にしかず」ということで、まずはツールを使って表示した場合をご覧ください。

Google Earth

Google Earth

Google LLC無料posted withアプリーチ

 

アプリのアイコンと共に、iOS と Android のダウンロードボタンを見やすく表示してくれます。

では、このツール「アプリーチ」について紹介していきましょう。

便利なツール「アプリーチ」について


 

「アプリーチ」は、iOS と Android のアプリをまとめて紹介できるオンライン上の WEB ツールになります。
 

基本は無料なんですが、上記の例のように「posted withアプリーチ」という表記が必ず入ります。

もしこの文言を消したいという場合は、有料プランにするだけです。

オトマミ

なので、特に気にしない人は「無料」でそのまま使っちゃえば OK ってことです。

もちろんアカウント登録も必要ないので、誰でも気軽に使えます。

「アプリーチ」で表示できること

「アプリーチ」では iOS と Android のアプリをまとめて紹介できますが、どちらかだけ表示させる設定もあります。

他にも、

  • タイトルをどちらの OS 表記にするか
  • アイコン画像をどちらの OS 表記にするか
  • 開発元を表示するかどうか
  • 価格を表示するかどうか
  • 新しいタブで開くかどうか

を設定できます。

アプリでアフィリエイトするときにも便利

スマホアプリを紹介してアフィリエイトをしている人は、アフィリエイトリンクに組み込まれている ID を入れ込むことが可能です。

ASP でリンクを発行すると iOS と Android それぞれ違うリンクが発行されるので、それぞれの空欄に入力すれば OK です。

「アプリーチ」の基本的な使い方

「アプリーチ」を使うときには、デザインを整えるために公式で配布している CSS を追加しておくといいです。
 

ちなみに、CSS はこちら。

CSS

.appreach { text-align: left; padding: 10px; border: 1px solid #7C7C7C; overflow: hidden;
}
.appreach:after { content: ""; display: block; clear: both;
}
.appreach p { margin: 0;
}
.appreach a:after { display: none;
}
.appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important;
}
.appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%;
}
.appreach__detail:after { content: ""; display: block; clear: both;
}
.appreach__name { font-size: 16px; line-height: 1.5em !important; max-height: 3em; overflow: hidden;
}
.appreach__info { font-size: 12px !important;
}
.appreach__developper, .appreach__price { margin-right: 0.5em;
}
.appreach__posted a { margin-left: 0.5em;
}
.appreach__links { float: left; height: 40px; margin-top: 8px; white-space: nowrap;
}
.appreach__aslink img { margin-right: 10px; height: 40px; width: 135px;
}
.appreach__gplink img { height: 40px; width: 134.5px;
}
.appreach__star { position: relative; font-size: 14px !important; height: 1.5em; width: 5em;
}
.appreach__star__base { position: absolute; color: #737373;
}
.appreach__star__evaluate { position: absolute; color: #ffc107; overflow: hidden; white-space: nowrap;
}

WordPress なら、上記を「追加 CSS」のコピペすれば綺麗に表示されます。

「アプリーチ」の使い方

まずは、入力欄にアプリ名を入れて検索します


 

そして紹介するアプリに間違いがなければ、そのまま下へスクロールしていきます。


 

そしたら、どのように表示させるかを設定します。


 

その次に、アフィリエイトをする場合にはそれぞれの空欄に入力して、アフィリエイトをしない場合はスルーして OK です。

そして最後に「新コード」に記載されているコードを全てコピーして、ブログのエディターに貼り付ければ完了です。

iOS と Android アプリ表示は「アプリーチ」を使おう

「アプリーチ」はとても便利なツールにも関わらず、無料で使えるのでとても重宝するはずです。

デザインも公式が配布している CSS を少し変更すれば、サイトに合わせたデザインにもできるので、余裕がある人はぜひチャレンジしてみてください。

オトマミ

アプリをよく紹介する人は、「アプリーチ」でスマートに表示させてみましょう!
]]>
WordPressテーマ「MAG」に更新日を表示させる方法【PHPにコードを追記するだけ】https://otomami.org/wordpress-mag-show-update/Tue, 31 May 2022 06:55:21 +0000https://otomami.org/?p=1648

  と悩んでいる人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   WordPress テーマ「MAG」では後になって記事を更新しても、日付は投稿した日が表示さ ... ]]>

WordPress テーマ「MAG」って投稿日しか表示されないけど、更新日も表示するにはどうすればいいんだろう…

 

と悩んでいる人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • 「MAG」に更新日を表示させる方法
  • 記事を更新したときだけ更新日も一緒に表示させる方法
  • Font Awesome の記号も表示させる方法

 

WordPress テーマ「MAG」では後になって記事を更新しても、日付は投稿した日が表示されたままになってしまうんですよね。

これだと記事を新しくしたことが分からないので、ユーザーに更新された記事だということを伝えづらくなってしまいます。
 

そこで、WordPressテーマ「MAG」に更新日を表示させる方法を紹介しましょう。

「MAG」に更新日を表示させる方法【公式編】

実は、TCD の公式として「MAG」に更新日を表示させる方法が公開されています。

その方法をそのまま紹介しておくと、個別投稿(single.php)の 19 行辺りにこのような記述箇所があります。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time></p><?php }; ?>

 

この部分を、このようにコードを追加します。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time></p><?php }; ?><p class="date_update">最終更新日: <?php the_modified_date('Y.m.j'); ?></p>

 

分かりやすいように赤文字にしましたが、元々の記述に続けて更新日が表示されるコードを追加するだけです。

ただ、これだけだとデザインのバランスが悪くなるため、CSS も追加して整えます。
 

「追加 CSS」にはこちらを追記してください。

CSS

#post_meta_top .date { float: left; }
#post_meta_top .date_update { font-size: 12px; }
@media screen and (max-width: 770px) {
#post_meta_top .date { margin: 0 10% 0 0; }
#post_meta_top .date_update { font-size: 10px; } }

 

公式でこれだけ教えてくれているので十分と言えば十分ですが、これだと更新していない記事にも「2022.01.01 更新日:2022.01.01」のように表示されてしまいます。

参照:TCDテーマMAG:記事の最終更新日を表示する方法
 

そこで、投稿した日は投稿日だけ、更新したときには更新日が表示させるようにする方法を続けて紹介しておきます。

「MAG」に更新したときだけ更新日を表示させる方法

もう一度、元の個別投稿(single.php)の 19 行辺りを表示しておきましょう。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time></p><?php }; ?>

 

そして、このように更新した時だけ表示するコードを追加します。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time><span class="date_update"><?php if(get_the_time('U') !== get_the_modified_time('U')){the_modified_date('更新日:Y.m.j'); } ?></span></p><?php }; ?>

 

これで、更新したときだけ更新日が表示されるようになります。

もちろん、公式で教えてくれている CSS も追加してデザインを整える必要はあります。

更新日に Font Awesome の記号を使う場合

文字で「更新日」と表示させるのではなく、記号を表示させたい場合には Font Awesome を使うと簡単です。

すでに Font Awesome を使っている人なら上記に追加すればいいだけですが、もし初めて使うという人は呼び出すためのコードを追加する必要があります。

まずは Font Awesome を呼び出すための準備

Font Awesome の記号を記事で表示できるようにするには、テーマ自体にデータを保存するか、もしくはデータを呼び出せるようにする必要があります。

個人的には呼び出した方がラクだと思っているので、呼び出し方法だけを紹介しておきます。
 

Font Awesome にはバージョンがいくつかあるのですが、今回は Font Awesome 5 を使った呼び出し方法にします

WordPress 管理画面のメニューから「TCDテーマオプション」を開き、「基本設定」の「カスタムスクリプト(タグ内に挿入されます)」に下記のコードを追記して保存します。

HTML

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

 

以上で準備は完了です。

「更新日」の文字を記号に変える

Font Awesome の準備が整ったら、先ほど記述したコードに少しだけ追加します。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time><span class="date_update"><?php if(get_the_time('U') !== get_the_modified_time('U')){ echo '<i class="fas fa-sync-alt"></i> '; the_modified_date('Y.m.j'); } ?></span></p><?php }; ?>

 

先ほどのコードに「echo ‘<i class=”fas fa-sync-alt”></i> ‘;」を追加して、「更新日:」という文言を消しただけになります。

今回は例として「Refresh(<i class=”fas fa-sync-alt”></i>)」のマークを使っていますが、時計のマークなどを表示させたいときはこの部分を変更すれば OK です。
 

別のマークを使うときは、下記の URL で探してみてください。

https://fontawesome.com/v5/search?s=solid%2Cbrands

更新日をトップページやアーカイブでも表示させる場合

上記では「個別投稿(single.php)」に表示される日付を変更する方法として紹介しましたが、トップページやアーカイブページなどでも同様に変更できます。
 

その場合は、

  • メインインデックスのテンプレート(index.php)13行目
  • アーカイブ(archive.php)52行目
  • 検索結果(search.php)20行目

も上記と同じようにコードを追加すれば表示されるようになります。

WordPressテーマ「MAG」にも更新日を表示させよう

WordPress テーマ「MAG」に更新日を表示させる方法を紹介しましたが、できることなら「子テーマ」を作ってコードを追加することをおすすめします。

そうしないと、テーマの更新をするたびに同じ作業をしなければならなくなりますからね。
 

では、悩みが解決してすっきりしたら、コツコツと記事作成を頑張りましょう!

オトマミ

PHP のコードを編集することになるので、サイトが表示されなくなる場合もあります。慣れていない人は、バックアップを取って自己責任で行ってください。
]]>
【SANGO】カテゴリーラベルの位置を変える方法【3つのパターンを紹介】https://otomami.org/how-to-change-category-label/Tue, 05 Apr 2022 06:16:41 +0000https://otomami.org/?p=1643

  と調べている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   「SANGO」では、投稿一覧の時にアイキャッチ画像の左上にカテゴリーラベルが表示されるんです ... ]]>

テーマ「SANGO」のカテゴリーラベルの位置を変えたいんだけど、どうやって変えればいいんだろう…

 

と調べている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • SANGO のカテゴリーラベルの位置を少し変える方法
  • SANGO のカテゴリーラベルを右揃えにする方法
  • SANGO のカテゴリーラベルを中央の下に表示する方法

 

「SANGO」では、投稿一覧の時にアイキャッチ画像の左上にカテゴリーラベルが表示されるんですよね。

ただ、カテゴリー名が長かったりすると画像内の文字と被ることがあるので、ラベルを動かしたいという人も多いかもしれません。
 

そこで、「SANGO」のカテゴリーラベルの位置を変える方法を 3 パターン紹介します。

SANGO のカテゴリーラベルの位置を変える方法

SANGO のカテゴリーラベルの位置は、CSS を追加するれば簡単に変えられます。

ここで紹介する CSS を、「カスタマイズ → 追加CSS」へコピペしちゃってください。

カテゴリーラベルの位置を少し変える方法

カテゴリーラベルの位置を左側で位置を変える場合には、以下の CSS を基本にして調整してみてください。

css

.cat-name { top: -10px; left: -10px;
}

この例では top が -10 で left も -10 となっているので、デフォルトより左上に離れていく感じになります。

もし下に表示させたい場合は top をプラスに増やして、右に表示させたい場合は left をプラスに増やしていけば OK です。

カテゴリーラベルの位置を右揃えにする方法

カテゴリーラベルを左側ではなく、右揃えで表示させたい場合は以下の CSS を基本にして調整してみてください。

css

.cat-name { left: auto; right: 10px;
}

もし上下の位置も調整したい場合は、最初の方法を参考に top の部分を追加すれば OK です。

カテゴリーラベルを中央の下に表示する方法

僕の個人ブログ(副業ベース)などでは、カテゴリーラベルをアイキャッチ画像の中央下に表示しています。
 

このようにする場合は、以下の CSS を基本にして調整してみてください。

css

.cat-name { top: 200px; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;
}

 

もし文字の大きさやラベルの丸みを変更したい場合は、

css

 border-radius: 3px; font-size: 13px;

を追加して調整をしてください。

そもそもカテゴリーラベル消したい場合

色々試してみたけど、そもそもカテゴリーラベルはいらないという結論に達した場合は、以下の CSS を追加してみてください。

css

.cat-name { display:none!important;
}

オトマミ

あれこれ迷ったら、消しちゃうのもありかもですね。

SANGO のカテゴリーラベルの位置上手に変えよう

SANGO のカテゴリーラベルは、わりと強調されてしまうので好き嫌いが別れるかもしれないです。

そのため、場所を少し移動したいなってときは、この記事で紹介した CSS を基本にして調整してみるといいでしょう。

オトマミ

カテゴリーラベルの位置をサクッと変更して、コンテンツ作成を楽しみましょう!
]]>
ロリポップ! で phpMyAdmin にログインして編集する手順を紹介https://otomami.org/lolipop-phpmyadmin-howto/Thu, 10 Mar 2022 07:23:12 +0000https://otomami.org/?p=1614

  と困っている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   ロリポップ! では、データベースを phpMyAdmin を利用して編集が可能です。 でも、 ... ]]>

ロリポップ! で phpMyAdmin にログインしたいんだけど、どうやればいいんだろう…

 

と困っている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • ロリポップ! で phpMyAdmin にログインする方法

 

ロリポップ! では、データベースを phpMyAdmin を利用して編集が可能です。

でも、ログインする場所は簡単に見つかっても、どのように入ればいいのか分からない人も多いでしょう。
 

そこで、ロリポップ! で phpMyAdmin にログインして編集する手順を紹介します。

ロリポップ! で phpMyAdmin にログインする方法

それではまず、ロリポップ! の管理画面にログインしてください。

最初に「利用データベース」を確認

1 つしかサイトを立ち上げていない場合は一覧にも 1 つしか表示されませんが、複数ある場合はまず「利用データベース」は何かを確認します。

確認方法は、「サイト作成ツール」にあるサブメニュー「WordPress 簡単インストール」を開いて、ページの一番下に一覧が表示されます。

オトマミ

もし WordPress ではなく EC-CUBE などでサイトを立ち上げた場合は、それぞれの簡単インストールのページを見てください。

 

するとそこには、サイトの URL と「利用データベース」が表示されているので、メモするなりしてしっかりと覚えておきましょう。

データベースに入る

どのデータベースかを確認したら、次はメニューの「サーバーの管理設定」のサブメニュー「データベース」を開きます。
 

すると一覧が表示されるので、該当のデータベースの「操作する」ボタンを押します。


 

phpMyAdmin にログインする

「操作する」ボタンを押すと、「phpMyAdmin を開く」と書かれたボタンが表示されたページが開きます。
 

ログインに必要な項目は、

  • ユーザー名
  • パスワード
  • データベースホスト

の情報になります。
 

そしたら、まずは「パスワード確認」のボタンを押してください。


 

すると「パスワード」が表示されるので、メモをとってください。


 

そして次に、「phpMyAdmin を開く」のボタンを押してください。


 

そしたら、

  • ユーザー名 → ユーザー名を入力
  • パスワード → パスワードを入力
  • サーバーの選択 → データベースホストをブルダウンから選択

してから「実行」のボタンを押してください。


 

すると、phpMyAdmin の編集画面が表示されます。

ロリポップ! で phpMyAdmin を編集してみよう

何も知らずに phpMyAdmin を編集しようとすると、ログインに必要な情報はどれなのかちょっと分かりづらいんですよね。

でも知ってしまえばとても簡単なので、必要な時は phpMyAdmin の編集をしてみてください。

オトマミ

user nicename とかを編集したい時も、ここから phpMyAdmin から編集してくださいね。
]]>
【WordPress】カテゴリーの「未分類」が消せない?【削除方法を解説します】https://otomami.org/howto-remove-uncategorized/Thu, 24 Feb 2022 07:59:24 +0000https://otomami.org/?p=1599

  と困っている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   WordPress では初期の段階からカテゴリーに「未分類」があるのですが、使わないからと放 ... ]]>

WordPress のカテゴリーにある「未分類」を使わないから消したいんだけど、削除ボタンがないからどうしよう…

 

と困っている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • カテゴリーの「未分類」に削除ボタンが表示されていない理由
  • カテゴリーから「未分類」を削除する手順

 

WordPress では初期の段階からカテゴリーに「未分類」があるのですが、使わないからと放置している人も多いです。

しかし、使わないからと思って消そうと思っても「削除」ボタンが見当たらないですよね。
 

そこで、カテゴリーから「未分類」を削除する方法を解説しましょう。

WordPress のカテゴリーから「未分類」を削除する方法

「これは初期設定のものだからか?」「未分類だからか?」と思うかもしれませんが、実はある設定のせいでこれは削除できないようになってるだけです。

ある設定を変更すれば OK

実は、ある設定のせいで初期では「未分類」に削除ボタンが表示されていません。
 

それは、「設定」>「投稿設定」に入ったところの「投稿用カテゴリーの初期設定」という項目。 


 

記事作成時にカテゴリー選択をしなかった時は、ここで選択されているカテゴリーが自動で選ばれるようになっています。

つまり、自動で設定するカテゴリーに選択されているから、これが削除されないようにロックがかかっている状態なんです。
 

そのため、「未分類」を削除したければ、まずは「投稿用カテゴリーの初期設定」で別のカテゴリーを選んでみましょう。


 

今度は選んだカテゴリーの「削除」ボタンがなくなる

「投稿用カテゴリーの初期設定」で別のカテゴリーを選んだら、カテゴリー一覧に戻ってみましょう。
 

すると、「未分類」に「削除」ボタンが表示されるようなっているはずです。


 

逆に、今回「投稿用カテゴリーの初期設定」で選んだカテゴリーは、「削除」ボタンが表示されなくなっているはずです。

「未分類」は最初から名前を変更して使っておこう

カテゴリーの「未分類」に「削除」ボタンが表示されない理由さえ分かれば、まあなんてことないですよね。

多くの人が「未分類」は使わないからと放置していますが、そもそもは一番使う予定があるカテゴリーの名前を最初に設定しておけば良かったっていう話ではあります。
 

これから複数のブログなどを WordPress で立ち上げる時には、「未分類」を変更して使ってみましょう!

]]>
WordPress のウィジェットでブロックが消せない時の対象法【Classic にすれば削除できる】https://otomami.org/wordpress-widget-block-erase/Sun, 15 Aug 2021 03:38:37 +0000https://otomami.org/?p=1577

  と困っている人もいるでしょう。 そこで、この記事では下記の内容を解説します。 この記事で分かること   WordPress 5.8 よりウィジェットもブロックエディターが採用されたのですが、いくら ... ]]>

WordPress のウィジェットのブロックが消せなくなったんだけど、どうしたらいいんだろう…

 

と困っている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • ウィジェットのブロックを削除する方法
  • Classic に戻すプラグインについて

 

WordPress 5.8 よりウィジェットもブロックエディターが採用されたのですが、いくら削除してもブロックが消えてくれない事象が発生したんです

空のブロックなので大した問題ではないんですが、フッターには 1 つブロックが使われていると認識され、空白のフッターエリアが表示されてしまうということになってしまいました。
 

そこで、ウィジェットのブロックを確実に消す対象法を解説します。

消えないブロックは「Classic Widgets」で削除する


 

今回、ウィジェットを仮で作成してから削除しようとしたところ、追加するためのブロックが 2 つ並んでしまう状態になってしまいました。


 

しかも、削除しようとしてもカラムの選択ブロックが表示され、スキップしてもまた空のブロックが残ったままになるんですね。


 

はっきりした原因は分からないのですが、まだ新しい仕様ということで何らかの不具合が起きているのかもしれません。

ですが、もしウィジェットのブロックをどうしても消したい場合は、プラグイン「Classic Widgets」を使うのが有効です。

「Classic Widgets」を使って削除する

「Classic Widgets」は、以前のウィジェット管理画面に戻せるプラグインになります。

> https://ja.wordpress.org/plugins/classic-widgets/

 

これを有効にしたあとに、消せない項目を見てみると「ブロック」というウィジェットがなぜか追加されている状態になっています。

オトマミ

開いてみると、記述した覚えのない内容が…

 

このウィジェットを削除すれば、ブロックエディターのバージョンでも削除された状態になります。


 

もし、ウィジェットの空ブロックがどうしても消せないという人は、この方法で削除してみてくださいね。

]]>