Advertisement

<h1 style&equals;"-webkit-transform&colon; rotate&lpar;-3deg&rpar;&semi;-moz-transform&colon; rotate&lpar;-3deg&rpar;&semi;transform&colon; rotate&lpar;-3deg&rpar;&semi;-o-transform&colon; rotate&lpar;-3deg&rpar;&semi;-ms-transform&colon;rotate&lpar;-3deg&rpar;&semi;border-bottom&colon;solid 2px &num;cd8c5c&semi;width&colon;100&percnt;&semi;color&colon;&num;cd8c5c&semi;font-size&colon;18pt&semi;padding-bottom&colon;5px&semi;margin-bottom&colon;30px&semi;">超優秀!早く使えば良かった<&sol;h1>&NewLine;<p><span style&equals;"color&colon;&num;848484">過去を書き換えてくれるなんて夢のようなプラグイン。<br &sol;>&NewLine;ブログも書いてくれたら最高なのに…<&sol;span><&sol;p>&NewLine;<p>以前の<a href&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;fontawesome5head&sol;">記事 <i class&equals;"fas fa-external-link-alt"><&sol;i><&sol;a>で、フォントオーサムの新しいバージョンのCSSを入れたら、昔のコードを全部書き換えなきゃいけなくなってしまった婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>(<a href&equals;"http&colon;&sol;&sol;twitter&period;com&sol;immukodono"><i class&equals;"fab fa-twitter"><&sol;i>mmukodono<&sol;a>)です&lpar; &DiacriticalAcute;&Dcy;`&rpar;&equals;3<&sol;p>&NewLine;<p>&NewLine;<center><span style&equals;"color&colon;&num;848484"><i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i> Font AwesomeのCDN導入について <i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i><&sol;span><&sol;center><div class&equals;"lkc-external amp"><table border&equals;"1" cellspacing&equals;"0" cellpadding&equals;"4"><tr><td><br><a href&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;fontawesome5head">バージョンが違うフォントオーサムを&lt&semi;head&gt&semi;内へ一緒に記述しちゃったけど、&period;&period;&period;<&sol;a>&nbsp&semi;-&nbsp&semi;せつやくムコドノ<&sol;td><&sol;tr><&sol;table><&sol;div><br &sol;>&NewLine;<&sol;p>&NewLine;<p>そのときは、<br &sol;>&NewLine;&OpenCurlyDoubleQuote;<strong>新旧のコードをCSSに併記したままにする<&sol;strong>”という、<b>ただの見て見ぬふり作戦<&sol;b>で放置していたのですが…<&sol;p>&NewLine;<p>今回は、<br &sol;>&NewLine;<strong>プラグインを使ってみたら簡単に書き換えられるやん<&sol;strong>というお話。<br &sol;>&NewLine;<span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">*Search Regexは数年ぶりのアップデートにより使用方法等が大きく変更されている模様です<&sol;span><&sol;p>&NewLine;<p><&sol;p>&NewLine;<div style&equals;"background&colon; &num;a3b9e0&semi; padding&colon; 5px 10px&semi; color&colon; &num;f7fcfe&semi; border-radius&colon; 10px 10px 0 0&semi;"><b><span style&equals;"font-size &colon; 12pt"> この記事をザックリ<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>まとめると…<&sol;span><&sol;b><&sol;div>&NewLine;<div style&equals;"background&colon; &num;f7fcfe&semi; padding&colon; 10px&semi; border&colon; 2px solid &num;a3b9e0&semi; border-radius&colon; 0 0 10px 10px&semi;">&NewLine;<ul>&NewLine;<li>Search Regexの導入は簡単<&sol;li>&NewLine;<li>Search Regexの使い方も簡単<&sol;li>&NewLine;<li>Search Regexの効果は抜群<&sol;li>&NewLine;<li>書き換え実行は、プレビューを確認してから!<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;div>&NewLine;<p><&sol;p>&NewLine;<p><&excl;--TOC--><br &sol;>&NewLine;&lbrack;adchord&rsqb;<&sol;p>&NewLine;<h2>フォントオーサムのクラス<&sol;h2>&NewLine;<p>婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>は、Font Awesomeというウェブアイコンを使っています。<&sol;p>&NewLine;<p>   <span style&equals;"color&colon;&num;848484"><i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i> ←コレモフォントオーサム<&sol;span><&sol;p>&NewLine;<p>こないだ<a href&equals;"https&colon;&sol;&sol;origin&period;fontawesome&period;com">Font Awesomeのページ <i class&equals;"fas fa-external-link-alt"><&sol;i><&sol;a>を見ていたら、知らない間に新バージョンがリリースされていました。<&sol;p>&NewLine;<p>新バージョンに使いたいアイコンがあったためアップデートしたのですが…<&sol;p>&NewLine;<p><strong>新バージョンでは、新しいクラスを使用する必要があった<&sol;strong>のです。<&sol;p>&NewLine;<p>例えば…<br &sol;>&NewLine;【 <i class&equals;"far fa-hand-point-down"><&sol;i> 】のアイコンであれば、以下のように変更されていました。<&sol;p>&NewLine;<p><&sol;p>&NewLine;<div style&equals;"display&colon;inline-block&semi;background&colon; &num;fffff4&semi; padding&colon; 15px&semi; border&colon; dotted 3px &num;a3b9e0&semi; border-radius&colon; 10px&semi; word-break&colon; break-all&semi;">旧&colon;<br &sol;>&NewLine;&lt&semi;i class-&&num;8220&semi;fa fa-hand-o-down&&num;8221&semi; aria-hidden&equals;&&num;8221&semi;true&&num;8221&semi;&gt&semi;&lt&semi;&sol;i<br &sol;>&NewLine;&gt&semi;<br &sol;>&NewLine;   <i class&equals;"far fa-hand-point-down"><&sol;i> <i class&equals;"far fa-hand-point-down"><&sol;i> <i class&equals;"far fa-hand-point-down"><&sol;i><br &sol;>&NewLine;新&colon;<br &sol;>&NewLine;&lt&semi;i class&equals;&&num;8221&semi;far fa-hand-point-down&&num;8221&semi;&gt&semi;&lt&semi;&sol;i&gt&semi;&NewLine;<&sol;div>&NewLine;<p><&sol;p>&NewLine;<p>その辺は<a href&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;fontawesome5head&sol;">前の記事<&sol;a>で書いてますが、<br &sol;>&NewLine;過去のコードのままでアイコンが表示される場合には良いけれど、基本的には<strong>過去記事で記入したコードは全部書き換えた方が良い<&sol;strong>ということになります…σ&lpar;&Hat;&lowbar;&Hat;&semi;&rpar;<&sol;p>&NewLine;<p>でも、いちいち過去記事の編集画面を開いて書き換えるなんて面倒くさいですよね…<&sol;p>&NewLine;<h2>Search Regexでオールオッケー<&sol;h2>&NewLine;<p>そこで登場するのが、【Search Regex】という、過去記事の文字列を一気に書き換える事ができるプラグインです&lpar; •̀ &period;Ì« •́ &rpar;✧<&sol;p>&NewLine;<h3>Search Regexの導入<&sol;h3>&NewLine;<p>プラグイン検索で「Search Regex」を検索します。<&sol;p>&NewLine;<p><img alt&equals;"Search Regexのアイコン画面" class&equals;"size-full" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;02&sol;20190201055302&period;jpg"&sol;><&sol;p>&NewLine;<p>赤い花たちのアイコンが出てきたら、「今すぐインストール」のボタンをポチッ!<&sol;p>&NewLine;<p>インストールが完了したら「有効化」のボタンに変わるのでそこを押したら準備完了&lpar;&Breve;ω&Breve;&rpar;<&sol;p>&NewLine;<h3>Search Regexの使い方<&sol;h3>&NewLine;<p>Search Regexはダッシュボードの「ツール」という場所にたたずんでいます。<&sol;p>&NewLine;<p><img alt&equals;"Search Regexはツールから選択" class&equals;"size-full" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;02&sol;20190201055309&period;jpg"&sol;><&sol;p>&NewLine;<p>使い方はとっても簡単で、<br &sol;>&NewLine;ほとんど場合はデフォルトのまま、書き換える文字列を入力すれば良いです。<&sol;p>&NewLine;<p>一応、プルダウンメニューの説明をすると、<&sol;p>&NewLine;<p>①は「変更する場所」。<br &sol;>&NewLine;デフォルトで「Post content(記事の内容)」の部分が変更の対象になっています。<&sol;p>&NewLine;<p>あまり使いませんが、その他にも<&sol;p>&NewLine;<p>「Comment content(コメントの内容)」<br &sol;>&NewLine;「Post meta value(メタデータ)」<br &sol;>&NewLine;「Post title(記事のタイトル)」<br &sol;>&NewLine;「Post URL(記事のURL)」<&sol;p>&NewLine;<p>などのエリアも変更する事ができちゃいます(&DiacriticalAcute;ω`)<&sol;p>&NewLine;<p><&excl;-- ムコリンク広告 --><br &sol;>&NewLine;<ins class&equals;"adsbygoogle"&NewLine; style&equals;"display&colon;block"&NewLine; data-ad-client&equals;"ca-pub-7469898030696599"&NewLine; data-ad-slot&equals;"1695541118"&NewLine; data-ad-format&equals;"link"&NewLine; data-full-width-responsive&equals;"true"><&sol;ins><br &sol;>&NewLine;<script>&NewLine;&lpar;adsbygoogle &equals; window&period;adsbygoogle &vert;&vert; &lbrack;&rsqb;&rpar;&period;push&lpar;&lbrace;&rcub;&rpar;&semi;&NewLine;<&sol;script><&sol;p>&NewLine;<h3>実際にやってみる<&sol;h3>&NewLine;<p>では実際に記事内容の書き換えをやってみましょう!<&sol;p>&NewLine;<p>先ほど紹介した、Font Awesomeのコードを新しく書き換えたいと思います。<&sol;p>&NewLine;<p>「Search pattern」の方に、<br &sol;>&NewLine;<b>書き換え元の文字列<&sol;b>を入力ます。<&sol;p>&NewLine;<p>例えば…<br &sol;>&NewLine;<span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">&lt&semi;i class-&&num;8220&semi;fa fa-hand-o-down&&num;8221&semi; aria-hidden&equals;&&num;8221&semi;true&&num;8221&semi;&gt&semi;&lt&semi;&sol;i&gt&semi;<&sol;span><&sol;p>&NewLine;<p>そして、<br &sol;>&NewLine;「Replace pattern」に、<br &sol;>&NewLine;<b>書き換え先の文字列<&sol;b>を入力。<&sol;p>&NewLine;<p>例えば…<br &sol;>&NewLine;<span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">&lt&semi;i class&equals;&&num;8221&semi;far fa-hand-point-down&&num;8221&semi;&gt&semi;&lt&semi;&sol;i&gt&semi;<&sol;span><&sol;p>&NewLine;<p><img class&equals;"size-full" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;02&sol;20190201055418&period;jpg"&sol;><&sol;p>&NewLine;<p><b>「Search」を押すと…<&sol;b><br &sol;>&NewLine;記事の中から対象の文字列がある場所が表示されます。<&sol;p>&NewLine;<p><b>「Replace」を押すと…<&sol;b><br &sol;>&NewLine;置き換えた状態の文字列が表示されます。<br &sol;>&NewLine;いわゆる<strong>プレビュー状態<&sol;strong>になります。<&sol;p>&NewLine;<p>そして、<br &sol;>&NewLine;<b>「Replace &&num;038&semi;Save」を押すと…<&sol;b><br &sol;>&NewLine; 実際に書き換えが行われます!<&sol;p>&NewLine;<p>この時、<br &sol;>&NewLine;いきなり「Replace &&num;038&semi;Save」を押してしまうと、本当は変えたくなった場所まで書き換えが行われてしまう場合があります。<&sol;p>&NewLine;<p>必ず<strong>「Replace」でプレビューを見てから、「Replace &&num;038&semi;Save」で実行すること<&sol;strong>をオススメします!<&sol;p>&NewLine;<p><img alt&equals;"Search Regexで書き換え実行!楽ちん!" class&equals;"size-full" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;02&sol;20190201055426&period;jpg"&sol;><&sol;p>&NewLine;<p>今回は、過去記事内の<b>57ヶ所<&sol;b>を、新しいコードに置き換える事が出来ました&lpar;๑˃̵ᴗ˂̵&rpar;و<&sol;p>&NewLine;<p>数げ少なければ、地道に書き換えても良いんですけどね。<&sol;p>&NewLine;<p>でも、<&sol;p>&NewLine;<p><b>リンク切れしたアフィリエイト<&sol;b>とか、<&sol;p>&NewLine;<p><b>https化して変わってしまった内部リンクのURL<&sol;b>などなど、<&sol;p>&NewLine;<p>ごっそり書き換えが必要になった場合には、<b>数百ヶ所に渡る場合もある<&sol;b>かもしれません。<br &sol;>&NewLine;<span style&equals;"color&colon;&num;848484">(婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>はそんなに記事を書いてないのでありえませんが…)<&sol;span><&sol;p>&NewLine;<p>そんな時はもう!<br &sol;>&NewLine;この【Search Regex】が大活躍間違いなしです!<&sol;p>&NewLine;<p><strong>入れておいて損はないプラグイン<&sol;strong>だと思います&lpar;・∀・&rpar;&sung;<&sol;p>&NewLine;<h2>Search Regex まとめ<&sol;h2>&NewLine;<p><&sol;p>&NewLine;<div style&equals;"background&colon; &num;a3b9e0&semi; padding&colon; 5px 10px&semi; color&colon; &num;f7fcfe&semi; border-radius&colon; 10px 10px 0 0&semi;"><b><span style&equals;"font-size &colon; 12pt"> もいちどザックリ<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>まとめると…<&sol;span><&sol;b><&sol;div>&NewLine;<div style&equals;"background&colon; &num;f7fcfe&semi; padding&colon; 10px&semi; border&colon; 2px solid &num;a3b9e0&semi; border-radius&colon; 0 0 10px 10px&semi;">&NewLine;<ul>&NewLine;<li>Search Regexの導入は簡単<&sol;li>&NewLine;<li>Search Regexの使い方も簡単<&sol;li>&NewLine;<li>Search Regexの効果は抜群<&sol;li>&NewLine;<li>書き換え実行は、プレビューを確認してから!<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;div>&NewLine;<p><&sol;p>&NewLine;<p>記事の置き換えが必要になったら、すぐ使いましょう!<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;blogmura&period;com&sol;ranking&period;html&quest;p&lowbar;cid&equals;1054682"><img alt&equals;"ブログランキング・ブログ村" class&equals;"aligncenter size-full" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;01&sol;20190117050807&period;png"&sol;><&sol;a><&sol;p>&NewLine;

Advertisement
婿どの : 100年続く料理屋に婿入りしたのが運のつき。 趣味を掘り下げることでストレス発散しています。 お金をかけずにクリエイトするのが信条。 工作・分解・DIY・家庭菜園・バイク…つまりやりたい事をなんでも記事にするブログ! AB型の天パーがお通りだい! *Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。
\\ 関連記事はこちら //
X

Headline

You can control the ways in which we improve and personalize your experience. Please choose whether you wish to allow the following:

Privacy Settings
Advertisement