CSS3で画像にドロップシャドウをつける、画像を丸くする
ブログで使用しているスタイルシートを少し修正。 最近iPhone系の画像がフラットデザインになったこともあり結構シンプルになってしまってスクリーンショットのメリハリが付かない感があったので枠を入れることにしました。 #content img { border: 1px solid #000000; box-shadow: #000000 0 0 10px -2px; height: auto; margin-bottom: 12px; max-width: 100%; } box-shadowに該当します。これだけでも結構見栄えが良くなりますがキャプチャ系のソフトで影がつくものがあるのでその辺りは随時調整を、、 こんな感じになります。boderタグで枠線もつけているので強調された形になりますね、。 今風な丸い感じのアイコン 元々は、下のような感じでリンクを右側に出していまいた。 .wp-p
Webフォントを使用する
Webフォントを使いたかったのでWOFF形式に変換をしてみました。 こちらの、「WOFFコンバータ」を利用して変換します。実行後には、EOT形式とWOFF形式が出力されます。 最近AWSづいているので静的コンテンツは今後AWSに移行しようと思いつつできてなかったのでフォント位はおいてどんなもんか見てみたいと思います。 適当なバケット内に先ほど作成したフォントをおいてパーミッションをmake publicしておきます。これで外部から参照ができるようになるのでWebフォントとして利用ができます。 WordPressの場合には、直接ファイルを編集がブラウザ経由でできるのでそちらを利用して更新をしてみます。「外観」→「CSSスタイルエディタ」で下の画面になるのでそちらに適当な文言を入れるようにします。 以下のように設定をしてみました。 @font-face { font-family: "azuk
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
