新着記事一覧

IT・プログラミング Python

2024/4/21

【Python】Pythonでの自然言語処理(日本語)

こちらの記事では、自然言語処理についてまとめています。 Contents1 自然言語処理とは?2 自然言語処理の実装 自然言語処理とは? 自然言語とは、日本語や英語のような自然発生的に生まれた言語です。日常的に使用している自然言語について、言葉が持つ意味を解析し処理します。活用事例としては、チャットボット、音声認識AI、文字認識(手書き文字をカメラが認識し文字データへと変換する技術)、検索エンジン、翻訳、感情分析、文章要約などがあります。 文章の意味を機械に理解させるには、単語分割を行う必要があります。手 ...

続きを読む

IT・プログラミング Python

2024/4/8

【Python】統計学的モデル 時系列分析の実装

こちらの記事では、時系列分析の実装についてまとめています。 Contents1 時系列分析とは?2 定常性とは?3 時系列データの分析方法4 SARIMAモデルの実装 時系列分析とは? 時系列分析では、時間経過とともに変化する時系列データを扱います。時系列データの例としては、毎時間の気温、株価の推移等がこれにあたります。売上予測、来店者予測等、ビジネスにおいて重要な分析技術です。 時系列データには以下3種類があります。 1.トレンドデータの長期的な傾向。時間の経過とともに値が上昇・下降している時系列データ ...

続きを読む

IT・プログラミング Python

2024/4/1

【Python】主成分分析の実装

こちらの記事では、主成分分析を実装していきます。 Contents1 主成分分析とは2 主成分分析の手順について 主成分分析とは 主成分分析とは、次元削減を行う時によく使う手法です。例えば、いくつかの特徴量があるデータを2次元データに変換すると、できるだけ情報を保ったまま2軸での描画が可能になり、全てのデータを見やすく示すことができます。 主成分分析の実用例として、製品やサービスのスコアリングや比較(1次元に圧縮)、データの可視化(2,3次元に圧縮)、回帰分析の前処理などが挙げられます。 主成分分析の手順 ...

続きを読む

IT・プログラミング Python

2024/4/1

【Python】カーネル主成分分析の実装

こちらの記事では、カーネル主成分分析の手順についてまとめています。 Contents1 カーネル主成分分析とは2 カーネル主成分分析の実装 カーネル主成分分析とは 回帰分析等、機械学習の多くのアルゴリズムは線形分離できるデータが与えられることを前提としていますが、現実的には線形分離できないデータ、つまり非線形分離する必要があるデータがほとんどです。非線形分離する必要があるデータに対処できるのが、カーネル主成分分析(kernel PCA)です。 カーネル主成分分析ではN×M(データの数×特徴の種類)のデータ ...

続きを読む

IT・プログラミング Python

2024/3/29

【Python】機械学習(教師なし) クラスタリング DBSCANの実装

こちらの記事では、機械学習(教師なし)の非階層的クラスタリング DBSCAN法についてまとめていきます。 Contents1 クラスタリングとは2 DBSCANでの実装 クラスタリングとは データをクラスター(塊)に分割する操作のことです。クラスタリングの中でも階層的クラスタリングと、非階層的クラスタリングの2種に分けられています。 1.階層的クラスタリングデータの中から最も似ている組み合わせを探し出して、順番にクラスターにしていく方法です。最終的に全データをまとめるクラスターに行くつけば終了です。 2. ...

続きを読む

IT・プログラミング Python

2024/3/28

【Python】機械学習(教師なし) クラスタリング k-meansの実装

こちらの記事では、機械学習(教師なし)の非階層的クラスタリング k-means法についてまとめていきます。 Contents1 クラスタリングとは2 k-means法での実装 クラスタリングとは データをクラスター(塊)に分割する操作のことです。クラスタリングの中でも階層的クラスタリングと、非階層的クラスタリングの2種に分けられています。 1.階層的クラスタリングデータの中から最も似ている組み合わせを探し出して、順番にクラスターにしていく方法です。最終的に全データをまとめるクラスターに行くつけば終了です。 ...

続きを読む

IT・プログラミング Python

2024/3/28

【Python】機械学習のデータ前処理 外れ値の扱いについて

外れ値の処理についてまとめています。 Contents1 外れ値とは?2 外れ値の検知方法について 外れ値とは? 外れ値とは、他のデータと著しく乖離したデータのことを指します。データ内に外れ値が混在していると、分析結果に影響を及ぼしたり、機械学習モデルの学習過程で影響がでてしまい学習が進みにくくなる、などの影響が出てしまいます。 外れ値の検知方法について 外れ値の検知方法について、可視化、LOF(Local Outlier Factor )、Isolation Forestの3つの手法について紹 ...

