カスタマイズ

見やすくするために格闘中です。

① hタグの処理

→ この有料テーマ「VIEW」のh1とh2には装飾がないそうです。
→ 色々いじったのですが、僕の力ではいいものができませんでした（涙）
→ 時間はかかりそうですが、h3（線で挟んだもの）とh4（縦棒）に変更しようと思います。

② ヨメレバ・カエレバのCSSを追加

→ 「カエレバ・ヨメレバ（by かん吉 ）」のCSSが消えてしまったので、「mbdb（モバデビ）さん」の『【カエレバ/ヨメレバ専用】レスポンシブな紹介リンクにするためのCSS 』を採用しました。
→ カラフルで美しい「カエレバ・ヨメレバ」になりました！

③ Google Map をレスポンシブ対応させる

→ 「VIEW」はそのままでは、携帯用の Google Map がレスポンシブにならないので、手を加える必要あり。
→ 記事や固定ページにiframeのタグを挿入する時、iframeをdivで囲むと解決するようです。

<div class="ggmap">iframeのコピーしたコード</div>

 

→「TCDテーマオプション」の「カスタムCSS」に以下のコードを追加する

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

ということは、すべての Google Map のコードを書き直さないといかないのか・・・頑張ろう
✅ このソースコードの表示はプラグイン「Crayon Syntax Highlighter Settings」を使用した。

④ リンク付きのテキストに色と下線をつける

→ デフォルトでは、リンクがついているテキストも黒色で表示され、リンクがついているか、わかりづらいので、（少しだけ）修正を加えました。

a { color:#●●●; text-decoration:none; }

※色の変更は「●●●」に任意のカラーコードを設定する。

✅ ここの色はトップページの「各記事のタイトル」・「携帯バージョンのタイトルの色（！）」ともリンクしている。明るすぎるとおかしい。
✅ 下線は入れない。携帯バージョンの「ブログタイトル」にアンダーラインが入ってしまう！！

⑤ Font Awesome を採用

リンク付きのテキストに明るい色をつけると他に影響が出てしまうので、『Font Awesome 』も採用し、読んでいる人にリンクの存在を伝えようと思います。

Font Awesome はこんな感じの文字です → 。
使い方は『affilabo.com 』さん（すごく読みやすい記事です）に詳しく書かれていました。

今後は、この『（ネットに接続します）』を使おうと思います。

<i class="fa fa-external-link" aria-hidden="true"></i>

 

PAGE TOP