word press

当ブログは現在xeorybaseのテーマを使用しています。
カスタマイズする時に導入した
プラグイン css php 等
備忘録を兼ねて、諸々の事を記事にしています。

xeorybaseのスマホメニューをデフォルトで閉じておく方法

こんにちは aonamiです

自分もついに固定グローバルナビゲーションを導入できたと喜んでいたのですが
スマホからサイトを確認してみると非常によろしくない状況に陥ってました。

記事が読みたいのに、固定させてしまったナビゲーションが邪魔をしてしまう。
一つ課題をクリアするとまた次の問題が。初心者にはなかなかすんなりとは気持ちの良いサイト作りはさせてもらえないものです…

続きを読む

xeorybaseでナビゲーションメニューを固定させる

ナビゲーションメニュー(グローバルナビゲーション)を固定させたページはサイトを回遊しやすくていいですよね。
自分もやりたいと思うけどどうやったらいいのか…分からず苦戦しました。

今回は、そう言った悩みを解決する
Sticky Menu (or Anything!) on Scroll
というプラグインを紹介します。

※当サイトはxeorybaseをテーマに使用していますので、その前提で記事を書いてあります。

続きを読む

いろいろとブログの見た目をカスタマイズ

いろいろとブログの見た目をカスタマイズ
〇記事アドレスを日本語から英語に
パーマリンクを固定化させる アドレスが変わるとソーシャルボタンやら全部リセットになるため、できるだけ初期の段階でしておく方がよい。
(カテゴリー+投稿名がベストだと思うけど、簡素化させるためにカテゴリー+記事idで設定)
〇独自SSLを取得 これもhttpsにアドレスが強制的に変わってしまうため
〇googleアナリティクス、サーチコンソールの導入

・ブログの記事をコピー不可にする

記事をcssのspanタグでサッと装飾してみましょう

記事のテキストエディタに直接打ち込む形で手軽に装飾を施したい。
毎回思いついた時に装飾するだけで、スタイルシートに書き置く程のものでもないかな。

そういう場合は、
<span style=[属性]>~~~~~~ </span>
これを直接テキストに打ち込んで反映、表示させるようにしています。

自分が使用したい、spanタグを使って表示させるcssをここにまとめようと思います。

テキスト、文章を線で四角く囲う方法

ここにテキスト

こんな感じで強調表示させたい時は、

border属性を指定して装飾させます

<span style=”border: 2px solid #ff0000;”>ここを赤枠で囲います </span>

borderの数値を変えれば囲い線の太さが変わります。
 1px   5px 

#の部分をいじれば好きな色で囲えます。
青色 #0033FF 緑色 #33FF00

テキストに蛍光ペン風にラインを引く方法

蛍光ペンを引きたいテキスト

こんな感じで装飾表示させたい時は、

linear-gradient(transparent 線の太さ, 線の色 0%) 属性を使用します

<span style=”background: linear-gradient(transparent 60%, #FFFF33 60%);”>ここに黄色い蛍光ラインを引きます</span>

線の太さは%の値が小さくするほど太く表示されます。

水色 #00FFFF ピンク #FF99FF 緑 #99FF33 オレンジ #FF9900 紫 #9966FF