リンク先を分かりやすくするブログカード

ワードプレスのコクーン（Cocoon）テーマにも標準装備されている指定したページへジャンプする「」リンクマーク。

別のページに移動させるために使いますよね。

全く無知のって基本に忠実なので、本屋で買ったワードプレスの本を参考にリンク先を設定していました。

1. ワードプレスの「」リンクマークをクリック
2. 表示されたリンクの設定をクリック
3. URLを入力
4. 文字列を入力
5. リンクを新しいタブで開くを選択（しない時もある）

こんな感じでリンク先を指定していました。

ブログを始めてネタ切れというか行き詰った頃に、解決法を求めて様々なページを見ていたら、リンク先が自分のブログと比べて明らかに分かりやすく作られているページをよく見かけました。

文字だけじゃなく、画像入りでタイトルと内容まで入っているじゃないですか。

分かってはいることなのですが私にはCSSやHTMLという知識ゼロ！

ワードプレスのプラグインに頼るしかないと考えていました。

「リンク先」「画像」「タイトル付き」とか何となくそれらしいい言葉を並べてみましたがなかなかヒットしませんでした。

見つけてもCSSを使ってカスタマイズってあったり私には無理。

何度も探しているとブログカードという名前がやっと知ることができました。

そうなんです、私が使っているワードプレスのテーマ【コクーン（Cocoon）】には、このブログカードが標準装備されていたのでプラグインの必要なし。

コクーンテーマ使っていて2か月も知らなかったことがはずしかしい。

コクーンのブログカード機能

使い方が分からず色々試してみて、ものすごくリンク先をつけるのが簡単なのに便利にできていることに今さらながら感激しました。

それではコクーンの標準機能「ブログカード」をこんな感じで設定しました。

Cocoon設定にマウスを合わせるとメニューが表示され「Cocoon設定」をクリックすると各種設定項目が表示されます。

確かにこのページは見た事がある！

コクーンテーマをインストールした時に画像の設定など分かる所は触っていましたが、ほとんどの項目の意味が分からなかったので、分からない所は放置していました。

そうするとあるじゃないですか、「ブログカード」

設定は2つ。

【内部ブログカード】（自分のブログ内にあるページ）とそれ以外の【外部ブログカード】の設定が両方にあります。

1. ブログカード表示にチェックを入れて有効
2. サムネイルスタイル（画像の位置）を左側選択
3. 日付表示を「なし」「投稿日」「更新日」の中から好みで選ぶ
4. リンクの開き方を今見ているページから切り替わる方法ならばチェック無し、新しいページを追加して開くにはチェックを入れる

外部ブログカードも一緒です。

その他にキャッシュが2項目ありますが、私には意味が分からないので触っていません。

最後に更新をまとめて保存ボタンを押せば設定完了。

あとはブログ書いている時にリンク先のアドレスを書くだけでこのようになりました。

https://tripbowl.net/blog-pv/

このままでも満足しているのに、コクーンテーマにはもうひと工夫できる機能があります。

【スタイル】の中にブログカードの装飾ができます。

• 【関連記事】
• 【参照記事】
• 【人気記事】
• 【あわせて読みたい】
• 【詳細はこちら】
• 【チェック】
• 【ピックアップ】
• 【公式サイト】

付け加え方は、最初にリンク先アドレスを書いて、そのリンク先を選択した状態で、ブログカードをを選べば、完成します。

初心者に優しいコクーンテーマだから私にもできるんですね。

それなのに無料で使えるのだから、お世話になります。

最初はこんなトラブルにも見舞われましたけどね。

標準機能なのにリストがバラバラになるボックス

私もそうですがこのようにブログを日々コツコツと書いていると、少しでも見栄え良く書きたいものですよね。

箇条書きなどを書く時によく使うのが、ワードプレスの標準機能のリストで、「番号なし」と「番号付き」の2種類あります。

• 灰色
• 黄色
• 赤色
• 青色
• 緑色

