便利帳

自分用備忘録。誰かの役に立てたら幸いです。

CSS:文字にを縁取る

CSSでテキストを縁取りたいことがあったので
まとめておきます。

text-strokeを用いて縁取る

こちらの方法では文字の内側に縁取りがつきます。

.text {
    -webkit-text-stroke: 2px #000;
}

※現状では〔-webkit-〕をつける必要があるとのこと

text-shadow を用いて縁取る

こちらの方法では文字の外側に縁取りがつきます。
IE10も対応しているので、ほぼ全てのブラウザで使えるのではないかとのこと。


まず〔text-shadow〕の基本的な書き方ですが、

text-shadow: 1px 1px 0 #000;

あるいは

text-shadow: #000 1px 1px 0;

数字は、前から
・X方向(横方向へのずれ)
・Y方向(下方向へのずれ)
・ぼかし具合
を指定します。

カンマ「,」区切りで複数指定ができますので
これを利用して、下記の通り記載します。

text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;

text-shadow: 2px 2px 1px #000,
             -2px 2px 1px #000,
             2px -2px 1px #000,
             -2px -2px 1px #000;


ただし、こちらの方法は文字の大きさに対してoffsetの値が大きすぎると
フォントの周りがギザギザになったり、
うまく縁取りができなかったりしますのでご注意ください。

WordPress:アドレスの設定を間違えたとき

ドメインなどを購入し、Wordpressのアドレスを変更しようとした時に、
WordPressの管理画面にログインできなくなるということがあります。

これはWordPressアドレスの設定を間違えたというケースです。

一度やってしまい非常に焦った経験がありますので、まとめておきます。

ログインできなくなる原因


アドレスの変更をするときは、まずダッシュボード→設定→一般から行いますよね。

f:id:kana_m:20170716144044p:plain


すると、アドレスが設定できる画面が表示されます。

f:id:kana_m:20170716144238p:plain


このうち、上のアドレスを変更すると、
WordPressの管理画面にログインできなくなります

変更するのは必ず下のアドレスです。


万が一、間違えてしまった場合の対処法をいかに紹介します。

対処法(応急処置)


設定ファイル〔wp-config.php〕を編集して対処する方法をご紹介します。
〔wp-config.php〕はインストールしたWordPressファイルの最上部にあります。

こちらのファイルに

define('WP_SITEURL', 'http://***********.jp/wp');// 元々のWordPressアドレス

上記のコードを追記します。

また、サイトアドレスを設定したい場合は、

define('WP_SITEURL', 'http://***********.jp/wp'); // 元々のWordPressアドレス
define('WP_HOME', 'http://***********.jp/wp'); // 設定したいサイトアドレス

上記のように記載してください。

また、このコードは編集が必要なのはここまでです !より上の行に書きましょう。
wp-config.phpの最後の行に続けて追加すると機能しないので注意してください。


これで管理画面にログインできるようになります。

データベースからの読み込みではなく、直接ファイルからアドレスを読み込むようになり
アクセスできるようになります。

対処法(根本解決)

間違えたデータベースの情報を元に戻して対処する方法をご紹介します。
※少しでも間違えると、サイト自体を消さざるおえなくなる可能性がありますので
慎重に行ってください。また自身のない方はこちらの方法はお勧めしません。

phpMyAdminAdminerなどを用いて
データベースにアクセスします。

テーブル〔wp_options〕へアクセスし、
〔option_name〕が〔siteurl〕の行を探します。


〔siteurl〕の行のURLを元々のWordPressアドレスに書き換えれば完了です。

また応急処置をしていた場合は、追記したコードを削除してください。

HTML/CSS・jQuery:ページ内リンクをスムーススクロールで移動する

ページ内にリンクを設定する際にスムーススクロールで移動する方法です。

jQueryを使用します。

HTML/CSS


HTML

<div class="header">
   ヘッダーがはいります
</div>
<div id="content">
    <a href="#link">CONTENT</a>
</div>
CSS
#content{
  padding-top: 100px;
}

#link {
   margin-top:-100px;
}
jQuery
$(function () {
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});


一つ注意が必要なのはヘッダーを下記のように fixed にしている場合

CSS
.header {
    width: 100%;
    min-width: 960px;
    height: 100px;
    position: fixed;
    left:0;
    top:0;
    z-index: 10;
}

ページトップからの高さで移動してしまうので、
移動後ヘッダーの後ろに隠れてしいます。
ですので下記のように jQueryを書けば解決します。

jQuery
$(function () {
 var headerHight = 100; //下げたい高さ=ヘッダーの高さ
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //上記で設定した高さほど下げる処理
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});

はじめに〜おまけ:ソースコードの埋め込み〜

これから自分が調べて知ったことなどをまとめていこうと思います。

(まとめたいと思っていることがたくさんあっていつ追いつくのやら・・・。)

 

仕事がらweb制作関連が中心になります。 

webに関しては、独学で異業種から始めた自分は基礎が全くないため、最初は基礎的な事ばかりかもしれませんが、おいおいレベルの高いまとめが作れたらなと。

それにこの業界は同じ境遇の方もいらっしゃると思いますので、その方の役に立てたらいいなあとも思います。

 

他には育児に関することなどもやっていけたらなと考えています。

 

 

 

ではでは、これからwebについてまとめていく上でソースコードを書く必要があるわけですが、見やすいように、まず「埋め込みの仕方」を知らないといけないなと思いまして下記にまとめておきます。

 

ソースコードの埋め込み

これははてなブログ限定の書き方です。

 

ブログの設定変更

 

まず管理画面を開きます。

左サイドバーの設定の項目をクリック

 

f:id:kana_m:20170713174357p:plain

 

すると中段よりちょっとしたぐらいに

 

f:id:kana_m:20170713174430p:plain

 

上図のような箇所がありますので、これを

 

f:id:kana_m:20170713174457p:plain

 

はてな記法モードに変更してやります。

すると、はてな記法を使用して書くことができるようになります。

 

 

ソースコードの埋め込み

 

埋め込みはソースを【'>|'と'|<'】という記号で挟めば使えます。

  

.text {
font-size: 14px;
font-weight: bold;
} 

 

ってな感じです。

 

ちなみに私も引っかかったのですが、

はてな記法モードにに設定する前に書いた、あるいは下書きを作成した記事は、

デフォルト設定の「見たままモード」が適用されたままになっていますので、

上記は使えないことご注意ください。

 

他にどんな記法があるかは、はてな記法モードを設定した画面の横にある

はてな記法一覧)をクリックすれば一覧が見れます。