Category Archives: WEB

ターゲットブランクの場合、アイコンをつけるJS : WP

jQuery

 $("a[href^='http://']").attr("target","_blank");
 $('a[target="_blank"]').after(' <i class="fa fa-external-link"></i>');

こんな感じ　詰めが必要

CSS

Font Awesome 5 を利用

/* 外部リンクアイコン付き */
.entry-content a[] {
	text-decoration:none!important;
	border-bottom:1px solid #4f96f6;
}
.entry-content a[]::after {
        content: "\f35d";
        font-family: "Font Awesome 5 Free";
        margin-left: 5px;
}

消す作業

CSS

/* 画像リンクのアイコンを消す */
.entry-content a.remove-icon[] {
    border:none;
}
.entry-content a.remove-icon[]::after {
    content: none;
}

functions に追記　てか、js jQueryだよね。

function remove_icon() {
echo <<< EOM
<script>
//外部リンクの画像後ろのアイコンを消す
	jQuery(function($){
$("a:has(img)").addClass("remove-icon");
});
</script>
EOM;
}
add_action( 'wp_footer', 'remove_icon' );

HTML Layer

HTML構造

HTML Living Standardに準拠したい

<html>
  <body>
<header>
<div .container>
  <img .logo>
  <nav #gNav>
  ...
  </nav>
</div>
</header>
<div .row>
<div .container #pageName>
  <main>
    <section> ... </section>
  </main>
  <article> ... </article>
  <aside .lNav >...</aside>
</div>
</div>
<footer>
  <div .container>
    <p #cr>
  </div>
</footer>
  </body>
</html>

header , footer ,
main , section , article , aside , nav

nav … navigation

#gNav … Global navigation　:No Versatility
.lNav … Local navigation　: Versatility


#mainContainer(site width , box)

header, footer, .row > .container

header, footer, .row { width : 100%;}
.container { サイトの幅 }

.container > main > section > article

.container > main , aside

main

ページに１つ

<main>
   <h1>
   <h2>
</main>

section

<section>
 <h1>...
 <h2>...
</section>

article

<article>
  <header>
  </header>
  <h1>...</h1>
</article>

Snipet 的な

改行させる

<div style=”page-break-before:always”></div>

改行させる

break-beforeに変更

<div style=”page-break-beforeに置き換えられた:always”></div>

break-after

boxレベルに適用される。

sanple

code

/* キーワード値 */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* グローバル値 */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: unset;

My Favorite Color List

 

■ #124c6b　サンプルテキスト

■ #153a4d　サンプルテキスト

■ #04042e　サンプルテキスト

■ #123445　サンプルテキスト

■ #153a4d　サンプルテキスト

■ #14394c　サンプルテキスト

■ #0e2a39　サンプルテキスト

■ #3d97ca　サンプルテキスト

■ #7f2626　サンプルテキスト

■ #ffd700　サンプルテキスト


■ #faebd2　サンプルテキスト


#ff0000　サンプルテキストです
#e5c100　サンプルテキストです
#bfa100　サンプルテキストです
#bd973e　サンプルテキストです
#878574　サンプルテキストです

LINK COLOR

■ #00c5fa　サンプルテキスト

■ #5ACADA 　サンプルテキスト

■ #0ADDDD　サンプルテキスト

■ #5ACADA　USE SAMPLE サンプルテキスト #EFEFEF

■ #4169E1　サンプルテキスト

■ #EF9255　サンプルテキスト

■ #F79321　サンプルテキスト

■ #FDB45C　サンプルテキスト

■ #F37976　サンプルテキスト

■ #CADB2B　サンプルテキスト

■ #000080　サンプルテキスト

■ #47CF73　サンプルテキスト

■ #519DAD　サンプルテキスト

■ #FCD3A5　サンプルテキストです

■ #F0F8C8　サンプルテキストです

■ #494951　サンプルテキストです

■ #f9f9f9　サンプルテキストです

■ #EFEFEF　サンプルテキストです

Text color

#000000　サンプルテキスト

#2c2c2c　サンプルテキスト

#4d4d4d　サンプルテキスト

#999999　サンプルテキスト

#cccccc　サンプルテキストです

リンクの色

いろいろありました。右がオンマウス

Google　#2518b5 #609

Yahoo　#1d3994 #941d55

ANA　#0e49a1 #013075

CookPad #663333 #845f4b

無印良品　#000　#7F0019　コーポレートカラー？

その他

#0022CC #0033CC #00CCFF #21759b #57999

総論

結局は、分かればイイみたいな感じのところある

カスタム分類

2022/03/02
何となく、カスタム分類が必要な気がしてきた

カスタムタクソノミー　だったような。

管理画面に表示するだけでも良いのか？

畑とWEBの情報が混在していて、他にもメモもあるみたいだし。
昔はレザークラフトもやってたような？

カテゴリーが多すぎ問題。

レザークラフト無いし…
誰ても見ていないことを前提にしてるから、Evernoteみたいに使っていたら…
分かりにくい（探しにくい）んだよね。

昔、カスタム投稿して納品した様な？
とりあえず、10件以上のカテゴリーは、左側に表示させようかな？