このブログは、WordPressというCMS(Content Management System)を使用し、Cocoonというテーマを使用して書いています。
自分でブログを書く際によく使用するコードを、こちらのページにまとめました。
便利なコード集
文章と文章の間にスペースをあける
「カスタムHTML」を開き以下のコードを書くことで、文章の間にスペースをあけています。
<p> </p>
「スペーサー」というブロックがWordPressに存在するのですが、
- 高さをpxで指定する必要があり、px数を覚えておかなければならない
- htmlで見た時に、class=”wp-block-spacer”がつくので、きれいなコードではない
ので、カスタムhtmlで空白をつくっています。
レスポンシブデザインの表を作成する。
WordPressのレスポンシブ対応の仕様では、列数の多いテーブルをスマートフォンでは表示すると、見づらくなってしまいます。
そこで、スマートフォンでも見やすいよう、表を1列に変更するようなcssのコードを追加します。
最終的に作成する表は、次の通りです。
(Cocoonのskin設定に応じて、表の色が変更されると思います。)
作成方法としては、まず、記事のテーブルの追加cssに”row_table”を追加します。
テーブルにヘッダーセクションを追加したほうが、仕上がりがきれいです。
次に、こちらのコードを記事のカスタムcssに追加します。
.row_table th {
text-align: center;
font-weight:bold;
display: inline-block;
width: 100%
}
.row_table td {
display: inline-block;
width: 100%;
text-align: center;
font-weight:normal;
}
なお、こちらのブログを参考に、Cocoonのスキン設定が反映されるようコードを変更しました。
記事にアイキャッチ画像を表示しない
アイキャッチ画像が必要のない記事もあります。
その場合、こちらのコードをカスタムcssに追加します。
.eye-catch { display: none; }
画像に外枠を追加する
追加cssクラスとカスタムcssを用いて、画像に外枠を追加します。
【追加前】
【追加後】
枠線をもう少しうまくつけれるよう、調査中です。。。
作成方法としては、まずテーブルの追加cssに”border”を追加します。
次に、カスタムcssにこちらのコードを追加します。
.border {
border: 1px solid #ccc !important;
}
枠線に関しては、こちらのサイトを参考にさせていただきました。
画像にモザイクを入れる
いろいろな方法があると思いますが、私はWindowsユーザーかつoffice365を入れていないので、ペイントを使ってます。
こちらのリンクにしたがい、行ってます。
こちらに関しても、まだ調査中のところが多いぞ。
ページごとに目次を閉じる
私の使用しているデザインでは、h6タグまでの内容を目次に表示する仕様になっています。
目次の項目が多いと、目次をスクロールするだけで一苦労です。
ですので、子テーマのfunctions.phpにこちらのコードを貼りつけ、目次を閉じます。
//閉じるページを指定したい場合
function is_toc_content_visible(){
//閉じるページの投稿IDをカンマ区切りで指定する
return !is_single(array(1128, 15592));
}
なお、こちらの記事に記載してあるコードを引用しております。
Tweetを複数埋め込む際に、読み込みを軽くする
async属性を削除することで、読み込みを軽くすることができます。
参考リンク:Twitter埋め込みでサイトが重いと感じたらasyncに注意
アコーディオンボタンの作成
追加cssとHTMLのidを追加することで、アコーディオンボタンを作成できます。
参考リンク:【コピペだけ!】アコーディオンボタンをCSSとHTMLだけで実装する方法!│旅するように人生を生きよう!
アコーディオンボタンとは、以下のようなボタンです。
ここにテキストが表示されます。
コメント