妻のサイト応援ブログ ~TUMA妻 LOVE好(躓き)~

よくつまずく妻のサイトを手助けする夫のひとり言ブログです

妻がアイキャッチ画像を丸くしたいと言い出した

「ねえねえ、アイキャッチ画像が丸かったら可愛くてオシャレじゃない?」と妻が言い出した。

アイキャッチ画像って何?妻に聞くと、

 妻が参考に買った『本気で稼げる アフィリエイトブログ』を渡された・・・

アイキャッチ画像は、「記事の顔」です。タイトルのすぐ下(もしくは上)に来る画像で、記事の中で最初に目につく画像になります。また、FacebookTwitterなどのSNSで記事をシェアしたときに、目を引いて読者を誘導する役割もあります。

もしアイキャッチ画像が設定されていなかったら、はてなブログWordPressの初期画像が表示されてしまうので、記事がシェアされたときにインパクトがなくなってしまいます。

と書いてある。

なるほど、これは大切だな。「よしアイキャッチ画像を丸くしよう!」

 まずは、インターネットで検索。「アイキャッチ画像 丸くする・・・」

たどり着いたのがこのサイト↓

【Stinger5カスタマイズ】WordPressのアイキャッチ画像を丸く切り抜く | ZOC

最初はアイキャッチ画像の大きさなどを「function.php」で変更するのかな?と思いましたが、
色々と調べると単純にcssを編集すれば良いみたい。

までは理解できたが、その後の内容はボクの理解力ではついて行けなかった。

どうしよう・・・CSSを編集すればいんだよな。ってCSSって何だっけ?

妻が参考に買った(ちなみに妻はまったく読んでいない)『ゼロからわかるHTML&CSS超入門』によると、

CSSとはCascading Style Sheetsの略称で、単にスタイルシートとよばれることもあります。スタイルシートは、文字の大きさや背景の色、全体のレイアウトなどwebページの見た目(スタイル)を定義する視覚表現のためのしくみで、・・・・

ということらしい。

つまり、アイキャッチ画像を丸くするためのCSSを編集すれば良いんだ。

『ゼロからわかるHTML&CSS超入門』によると、編集する内容は、border-radiusプロパティという部分で、ボーダーの角の丸さを定義するものらしい。

★丸くする場合の編集内容 border-radius:100%

次に、これをアイキャッチ画像に反映する方法を考える。

まず、アイキャッチ画像のCSSの現在の記述を把握する方法をインターネットで検索。

たどり着いたのがこのサイト↓

Chromeブラウザの検証機能でCSSスタイルの確認や変更をテストする方法

アイキャッチ画像の現在のCSSの記述が分かったので、

border-radius:100%と編集してみたら、アイキャッチ画像が丸くなった!

このCSSをコピーして、妻のwordpressのテーマの編集にあるスタイルシート(style.css)に貼り付け更新したら、妻のブログサイトのアイキャッチ画像が丸くなったのであった。

 

 

 

 

妻がハンバーガーメニューを作りたいって言い出した

「右上にメニューが表示されるヤツ作って」と妻が言い出した。

右上にメニューが表示されるヤツ・・・ハンバーガーメニューとか、ドロワーメニューとか、アコーディオンメニューとか、言うらしい。どの表現も同じヤツを指しているようだ。

ひとまず、インターネットで「STINGER8 ハンバーガーメニュー」と検索。

参考にしたのがこのサイト

【STINGER8】ナビゲーションのハンバーガー(ドロワー)メニューを設定する! | 知りたいねっと

 

 手順通りに設定すると、いとも簡単にハンバーガーメニューを実装することができた。

妻はとても満足気で、「さすが!これがしたかったヤツ」とほめてくれた。

妻がSTINGERのテーマが使いたいと言い出した

妻のwordpressのテーマは、当初、ボクが選んだtwenty sixteenだった。

インターネット情報によると、twenty sixteenは、ブログ向きで、スマホで見やすい構成らしく、妻のブログサイトに適していると思った。

しかし、妻は、「可愛くて、オシャレなブログにならない」と不満顔だ。

妻が参考にしているブロガーさんのサイト(もっとお金の話がしたい)はオシャレらしく、そして使っているwordpressのテーマがSTINGERらしいのだ。

「よし!テーマを変更しよう」とボクは腰をあげた。(パソコン机のイスに腰をおろしたのだった)

