【個人メモ】記事を書く際に便利なコード|Cocoon

このブログは、WordPressというCMS(Content Management System)を使用し、Cocoonというテーマを使用して書いています。

自分でブログを書く際によく使用するコードを、こちらのページにまとめました。

便利なコード集

文章と文章の間にスペースをあける

「カスタムHTML」を開き以下のコードを書くことで、文章の間にスペースをあけています。

<p>&nbsp;</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だけで実装する方法！│旅するように人生を生きよう！

 

アコーディオンボタンとは、以下のようなボタンです。