【WordPress】リンクが編集しやすくなったり、見出しや引用、箇条書きを入力しやすくなっていることに気づいた

WordPress.com の記事編集機能で見出しや箇条書き、引用等を入力しやすくなっていることに気づいたので、その覚え書きです。

2015-08-24 at 10.24

comemoarrow

2015-08-24 at 10.24

続きを読む

[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;
}

記事に以下の記述を追加すると(「リンク集1」の部分は任意のタグ名。)、

<div class="simplelist">[display-posts tag="リンク集1" posts_per_page="-1" include_excerpt=true]</div>

以下のようなリンクのリストを表示することができます。

adfasdf

続きを読む

#2013

リストの左側に画像や文字を貼る方法 -「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;
}

comemo forum | WordPress.com のデモ用です。-1

/* リストのマークを差し替える -テーマ「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;
}

comemo forum | WordPress.com のデモ用です。-2

#2013

リストの左側に画像や文字を貼る方法 -「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;
}

gfsgsdfgsfd-1

/* リストのマークを差し替える -テーマ「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;
}

comemo forum | WordPress.com のデモ用です。

参考

#2013

ブログの全記事リストを作成しました

このブログの全記事リストのページを作成しました。

WordPress.com の仕様が変更されたため、ブログの全記事リストの出力をショートコード「display-posts」からショートコード「archives」へ変更しました。

sgsdfsdfa
ブログ「comemo」の投稿記事全リスト

データの出力の方は、ショートコード「display-posts」の方で行なっており、記述の方は以下のとおりです。

[display-posts posts_per_page="-1" include_date="true" date_format=Y/m/d]

リンクは3ヶ所につけました。

トップページ

agfasdfads

月別等でのアーカイブ表示のページ

agadfasdf
3月 | 2013

カテゴリーや検索結果でのアーカイブ表示のページ

adafsfads
貼付け方:表(テーブル)

余談ですが、WordPress.com のテーマ一覧の方も全テーマリストなるものを作ろうと思ったのですが、記事の方を固定ページと投稿記事の両方で作ってしまっていたので、まずは、どちらか、たぶん、投稿記事で統一する必要があります。後々のことを考えると、どちらかに統一しておくべきでした。反省です。

#2013, #nodisplay

箇条書きの記号をスライドさせるためのCSS

itemization03

続きを読む

#2011

リストの左側に画像や文字を貼る方法

listimage01
続きを読む

#2011