そしてこのリストをもっと見栄え良く目立たたせるために、コクーン（Cocoon）の機能で【スタイル】の中から、ボックス（白抜き）を選び、好みの色を（ここでは黄色）選ぶとこのように目立つようになります。

その前にコクーンの【スタイル】が画面から消えてしまった事ありませんか？

https://tripbowl.net/cocoon-tabbox/

私がリストをボックスで囲った方法はこんな感じですが、なにが間違ったのか分かりませんでした。

次に、コクーンの機能を使います。

こんな風になりませんか？

• 灰色
• 黄色
• 赤色
• 青色
• 緑色

各リストが分かれてしまい、さらにそれぞれのリストが囲まれてしまいました。

では、最初の方で綺麗にリストが囲まれるようにするには、どんな方法で解決したかというと・・・

リストの前と後に「あ」と、無意味な文字を入れています。

こんな感じです。

そして、この無意味な「あ」を含めて囲みたい部分を選択して、ボックスから色を選ぶと・・・

こんな感じになります。

リストの前後の無意味な「あ」と本来必要なリストがそれぞれ囲まれましたね。

ここで無意味な「あ」を消せば、完成です。

消す方法は、無意味な「あ」をキーボードの【back space】です。

すると完成しますよね。

なぜこんな方法じゃないとリストをボックスで囲めないかは分かりませんが、この方法でできたので良しとしましょう。

2カラム・3カラムに背景色をつける方法

先ほども書いた通り、CSSやHTMLが全く分からないので、コクーン(Cocoon)の様々な装飾機能（タブボックスやスタイル）にはとても助けられています。

前回は、2カラム・3カラムにフレーム枠をつける方法を書きましたが、今回は背景色です。

参考

https://tripbowl.net/cocoon-2karamu-frame/

コクーンテーマには左側に画像、右側に本文みたいなレイアウトができるカラムという機能が、本来はCSSやHTMLなどの知識が無いと、できないレイアウトの技なのですが標準装備されています。

使い方は、【タグ】を選ぶと2列になる2カラムと3列の3カラムがあります。

初心者には非常に分かりやすく書けるように色と文字で表示されていますが、実際にプレビューをすると味気ないですよね。

なんだか寂しいと感じませんか？

そこで、スタイル機能をいろいろ試してみる事を繰り返していたら、背景色をつけられるようになった。

背景色なしの標準機能

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも？

背景色付きの標準機能組み合わせ技

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも？

当然コクーンテーマの標準機能なのでスマホでは画像（左カラム）が上、文字（右カラム）が下になり、背景色も縦長になって表示されます。

2カラム・3カラムに背景色をつける手順

とても簡単にできる手順をご紹介しますのでぜひ活用してくださいね。

１、【スタイル】から【ボックス（案内）】を選びます。

２、背景色は5色からお好みを選びます。

• プライマリー（濃い水色）
• サクセス（薄い緑）
• インフォ（薄い青）
• ワーニング（薄い黄色）
• デンジャー（薄い赤色）

薄い緑を選ぶとこんな感じになりますよね。

３、表示された薄い緑ボックスにマウスを移動してクリックするとカーソルが点滅します。

４、その状態で【タグ】から2カラムを選択すると、枠の中にカラム表示されます。

あとはいつも通り、左側と右側のそれぞれ内容を書けば背景色付きの2カラム・3カラム表示が完成しますよ！

5色あるからバリエーション変えることもできますね。

[temp id=3]

2カラム・3カラムをフレーム枠で囲う方法

先ほども書いた通り、CSSやHTMLが全く分からないので、コクーン(Cocoon)の様々な装飾機能（タブボックスやスタイル）にはとても助けられています。

以前このスタイルが突然消えてしまい、非常に混乱しましたが無事復活してブログを書いています。

参考

https://tripbowl.net/cocoon-tabbox/

コクーンテーマには左側に画像、右側に本文みたいなレイアウトができるカラムという機能が、本来はCSSやHTMLなどの知識が無いと、できないレイアウトの技なのですが標準装備されています。

