辞書

ワード辞書

日本語

*濁点文字などは、類似文字に含ませています。例:『ぷ』→『ふ』

ABCDEFG
HIJKLMN
OPQRSTU
VWXYZ
アルファベット

アプリ―チ

Google playやApp StoreのアプリをWP上に『スタイリッシュ』にレイアウトするためのWEBサイト
以下のように、アプリインストール画面への遷移を行うためのレイアウトが可能となります(追加CSSが必要)。

以下のCSSを『カスタマイズ>追加CSS』か『各投稿・固定ページ編集画面下部のカスタムCSS』に挿入してください。

/*アプリ―チ*/

.appreach{
  text-align: left;
  padding: 25px;
  margin:20px;
  border-radius:2px;
  overflow: hidden;
  box-shadow:0px 2px 5px 1px #e5e5e5;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach img,
.appreach p {
  margin: 0;
  padding:0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
p.appreach__name {
  font-size: 16px;
  color:#555;
  padding-bottom:10px;
  font-weight:bold;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
  color:#888;
}
.appreach__info a{
  color:#aaa;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 15px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
@media only screen and (max-width: 786px){
.appreach{
  margin:20px 0;}
.appreach__info {
  font-size: 11px !important;}
p.appreach__name {
  font-size: 15px;}
}
Copy

公式サイトはこちら

アンカーリンク

ボタン、リンクをクリックすると指定の位置まで移動することができます。ワードプレスの場合、ブロックエディターの『リンク』を利用することで簡単に使用することができます。

例えば、こちらをクリックすると、ページ内の指定した場所へ移動します。コードはこんな感じ

アンカー先で位置が下過ぎると感じたら、直前のブロックをアンカー先にするとちょうどよいです。

/*基本構造*/
/*同一ページ内*/
<a data-id="#ABC">ABCへ移動します</a>
<a id="ABC">

移動先です。戻る場合はこちら

ウィジェット

ウィジェットは、サイト全般を編集するためのショートカットです。サイドバーなどに目次や新着記事などのテンプレートを入れてビジュアル編集することも可能です。

か行

さ行

た行

テーマエディター

テーマエディターとは、設定しているテーマのプログラムを編集するためのソフトウェアで、簡易編集ソフトがWordpressにはデフォルトで設定されています。

cocoonの場合は、小テーマのcocoon childを編集するときにテーマエディターを利用します。(親テーマを編集しても更新のたびに上書きされて消えてしまいます)

な行

は行

パンくずリスト

パンくずリストは、今閲覧しているページがサイト全体で見たときの位置を可視化させるためのリストです。

例えば、プログラミング言語〉PHP〉PHP用語集といった感じでいま自分の閲覧しているサイトの大項目から小項目を可視化できます。

設定方法は、cocoonの場合、

WordPressを始めたばかりのとき、機能は知っていても正式名称がわからず、導入に苦労しましたので同じような悩みを抱えている方のお役に立てたら嬉しいです。

プラグイン

プラグインとは、『WordPressの機能を拡張するためのツール』です。もう少し簡単に言うと、プログラムコードのハッピーセットで一から自分でプログラムを作成する必要がなくなります。パソコンを使用する際も、EXEファイルなどをインストールして機能の拡張を行うと思いますが、WPでも同じようなことができます。

しかし、注意点があって、自身のサイトへの互換性がないことがあるので、プラグインを導入する際は自分のWordPressのテーマ(cocoonなど)が何かを把握したうえで導入したほうが良いです。また、プラグイン同士のプログラム干渉も起きたり、必要以上のプログラムコードの読み取りに時間がかかってしまったりすることもあるので、最低限必要なプラグインだけインストールすることをオススメします。

おすすめのプラグインは、以下となります。

Highlighting Code Block

プログラミング言語を投稿するのであれば、必須のプラグインです。様々な言語に対応しています。

.sidebar h3 {
	background:transparent; /* Cocoon親テーマCSSリセットのため */
	color: #C5E0B4;
}
<figure class="wp-block-table">
    <table class="has-fixed-layout">
    </table>
</figure>

ブロックエディター

ブロックエディター

ブロックエディターは、WPのGutenbergで編集するときに使うことができる便利な機能です。

ま行

や行

ら行

わ行

A~G

Gutenberg

H~N

O~U

V~Z

コメント

タイトルとURLをコピーしました