続きを読む

Web制作

【Web制作】HTMLでアンカーリンクを設定する方法

こんにちは、Haruです。

この記事ではHTMLでアンカーリンクを設定する方法をご紹介致します。

アンカーリンクとは?

アンカーリンク(anchor link)とは、ウェブページ上でクリックするとページ内の特定の場所や、他のページの特定の場所へ移動できるリンクのことです。

Haru

ゴリゴリスクロールする必要もなく、飛びたい場所にすぐ飛べて便利!!サイトに必須の機能ですね!

同じページ内でアンカーリンクを設定する方法

上の動画のように同じページ内で特定の場所にジャンプする方法をご紹介します。

まず、遷移元(クリックするところ)のaタグ内のhrefに"#id名"と記述します。

<li class="header-nav-item"><a class="header-nav-item-link" href="#concept">Concept</a></li>

次に、遷移先(飛びたい場所)にid="id名"を記述します。

<section id="concept" class="concept inner section">
    <h2 class="util-title wow fadeInUp">Concept</h2>
      <div class="concept-inner">
        <div class="concept-picture wow fadeInUp"><img src="./img/concept-1@2x.png" alt="concept1"></div>
        <div class="concept-message wow fadeInUp">
            <p class="concept-message-title">タイトル</p>
            <p class="concept-message-text">テキスト</p>
        </div>
    </div>
</section>

この例では、遷移元にhref="#concept"、遷移先にid="concept"と記述しています。
遷移元と遷移先のid名は揃えるようにしましょう!

遷移元のaタグをクリックすると、id="concept"がついたsectionタグまで飛んでくれます。

別ページにアンカーリンクを設定する方法

次は別ページの特定の場所にジャンプする方法です。

この例ではindex.htmlを遷移元(クリックする側)、medical.htmlのid="medical__general"を遷移先(飛びたい場所)としています。

まず、遷移元(クリックするところ)のaタグ内のhrefに"遷移先html名#id名"と記述します。
以下コードではhref="medical.html#medical__general"としています。

<a href="medical.html#medical__general" class="announce__item"><img src="img/medical_-2.png" alt="general">
    <div class="announce__line"></div>
    <div class="announce__item__box">
       <div class="announce__item__title">一般診療</div>
       <div class="announce__item__detail">虫歯・入れ歯・小児歯科</div>
    </div>
</a>

次に、遷移先(飛びたい場所)にid="id名"を記述します。

<section id="medical__general" class="medical__general">
    <div class="medical__general__top__img"></div>
    <div class="medical__general__body">
        <h2 id="general__item1" class="medical__general__title"><span>一般診療</span></h2>
        <div class="medical__general__items">
//以下略//
Haru

index.html(トップページ)のaタグをクリックすると、medical.htmlページのid="medical__general"がついたsectionタグまで飛んでくれます♪

WordPressで別ページにアンカーリンクを設定する方法

WordPressで別ページの特定場所にジャンプする方法も説明します。

この例ではホームページのindex.phpを遷移元(クリックする側)、page-medical.php(固定ページ)のid="medical__general"を遷移先(飛びたい場所)としています。

まず、遷移元(クリックするところ)のaタグ内のhrefに"<?php echo esc_url( home_url( '/' ) ); ?>/飛びたいページのURLスラッグ名#id名"と記述します。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>/medical#medical__general" class="announce__item"><img src="<?php echo get_template_directory_uri() ?>/img/medical_-2.png" alt="general">
    <div class="announce__line"></div>
    <div class="announce__item__box">
        <div class="announce__item__title">一般診療</div>
        <div class="announce__item__detail">虫歯・入れ歯・小児歯科</div>
    </div>
</a>

<?php echo esc_url( home_url( '/' ) ); ?>でホームページのURLを返します。
その後ろの/medicalは、medicalページのURLスラッグになります。固定ページの投稿欄から設定している部分です。

次に、遷移先(飛びたい場所)にid="id名"を記述します。

<section id="medical__general" class="medical__general">
    <div class="medical__general__top__img"></div>
    <div class="medical__general__body">
        <h2 id="general__item1" class="medical__general__title"><span>一般診療</span></h2>
        <div class="medical__general__items">
//以下略//

これでWordPressでもアンカーリンクを作ることができました。

まとめ

アンカーリンクを設定することにより、ユーザーフレンドリーなサイトになりますね。
アンカーリンク、しっかり活用していきましょう!

  • この記事を書いた人

Haru

会社員。2回目の育休から仕事復帰。
職種は海外営業。
育休の過ごし方、育児、家事、プログラミング勉強について発信しています。

-Web制作
-