2019年11月29日TwitterFacebookGoogle+LinkedInPocket外部リンクにアイコンを表示させて、別ウィンドウ(別タブ)で開くことを知らせる方法です。]とCSS設定を利用して表示する方法を紹介します。外部リンクとは、自分のサイトの外へ飛ぶリンクのことです。このような外部へのリンクは別のページや別のタブで開く設定にしてあることが多いです。」のようなアイコンを表示させることで、リンクをクリックする前に別ウィンドウで開くことを知らせることができ、ジャンプ後のページ操作で迷うことを防止できます(サイトの操作になれていないシニアや初心者では、新規ページに移ったことが把握できず元のページに戻る操作に困惑しますが、これを防ぐのに有効です)。表示方法には主に「画像ファイル」を利用する方法と、「ウエブフォント」を利用する方法があります。Awesome]というウエブフォントを利用する方法をご紹介します。設定方法は一括で設定できるCSSのアフター属性を利用した方法を使います。(リンクを別ウィンドウで開かせるためのコード)を認識して、その後ろにアイコンを表示させるという設定方法です、また、サイドバーなどのリンクには適応しないように、記事内のリンクのみに表示されるように設定してみました。コードはコピペで使用していただけます。外部URLは別ウィンドウで開く設定にするまず、外部URLを設定する際に、現在表示させているウィンドウとは別のウィンドウ(タブ)で開くように設定しておきます。これからご紹介する方法は、別ウィンドウで開くための「target=”_blank”」というコードを検知して、アイコンが表示されるように設定するので、この条件が必須です。内部リンク(自分のサイト内にジャンプするリンク)は同じウィンドウで開き、外部リンク(自分のサイト以外へジャンプするリンク)は別ウィンドウで開くという設定にしておくと、自分にも、見る人にも使いやすいかと思います。りんごはなるべくそうしています。「同じウィンドウで開く」と「別ウィンドウで開く」の設定方法まず、リンクを設定する場合の同じウインドウで開くと別のウィンドウで開くの設定方法について解説します。同じウィンドウで開くリンクの設定方法デモ↓↓↓クリックすると同じウィンドウで開きますアフィリエイト入門リンクを貼る文字を選択して、リンクボタンをクリックします。URLの入力欄が表示されるので、リンク先のURLを入力します右端の矢印ボタンをクリックします完了です。別のウィンドウで開くリンクの設定方法デモ↓↓↓クリックすると別のウィンドウで開きますアフィリエイト入門リンクを貼る文字を選択して、リンクボタンをクリックします。チェックを入れます4[更新]ボタンをクリックします。結果表示とHTML表示ブログでの表示結果と、記載されたHTMLの内容を確認します。■結果表示アイコンがなければ、見た目が一緒で区別がつきません。「target=”_blank”」というタグが記載されています。上記の設定がされていることを前提として、外部リンクの後にアイコンを表示させる方法を解説します。Awesome」は、最も一般的に利用されているといってもよい、ウエブフォントのアイコンです。フォントなので、文字と同じように扱えて文字の大きさや色などを簡単に変えることができるので便利です。Awesome」はネット上にあるアイコンデータを随時参照する形で利用します、なので参照するリンク元のURLをあらかじめ指定しておきます。設定はサイトのヘッダー部分に書き込みます。(*データーをダウンロードする方法もあります)ここではWordPressのテーマを利用していることを想定して、設定方法を案内します。利用するテーマによって設定方法は異なりますが、子テーマを利用できる場合の設定方法です(*子テーマがない場合は下記の子テーマを利用しない場合を参照ください)。[Luxeritas]>>[子テーマの編集]をクリックします。子テーマの画面が開きます。[Headタグ]のタブをクリックします。2記載されているコードの一番下に以下のコードを貼り付けます。rel="stylesheet">上部タブの[◯保存]をクリックします。変更を反映しました、と表示させたらOKです。これで、フォントを表示させる準備ができました。▶︎WordPressで子テーマを利用せず直接ヘッダーに書き込む方法*子テーマのない場合にご利用ください。(子テーマのある場合も利用できますが、他の内容を変更してしまう危険性があるのでおすすめしいません。[外観]>>[テーマエディター]をクリックします。クリックします左画面がテーマヘッダー(header.php)の内容に変わります。「ファイルの編集に成功しました。」と表示されればOKですスタイルシートの設定(一括で設定)では、実際にアイコンを表示させる設定です。一箇所に設定するだけで、今まで設定している外部URL(別ウィンドウで開く設定にしている場合)もこれから設定する外部URL(別ウィンドウで開く設定にしている場合)にも全てアイコンが表示されます。[Luxeritas]>>[子テーマの編集]をクリックします。子テーマの画面が開きます。[style.css]のタブをクリックします。画面をスクロールさせて、記載されているコードの一番下に以下のコードを貼り付けます。1.1em;}入力が完了したら画面上部の[保存]をクリックします。保存ボタンをクリッックした際に、以下のような画面がでたら、[このページを離れる]をクリックしてください。*使用するブラウザによって状況はことなります。子テーマの編集の下に、「変更を反映しました」と表示されればOKです、念の為スタイルシート内にコードが追加されていることを確認してください。これで設定は完了です。ブログの表示を確認リンクを貼った文字の後ろに「アイコン」が表示されます。」部分の記載を使用するテーマのクラスやIDに合わせる必要があります。どのクラスを設定すればいいのかよくわからない場合や、うまく表示がされない場合は以下のコードのように記載すると、ブログ全体の外部リンク(別ウィンドウで開くリンク)にアイコンを表示させることができます。自身のブログの状況により使い分けてください。(アイコンを表示させたい場所にだけ設定する方法)フォントアイコンを、全体に一括設定するのではなく、表示したい所にだけ表示させる方法です。Awesomeへのリンクを設定します。表示させたい記事の表示させたい箇所へ、コードを挿入します。ビジュアルから[テキスト]に変えますテキストモードに変わります新エディター(Gutenberg)の場合1画面の右上にある「ツールと設定をさらに表示」のボタンをクリックしますメニューが表示されるので2「コードエディター」をクリックします。編集画面がコード表示に変わります。文字のすぐ後ろに下記のコードを挿入します。Awesomeの無料プランで利用できる外部リンク用のアイコンは以下の2種類ですCSSの設定ではユニコード(Unicode)を使います。fa-external-link-alt”></i>*色は決まっていません、CSSで色を指定することもできます。え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できること」を指します。具体的に言うと・小さい字が見えにくい・薄い(コントラストの低い)字は見えにくい・ボタンや、導線のわかりづらいページは操作ができない・マウスの操作は慣れていないといったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。...Webアクセシビリティとは?みんなのための「情報バリアフリー化」を具体例でわかりやすく解説!Webアクセシビリティとは、わかりやすく表現すると「情報のバリアフリー化」です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイトこの記事のトラックバックURLプロフィール訪問いただきありがとうございます。2016年4月岡山県真庭市に引っ越し、デザイン系講師のかたわらブログ制作&ネットビジネスを副業として収入を得ています。主な収入源は、HP作成・アフィリエイト・広告収入・法人メルマガの構築代行などです(^^)このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信、ゆとりあるシニアライフを目指す方を応援します。パソコンインストラクターや、コールセンターでのサポート経験を活かし、個々のスキルとスピードに合わせたサポートを心がけています。子育てを卒業!自分のために時間とお金を使える!!でも、「夢見るシニアじゃいられない」と感じているそんなあなたに伝えたい情報です。「ブログやアフィリエイトって、聞いたことあるけど若者(わかもの)や強者(つわもの)しか手を出してはいけない気がして」と思っていませんか?「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」それでも大丈夫!ちょっと勇気を出して扉をあけてみませんか。お手伝いできれば嬉しいです。rin_ngoりんごの田舎暮らしりんごのメインブログ、飾らない創らないをモットーにありのままの暮らしぶりを綴る。した心の持ち方で「ワンランクあっぷする日常」を提案SNSを活用しようFacebookやTwitterなど代表的な「SNS」の登録方法から活用ノウハウまでわかりやすく紹介しています。新着記事[SEO対策]の基本項目を確認、「ユーザファースト」を目指すGoogleの方向性を見据えてた対策は必須!SEO対策は企業のサイトにとっても、個人のブログ運営にとっても要(かなめ)です。一緒にオリジナルなサイトを作成していきます。人気無料テーマ「Cocoon」を利用してブログのサイドバーをカスタマイズします。実際の作業がギュッと1つにまとめられています。ブログ初心者が「楽しんで稼ぎ続けられる」、そんな資産になるブログ作り方の教科書です。「アフィリエイト」の種類や仕組みを噛み砕いて解説、実践方法をやさしく案内しています。さんエンドウさま、コメントありがとうございます。お問い合わせの件、YahooIDはパソコンに依存しません。さんYahooIDを他のパソコンと共有するにはどうすればよいでしょうか。さんりんごさまお世話になっております。スマホの設定でアカウント画面まで表示され次え、が出てこなかった。さん横山さま、コメントありがとうございます。PC(...りんごの一歩づつサポート「ブログ&メルマガを利用したネットビジネス」に取り組むことで「ワンランクアップした毎日」を目指す方を応援します(*^▽^*)ネットビジネス入門無料メルマガ人と人が繋がる暖かいコミュニケーションがテーマのネットビジネスです。この機会に触れてみてください。