サイトをHTTPS化した際、外部リンクがうまくいかなくなっていたので、今回修正した内容をメモとして公開。
※今回参考にさせていただいたサイト
出来ること
Webサイトの外部リンクを１ステップでサイトのイメージとリンクを取得して記事に張り付け可能。
※上のリンクが簡単に作成できるようになります。
必要となるもの
・WordPressを利用したサイト
・WordPressのアドオン「Browser shots」
・Google Chrome
・Google Chrome 拡張機能「Create URL」
あたりまえですが、WordPressを利用したサイトを基本としています。
なお、Google Chrome の拡張機能である「Create Link」は、Chromeブラウザからアクセスする必要があります。
実際の設定手順
WordPressで実施する内容とChromeで実施する内容についてです。
WordPressプラグインの追加
WordPressの管理画面のメニューから
プラグイン＞新規追加
検索する際のワードは「Browser Shots」で大丈夫でした。
※2019/09/08現在
そのまま、追加をクリックし有効にします。
WordPressのCSS変更
下記CSSをWordPressに追記します。
/*--------------------------------
キャプチャ Browser Shots
---------------------------------*/
.share_link {
width:85%;
margin: 30px auto;
padding: 20px;
border:double #CCC;
overflow: hidden;
}
.browser-shot{
text-align:center;
}
.browser-shot img{
box-shadow:0px 2px 4px #CCCCCC;
}
.link_title{
text-align:center;
line-height:150%;
overflow: hidden;
padding-top:20px;
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {/*--------------------------------
780px キャプチャ Browser Shots
---------------------------------*/
.share_link {
margin:30px auto;
}
.browser-shot{
margin:0 15px 0 0;
float:left;
text-align:left;
}
.share_link .link_title{
margin:0;
text-align:left;
}
/*-- ここまで --*/
}
なお、参考とさせていただいたサイトは、「Style.css」を修正としていますが、テーマを変更したくありません。
現在では、
外観＞カスタマイズ＞追加CSS
へそのまま張り付けるほうが良いでしょう。
※というか、テンプレート変えてもここは変更されないので、極力テーマのCSSSはいじらないほうが良いかと。
Google Chrome のダウンロードインストール
「Chromeをダウンロード」
をクリックし、
「同意してインストール」
をクリックします。
あとは、Chromeがインストールされ、ショートカットがデスクトップにできるはずです。
Google Chrome の拡張機能「Create Link」の追加と設定
Google Chrome から上記リンクへアクセスし、追加します。
すると、Google Chrome のアドレスバー右側にアイコンが追加されます。
※こんな感じのアイコンです。
アイコンをクリックし、
「Configure」を選択します。
Formats
の下にいくつかありますが、
ここにある＋クリックし１つ行追加します。
nameをダブルクリックし、名前を入れます。
※例として「add」としています。
次に、formatの列に移動します。
こちらに
を追記します。
※”［”と”］”が全角なので、半角に修正してください。
※あくまで例。ちょっとおかしな挙動をしてますし。
あとは、上側にある
「Default is currently」
を追加したものへ変更します。
※追加したものが表示されない場合は、一度閉じもう一度「Configure」を表示します。
続いて、
「Configure shortcut」
をクリックします。
拡張機能のショートカット設定ができます。
今回は「ctrl+3」
を設定してみました。
リンクを作成したいサイトを表示し、設定したショートカットキーを押下し、
WordPressの投稿に張り付け、下書きとして保存。
プレビュー表示で確認して表示できているか確認しておきましょう。
最後に
元々「Copy URL +」という拡張機能を使っていたのですが、サポート切れかなにかで拡張機能として発見できなかったので、
「Copy URL +」で利用していたものを「Create Link」用に変更しました。
２年ぐらい放置していたリンクがやっときれいに作れるようになり、ほっとしました。
ぼちぼち更新していきます。
ではでは。