常連

注目の的

質問力

### 前提・実現したいこと

https://coliss.com/articles/blog/wordpress/how-to-build-a-wordpress-post-pagination-without-plugin.html
こちらのページを参考にwordpressのアーカイブページにページネーションを作成いたしましたが、表示されません。

以下の4箇所を省くと表示されるのですが、先頭ページまたは最後のページの、「≪ 先頭」「< 1つ戻る」、「1つ進む >」「最後尾 ≫」がそれぞれ表示されなくなります。

if($paged > 2 && $paged > $range+1 && $showitems < $pages) 
if($paged > 1 && $showitems < $pages)
if ($paged < $pages && $showitems < $pages)
if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages)

ちなみに元の参考ページをそのままコピペしても同じ条件で表示されません。

お手数をおかけいたしますが、お分かりになる方がいらっしゃいましたらご教示いただけると幸いでございます。
また、別の方法でもよいので同じことが可能であれば、ご教示いただけると幸いでございます。

どうぞよろしくお願いいたします。


### functions.phpのソースコード

```PHP
function pagination($pages = '', $range = 2){
  $showitems = ($range * 2)+1;

  global $paged;
  if(empty($paged)) $paged = 1;

  if($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages){
      $pages = 1;
    }
  }

  if(1 != $pages) {
    echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
    //先頭へ
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>&Lt; 先頭</span></a></li>';
    //1つ戻る
    if($paged > 1 && $showitems < $pages) echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>&lt; 1つ戻る</span></a></li>';
    
    //1つ進む
    if ($paged < $pages && $showitems < $pages) echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>1つ進む &gt;</span></a></li>';
    //最後尾へ
    if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>最後尾　&Gt;</span></a></li>';
    echo '</ul>';
  }
}
```

### テンプレートファイルのソースコード

```PHP
<?php if (function_exists('pagination')) {
  pagination($additional_loop->max_num_pages);
} ?>
```

Wordpressでページネーションの先頭ページから「≪ 先頭」「< 1つ戻る」を消し、最後のページから「1つ進む >」「最後尾 ≫」を消したい

スポットを紹介するWEBサイトを構築しています。

各スポット記事にgoogle MAPで所在地を表示しているのですが、
WEBサイトで紹介するすべてのスポットをgoogle MAPにマーキングして該当のスポットを中心にして表示させたいです。

また、該当スポットがわかるようにほかのピンの色とは違う色で表示させたいですが、
Google MAPのマイマップ（マイプレイス）を使用して作成したものを共有させる方法ではできないでしょうか？

上記に対応していそうなプラグインも探してみましたが見当たりませんでした。

javascriptで自分で作成して実装する必要がありますか？

サイト内のgoogle Map に複数ピンを刺して、かつ該当ピンだけ色を変更したい

![イメージ説明](7c12ee2e4f6de548c02b8ac36fdad00b.jpeg)

上図のようにBには背景色を設定しております。
Wの部分にある文字は黒で、Bの部分にある文字は白で表示したいと考えおります。
このBは大きウインドウ幅により位置が変わります。
その位置にあわせて文字が変わる場所も変更されるようにしたいと考えております。

【質問】

背景の位置がウインドウ幅にあわせて動的に変わり、それにあわせて文字の色を変えることはできますか？

CSS3のグラデーションで文字色を変えることは可能ですが、背景位置に合わせて変えるとなるとアイデアが思いつきません。
コードを記述いただけると大変助かりますが、アイデアだけでも結構ですのでご教示ください。
基本的なHTML/CSS/jQueryの知識はあります。

レスポンシブで作成し、スマホとPCサイズではデザインが異なるため、「ABDEFG」の文字の部分は出来れば画像ではなくテキストで実現できると嬉しいです。

ご存じの方いれば、教えてください。

【CSS】このデザインはCSSで実装できますか？

###前提・実現したいこと
ヘッダーの中にあるメニューの一つをドロップダウンメニューにしたいと考えています。
(メニューが5つあり最後のメニュー５だけをドロップダウンメニューにしたい)

ドロップダウンメニューを作るにはHTMLでメニュー項目リストを作ることは理解しています。
ですが、ヘッダーの中にあるulリストの中にさらにリストを作る記述の仕方がよく分かりません。

なお、ヘッダーのメニューはflexboxで横並びにしております。
ドロップダウンメニューのアイテムは縦方向に並べたいです。

###該当のソースコード
```html
<header>
<div class="header-container">
    <a class="logo" href="#">
    ロゴ
    </a>
    <nav>
        <ul id="link-nav">
            <li><a href="#">メニュー１</a></li>
            <li><a href="#">メニュー２</a></li>
            <li><a href="#">メニュー３</a></li>
            <li><a href="#">メニュー４</a></li>
            <li><a href="#">メニュー５ここをドロップダウンメニューにしたい</a></li>
        </ul>
    </nav>
</header>
```
```css
@charset "utf-8"

* {
  list-style-type: none;
}

body {
  font-size: 14px;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #ccc;
}
  
@charset "UTF-8";

header {
  height: 45px;
  width: 100%;
  background-color: #fff;
  min-width: 1085px;
  border-bottom: 2px solid #feaf25;
}

header .header-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  height: 45px;
  margin: 0 auto;
}

.logo {
  margin: auto 0;
}
header nav {
  margin: auto 0;
}
header nav #link-nav {
  padding: 0;
  display: flex;
}
header nav #link-nav li {
  list-style-type: none;
}

header nav #link-nav li a {
  display: inline-block;
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
  padding: 0 7px;
  height: 50px;
}

header nav #link-nav li a:hover {
  color: #feaf25;
  
}

```