WordPress

パーマリンク設定を変更してアクセスURLが切り替わるのにかかった期間【AMPキャッシュ】 インターネット小話

パーマリンク設定を変更してアクセスURLが切り替わるのにかかった期間【AMPキャッシュ】

先日(2021年11月2日)、サイトのパーマリンク設定を変更して、URLアドレスを変更しました。ページ全体のパーマリンクを変更して、検索順位に悪影響があるか心配だったのですが、今のところ無事に移行できています。今回は、パーマリンクを変更してから、Analyticsで集計されるURLアドレスがどのように変化するか調べてみました。切り替わる期間前回は、WordPressのパーマリンク設定を変更して、「」「」のような形式に変更しました。これは、「月ごとの記事のアクセス数」を集計する...
[WordPress]エディタでうまく表示されない画像のアドレス「画像に alt 属性が指定されていません」 ニッチな話題

[WordPress]エディタでうまく表示されない画像のアドレス「画像に alt 属性が指定されていません」

WordPressのエディタ画面に画像をアップロードすると、たまにうまく表示されないことがあります。ところが、「メディアの選択」で確認すると、画像が表示されます。アップロードはできているようです。ところがこの画像を挿入しても、同じくエディターに表示されません。ブラウザによって表示されたり、しなかったりブラウザからブログエディタでエラーになっているアドレス()に、アクセスしてみます。すると、ChromeとSafariで挙動が異なりました。そこで、アップロードした画像のURLにア...
[WordPress]「Briefly unavailable for scheduled maintenance」【自動更新タイミング】 インターネット小話

[WordPress]「Briefly unavailable for scheduled maintenance」【自動更新タイミング】