まず始めにwordpressの外観の新規テーマを検索した。「STINGER・・・あれ?テーマが出てこない。」

今まで新規テーマが探せたのに、STINGERスペルが間違っているのか?いやあっている!

困った時はひとまずインターネットで検索だ。「STINGER8 導入方法」

参考にしたのがこのサイト↓

STINGER8のインストールと子テーマの導入方法 | らいふーる

なんと、STINGERの公式サイトからファイルをダウンロードして、wordpressで有効化するって方法だったのか!

あとは、参考にしたサイトの記事にある手順どおり処理し、どうにか妻のサイトのテーマをSTINGER8に出来たのであった。

 

 

目次の作成

妻の目次の作成依頼に対し、安直な答えを出してしまった。

目次自動作成プラグインをインストールする方法か、記事のテキストエディタにHTMLを記述する方法かを検討するにあたって、前者が何故かうまくいかず、とりあえず後者がうまくいったので、後者の方法を妻に伝えた。

面倒くさい方法をボクは伝えたのだ。

それから妻は、目次作成のため、記事を書く度にテキストエディタにHTMLを記述した。

さすがに面倒くさくなったらしく、インストールされていた目次自動作成プラグインを妻は自力で使えるようになっていた。

「やれば出来るじゃんか」という気持ちと、

「ごめんなさい」という気持ちの間でボクはつまずいたのでした。

そして、後日、HTMLで記述していた目次とプラグインの目次の2つの目次が出来ている記事があることに気づいたのであった(トホホ・・・)。

 

妻が投稿記事の目次を作りたいって言いだした

妻がwordpressで記事を書き始めた。

妻はこれまでに楽天ブログで200記事ほど書いていて、記事を書くことに関しては小慣れている。そんな妻が「どうしたらいいんだろう・・・」と相談してきた。

「目次のつけ方がわからないから付けて欲しい・・・」

ボクもまったくわらない。何故ならボクはwordpressを設定させられてから”プラグイン”とか”HTML”とか”CSS”とか単語は、見聞きすることあってもその仕組みはチンプンカンプンだからだ。

ひとまず、インターネットで検索してみることにした。

"wordpress 目次"

どうやら、プラグインをインストールする方法※1と、記事のテキストエディタにHTMLを記述する方法※2があるようだがどちらが良いのか?

※1WordPress目次の作り方!目次作成プラグインTable of Contents Plusの使い方! | アフィ活 ~サラリーマン副業ブログ実践記~

※2[WordPress]プラグインを使わずに目次を作る方法

とりあえず、目次を自動作成するプラグインをインストールしてみた。が、プラグインの使い方がわからない。適当に使い方をググってみて、説明どおりにしてみたが何故だか目次は作成されない。

次に記事のテキストエディタにHTMLを記述する方法を紹介していたサイトを真似てみると、何と目次が出来たじゃありませんか。

妻にこの方法を教えて、ひとまずボクの任務は完了した。

妻がwordpressでブログを作りたいって言いだした

妻が楽天ブログで記事を書いているのは知っている。

どうやら主婦のお役立ちコンテンツを記事にして、アフィリエイトで小遣い稼ぎをしたいようだ。

最近の妻の口癖は「ブログ収入でボクを海外旅行に連れていってあげよう」だ。

だが現実は、月ブログ収入は500円ほどらしい。

妻によると楽天ブログでは、自分で貼ったアフィリエイト以外が貼りまくられて自分の報酬になりにくいらしい。

ちなみに、アフィリエイトとはバナー広告のことで、妻のサイトの閲覧者がバナー広告をクリックし、リンク先のサイトで買い物をしたら妻に報酬が発生する仕組みとのことだ。

そこで、wordpressなら勝手にアフィリエイトを貼られることもないから、wordpressで自分のブログサイトを作りたいということなのだが・・・

どうもwordpressの始め方がわからなくなって、ボクに作ってと言ってきた。

ボクはIT関係には疎く、どちらかと言えば苦手な方だが、「ひとまずこれ読んで」と妻に渡されたのが、『いちばんやさしいwordpressの教本』というwordpressの始め方の本だ。

『いちばんやさしいwordpressの教本』の手順通りに進めていくと、さくらインターネットレンタルサーバー契約をして、独自ドメインを購入することになる。そして、wordpressをサーバーにインストールするなど必要な設定を完了すると、いよいよwordpressでブログサイトをはじめることになるだが・・・