使い方は、【タグ】を選ぶと2列になる2カラムと3列の3カラムがあります。

初心者には非常に分かりやすく書けるように色と文字で表示されていますが、実際にプレビューをすると味気ないですよね。

なんだか寂しいと感じませんか？

そこで、スタイル機能をいろいろ試してみる事を繰り返していたら、フレーム枠をつけられるようになった。

フレームなしの標準機能

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも？

フレーム付きの標準機能組み合わせ技

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも？

当然コクーンテーマの標準機能なのでスマホでは画像（左カラム）が上、文字（右カラム）が下になり、フレーム枠も縦長になって表示されます。

2カラム・3カラムをフレーム枠で囲う手順

とても簡単にできる手順をご紹介しますのでぜひ活用してくださいね。

１、【スタイル】から【ボックス（白抜き）】を選びます。

２、灰色・黄色・赤色・青色の4色からお好みを選びます。

赤色を選ぶとこんな感じになりますよね。

３、表示された赤色ボックスにマウスを移動してクリックするとカーソルが点滅します。

４、その状態で【タグ】から2カラムを選択すると、枠の中にカラム表示されます。

あとはいつも通り、左側と右側のそれぞれ内容を書けばフレーム枠付きの2カラム・3カラム表示が完成しますよ！

4色あるからバリエーション変えることもできますね。

[temp id=3]

[temp id=1]

ボックスカラーバリエーションを6倍に

コクーン（Cocoon）テーマにある【スタイル】内のボックス。

無料テーマなのに、ここまで使えるなんて本当にありがたく使用させていただいています。

特にCSSとか全く分からないので、「コクーンカスタマイズ」で調べると、知識豊富な方がたくさんCSSでオリジナルのデザインで工夫されていることに、とても感心して、うらやましく思っています。

もしCSSが全く分からない、同じような境遇の方がいらっしゃったら、こんな方法でもボックスの背景色を増やすことができますよ。

https://tripbowl.net/cocoon-tabbox/

スタイル内のボックス（白抜き）

【スタイル】からボックス（白抜き）を選ぶと、文字を囲ってくれるフレームみたいなもので装飾してくれます。

標準で4色ありますね。

背景色は白で、標準のままですが背景色を変えられれば、見た目がまた違いますよね。

例えばこんな感じです。

どうでしょう？見た目変わりますよね。

新たに5色増えました。

ボックスの背景色が白色を加え6色ということで、ボックスのカラーバリエーションが6倍になりました。

当然ながら先ほども書きましたが、CSSは全く分からないので使いたくても使えません。

たったこれだけです。

簡単に言うと同じ文字にボックス（白抜き）とボックス（案内）を２度書きしただけなんです。

同じ要領で２度書きを他の色でやってみると、先ほどのように背景色を変えることができます。

スタイル内ボックス（タブ）

こちらも同じようにすると、タブの背景色が同じく全６色になります。

全く同じ要領で完成です。

ボックスのタブも白抜きも４色が標準なので、４色×６色＝24種類もバリエーションがある事になりますよね。

[temp id=3]

[temp id=1]

別のページのH2見出しへリンクする

今回疑問に思ったのが、ワードプレスのコクーンテーマ（Cocoon）にも標準装備されている、指定したページへジャンプする「」リンクマーク。

「リンクの挿入と編集」があるので、簡単に他のページへリンクを付けることができます。

さらにコクーンテーマでは目次機能が標準装備されていて、自動的に目次に表示されたH2見出しや、H3見出しにリンクされます。

このおかげで、目次の作り方がわからない初心者でもページ内のタイトルへリンクさせることができています。

ところが、ほかのページから同じように別のページのH2見出しへリンクさせることは標準機能としてはありません。

サンプルとして、このブログで実際に使っている「ボウリング成績表選手登録方法～LTB個人リーグ編」での使用例に沿って書いていきます。