先日、自分のブログを確認していたら、突然 グレーの画面で何も表示されなくなりました(2021-11-02 23.34.33)。Briefly unavailable for scheduled maintenance. Check back in a minute.(定期メンテナンスのために一時的に利用できません。 しばらくしてからもう一度確認してください。)これは、WordPressのメンテナンス中の表示です。私は、プラグインやテーマの自動更新を有効にしているので、たまたま...
[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio] ニッチな話題

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。ブログカードのデザインを少し変更しました。そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。img{ object-fit:cover; aspect-ratio: 100/100;}また、ドメイン名の色を変更することで、タイトルと区別...
[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】 インターネット小話

[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】

Googleサーチコンソールを見ていたら、エラーの通知がありました。どうも、画像のアップロードに失敗したまま、記事を公開してしまっていたようです。ポイント「blob:〜」で始まるURLアドレスのデータは、ブラウザ内に保持されている。画像アップロード中にタイムアウトすると、リンクアドレスとして残ってしまうことがある。画像をアップロードし直すと修正できた。タグ「amp-img」の属性「src」のURL プロトコル「blob」が無効ですサイト〜で「AMP」の問題が新たに 検出されま...
[WordPress] 「月の投稿ごとの集計」をするためにブログのパーマリンクを変更した【Search Regexプラグイン】 インターネット小話

[WordPress] 「月の投稿ごとの集計」をするためにブログのパーマリンクを変更した【Search Regexプラグイン】

「Google アナリティクス」でアクセス数を見ているのですが、「投稿した月ごとの集計」を知りたいと思いました。そのために、サイトのパーマリンクを変更しました。手作業で内部リンクを修正するのはしんどそうだったのですが、プラグインのおかげで一気にできました。ポイントGoogleアナリティクスでは、「ディメンション」ごとにアクセス数を集計できる。WordPressのパーマリンクは、「設定」から変更できる。投稿内のURLを一括置換するのに、「Search Regexプラグイン」をイ...
WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】 プログラミング

WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】

MacでWordPressのエディタにコピペをすると、<meta charset="utf-8">というタグが追加されてしまうことがあります。これを放置すると、Google Search Consoleで「AMPエラー」になってしまいます。検索結果にAMPページが除外されてしまうので、「表示の遅いページ」という評価になってしまいます。ビジュアルエディターでは見つけにくいエラーなので、いちいち コードエディタに切り替える必要があります。「utf」で検索して、ちまちま修正していた...
[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】 プログラミング

[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】

ポイントQRコードはGoogle APIsで自動生成できる。WordPressの記事URLは、<?php the_permalink(); ?>で出力できる。functions.phpでは「get_the_permalink()」で文字列を取得できる。ウィジェットは印刷されないので、関数で本文末尾に追加する。【追記:2024-05-09】Google APIsのQRコード生成は終了したので、代替サービスを利用します。Google APIsでQRコードを生成するウェブページには...
「複数のフォームコントロールが単一のlabel要素内に置かれています」[Contact Form 7の設定エラー] ホームページ運用

「複数のフォームコントロールが単一のlabel要素内に置かれています」[Contact Form 7の設定エラー]

Contact Form 7の設定エラーが消えないなぁ……複数のフォームコントロールが単一の label 要素内に置かれています。問合せフォームを「Contact Form 7」というWordPressプラグインで作っているのですが、設定エラーが検出されます。エラー:複数のフォームコントロールが単一の label 要素内に置かれています。label要素ごとに削除して確認してみると、<label>要素にフォームを入れ子にしている部分がエラーになっているようです。<label> ...
[WordPress] 好きな画像でブログを共有したい【Share This Imageプラグイン】 インターネット小話

[WordPress] 好きな画像でブログを共有したい【Share This Imageプラグイン】

書いたブログをTwitterにシェアする時に、アイキャッチ画像とは別の画像を選びたいな。説明の図解を共有できたら、便利なはず。今回は、TwitterやFacebookに投稿するときに、Pinterestのように画像(主に図解)を選んで、共有したいと思って、WordPressプラグインを導入することにしました。ブログと画像のSNS共有ブログをSNSに共有するときに好きな画像を表示するには、大きく2つの方法があります。好きな画像でブログを共有するmetaタグでSNSアイキャッチを...
アンカー広告が印刷に表示される [Google Adsense, Cocoon] ホームページ運用

アンカー広告が印刷に表示される [Google Adsense, Cocoon]

自分のブログを印刷していたら、アンカー広告が印刷されてしまうことに気づきました。ページごとに下部に広告が表示されてしまっています。◆追記(2022年4月3日)Cocoon 2.4.2の更新で直ったかもしれません。これまでは、本文内のAdsense広告は、印刷されないように設定されていました。印刷時のスタイルを、@media print で指定することができるからです(WordPressのCocoonテーマを利用しています)。しかし、最近(2021年7月19日から)表示されるよ...
試しに記事下にLINE登録ボタンをつけてみた ちいラボエッセイ

試しに記事下にLINE登録ボタンをつけてみた

Youtubeの「チャンネル登録お願いします」を参考に、ブログの記事下に「LINE登録」ボタンを追加してみました。ついでに、LINE公式のあいさつメッセージにも、タイムラインの見方を画像で説明するようにしました。LINEのあいさつメッセージには、画像を追加することができます。少しでもリピートにつながれば嬉しいです。こちらもどうぞ。
Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】 ニッチな話題

Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】

記事のアクセスランキング(人気記事)は、なかなか上位の記事が変わらない傾向があります。そこで、WordPressの記事のアクセス数の前週比のランキング(急上昇の記事)を作りたいと思いました。Cocoonのコードを読んでみるとアクセスランキングは、SQLクエリで生成されていました。完成したものCocoonのget_access_ranking_recordsのSQLクエリCocoonのアクセスランキングは、「lib/page-access/access-func.php」の「f...
[Cocoon] 記事のタグをサイドバーに表示した(タグクラウドではない) インターネット小話

[Cocoon] 記事のタグをサイドバーに表示した(タグクラウドではない)

ブログのサイドバーの項目を見直してみました。WordPressのサイドバーに記事のタグを追加したカスタム検索とナビゲーションメニューの間に、・リンク・目次・タグ・関連記事を追加しました。とくに、記事のタグを追加するのが、大変だったのでメモします。「タグ」を表示する今回、サイドバーにタグを設置しようと思ったのは、検索が面倒な人に関連記事を探しやすくしたいからです。Cocoonテーマでは、記事のタイトル上下や本文下には、「タグ」を表示することができます。Cocoonの投稿にタグを...
AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾) ニッチな話題

AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾)

cocoonのAMP機能で生成しているCocoonテーマのAMP設定でAMPページを生成しています。通常ページとAMPページの差デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。そこで、メニューを追加したいと思います。ウィジェットにナビゲーションメニューを追加まずは、ウィジェットでナビゲーションメニューを追加します。ただ、このままだとメニュー...
Goolgle XML Sitemapsプラグインが検索で見つからない(改名していた) ニッチな話題

Goolgle XML Sitemapsプラグインが検索で見つからない(改名していた)

以前に紹介したGoolgle XML Sitemapsプラグインを、別サイトで利用しようとしたら、検索で見つかりませんでした。ポイント「Google XML Sitemaps」から「XML Sitemaps」に名前が変わっていました。プラグイン検索で見つからないプラグインで「Google XML sitemaps」で検索(2021年3月)3ヶ月前は確かにあったんです。プラグインで「Google XML sitemaps」で検索(2020年12月)プラグイン詳細で確認するすでに...
LiteSpeed Cacheプラグインをオン・オフで比較してみた ニッチな話題

LiteSpeed Cacheプラグインをオン・オフで比較してみた

LiteSpeed Cache(v3.6.4)プラグインの「キャッシュ機能」のオン・オフでどれぐらい違うのか、比較してみました(2021年3月23日現在)。もしかして、誤差の範囲……?もう少し詳しく比較してみましょう。比較無効のときプラグインが無効のときも比べてみます。オフのときオンにした直後オンにして再分析比較結果 モバイルのラボデータ無効オフオン(直後)オン(2回目)First Contentful Paint(秒)2.32.12.12.1Speed Index(秒)5....
Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?) インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。これも、note風スタイルの一環ですね。大きな字で見やすいタイトルと正方形のアイキャッチアイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。常に左から読んで行けるほうが、目にラクな気がします。といって、そこまでブログ一覧はアクセスがないんですが……笑CSSCSSはこんな感じです。display: flexで下位の要素の順番(order)を変更できるようにしています。/** ...
WordPress 5.7にアップデートした 【インサータからドラッグ】 インターネット小話

WordPress 5.7にアップデートした 【インサータからドラッグ】

ダッシュボードにWordPress 5.7の通知が来ていました。そろそろ更新してみるわたしはプラグインの対応を確認してから更新したいので、WordPress本体は自動更新にはしていません。しばらく放置していましたが、バックアップのタイミングで更新することにしました。失敗したら戻せばよいし。データをダウンロード中…2分ほどで更新できました。WordPressのアイキャッチは、毎回 美しいですよね。メジャーアップデートで機能が増えたWordPress 5.6.2から 5.7 にな...
WordPressのエディタが異常に遅い? 【バージョン更新の意味】 ニッチな話題

WordPressのエディタが異常に遅い? 【バージョン更新の意味】

WordPressで「エディタ画面が異常に遅い」という相談を受けました。これは、WordPressとテーマのバージョン相性が原因でした。結論エディタの反応が異常に遅かったが、WordPressとテーマを最新版に更新すると直った。入力可能になるまでちょっとタイムラグエディタ画面で操作すると、マウスでクリックしてから、入力可能になるまで、ちょっとタイムラグがあります。エディタ画面の不具合は遅いだけでなく、文字色も反映されなかったり、CSSがうまく動作していないようでした。バージョ...
「index.php?xml_sitemap=params=」XMLサイトマップのURLがおかしい?  【WordPressのパーマリンク】 ニッチな話題

「index.php?xml_sitemap=params=」XMLサイトマップのURLがおかしい? 【WordPressのパーマリンク】

XML Sitemapsプラグインで、XMLサイトマップを作ったけれど、なんかアドレスがおかしい。結論WordPressのXMLサイトマップのURLが「index.php?xml_sitemap=params=」なのは、パーマリンク設定が「基本」だから。それ以外の設定に変更すると、「sitemap.xml」にできる。XML Sitemap Generatorプラグインを確認するXML Sitemapのプラグインには、サイトマップのインデックスファイルのURLが表示されています...
[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう ニッチな話題

[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう

読んでいる文章をずらされると腹が立つだろう。だから、そういうページは直した方がよい。さて、どうやって? という話。CLS(累積レイアウト変更)とはウェブページはあとから画像が表示されると、下にある文章がずれます。これを「累積レイアウト変更(CLS:Cumulative Layout Shift)」といいます。広告が多いページだと気になるのよねーユーザーの利便性が大事Googleサーチコンソールでは、このようなレイアウトのずれを指摘してくれます。CLSに関する問題:0.25超(...
Googleアドセンスのアンカー広告を下に固定する[Cocoon] ニッチな話題

Googleアドセンスのアンカー広告を下に固定する[Cocoon]

スマートフォンのユーザーの画面上下にずっと表示する広告を、アンカー広告(あるいはオーバーレイ広告)といいます。アンカー広告がメニューバーと重なると不便なので、今回はGoogle広告のアンカー広告の位置を変更しようと思います。ウェブサイト運営者向けの話ですポイントスクリプトで上部アンカー広告を抑制できる。上下にメニューがあると、アンカー広告の配置に影響がある。【追記】パソコン画面にも表示されるようになります。(2021年7月9日)追記(2023-07-17)アンカー広告の位置指...
note風スタイル第5弾!引用とコード ニッチな話題

note風スタイル第5弾!引用とコード

note風デザインもそろそろ簡単な微調整です。今回は引用文(blockquote)とコード(pre)のデザイン。ビフォア・アフター元のデザインに比べて、小さくグレー基調にしました。以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。ただ、文字は少し小さいかもしれません。こんな感じの引用。こんな引用元code is here { something.}引用ブロック引用ブロックは、かなりスッキリしました。.entry-content blockqu...
note風スタイル第4弾!目次のデザイン ニッチな話題

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は……文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次(table of contents)のHTML構造.toc.toc-title.toc-contentol.toc-listliaリスト構造(ol, li)とアンカーリンク(a)の関係で、かなり複雑な入れ子になっ...
[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】 ニッチな話題

[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。作成日時と更新日時を2段になるようにしました。こちらがCSSです。.entry-header .date-tags { order: 3; color: #a8abb1; font-size: 16px;}.entry-header .date-tags .post-update:after { content: "\A" ; white-space: pre ;}少し、文字の色や大きさも変更していますが、メインになるのは...
WordPressのバックアップ復元がずっと終わらない…… 【Softaculous】 ニッチな話題

WordPressのバックアップ復元がずっと終わらない…… 【Softaculous】

ヒヤリとした話です💦WordPress 5.6のアップデートが思うようにいかず、いったんバックアップから5.5に復元することにしました。そのときに、バックアップ作業がずっと進まない状況になったので、レポートします。注意バックアップに失敗するとデータを失う場合があります。十分に注意した上で、自己責任で操作して下さい。WordPress 5.5に戻したいWordPress 5.6にアップデートしたところ、よく使っているプラグイン(Change Block Keywords)が対応...
note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】 ニッチな話題

note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイトルと本文の位置が近くなるので、読みやすいですよね。Cocoon設定やPHP編集もいいけれど……アイキャッチ位置を変更する方法をざっと調べると…Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更する方法が紹介...
note風スタイル第2弾!モバイルメニューを編集 ニッチな話題

note風スタイル第2弾!モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。今回のメインは モバイルメニューです。どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。モバイルメニューボタンをいろいろ変更した上部バーはすっきりさせました。下部バーはLINE登録、ツイッ...
LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】 ニッチな話題

LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】

ほとんどタイトルが全てなんですが、LiteSpeed Cacheプラグインのアップデートについてメモしておきます。プラグインのアップデート一つでこんなに変わるんですね。LiteSpeed Cacheのバージョンが3.5.0.1にアップグレードされたLiteSpeed CacheはWordPressのプラグインで、mixhostサーバーではサイトスピード向上のために利用することができます。最近(2020年9月29日)バージョンが3.4.2→から3.5にアップデートされました。そ...
[mixhost] 自分のサイトにアクセスできない【データベース接続確立エラー】 #PR含む

[mixhost] 自分のサイトにアクセスできない【データベース接続確立エラー】

ブログの編集をしていたら、いきなりアクセスできなくなりました。どうもレンタルサーバの一時的なエラーで、1時間ほど待つと無事に復旧されました。はじめてのことでびっくりしましたので、その顛末を記録しておきます。Error establishing a database connectionとは?自分のサイトにアクセスしたら、こんなメッセージが表示されました(2020-09-26 17:33)。Error establishing a database connectionThis...
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...
スムーズにフリーイラストの配布する【ショートコードでクリエイティブコモンズ登録】 インターネット小話

スムーズにフリーイラストの配布する【ショートコードでクリエイティブコモンズ登録】

こないだは自作の画像ファイルをクリエイティブ・コモンズ・ライセンスで公開する方法を調べました。せっかく作った図案のうち、再利用できそうなものは、ほかの方も使えるようにすると便利なはずです。しかし、ライセンス情報をHTMLで記述するのは大変です。そこで、ショートコードで省力化できないか、と考えました。それが今回のお題です。ショートコードで実現したい目標ショートコードは[cc_img url=画像のURL name=表示名]という書き方にします。つまり、こんなふうに入力したらこん...
WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】 ニッチな話題

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。ウィジェットとしてPHPコードを実行したいと思います。追記(2024-07-20)任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。カスタムHTMLではPHPコードは実行できないまず試したのがウィジェットの「カスタムHTML」です。しかし、「<?」で始まるタグはエラーになってしまいます。Special characters must be es...
WP ULikeプラグインがAMPページでうまく表示されない [WordPress] ニッチな話題

WP ULikeプラグインがAMPページでうまく表示されない [WordPress]

WP ULikeプラグインは、WordPressに「いいね」ボタンを設置するプラグインです。通常ページではこのようにハートマークのいいねボタンが表示されます。ところが、AMPページだと……0の隣の小さな白い丸になってしまっています。このハートマークは、CSSの:after 擬似クラスで背景画像として表示されています。ところが、AMPページでは:after擬似クラスが使えないため、何も表示されていないのです。いったんWP ULikeプラグインは無効にしました。残念。こちらもどう...
WordPressで効率的にブロックを挿入したい! 【スラッシュ挿入を活用】 (Change Block Keywordsプラグイン) ホームページ運用

WordPressで効率的にブロックを挿入したい! 【スラッシュ挿入を活用】 (Change Block Keywordsプラグイン)

WordPressのブロックエディタには、スラッシュでブロックを挿入する機能があります。これを「slash inserter(スラッシュ挿入)」といいます。「slash inserter」で検索すると、英語の記事がいくつか出てきます。「change-block-keywords」プラグインを使うと、スラッシュ挿入のキーワードを自分で設定できるようになります。追記:2024-04-26ChangeBlockKeywordsプラグインのメンテナンスは、2021年5月を最後に止まっ...
WordPressのログイン画面にパスワードを入れても進まない ~WordPressアプリ・Jetpack ホームページ運用

WordPressのログイン画面にパスワードを入れても進まない ~WordPressアプリ・Jetpack

スマホでブログを書こうと思って、WordPressアプリをインストールしました。ところが、WordPressアプリと連携したら、なぜか通常のブラウザからのログインができなくなってしまいました。WordPressアプリログイン画面でパスワードを入力しても、ぐるぐるまわって先に進みません。後でわかったのですが、どうもロボットチェックの表示でひっかかかっていたようです。思い当たることといえば、WordPressアプリ。WordPress.comWordPressアプリは、WordP...
[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】 ニッチな話題

[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。
ブログの絵文字のサイズを小さくした【CSSのクラス指定】 ホームページ運用

ブログの絵文字のサイズを小さくした【CSSのクラス指定】

教室のブログを見ていたら、気になる点が……わかりますか?絵文字の部分が不自然に大きいんです。しかも、灰色の枠までついている。ということで、CSSをちょっといじります。デベロッパーツールでCSSを確認するChromeのデベロッパーツールで検証してみると、「.iwe-border-bold img」に該当するようです。絵文字ですが、インライン画像の挿入になっているんですね。ということで、文章中の画像には境界線が表示されないようにする必要があります。ところが、この「.iwe-bor...
ブログをnote風のデザインにしてみた(ワンカラムデザイン) ホームページ運用

ブログをnote風のデザインにしてみた(ワンカラムデザイン)

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。note風デザインの記事一覧「note(ノート)」というブログサービスをご存知ですか?ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。2カラムのアメブロと比べてみますと…パ...