WordPressで記事を書くときに、引用して書くことって

よくあることだとは思いますが、引用タグ　blockquote　を、

そのまま使うのもありではありますが、色んなサイトを見て

みると、引用された部分がデザインされているわけですよ。

かっこいいわけですよ。

そこで、はっきりと引用しているとわかりやすくするには

どうしたらよいか、グーグルで調べてみると、CSSでデザインで

できるということがわかったわけです。

だけど、CSSでデザインなんてはっきり言って敷居がかなり

高くなってます。

昔ほんのちょっとかじってはみたけど、すっかり

忘れてます（汗）

いいデザインはないものかと探していたところ、

このサイトに当たりました。

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

30もの魅力的な引用デザインが有り、印象はどれも

「かっこいい」！

CSSだけでこんなデザインができるんだと思うと、すごいと

同時に、このサイト様のデザインセンスに感謝したいと

思います！

もちろん、どれもいいとは思うのですが、それぞれのサイトの

雰囲気や色などデザインもあるので、私が選んだのはこれ！

サイト全体が黒が多いのでこのデザインに。

ただ、このデザインを使用する際には、FontAwesomeという

WEBアイコンを使用する必要があります。

Fontawesomeとは？

どうやって適用するのか？ってのもくわしく、さるワカさんに

掲載されていました。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

このページをじっくり読めば、WEBアイコンをサイト上に

適用させることができます。バージョンもどんどん上がって

いるようで、フリーで使用することができますが、有料になると

アイコンにも幅が広がって、いろんなアイコンを数多く

使うことができるようになります。

WordPress上に引用デザインを適用させる

そのためには、

blockquote {
position: relative;
padding: 7px 16px;
box-sizing: border-box;
font-style: italic;
color: #585858;
border: solid 3px #585858;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10d”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
}

blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10e”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
font-weight: 900;
}

blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

この上記のCSSを、WordPressのメニューから、

外観→CSSの編集　を開いて、

流し込んであげればいいわけです。

これでOK！

と思いきや・・・・・

アイコン部分、つまり　”　ダブルクオーテーション部分は

表示されてなかったんです。

アイコンが表示されない

悩みに悩んだ結果、調べてみるとこんなサイトに記載してありました。

Font Awesomeがうまく表示されない。

引用デザインサンプル集のページ更新日が2018/08/09となって

いるので、全く古いページではないのですが、FontAwesomeの

バージョンがどんどん更新されている状況の中なので、

あり得ることなんだろうとは思いますが、

表示されない理由がわかった

font-family の部分の、

「5 free」がなかったために、すぐに修正したところ、無事

アイコンが表示されるようになりました。

（多分このページでもちゃんと表示されれていると思います）

これでまた一歩、このブログもデザイン化され、カスタマイズ

することができました。

参考にさせていただきましたサイト様には感謝したいと

思います。ありがとうございました。

参考ページ：

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

Font Awesomeがうまく表示されない。

[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]

プラグインのアップデートから、データベースをアップグレードしてちょうだいって

催促があったので、「まあ、大丈夫でしょ」なんて思いつつも、一応、データベースを

バックアップを、と思ったら、時間がかかりすぎてエラーが出たけど、

気にせずにやったら・・・・

あ、なんか動作がおかしい・・・・・

過去の投稿の続きボタンが変な動作してる・・・・

過去の投稿がおかしくなってしまったので、ひとまず過去のデータベースの

バックアップをもとに戻し・・・

それでも動作がおかしかったので、これ以上おかしくなるのもまずいと思い、

テーマを変更しました。

また少しずつカスタマイズしていこうと思います。

スポンサーも掲載しないと（汗）

結構貴重なんです、続けていくためにも。

[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]

変わった？

見てもらうにも、せっかくだから見てほしいということで

入れてあるプラグイン、有名なYoast SEOがインストール

されています。

ところが、今現在、バージョン7.6を使用しているのですが、

過去に使用していたバージョンと明らかに設定できる項目が

減っているのです。

有料にて、Yoast SEO Premiumというのもあってより高機能な

ものもあることは知っています。

https://gyazo.com/798a81d825b837d67a41d81f3f380034

この画像が今の私のこのブログ上でのYoast SEOの画面です。

フォーカスキーワードしか書き込めなくなっています。

今のバージョンはこれで正しいのでしょうか？

それとも無料版はSEO設定できる項目が減ったのでしょうか？

もしこれはおかしくなってるということでしたら、単純にこの

プラグインをインストールしなおせば良いものか、それとも

なにかいい方法があるのか、もしくはこれが現状での

正常なのか、ご存知の方がいらっしゃれな教えてください。

どうぞよろしくおねがいします。

wordpressからFacebookへの投稿は割と簡単にできてしまう。

Jetpackというwordpressプラグインの設定の中に、

「パブリサイズ共有」という項目があって、その項目から連携をすると、

wordpress → Fecebook

への投稿は割とすんなりできてしまう。

Fecebook → wordpress

への投稿って、どうやればいいんだろうか…

できているサイトがあるっぽいけど、どうやればいいのか

ちょっと悩んでみます。

[amazonjs asin=”4907237162″ locale=”JP” title=”WordPressプラグイン100選”]

facebook→wordpressという風に投稿できるプラグインは
ないものかなあ？

[amazonjs asin=”4800710197″ locale=”JP” title=”WordPress Perfect GuideBook 3.x対応版”]

なさそう。

スコアが表示されず、判定中がずっと 続いている感じ。

WordPressのバージョンは4.4.2、 Yoast SEOのバージョンは3.1.1。

プラグインを一旦削除してから 再インストールもしてみたし、

解説サイトから設定はしてみたつもりなんだけど、 動かないんだよね。 干渉するプラグインがあるのかなあ？ こうじゃないか？

みたいなことを知ってる人がいたら、教えて欲しいって マジです。

4/22　追記

Yoast SEOのバージョンが3.2.3にあがってて、過去に投稿された

プラグインの動作を確認したら、何とか動作そのものはしている模様。

残念ながらスコアは全く別のお話で(^^;