「ボウリング成績表選手登録方法～LTB個人リーグ編」をクリックすると別ページでワードプレスのコクーン標準機能の別ページでリンク先が開きます。

同じく標準機能のもくじの一番下「エクセル数式（関数）」をクリックします。

「上限HDCPを設定する【MAX関数】」に別ページh3見出しへリンクが設定されています

まず最初に、リンク先（ここのh2見出しへ移動したい）に名前をつけておきます。

ワードプレスの「ビジュアルモード」では、h2見出しを使うと装飾された大きな文字で表示されていますが、「テキストモード」を見ると、このように書かれています。

この<h2>見出し</h2> 部分の先頭の<h2>に名前をつけます。

名前は覚えやすい名前をつけておけば良いと思います。

先ほどのサンプルの場合はMAX関数を使っているのでid=”max”ってつけました。

次にリンク元（リンクを張り付ける部分）にリンクアドレス＋名前を付け加えます。

先ほどと同じくリンクを挿入した部分をテキストモードで見ると、

<a href=”リンク先アドレス”/>リンク文字列</a>となっています。

このリンク先アドレスに、先ほどの名前をつけ加えると、

このようになっています。

サンプルでは名前の部分が#maxとなっています。

[temp id=3]

メニューバーにアイコンをつけてみた

初めてWordPressでブログを始めた時に、練習という事で、無料のテーマ「Lithing」を使ってみました。

選んだ理由は、最初からデザインが出来上がっていたことと、関連のプラグイン「ExUnit」をインストールすると、ど素人にも簡単にブログデザインができてしまったからです。

アメブロからの初めての事だったので驚きました。

そこにメニューバーのアイコンを付け加える方法も紹介されていたので、これも簡単にできました。

その時のことを思い出して、このコクーン（Cocoon）テーマでも利用できないか試してみることにしました。

メニューバーにアイコンが付いたからどうだって事もないのですが、なんとなく無いよりは、あった方が見た目がいいような感じがしませんか？

まず最初に、【外観】【メニュー】と進み、アイコンを付け加えたい項目をクリックします。

このブログの場合は、【HOME】の文字の左に家のマーク「」を付け加えてみました。

アイコンは無料のテーマ「Lithing」でもお世話になった、「Font Awesome」サイトのアイコンを使用しています。

https://fontawesome.com/v4.7.0/icons/

[<i class=”fa fa-home fa-fw”></i>]、[]内が家のマークのテキストコードです。

話を戻して、メニューバーの【HOME】に付け加える時は、ナビゲーションラベルの部分が【HOME】になっているので図のように文字の左側に張り付けるだけです。

こうすると、このようにアイコンがメニューバーに付け加えられました。

あと残りの項目も同じように、「Font Awesome」サイトから好みのアイコンを探してテキストコードを張り付ければ完成です。

パソコンでもスマホでも画面上にあるメニューバーも一番下にあるメニューバーにも同じようにアイコン付きでメニューバーが出来上がりました。

[temp id=3]

パンくずリストが表示されない

いつものように、コクーン（Cocoon)テーマでいろいろな設定をしながらブログに取り組んでいたら、ほかの皆さんのブログにはカテゴリー表示場所を示すリストが表示されているのに、自分のブログには何も表示がされていない。

この違いは何だろう？

自分のブログにも表示させたいと思い、検索してみようとしたら！

名前が分からない！

検索すらできなくてかなり困りました。

「メニューとタイトルの間の表示」やら、「リスト」やら、思いつく文字で何度も検索してみましたが、なかなかヒットせずあきらめたぐらいです。

ほかの方々のブログにはほとんどのページでやっぱり表示されている。

やっと、「パンくずリスト」っていう名前が分かったので、「パンくずリスト」で検索したらいっぱい検索結果が出るじゃないですか。

「パンくずリスト」という名前が分かれば、次はコクーンの設定を探しました。

