taccuma note

Gutenberg

Start Gutenberg ?

WordPress 5.0から新しいエディタGutenberg(グーテンベルク)リリースされて久しいですが、このブログはひたすらGutenbergを避けてきました。Classic Editorというプラグインを入れれば昔から慣れ親しんだインターフェイスにてWordPressで記事を書けるから、わざわざ見た目がガラッと変わってしまった新しいエディタGutenbergの使い方を覚える必要が無かったからです。Gutenbergにしたら予期しない不具合があるんじゃないか?それに遭遇したら対処するのも面倒くさいなぁって思っていたので、こうなったらClassic Editorプラグインで行けるところまで行ってしまおうと思っていたんです。そう思ってはいたんですがWordPressのバージョンも2019/12/20現在で「5.3.2」ということで、Gutenberg登場から相当の月日が経ちました。そろそろGutenberg使ってみようかな?そう思い始めたのが、今月に入ってから。

続きを読む

AtomのEmmetでHTML5のひな形の言語属性を英語から日本語にする


AtomでPackageのEmmetをお使いの人も多いかと思いますが、Emmetでは「!」(エクスクラメーションマーク、びっくりマーク)を入力したあとにTabキー or Ctrl + EでHTML5のひな形が簡単に作れます。

このひな形、デフォルトでは言語属性がlang="en"と英語設定になってしまうので、あとでlang="ja"といつも修正する必要がありとても面倒ですよね。実はこの辺に関してはAtomのPackageであるEmmetの設定を弄ることで簡単に解決できます。

続きを読む

Atomのオススメ拡張5 autocomplete-paths編

Atomのautocomplete-paths

GitHub製のテキストエディタAtomを使っているとき、例えばhtmlファイルに画像を挿入するさいに・・・普通だとパスの補完が効かないので、画像ファイルのパスを手打ちで入力しないといけません。これがものすごく面倒だし、打ち間違いもありえるので・・・そんなときのためにautocomplete-pathsというパッケージ(拡張機能)をいれましょう。

続きを読む

[CSS]文字列の折り返し、word-break: break-allの使いどころ

文字列が親要素よりはみ出す状態

こんな風に親要素から文字列がはみ出したことありませんか?普通はあんまり親要素から文字列はみ出さないんですよね。でもだからといって油断していると知らないうちにはみ出してますよ。はみ出し禁止です。

この記事では親要素から子要素の文字列がはみ出す、文字列の折り返しが上手くいってないときの対処法としてworld-break: break-allの使いどころをご紹介します。

続きを読む

Googleのモバイル検索上で「スマホ対応」が表示されないときの対処法

モバイル版Google検索結果画面

WordPressのテーマをこれから自分で作成する人は、モバイルフレンドリーであることが大切です。モバイルフレンドリーとは、スマートフォンなどの携帯端末でも見やすいサイトである・・・ということ。Googleではモバイルフレンドリーなサイトになるためには、レスポンシブデザインを推奨しています。

なぜモバイルフレンドリーであることが大切なのかといえば、Googleがモバイル端末上でのGoogle検索において、モバイルフレンドリーなサイトを優遇しはじめたからです。スマートフォンでGoogle検索をしたときに、検索結果に「スマホ対応」というラベルが表示されてるサイトを見たことがあると思いますが、「スマホ対応」というラベルがついたサイトはもれなくモバイルフレンドリーなサイトということで、レスポンシブデザインだったり、モバイル向けに最適化されたスタイルが適用されているサイトということです。

通常、レスポンシブデザインで作成したテーマを有効化させれば・・・自動的に「スマホ対応」というラベルがつくと思いますが、まれになかなか「スマホ対応」というラベルが検索結果につかない場合があるそうで・・・僕の場合もなかなかスマホ対応というラベルがつきませんでした。今回の記事ではレスポンシブなテーマを作成して、モバイルフレンドリーテストに合格したのにもかかわらず、なかなかモバイル検索上に「スマホ対応」のラベルがつかない場合の対処法をご紹介します。

続きを読む

他のサイトからiframeタグで自分のサイトを読み込ませない方法

iframeのサンプル

自分のブログ内にiframeで自分のブログを呼び出した

いま見ているページに、別のページをインラインで読み込むには・・・iframeタグを使えば可能なんですが、iframeタグで別サイトをまるまる自サイト内に取り込む行為はマナー違反も甚だしいので、基本やってはいけないと思ってます。

この記事では、自分のサイトを他のサイトからiframeタグで読み込ませない方法をご紹介します。

続きを読む

AkismetのAPIキーの有効期限が切れたら・・・

Akismetの有効期限切れ画面

Akismetというのはスパムコメントから自分のブログを守ってくれるプラグインのことなんですが、久しぶりにAkismetの設定画面を覗いたら・・・こんな表示が出てました。AkismetのAPIキーに有効期限なんてあるんですね。ということで、この記事では、もしAPIキーの有効期限切れですよってこんな感じの警告画面が出たときの対処法を。

続きを読む

モバイルフレンドリーテストを受けてみました

モバイルフレンドリーテスト

以前に一度でもこのサイトに訪問してくれたことがある人ならお気づきかと思いますが、WordPressのテーマをレスポンシブ対応にしました。WordPressのテーマを作り始めて3作目、はじめてのレスポンシブ(なんちゃって見切り発車版)です。

はじめてレスポンシブ対応のテーマを自作したので、モバイルフレンドリーテストを受けてみました。Google Search Console(旧Googleウェブマスターツール)が提供してる「自分のサイトがモバイルデバイスに対してフレンドリーか?」をテストするサイトです。

続きを読む

SyntaxHighlighter Evolved Version2系における「クリップボードにコピー」ボタンを修復する方法

fix-clipboard-button-in-syntaxhighlighter-1

WordPress上でソースコードをきれいに表示してくれる「SyntaxHighlighter Evolved」というプラグインを使用してる人も多いと思います。このプラグインはversion2とversion3…2種類の表示方法から好きな方を選べますが、前者の方が利用者が多い。ソースの折り返しが効くので横スクロールバーが出ないとう利点からversion2の方が多くの人に選ばれてるみたいです。

ただいつからか忘れましたが、version2において「クリップボードにコピーボタン」が表示されなくなりました。他の有名なブログさんを見ても表示されてなかったので…プラグインのちょっとした不具合だろう、いつかは修正されるだろうと放置プレイしていたのですが、いつまで経っても直らないので…自力で直してみました。

続きを読む

最近の投稿

おすすめ

タグクラウド

カテゴリー