2017.12.28アイキャッチ画像を背景に使ったシェアボタンボックスを作ってみました。こちらがイメージです。目次シェアボタンの作り方HTMLcssシェアボタンの作り方HTMLFontAwesomeを既に導入している方はそのままコピペでOKです。FontAwesomeの導入がまだの方は1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法に導入方法を書いてるので、参考にしてみてください。class="htbmark">B!</span>はてブ</a></div></div>現在のテーマのimagesフォルダにno-img.pngを準備するか、既に用意あるno-img用の画像のURLに書き換えて使ってください。wp_get_attachment_image_srcはアイキャッチ画像のURLやサイズなどを取得できる関数です。戻り値は配列になっており、次の値が返ってきます。false返ってきたURLをHTMLに書き出す場合はechoする必要があります。似たような関数にthe_post_thumbnailがありますが、こちらwidthやheightが指定されたimgタグが返ってきます。?>と書くだけでその場所にアイキャッチ画像が表示されます。0.29);}.futomoji{font-weight:bold;}レスポンシブに対応させてる場合はボタンの幅を80%くらいにして、タブレット以上は25%とかにしてみてください。コピーニケッチャニケッチャメモ関連記事ブログ運営おしゃれなサイトを作る!まずは3か所変えてみようサイトのデザインをおしゃれに変えたいなと思っている方に、まずはここを変えるだけでかなり雰囲気がかわりますよという提案です。カスタマイズを楽しみたい人はシンプルなS...ブログ運営cssのみで画像の縮小や切り抜きができるobject-fitプロパティobject-fitプロパティを使うと、cssのみで画像の縮小や切り抜きができるようになります。object-fitプロパティで指定できる値は5つあります。こちらの150×180の画像を200×100のス...ブログ運営ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。この%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。そんなときに使えるのがvwやvhという単位です。vw...ブログ運営サーティワンアイスクリームみたいな色見本カラフルポップなサーティワンのアイスクリーム。にぎやかな配色を探している方におすすめです。定番のフレーバーをイメージしてカラーコードを集めました。Explorerは表示を確認しながらスタイルの微調整ができる便利なツールです。border-radiusとかbox-shadowとか、どのくらいの値にしたらどのくらい変化するのかって最初の頃はイメージしづらいと思うんですが、このツ...ブログ運営ミルクペイントっぽい色見本ターナーのミルクペイントをご存知でしょうか。アンティークな風合いが手軽に出せる、DIY女子に大人気のペンキだそうです。くすんだ感じの風合いがとても素敵です。ゲーム、読書、食べることや自然と触れ合うことが好きです!楽しいことや美味しいものの情報を発信していきたいと思います。Twitterではブログ運営に役立ちそうな情報をツイートしてます。ニケッチャメモ.メニューゲーム読書ブログ運営プロフィールホーム検索トップタイトルとURLをコピーしました。