WordPress.com の記事編集機能で見出しや箇条書き、引用等を入力しやすくなっていることに気づいたので、その覚え書きです。
カテゴリー別アーカイブ: 貼付け方：箇条書き／リスト
[WordPress.com] ショートコード「display-posts」を使って記事中にリンクのリストを表示する方法
最終更新日：2015-12-27
WordPress.com の記事中にリンクのリストを表示する方法についての覚え書きです。単純にリンクを貼付ける方法もありますが、WordPress.com の投稿記事を使ってリンクデータを管理する方法も考えられます。その場合のリンクのリストの表示方法についての提案です。
CSS スタイルシートエディターに以下の CSS を追加し、
/* ショートコード「display-posts」でのリンクリストの表示 ver.0.1 by comemo */
.simplelist ul li {
color: #777777;
}
.simplelist .title,
.simplelist .excerpt-dash {
display: none;
}
記事に以下の記述を追加すると（「リンク集１」の部分は任意のタグ名。）、
<div class="simplelist">[display-posts tag="リンク集１" posts_per_page="-1" include_excerpt=true]</div>
以下のようなリンクのリストを表示することができます。
リストの左側に画像や文字を貼る方法 -「border」と「before」を使う方法-
記事「リストの左側に画像や文字を貼る方法」において、リストをカスタマイズする方法についてまとめ記事を書いておりますが、ここでは、「border」と「before」を使う方法について覚え書きをしたいと思います。
/* リストのマークを差し替える -テーマ「Twenty Twelve」、左ボーダー＋▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:33px;
}
.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 7px;
color: #42beee;
border-left: 3px solid #42beee;
line-height: 8px;
font-size: 9px;
padding-left: 1px;
}
/* リストのマークを差し替える -テーマ「Twenty Twelve」、ボーダー囲み＋▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:40px;
}
.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 3px;
color: #42beee;
border: 1px solid #cccccc;
border-radius: 3px;
line-height: 8px;
font-size: 9px;
padding: 4px;
}
リストの左側に画像や文字を貼る方法 -「list-style-type」と「before」を使う方法-
記事「リストの左側に画像や文字を貼る方法」において、リストをカスタマイズする方法についてまとめ記事を書いておりますが、ここでは、「list-style-type」と「before」を使う方法について覚え書きをしたいと思います。
/* リストのマークを差し替える -テーマ「Twenty Twelve」、■、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
}
.entry-content ul li:before {
content: "";
position: absolute;
list-style-type: square;
display: list-item;
font-size: 37px;
left: 15px;
top: -21px;
color: #42beee;
}
/* リストのマークを差し替える -テーマ「Twenty Twelve」、○、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
}
.entry-content ul li:before {
content: "";
position: absolute;
list-style-type: circle;
display: list-item;
font-size: 37px;
left: 15px;
top: -21px;
color: #42beee;
}
参考
ブログの全記事リストを作成しました
このブログの全記事リストのページを作成しました。
WordPress.com の仕様が変更されたため、ブログの全記事リストの出力をショートコード「display-posts」からショートコード「archives」へ変更しました。
データの出力の方は、ショートコード「display-posts」の方で行なっており、記述の方は以下のとおりです。
[display-posts posts_per_page="-1" include_date="true" date_format=Y/m/d]
リンクは3ヶ所につけました。
トップページ
月別等でのアーカイブ表示のページ
カテゴリーや検索結果でのアーカイブ表示のページ
余談ですが、WordPress.com のテーマ一覧の方も全テーマリストなるものを作ろうと思ったのですが、記事の方を固定ページと投稿記事の両方で作ってしまっていたので、まずは、どちらか、たぶん、投稿記事で統一する必要があります。後々のことを考えると、どちらかに統一しておくべきでした。反省です。