見つけるのに時間が掛かりましたが、設定変更で簡単に表示させることができました。

こういう事まで用意されているのでコクーン（Cocoon)テーマはありがたいですね。

「パンくずリスト」の設定方法

【Cocoon設定】【Cocoon設定】へと進みます。

【投稿】を選び、一番下までスクロールすると【パンくずリストの設定】があります。

この画面を見て初めて知りましたが、画面の下の方に表示あったのですね。初期設定ではメインカラムボトムとなってますもんね。

【パンくずリストの配置】をメインカラムトップに変更すると、みなさんのブログのように、タイトルの上にパンくずリストが表示されました。

【記事タイトル】にチェックが入っていない初期設定では、パンくずリストでは、

チェックを入れると、

となりました。お好みで簡単に設定できるようになっているのですねCocoonは。

[temp id=3]

そんな時にふと気づいたのが、Cocoon公式サイトでのサイドバーの最近の投稿には、画像付きで記事タイトルが表示されているのに対して、私のサイトには記事タイトルだけで画像が無い！

アイキャッチ画像は設定しているはずなのになぜ？

この違いは何だろう？

最初は一生懸命にCocoon設定の中を探しましたが、やっぱり見つかりませんでした。

それもそのはず、以前、カテゴリーの表示がCocoonサイトと違い、表示方法を調べた時にも同じような事があったので、もしかして今回もって思いました。

そうです、外観のウィジェットだったからです。

サイドバーにある最近の投稿を画像付きに変更する

画像付き最近の投稿に変更するには、WordPressの【外観】【ウィジェット】へと進みます。

そうすると、ウィジェットの画面が表示されます。

画像左下にある「[C]新着記事」を左クリックしながらサイドバーの欄へドラッグすると、「[C]新着記事」の設定が表示されます。

新着記事のタイトルを「新着記事」と書いたら保存して「完了」を押せば、画像付き最近の投稿（新着記事）に変更することができました。

[temp id=1]

今まで使えていたコクーン(Cocoon)のタブボックスが突然消えた

先ほども書いた通りCSSやらHTMLが全く分からないので、コクーン(Cocoon)の様々な装飾機能（タブボックス）にはとても助けられています。

それがある日突然消えてなくなってしまいました。といっても、全部ではなく一部。

タブボックスから消えてしまったのは、スタイル！

文字を枠で囲むボックスの背景色を変えて6倍にバリエーションが増やせたのに！

参考

https://tripbowl.net/cocoon-box-color/

一番多く使っている項目が無くなってしまって右往左往。

これでは、味気ない文字だらけになってしまう。

いつものようにネットで同じような境遇の人を探していたら、やっぱりいますね。

プラグインTinyMCE Advanced

ブログの中に表を作成するのにHTMLが分からないので表のタグと言われても意味不明。

そこで表を作成できるWordPressのプラグインを探していたら、簡単に作れるし、後から行・列の追加削除も可能で、結合・解除も見た目のままで操作可能なTinyMCE Advancedをインストールしました。

直感的に操作できるので初心者の私にはうれしい限りで、もちろんCSSとか知らなくても大丈夫なのでね。

TinyMCE Advancedをインストールして有効化し、いざ書こうと思ったらタブボックスが消えていたって！同じだ！

このプラグインTinyMCE Advancedが原因だったんですね。

一旦TinyMCE Advancedを無効化してみると、「スタイル」が復活しました。

TinyMCE Advancedの設定に関してはバズ部さんのサイトを参考にさせていただきました。

https://bazubu.com/tinymce-advanced-23845.html

そこで、再度TinyMCE Advancedを有効化して設定を見ると、使用しないボタンの中にCocoonテーマのタブボックスの消えた一部「スタイル」があるじゃないですか！

そこで、使用しないボタンの中にある「スタイル」をこの画面に書いてある通りに、空きスペースにドラッグしてみたら「スタイル」ボタンが復活して使用可能になりました。

スタイル復活！ひと安心！

[temp id=3]