BLOG

ブログ

2019.05.4.

<li></li>を縦並びのまま中央寄せにする方法

<li>を横並びにして中央寄せにする方法は良く紹介されていますが、縦並びのまま中央寄せにする方法となるとどうでしょう。 使う場面は中々少ないかも知れませんが、覚えておいて損は無い方法かと思います。普段メモ代わりにしているドキュメントに残っていたのですが、僕自身どんな場面で調べたのか全く覚えていません。ただ久しぶりに見返してみると意外と「なるほど」 …

2019.05.3.

hoverしたときのSVGの色をCSSだけで変える方法

ちょっとしたアイコンなんかであれば画像よりも使い勝手の良いSVG。フリーでつかえるファイルも今や色々公開されていて、僕もサイト制作時にはよく使います。 一点だけ難点があるとすれば、hover時の色の変更でしょうか。javascriptをつかった方法や、HTMLに直接SVGコードを記述する方法等、色々な方法がありますがどれも一筋縄ではいかない感じです。 そんな …

2019.05.2.

Twitterからのリンクを考慮した結果、WordPressのAMP化を止めてみた

このブログを立ち上げたときから、WordPressのAMPというプラグインを入れて個別記事をAMP化していました。で、先日。Twitterアカウントを開設してそちらからも流入を増やしていこうと思って、早速公開した記事をTwitterに投稿してみたのですが、Twitterからのリンクで表示されるページが有無を言わさずAMP化されていました。 僕としては、Goo …

2019.05.1.

どのくらいページを読み進んだかがわかるトップへ戻るボタン

CODEPENを漁っていたら面白いものを見つけました。動作的にはページのトップへスクロールしながら戻るボタンなのですが、そのページをどのくらい読み進めたかがわかるようになっています。サイトやページにちょっとしたアクセントを付けたいときに良いのではないでしょうか。あくまでトップへ戻るボタンなので、デザインの邪魔にもなりにくいと思います。 サンプル 上の説明を読 …

2019.04.30.

WordPressでプラグインをつかわずにSNSボタンを設置する方法

今回はWordPressにSNSのシェアボタンを設置する方法を紹介します。プラグインは使いません。 プラグインを使えば様々なSNSに対応することも簡単に出来ますが、現実的にはtwitter、facebook、はてブ、pocketくらいで充分かと思います。海外向けに記事を書いている場合は他のSNSを設置する必要があるのかも知れませんが。僕みたいに日本の方に読ん …

2019.04.29.

bootstrap4のチートシートを使って簡単にサイト制作

サイト制作において恐らく一番有名なフレームワークであろうbootstrap。これを使うことで、サイト制作にかかる時間を大幅に短縮できますし、デザイナーではなくても、ある程度のHTML、CSSの知識があれば誰でも簡単にサイトを作ることができます。 さらに、このbootstrapにはチートシートというものがあります。チートシートとはプログラマのカンニングペーパー …

2019.04.28.

javascriptで作られたユニークなイメージギャラリー

javascriptで作られたユニークな動きをするイメージギャラリーを見つけたので備忘録代わりに。 クリック時の動きも非常に凝っていますが、それでいてクセも無いので、どのようなデザインにも合わせやすいのではないでしょうか。例えば、写真や印刷物のポートフォリオサイトと相性が良さそうです。いずれどこかで使ってみたいjavascriptです。 実装方法 html …

2019.04.27.

プラグインを使わずにWordPressの記事ページに目次を設置する方法

WordPressで記事を書いていて、ページが長くなってしまったとき。そのページの目次があると便利です。目的の内容も探しやすいですし、そのページにどんなことが書いてあるのかも一目でわかるので、ユーザビリティも高いといえるでしょう。また、見出しと文章がきちんと組み立てられているのであれば、内部リンクにもなるのでSEO効果も期待できるという考え方もあります。 今 …


Warning: Undefined variable $additional_loop in /home/mdesigny/mdesign-y.com/public_html/wp-content/themes/mdesign/index.php on line 54

Warning: Attempt to read property "max_num_pages" on null in /home/mdesigny/mdesign-y.com/public_html/wp-content/themes/mdesign/index.php on line 54