ブログテクニック２：見やすくなるような引用符カスタマイズ

ちょっとブログを更新することが楽しみになってきた@akrwnetです（＾ｖ＾）

前回の記事
冒頭で自己紹介をするブログテクニック
ここで引用符を使ってみたのですが、現在使っているテンプレートiTheme2ではあまり良い感じに表現されません。

そこでカスタマイズ方法を調べてみたところ、良い記事を見つけました。

ここではかなり詳しいカスタマイズ方法を記載してくれています。

その中でも一番よさそうに思ったのが、こちら

５）左上に「“」、右下に「”」を表示させる（citeタグも絡めたHTML）
via: creazy photograph

上記のように引用元のリンク付きで表示することができます。

早速この方法を実践してみようと、CSSのタグをコピペさせていただきました。

しかし、このままコピペしてしまうと画像が直リンクになってしまうので、どこかに画像がないか検索

ここで画像を画像を保存して、お使いくださいとあったので利用させていただきました。同じ画像のような気もしますが・・・

自分のブログに画像を取り込む

wordpressのメディアからダウンロードしたファイルをアップロードします。

アップロードすると画像ファイルの保存場所が、ファイルURLのところに表示されます。

このURLを先ほどコピペさせていただいたCSSタグに入れ替えます。

※end画像も同様の方法でURLを取得しておく

iTheme2のテンプレートでは、Custom CSSが利用できるので、ここに挿入したタグが優先されるようになるため、わざわざ、テーマ編集より編集する必要ななかったです。

※通常では、テーマ編集より該当するCSSファイルより編集をします。

編集が完了してブログを読み込み直してみると

こんな感じに表示されていました。バックグラウンドと同色であるとまだ見ずらい感じがしますね。

なんので、引用部分のバックグラウンドを白にしてみることにします。

background: #ffffff;

白にするために、このタグを追加

結果このように、引用しているところの中が白く表示され見やすくすることができました。

このブログでは、iTheme2のGrayスキンを使用しているので、バックグラウンドがグレーなため白にしましたが、逆に白ベースのテンプレートを使用している場合には、silverあたりの色で#c0c0c0にしてみると良いかもしれませんね。

余談ですが、このiTheme2のGrayスキンだと、ハイパーリンクが黒で表示され、調子悪いなと思っていたのですがCSSを覗いてみてもどこかわからず、しばらく放置していたところがありました。

style.cssのファイルでは、色は黒じゃないんです。

a {
text-decoration: none;
outline: none;
color: #026acb;
}

となっているので、青っぽくなるはずなんですけどね。

そこで、Custom CSSに追加してこの記述を追加してみました。

すると、やはり優先されるようでしっかり反映されます。

何かどこかで、styleが干渉しているのですかね？？

それを見つけるよりも、Custom CSSに入れてしまえば反映されるので、今後も再編集は楽にできそうです。

追記

iTheme2は、レスポンシブデザインのため表示する端末に合わせて最適化してくれるテンプレートになります。

ですが、引用符の幅である width: 400px; とそのままにしてしまうとiPhoneで表示したときにはみ出してしまうんです。コレではレスポンシブルデザインしにているのにもったいないです。

なのでこの部分を width: 90%; として、はみ出さないように修正しました。

100%でも良いのですが90%の方が見栄えが良いのでそうした次第です。

この辺はお好みで編集してみるとよいかもしれませんね。